merge lqf

package.json

@@ -13,6 +13,7 @@
 		"cookie": "^0.4.0",
 		"copy-to-clipboard": "^3.2.0",
 		"core-js": "^2.6.5",
+		"crypto-js": "^3.1.9-1",
 		"element-ui": "^2.4.5",
 		"indexdbwrapper": "^1.0.4",
 		"jszip": "^3.2.2",

src/api/project.js

@@ -91,11 +91,14 @@ export async function importView(file) {
 	return response;
 }
 
-export async function uploadFile(file, compress = false) {
+export async function uploadFile(file, compress = false, uuid) {
 	let params = {file};
 	if (compress) {
 		params.compress = true;
 	}
+	if (uuid) {
+		params.uuid = uuid;
+	}
 	const response = await fetchApi('/api/uploadFile', {
 		params,
 		method: 'post',

src/components/PropsEditor.vue

+<template>
+	<el-form class="props-editor" v-if="data&&meta" v-model="data.props" size="mini" label-width="100px" label-position="left" @submit.native.prevent>
+		<component v-for="(property, key) in meta.props"
+		           :is="getInput(property)"
+		           :container="data.props"
+		           :value="data.props[key]"
+		           :propertyName="key"
+		           :property="property"
+		           :key="key"
+		           :editable="editable"
+		           :linkable="linkable"
+		           @input="onInput"
+		/>
+	</el-form>
+</template>
+
+<script>
+	import {
+		NumberInput,
+		StringInput,
+		EnumInput,
+		BooleanInput,
+		ColorInput,
+		AssetInput,
+		NodeSelectInput,
+		MapInput,
+		DynamicInput,
+	} from "./inputs";
+
+	const inputMapping = {
+		number: 'NumberInput',
+		string: 'StringInput',
+		enum: 'EnumInput',
+		boolean: 'BooleanInput',
+		color: 'ColorInput',
+		asset: 'AssetInput',
+		node: 'NodeSelectInput',
+		dynamic: 'DynamicInput',
+		map: 'MapInput',
+	};
+
+	export default {
+		name: "PropsEditor",
+		components: {
+			DynamicInput, MapInput,  NodeSelectInput, AssetInput, ColorInput, BooleanInput, EnumInput, NumberInput, StringInput},
+		data() {
+			return {
+
+			}
+		},
+		props: {
+			editable: {
+				type: Boolean,
+				default: true
+			},
+			linkable: {
+				type: Boolean,
+				default: false
+			},
+			data: {
+				type: Object,
+			},
+			meta: {
+				type: Object,
+			},
+		},
+		methods: {
+			getInput(property) {
+				return inputMapping[property.type];
+			},
+			onInput(value, container, propName, oldValue){
+				if(value === undefined){
+					this.$delete(container ,propName);
+				}else{
+					this.$set(container, propName, value);
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/behavior-editor/inputs/AssetInput.vue → src/components/inputs/AssetInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<el-select :disabled="!editable" :value="editValue" filterable @input="onInput" :placeholder="property.default" class="el-select">
 			<el-option
 				v-for="(item, key) in assets"
@@ -19,7 +19,7 @@
 	export default {
 		name: "AssetInput",
 		components: {InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		computed: {
 			editValue() {
 				return this.value === undefined ? this.property.default : this.value;

src/views/Editor/behavior-editor/inputs/BooleanInput.vue → src/components/inputs/BooleanInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<el-switch :disabled="!editable" :value="editValue" @input="onInput"
 		           class="picker"></el-switch>
 	</input-wrapper>
@@ -11,7 +11,7 @@
 	export default {
 		name: "BooleanInput",
 		components: {InputWrapper},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		data() {
 			return {}
 		},

src/views/Editor/behavior-editor/inputs/ColorInput.vue → src/components/inputs/ColorInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-input-container">
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-input-container">
 		<el-color-picker
 			:disabled="!editable"
 			class="picker"
@@ -17,7 +17,7 @@
 	export default {
 		name: "ColorInput",
 		components: {InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		data() {
 			return {
 				predefineColors: [

src/views/Editor/behavior-editor/inputs/DynamicInput.vue → src/components/inputs/DynamicInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property"
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property"
 	               :propertyName="propertyName">
 		<dynamic-selector style="flex: 1;" :value="value" @input="onChange"
 		               :editable="editable"
@@ -16,7 +16,7 @@
 	export default {
 		name: "DynamicInput",
 		components: {DynamicSelector, InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		methods: {
 			onChange(v){
 				this.$emit('input', v, this.container, this.propertyName, this.value);

src/views/Editor/behavior-editor/inputs/DynamicSelector.vue → src/components/inputs/DynamicSelector.vue

@@ -16,19 +16,19 @@
 			          :placeholder="defaultValue"/>
 		</el-popover>
 		<el-button-group>
-			<el-button @click="onClickEdit" :disabled="!editable">{{editValue.type[0].toUpperCase()}}</el-button>
+			<el-button @click="onClickEdit" :disabled="!editable">{{dynamicIconMapping[editValue.type]}}</el-button>
 			<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
 		</el-button-group>
 	</div>
 </template>
 
 <script>
-	import {clonePureObj, getInputDefaultValue} from "../../../../utils";
+	import {clonePureObj, dynamicIconMapping, getInputDefaultValue} from "../../utils";
 
 	export default {
 		name: "DynamicSelector",
 		components: {},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		data() {
 			let dataTypes = this.$t('dataTypes');
 			return {
@@ -36,6 +36,7 @@
 				popoverEditValue: this.value,
 				popoverVisible: false,
 				dataTypes,
+				dynamicIconMapping,
 			}
 		},
 		computed: {

src/views/Editor/behavior-editor/inputs/EnumInput.vue → src/components/inputs/EnumInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
 			<el-option
 				v-for="(item, key) in property.enum"
@@ -19,7 +19,7 @@
 	export default {
 		name: "EnumInput",
 		components: {InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		computed: {
 			editValue() {
 				return this.value === undefined ? this.property.default : this.value;

src/views/Editor/behavior-editor/inputs/InputWrapper.vue → src/components/inputs/InputWrapper.vue

@@ -18,6 +18,7 @@
 			<slot></slot>
 		</template>
 		<el-popover
+			v-if="linkable"
 			trigger="click"
 			:disabled="!editable"
 		>
@@ -49,6 +50,7 @@
 			container: {},
 			propertyName: String,
 			editable: Boolean,
+			linkable: Boolean,
 			contentWidth: {
 				type: String,
 				default: '65%',
@@ -74,12 +76,12 @@
 		methods: {
 			onChange(v) {
 				if (v) {
-					this.$set(this.container.data.props, this.propertyName, {
+					this.$set(this.container, this.propertyName, {
 						type: 'link',
 						alias: undefined,
 					});
 				} else {
-					this.$delete(this.container.data.props, this.propertyName);
+					this.$delete(this.container, this.propertyName);
 				}
 			}
 		}

src/views/Editor/behavior-editor/inputs/MapInput.vue → src/components/inputs/MapInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property"
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property"
 	               :propertyName="propertyName">
 		<div style="display: flex;flex: 1;">
 			<el-popover
@@ -38,13 +38,13 @@
 
 <script>
 	import InputWrapper from "./InputWrapper";
-	import {getInputDefaultValue} from "../../../../utils";
+	import {getInputDefaultValue} from "../../utils";
 	import DynamicSelector from "./DynamicSelector";
 
 	export default {
 		name: "MapInput",
 		components: {DynamicSelector, InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		data() {
 			let dataTypes = this.$t('dataTypes');
 			return {

src/views/Editor/behavior-editor/inputs/NodeSelectInput.vue → src/components/inputs/NodeSelectInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property"
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property"
 	                :propertyName="propertyName">
 		<div style="display: flex;flex: 1;">
 			<el-popover
@@ -58,7 +58,7 @@
 	export default {
 		name: "NodeSelectInput",
 		components: {InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		data() {
 			return {
 				editValueOrigin: this.value,

src/views/Editor/behavior-editor/inputs/NumberInput.vue → src/components/inputs/NumberInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<el-input-number :disabled="!editable" :value="editValue" @input="onInput" controls-position="right"
 		                 :placeholder="defaultValue"></el-input-number>
 	</input-wrapper>
@@ -7,12 +7,12 @@
 
 <script>
 	import InputWrapper from "./InputWrapper";
-	import {getInputDefaultValue} from "../../../../utils";
+	import {getInputDefaultValue} from "../../utils";
 
 	export default {
 		name: "NumberInput",
 		components: {InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		computed: {
 			editValue() {
 				return this.value === undefined ? this.property.default : this.value;

src/views/Editor/behavior-editor/inputs/StringInput.vue → src/components/inputs/StringInput.vue

 <template>
-	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+	<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
 		<div style="display: flex;flex: 1;">
 			<el-popover
 				placement="top"
@@ -39,12 +39,12 @@
 
 <script>
 	import InputWrapper from "./InputWrapper";
-	import {getInputDefaultValue} from "../../../../utils";
+	import {getInputDefaultValue} from "../../utils";
 
 	export default {
 		name: "StringInput",
 		components: {InputWrapper,},
-		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'],
 		data() {
 			return {
 				editValueOrigin: this.value,

src/components/inputs/index.js

+/**
+ * Created by rockyl on 2020-01-08.
+ */
+
+export {default as NumberInput} from './NumberInput';
+export {default as StringInput} from './StringInput';
+export {default as EnumInput} from './EnumInput';
+export {default as BooleanInput} from './BooleanInput';
+export {default as ColorInput} from './ColorInput';
+export {default as AssetInput} from './AssetInput';
+export {default as NodeSelectInput} from './NodeSelectInput';
+export {default as MapInput} from './MapInput';
+export {default as DynamicInput} from './DynamicInput';

src/locales/en.json

@@ -9,7 +9,7 @@
 	"Save And Close": "Save And Close",
 	"Reset": "Reset",
 	"Copy": "Copy",
-	"Assets config": "Assets config",
+	"Assets": "Assets",
 	"Paste same level":"Paste(same level)",
 	"Paste child":"Paste(child)",
 	"Exit": "Exit",
@@ -203,6 +203,7 @@
 		"static": "Static",
 		"arguments": "Arguments",
 		"data-center": "DataCenter",
+		"scope": "Scope",
 		"env": "Env"
 	},
 	"prosTypes": {

src/locales/zh-CN.json

@@ -9,7 +9,7 @@
 	"Save And Close": "保存并关闭",
 	"Reset": "重置",
 	"Copy": "复制",
-	"Assets config": "素材配置",
+	"Assets": "素材",
 	"Paste same level":"粘贴(同级)",
 	"Paste child":"粘贴(子级)",
 	"Exit": "退出",
@@ -197,6 +197,7 @@
 		"textinput": "输入框",
 		"scrollView": "滚动视图",
 		"scrollList": "滚动列表",
+		"htmlView": "HTML视图",
 		"svga": "SVGA"
 	},
 	"panes": {
@@ -209,6 +210,7 @@
 		"static": "静态",
 		"arguments": "入参",
 		"data-center": "数据中心",
+		"scope": "当前域",
 		"env": "自定义"
 	},
 	"prosTypes": {

src/store/modules/project.js

@@ -16,6 +16,7 @@ import {addBehavior, deleteProcessMeta, findProcess} from "./behavior";
 
 import db from "../../utils/db-storage";
 import {preprocess} from "../../views/Preview/preview-preprocess";
+import {fetchApi} from "../../api/common";
 
 const storeName = 'project';
 
@@ -769,10 +770,19 @@ async function uploadFiles(files) {
 	};
 }
 
+async function getSheetUrlByUUID(uuid) {
+	const response = await fetchApi('/api/uuid2url', {
+		params: {uuid},
+		errMessage: 'Failed to get url',
+	});
+
+	return response.url;
+}
+
 async function packAssets(assets) {
 	let failedList = [];
 	let newAssets = assets.concat();
-	await packImages(newAssets);
+	await packImages(newAssets, {getSheetUrlByUUID});
 
 	for (let asset of newAssets) {
 		if (asset.file) {
@@ -786,7 +796,7 @@ async function packAssets(assets) {
 			};
 			let sheetConfigFile = new File([JSON.stringify(sheetConfig)], 'sheet.json', {type: 'plain/text'});
 
-			const {url: sheetConfigUrl} = await uploadFile(sheetConfigFile).catch(e => {
+			const {url: sheetConfigUrl} = await uploadFile(sheetConfigFile, false, asset.sheetUUID).catch(e => {
 				failedList.push(asset);
 			});
 			asset.url = sheetConfigUrl;
@@ -794,6 +804,7 @@ async function packAssets(assets) {
 
 			delete asset.file;
 			delete asset.frames;
+			delete asset.sheetUUID;
 		}
 	}
 

src/template.js

@@ -34,7 +34,7 @@ content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, u
 
 <body>
 <div id="$CONTAINER_ID$" style="line-height:0;font-size:0"></div>
-	<script src="${process.env.NODE_ENV === 'development' ? 'http://10.10.92.100:4002/debug/engine.js' : 'http://yun.duiba.com.cn/editor/zeroing/libs/engine.269ce0ee2f951a11e004eee2df2fa1d875fa0b62.js'}"></script>
+	<script src="${process.env.NODE_ENV === 'development' ? 'http://10.10.92.100:4002/debug/engine.js' : 'http://yun.duiba.com.cn/editor/zeroing/libs/engine.4db1f30a604493bbb87d4966af54cdd10840047a.js'}"></script>
 	$SCRIPTS$
 	<script>
 		engine.launch('//yun.duiba.com.cn/aurora/$VERSION$-data.json');

src/themes/light/behavior.scss

@@ -280,25 +280,7 @@ $dock-pin-width: 9px;
 			display: flex;
 			flex-direction: column;
 
-			.linked {
-				display: block;
-				height: 26px;
-				overflow: hidden;
-				border: 1px solid $--border-color-base;
-				border-radius: 4px;
-				background-color: $--background-color-base;
-				flex: 1;
-				padding: 0 5px;
-				color: $--color-text-secondary;
-			}
-
-			.el-input-group__prepend {
-				padding: 0 5px;
-			}
 
-			.el-select {
-				width: 100%;
-			}
 
 			.wrapper {
 				padding: 5px;
@@ -318,41 +300,6 @@ $dock-pin-width: 9px;
 					.scrollbar-view {
 						padding-right: 10px;
 
-						.input-wrapper {
-							.label {
-								p {
-									margin: 0;
-									//text-overflow: ellipsis;
-									white-space: nowrap;
-									overflow: hidden;
-								}
-
-								.alias {
-									line-height: 16px;
-									font-size: 14px;
-								}
-
-								.property-name {
-									line-height: 12px;
-									font-size: 12px;
-									color: $--color-text-secondary;
-								}
-							}
-						}
-					}
-
-
-					.el-form-item__content {
-						display: flex;
-						justify-content: flex-end;
-
-						.el-input-number--mini {
-							flex: 1;
-						}
-					}
-
-					.node-select-container {
-						flex: 1;
 					}
 				}
 			}
@@ -460,3 +407,60 @@ $dock-pin-width: 9px;
 		color: $--color-text-secondary;
 	}
 }
+
+.props-editor{
+	.linked {
+		display: block;
+		height: 26px;
+		overflow: hidden;
+		border: 1px solid $--border-color-base;
+		border-radius: 4px;
+		background-color: $--background-color-base;
+		flex: 1;
+		padding: 0 5px;
+		color: $--color-text-secondary;
+	}
+
+	.el-input-group__prepend {
+		padding: 0 5px;
+	}
+
+	.el-select {
+		width: 100%;
+	}
+
+	.input-wrapper {
+		.label {
+			p {
+				margin: 0;
+				//text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+
+			.alias {
+				line-height: 16px;
+				font-size: 14px;
+			}
+
+			.property-name {
+				line-height: 12px;
+				font-size: 12px;
+				color: $--color-text-secondary;
+			}
+		}
+	}
+
+	.el-form-item__content {
+		display: flex;
+		justify-content: flex-end;
+
+		.el-input-number--mini {
+			flex: 1;
+		}
+	}
+
+	.node-select-container {
+		flex: 1;
+	}
+}

src/utils/index.js

@@ -6,6 +6,14 @@ import {Message, Loading} from "element-ui";
 import i18n from '../i18n'
 import generateUUID from "uuid/v4";
 
+export const dynamicIconMapping = {
+	'static': 'S',
+	'arguments': 'A',
+	'data-center': 'D',
+	'scope': 'O',
+	'env': 'E',
+};
+
 export function messageError(e) {
 	Message({
 		dangerouslyUseHTMLString: true,

src/utils/properties.js

@@ -138,7 +138,10 @@ export default {
     htmlText: {
       title: 'HTML内容',
       type: 'input',
-      value: ''
+      value: '',
+      props: {
+        clearable: true,
+      },
     },
     bold: {
       title: '粗体',
@@ -194,7 +197,7 @@ export default {
         { label: '居中', value: 'middle' },
         { label: '靠下', value: 'down' }
       ],
-      value: 'top'
+      value: 'up'
     },
   },
   bitmapText: {
@@ -203,12 +206,18 @@ export default {
     text: {
       title: '文本内容',
       type: 'input',
-      value: ''
+      value: '',
+      props: {
+        clearable: true,
+      },
     },
     font: {
       title: '字体名',
       type: 'input',
-      value: ''
+      value: '',
+      props: {
+        clearable: true,
+      },
     },
     letterSpacing: {
       title: '字间距',
@@ -241,7 +250,10 @@ export default {
     pattern: {
       title: '输入模式',
       type: 'input',
-      value: ''
+      value: '',
+      props: {
+        clearable: true,
+      },
     },
     maxLength: {
       title: '最大长度',
@@ -251,7 +263,10 @@ export default {
     placeholder: {
       title: '提示文字',
       type: 'input',
-      value: ''
+      value: '',
+      props: {
+        clearable: true,
+      },
     },
     placeholderColor: {
       title: '提示颜色',
@@ -414,11 +429,15 @@ export default {
       value: true,
     },
   },
-  /*htmlView: {
+  htmlView: {
+    base: 'node',
     groupName: 'HTML视图',
     htmlElement: {
       title: 'HTML内容',
       type: 'input',
+      props: {
+        clearable: true,
+      },
+    },
   },
-  }*/
 }

src/utils/sheet-pack.js

@@ -4,6 +4,8 @@
 
 import MaxRectsBinPack from "./MaxRectsBinPack";
 import {clonePureObj} from "./index";
+import sha256 from "crypto-js/sha256";
+import generateUUID from "uuid/v4";
 
 const packExts = ['.png']; //, '.jpg', '.jpeg', '.bmp'
 
@@ -14,6 +16,8 @@ export async function packImages(asssts, options = {}) {
 	const maxSize = options.maxSize || 2048;
 	const mode = options.mode || 0;
 
+	const {getSheetUrlByUUID} = options;
+
 	const images = await preProcessing(asssts);
 
 	let rects = [], singles = [];
@@ -70,7 +74,7 @@ export async function packImages(asssts, options = {}) {
 		});
 
 		let frames = {};
-		let i = 0;
+		let i = 0, urls = [];
 		for (let rect of packedRects) {
 			let sprite = {
 				x: rect.x + padding,
@@ -83,17 +87,36 @@ export async function packImages(asssts, options = {}) {
 				sh: rect.sourceH,
 			};
 
+			urls.push(rect.assets[0].url);
+
 			for (let asset of rect.assets) {
 				frames[asset.uuid] = Object.assign({}, sprite, {name: asset.name});
 				i++;
 			}
 		}
 
+		const sheetUUID = sha256(urls.sort().join()).toString();
+
+		let url;
+		if (getSheetUrlByUUID) {
+			url = await getSheetUrlByUUID(sheetUUID);
+		}
+
+		if(url){
+			asssts.push({
+				ext: '.sht',
+				url,
+				uuid: generateUUID(),
+			});
+		}else{
 			asssts.push({
 				ext: '.sht',
 				file: new File([blob], name + '.png'),
 				frames,
+				sheetUUID,
 			});
+		}
+
 		index++;
 	}
 }
@@ -113,7 +136,7 @@ function loadImage(url, assets) {
 	})
 }
 
-async function preProcessing(assets) {
+export async function preProcessing(assets) {
 	let targetAssets = [];
 	for (let i = 0, li = assets.length; i < li; i++) {
 		const asset = assets[i];
@@ -134,6 +157,7 @@ async function preProcessing(assets) {
 	}
 
 	let ps = [];
+
 	for (let url in groups) {
 		ps.push(loadImage(url, groups[url]))
 	}

src/views/Editor/behavior-editor/Board/ProcessNode.vue

@@ -26,7 +26,7 @@
 							</template>
 							<template v-else>
 								{{objToString(data.props[key].value)}}
-								<i class="tag">{{data.props[key].type[0].toUpperCase()}}</i>
+								<i class="tag">{{dynamicIconMapping[data.props[key].type]}}</i>
 							</template>
 						</span>
 					</span>
@@ -56,6 +56,7 @@
 	import {mapState} from "vuex";
 	import DockPin from "./DockPin";
 	import events from "../../../../global-events";
+	import {dynamicIconMapping} from "../../../../utils";
 
 	export default {
 		name: "ProcessNode",
@@ -69,6 +70,7 @@
 				height: 100,
 				inputMeta,
 				active: false,
+				dynamicIconMapping,
 			}
 		},
 		mounted() {

src/views/Editor/behavior-editor/MetaEditorDialog.vue

@@ -132,7 +132,6 @@
 </template>
 
 <script>
-import ElFormItem from "./inputs/form-item";
 import PropsEditorDialog from "./PropsEditorDialog";
 import MonacoEditor from "../components/MonacoEditor";
 import copy from "copy-to-clipboard";
@@ -141,7 +140,15 @@ import events from "../../../global-events";
 import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
 import CodeEditor from "./CodeEditor";
 
-const exposeVariables = ["args", "props", "target", "global", "vm", "engine"];
+const exposeVariables = [
+  "args",
+  "props",
+  "target",
+  "global",
+  "vm",
+  "engine",
+  "scope"
+];
 
 export default {
   name: "MetaEditorDialog",
@@ -149,8 +156,9 @@ export default {
     CodeEditor,
     CodeSyncIndicator,
     PropsEditorDialog,
-    ElFormItem,
+    // ElFormItem,
     "monaco-editor": MonacoEditor
+    //"monaco-editor": MonacoEditor
   },
   data() {
     return {
@@ -224,7 +232,7 @@ export default {
               this.$t("Alert")
             ).catch(e => {});
           } else {
-            this.meta.script = this.$refs.codeEditor.editor.getValue();
+            //this.meta.script = this.$refs.codeEditor.editor.getValue();
             this.$emit("input", this.meta, isPreview);
             this.visible = false;
             this.meta = null;

src/views/Editor/behavior-editor/PropertiesEditor.vue

 <template>
 	<div class="wrapper" v-if="process">
-		<el-input :readonly="!editable" class="name-input" v-model="process.data.alias" clearable :placeholder="process.meta.name" size="mini">
+		<el-input :readonly="!editable" class="name-input" v-model="process.data.alias" clearable
+		          :placeholder="process.meta.name" size="mini">
 			<template slot="prepend">{{$t('Name')}}</template>
 		</el-input>
 		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
 		              view-class="scrollbar-view">
-			<el-form v-model="process" size="mini" label-width="100px" label-position="left" @submit.native.prevent>
-				<component v-for="(property, key) in process.meta.props"
-				           :is="getInput(property)"
-				           v-model="process.data.props[key]"
-				           :propertyName="key"
-				           :property="property"
-				           :container="process"
-				           :key="key"
-				           :editable="editable"
-				/>
-			</el-form>
+			<props-editor ref="propsEditor" :editable="editable" :linkable="true" :data="process.data" :meta="process.meta"/>
 		</el-scrollbar>
 	</div>
 </template>
 
 <script>
 	import {mapState} from "vuex";
-	import NumberInput from "./inputs/NumberInput";
-	import StringInput from "./inputs/StringInput";
-	import EnumInput from "./inputs/EnumInput";
-	import BooleanInput from "./inputs/BooleanInput";
-	import ColorInput from "./inputs/ColorInput";
-	import AssetInput from "./inputs/AssetInput";
-	import NodeSelectInput from "./inputs/NodeSelectInput";
-	import MapInput from "./inputs/MapInput";
-	import DynamicInput from "./inputs/DynamicInput";
-
-	const inputMapping = {
-		number: 'NumberInput',
-		string: 'StringInput',
-		enum: 'EnumInput',
-		boolean: 'BooleanInput',
-		color: 'ColorInput',
-		asset: 'AssetInput',
-		node: 'NodeSelectInput',
-		dynamic: 'DynamicInput',
-		map: 'MapInput',
-	};
+	import PropsEditor from "../../../components/PropsEditor";
 
 	export default {
 		name: "PropertiesInput",
 		components: {
-			DynamicInput,
-			MapInput,  NodeSelectInput, AssetInput, ColorInput, BooleanInput, EnumInput, NumberInput, StringInput},
+			PropsEditor,
+		},
 		data() {
 			return {
 				process: null,

src/views/Editor/dialogs/CodeSyncServeDialog.vue

@@ -28,13 +28,12 @@
 <script>
 	import {mapMutations, mapState} from 'vuex'
 	import EnabledSetter from "../components/EnabledSetter";
-	import ElFormItem from "../behavior-editor/inputs/form-item";
 	import {clonePureObj} from "../../../utils";
 	import {startCodeSyncServe} from "../../../code-sync-serve";
 
 	export default {
 		name: "CodeSyncServeDialog",
-		components: {ElFormItem, EnabledSetter,},
+		components: {EnabledSetter,},
 		data() {
 			return {
 				visible: false,

src/views/Editor/dialogs/editors/CustomModuleEditor.vue

@@ -19,12 +19,20 @@
 		</el-table-column>
 		<el-table-column
 			prop="assets"
-			:label="$t('Assets config')"
-			width="100">
+			:label="$t('Assets')"
+			width="60">
 			<template slot-scope="scope">
 				<el-button size="mini" icon="el-icon-edit" circle type="primary" plain @click="editAssetMapping(scope.row)"/>
 			</template>
 		</el-table-column>
+		<el-table-column
+			prop="props"
+			:label="$t('Props')"
+			width="60">
+			<template slot-scope="scope">
+				<el-button size="mini" icon="el-icon-edit" circle type="primary" plain @click="editProps(scope.row)"/>
+			</template>
+		</el-table-column>
 		<!--<el-table-column
 			label="Version"
 			width="100"
@@ -36,6 +44,7 @@
 		<el-table-column>
 		</el-table-column>
 		<asset-mapping-editor-dialog ref="assetMappingEditorDialog" @save="onSaveAssetMapping"/>
+		<props-editor-dialog ref="propsEditorDialog"/>
 	</el-table>
 </template>
 
@@ -43,10 +52,11 @@
 	import {mapState, mapMutations} from 'vuex'
 	import {clonePureObj} from "../../../../utils";
 	import AssetMappingEditorDialog from "./AssetMappingEditorDialog";
+	import PropsEditorDialog from "./CustomModuleEditor/PropsEditorDialog";
 
 	export default {
 		name: "CustomModuleEditor",
-		components: {AssetMappingEditorDialog},
+		components: {PropsEditorDialog, AssetMappingEditorDialog},
 		data() {
 			return {
 				visible: false,
@@ -64,12 +74,18 @@
 				this.editData = clonePureObj(this.customs);
 				this.customMetas.splice(0);
 				for (let meta of this.$store.state.env.customs) {
-					let data = this.editData.find(item => item.id === meta.id);
+					let editData = this.editData.find(item => item.id === meta.id);
+					let data = editData ? editData : (editData || {});
+					if (!data.props) {
+						data.props = {};
+					}
 					this.customMetas.push({
 						id: meta.id,
 						name: meta.name,
-						assetMapping: data && (data.assetMapping || {}),
-						selected: !!data,
+						meta,
+						data,
+						assetMapping: editData && (editData.assetMapping || {}),
+						selected: !!editData,
 					})
 				}
 			},
@@ -81,16 +97,20 @@
 						editData.push({
 							id: meta.id,
 							assetMapping: meta.assetMapping || {},
+							props: meta.data.props || {},
 						});
 					}
 				}
 				this.modifyCustoms(editData);
 			},
-			editAssetMapping(data) {
-				this.$refs.assetMappingEditorDialog.show(data);
+			editAssetMapping(item) {
+				this.$refs.assetMappingEditorDialog.show(item);
+			},
+			editProps(item) {
+				this.$refs.propsEditorDialog.show(item.data, item.meta);
 			},
 			onSaveAssetMapping(mid, assetMapping) {
-				this.customMetas.find(item=>item.id === mid).assetMapping = assetMapping;
+				this.customMetas.find(item => item.id === mid).assetMapping = assetMapping;
 			},
 			...mapMutations([
 				'modifyCustoms',

src/views/Editor/dialogs/editors/CustomModuleEditor/PropsEditorDialog.vue

+<template>
+	<el-dialog :title="$t('Props Editor')" width="70%" :visible.sync="visible" @opened="onOpen"
+	           :close-on-click-modal="false"
+	           :append-to-body="true"
+	           :show-close="false"
+	>
+
+		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
+		              view-class="scrollbar-view">
+			<props-editor v-if="data" ref="propsEditor" :data="data" :meta="meta" :linkable="false"/>
+		</el-scrollbar>
+		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+			<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import PropsEditor from "../../../../../components/PropsEditor";
+
+	export default {
+		name: "PropsEditorDialog",
+		components: {PropsEditor},
+		data() {
+			return {
+				visible: false,
+				data: null,
+				meta: null,
+			}
+		},
+		methods: {
+			show(data, meta) {
+				this.data = data;
+				this.meta = meta;
+				this.visible = true;
+			},
+			onSave() {
+				this.visible = false;
+
+			},
+			onClose() {
+				this.visible = false;
+			},
+			onOpen() {
+
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file