data类型修改为dynamic

增加map类型

docs/psd.md

+* 组如需合并，需要在名字后面+'__m'，如[组1__m]，这样该图层就会被脚本合并，并自动把'__m'删除。
+* psd文档需按从前到后，从上到下进行划分，比如前景和背景。
+* 文字，如果是静态的，则需要合并。

src/locales/en.json

@@ -72,6 +72,9 @@
 	"Meta Editor": "Meta Editor",
 	"Env editor": "Env editor",
 	"As inline": "As inline",
+	"Project": "Project",
+	"Env constant": "Env constant",
+	"Custom module": "Custom module",
 	"Copy template to clipboard": "Copy template to clipboard",
 	"Link to parent": "Link to parent",
 	"Input project name": "Input project name",
@@ -126,7 +129,8 @@
 		"node": "Node",
 		"image": "Image",
 		"label": "Label",
-		"rect": "Rect"
+		"rect": "Rect",
+		"scrollView": "ScrollView"
 	},
 	"panes": {
 		"Assets": "Assets",
@@ -137,7 +141,8 @@
 	"dataTypes": {
 		"static": "Static",
 		"arguments": "Arguments",
-		"data-center": "DataCenter"
+		"data-center": "DataCenter",
+		"env": "Env"
 	},
 	"prosTypes": {
 		"boolean": "Boolean",
@@ -147,7 +152,8 @@
 		"color": "Color",
 		"asset": "Asset",
 		"node": "Node",
-		"data": "Data"
+		"dynamic": "Dynamic",
+		"map": "Map"
 	},
 	"events": {
 		"init": "Init",

src/locales/zh-CN.json

@@ -72,6 +72,9 @@
 	"Meta Editor": "过程元配置",
 	"Env editor": "环境编辑器",
 	"As inline": "作为内联",
+	"Project": "项目",
+	"Env constant": "自定义常量",
+	"Custom module": "自定义模块",
 	"Copy template to clipboard": "复制模板到粘贴板",
 	"Link to parent": "连接到父节点",
 	"Input project name": "输入项目名",
@@ -126,7 +129,8 @@
 		"node": "节点",
 		"image": "图片",
 		"label": "标签",
-		"rect": "矩形"
+		"rect": "矩形",
+		"scrollView": "滚动视图"
 	},
 	"panes": {
 		"Assets": "素材",
@@ -137,7 +141,8 @@
 	"dataTypes": {
 		"static": "静态",
 		"arguments": "入参",
-		"data-center": "数据中心"
+		"data-center": "数据中心",
+		"env": "自定义"
 	},
 	"prosTypes": {
 		"boolean": "布尔",
@@ -147,7 +152,8 @@
 		"color": "颜色",
 		"asset": "素材",
 		"node": "节点",
-		"data": "数据"
+		"dynamic": "动态",
+		"map": "字典"
 	},
 	"events": {
 		"init": "初始化",

src/store/modules/project.js

@@ -20,10 +20,10 @@ const defaultOptions = {
 	scaleMode: 'fixedWidth',
 	rendererType: 'webgl',
 	tpl: template,
-	env: {
-		appID: '',
-		projectID: '',
-	},
+	env: [
+		{name: 'appID', value: ''},
+		{name: 'projectID', value: ''},
+	],
 };
 
 const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值
@@ -66,7 +66,7 @@ export const projectStore = {
 
 			const localData = state.data;
 			if (data) {
-				const {views, assets, dataMapping, processes, options, customs, } = JSON.parse(data);
+				const {views, assets, dataMapping, processes, options, customs,} = JSON.parse(data);
 
 				Vue.set(localData, 'options', options || getDefaultOptions());
 				Vue.set(localData, 'views', views || []);
@@ -327,7 +327,7 @@ export const projectStore = {
 		},
 
 		addEnvMapping(state, link) {
-			if(!state.data.options.env){
+			if (!state.data.options.env) {
 				Vue.set(state.data.options, 'env', []);
 			}
 			if (link) {
@@ -348,7 +348,7 @@ export const projectStore = {
 
 		},
 
-		modifyCustoms(state, customs){
+		modifyCustoms(state, customs) {
 			state.data.customs = customs;
 		},
 	},

src/themes/light/behavior.scss

@@ -278,11 +278,6 @@ $dock-pin-width: 9px;
 				padding: 0 5px;
 			}
 
-			.el-button {
-				padding-left: 5px;
-				padding-right: 5px;
-			}
-
 			.el-select {
 				width: 100%;
 			}
@@ -318,11 +313,6 @@ $dock-pin-width: 9px;
 					.node-select-container {
 						flex: 1;
 					}
-
-					.string-input-container {
-						flex: 1;
-						height: 28px;
-					}
 				}
 			}
 		}

src/themes/light/editor.scss

@@ -48,34 +48,51 @@
 	display: flex;
 	flex-direction: column;
 
-	button {
+	.add-button {
 		align-self: flex-start;
-		margin-bottom: 5px;
 	}
 
-	.item + .item {
-		margin-top: 5px;
+	.bottom-bar{
+		align-self: flex-end;
 	}
 
-	.item {
+	.list{
 		display: flex;
-		align-items: center;
+		flex-direction: column;
+		flex: 1;
 
-		&:hover {
-			& > button {
-				visibility: visible;
-			}
-		}
+		margin: 5px 0;
 
-		.el-icon-connection {
-			padding: 0 5px;
+		.item + .item {
+			margin-top: 5px;
 		}
 
-		button {
-			margin-left: 5px;
-			visibility: hidden;
+		.item {
+			display: flex;
+			align-items: center;
+
+			&:hover {
+				& > .delete-button {
+					visibility: visible;
+				}
+			}
+
+			.el-icon-connection {
+				padding: 0 5px;
+			}
+
+			.delete-button {
+				margin-left: 5px;
+				visibility: hidden;
+			}
 		}
 	}
+
+}
+
+.string-input-container {
+	flex: 1;
+	height: 28px;
 }
 
 .details-dialog {

src/themes/light/index.scss

@@ -56,3 +56,7 @@
 	width: 16px;
 }
 
+.el-button-group > .el-button {
+	padding-left: 5px;
+	padding-right: 5px;
+}

src/utils/common.js

@@ -21,7 +21,11 @@ export const componentsMap = [
 	{
 		label: '圆形',
 		value: 'circle'
-	}
+	},
+	{
+		label: '滚动视图',
+		value: 'scrollView'
+	},
 ];
 
 // 属性的计算方法

src/utils/index.js

@@ -66,7 +66,7 @@ export function saveAs(blob, fileName) {
 }
 
 export function getInputDefaultValue(property) {
-	return property.hasOwnProperty('default') ? property.default + '' : 'unset';
+	return property ? property.hasOwnProperty('default') ? property.default + '' : 'unset' : 'unset';
 }
 
 export function updateProcesses(process, targetMetaID, replaceMetaID) {

src/utils/properties.js

@@ -220,10 +220,44 @@ export default {
     strokeWidth: {
       title: '边框宽度',
       type: 'inputNumber',
-      value: 1,
+      value: 0,
       props: {
         min: 0
       }
     }
   },
+  scrollView: {
+    groupName: '滚动视图',
+    isVertical: {
+      title: '纵向锁定',
+      type: 'switch',
+      props: {
+        width: 40
+      },
+      value: true,
+    },
+    isSpringBack: {
+      title: '回弹效果',
+      type: 'switch',
+      props: {
+        width: 40
+      },
+      value: true,
+    },
+    /*maxDistance: {
+      title: '最大距离',
+      type: 'inputNumber',
+      value: 1040,
+    },*/
+    maxSpeed: {
+      title: '最大速度',
+      type: 'inputNumber',
+      value: 100,
+    },
+    fSpeed: {
+      title: '摩擦力',
+      type: 'inputNumber',
+      value: 20,
+    },
+  }
 }

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

@@ -24,7 +24,7 @@
 								<i class="el-icon-link tag"></i>
 							</template>
 							<template v-else>
-								{{data.props[key].value || ''}}
+								{{objToString(data.props[key].value)}}
 								<i class="tag">{{data.props[key].type[0].toUpperCase()}}</i>
 							</template>
 						</span>
@@ -110,6 +110,9 @@
 
 				return '';
 			},
+			objToString(value){
+				return typeof value === 'object' ? '' : (value || '');
+			},
 			prepare() {
 				let {design, props, output} = this.process.data;
 				if (!design) {

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

@@ -29,7 +29,8 @@
 	import ColorInput from "./inputs/ColorInput";
 	import AssetInput from "./inputs/AssetInput";
 	import NodeSelectInput from "./inputs/NodeSelectInput";
-	import DataInput from "./inputs/DataInput";
+	import MapInput from "./inputs/MapInput";
+	import DynamicInput from "./inputs/DynamicInput";
 
 	const inputMapping = {
 		number: 'NumberInput',
@@ -39,14 +40,15 @@
 		color: 'ColorInput',
 		asset: 'AssetInput',
 		node: 'NodeSelectInput',
-		data: 'DataInput',
+		dynamic: 'DynamicInput',
+		map: 'MapInput',
 	};
 
 	export default {
 		name: "PropertiesInput",
 		components: {
-			DataInput,
-			NodeSelectInput, AssetInput, ColorInput, BooleanInput, EnumInput, NumberInput, StringInput},
+			DynamicInput,
+			MapInput,  NodeSelectInput, AssetInput, ColorInput, BooleanInput, EnumInput, NumberInput, StringInput},
 		data() {
 			return {
 				process: null,

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

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

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

+<template>
+	<div style="display: flex;">
+		<el-popover
+			placement="top"
+			popper-class="input-area-popover"
+			class="string-input-container"
+			trigger="manual"
+			v-model="popoverVisible"
+			:disabled="!editable"
+		>
+			<el-radio-group v-model="editValue.type" size="mini" @change="onChange" :disabled="!editable">
+				<el-radio-button v-for="(item, key) in dataTypes" :label="key" :key="key">{{item}}</el-radio-button>
+			</el-radio-group>
+			<el-input clearable slot="reference" :value="editValue.value" @input="onInput" @change="onChange"
+			          :readonly="!editable"
+			          :placeholder="defaultValue"/>
+		</el-popover>
+		<el-button-group>
+			<el-button @click="onClickEdit" :disabled="!editable">{{editValue.type[0].toUpperCase()}}</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";
+
+	export default {
+		name: "DynamicSelector",
+		components: {},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		data() {
+			let dataTypes = this.$t('dataTypes');
+			return {
+				editValue: this.transEditValue(),
+				popoverEditValue: this.value,
+				popoverVisible: false,
+				dataTypes,
+			}
+		},
+		computed: {
+			defaultValue() {
+				return getInputDefaultValue(this.property);
+			},
+		},
+		watch: {
+			value(v) {
+				this.editValue = this.transEditValue();
+			},
+		},
+		methods: {
+			transEditValue(){
+				return clonePureObj(this.value || {type: 'static'});
+			},
+			onClickEdit() {
+				this.popoverVisible = !this.popoverVisible;
+			},
+			onClickClean() {
+				this.$emit('input', undefined, this.container, this.propertyName, this.value);
+			},
+			onInput(v) {
+				this.$set(this.editValue, 'value', v);
+			},
+			onChange() {
+				this.$emit('input', this.editValue, this.container, this.propertyName, this.value);
+				this.popoverVisible = false;
+			},
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

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

@@ -3,22 +3,33 @@
 	               :propertyName="propertyName">
 		<div style="display: flex;flex: 1;">
 			<el-popover
-				placement="top"
 				popper-class="input-area-popover"
 				class="string-input-container"
 				trigger="manual"
 				v-model="popoverVisible"
 				:disabled="!editable"
+				:width="400"
 			>
-				<el-radio-group v-model="editValue.type" size="mini" @change="onChange" :disabled="!editable">
-					<el-radio-button v-for="(item, key) in dataTypes" :label="key" :key="key">{{item}}</el-radio-button>
-				</el-radio-group>
-				<el-input clearable slot="reference" :value="editValue.value" @input="onInput" @change="onChange"
-				          :readonly="!editable"
-				          :placeholder="defaultValue"/>
+				<div v-if="editValue" class="mapping-list">
+					<el-button class="add-button" icon="el-icon-plus" size="mini" circle @click="addMapItem"/>
+					<div class="list">
+						<div class="item" v-for="(item, index) in editValue" :key="index">
+							<el-input v-model="item.key" style="width: unset"/>
+							:
+							<dynamic-selector style="flex: 1;" v-model="item.value"
+							               :editable="editable"/>
+							<el-button class="delete-button" icon="el-icon-minus" size="mini" plain circle type="danger"
+							           @click="addMapItem"/>
+						</div>
+					</div>
+					<div class="bottom-bar">
+						<el-button size="mini" type="primary" @click="close">{{$t('Close')}}</el-button>
+						<el-button size="mini" type="primary" @click="save">{{$t('Save')}}</el-button>
+					</div>
+				</div>
+				<el-button slot="reference" @click="onClickEdit" :disabled="!editable">{{$t('Edit')}}</el-button>
 			</el-popover>
 			<el-button-group>
-				<el-button @click="onClickEdit" :disabled="!editable">{{editValue.type[0].toUpperCase()}}</el-button>
 				<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
 			</el-button-group>
 		</div>
@@ -28,15 +39,16 @@
 <script>
 	import InputWrapper from "./InputWrapper";
 	import {getInputDefaultValue} from "../../../../utils";
+	import DynamicSelector from "./DynamicSelector";
 
 	export default {
-		name: "DataInput",
-		components: {InputWrapper,},
+		name: "MapInput",
+		components: {DynamicSelector, InputWrapper,},
 		props: ['value', 'container', 'property', 'propertyName', 'editable'],
 		data() {
 			let dataTypes = this.$t('dataTypes');
 			return {
-				editValue: this.value || {type: 'static'},
+				editValue: null,
 				popoverEditValue: this.value,
 				popoverVisible: false,
 				dataTypes,
@@ -49,31 +61,45 @@
 		},
 		watch: {
 			value(v) {
-				this.editValue = v || {type: 'static'};
+
 			},
 		},
 		methods: {
+			transEditValue() {
+				let arr = [];
+				if (this.value && this.value.value) {
+					let v = this.value.value;
+					for (let key in v) {
+						arr.push({key, value: v[key]});
+					}
+				}
+				return arr;
+			},
 			onClickEdit() {
+				this.editValue = this.transEditValue();
 				this.popoverVisible = !this.popoverVisible;
 			},
 			onClickClean() {
 				this.$emit('input', undefined, this.container, this.propertyName, this.value);
 			},
-			onInput(v) {
-				this.$set(this.editValue, 'value', v);
+			addMapItem() {
+				this.editValue.push({});
 			},
-			onChange() {
-				this.$emit('input', this.editValue, this.container, this.propertyName, this.value);
+			save() {
+				let v = {type: 'map', value: {}};
+				for (let item of this.editValue) {
+					v.value[item.key] = item.value;
+				}
+				this.$emit('input', v, this.container, this.propertyName, this.value);
+				this.popoverVisible = false;
 			},
+			close() {
+				this.popoverVisible = false;
+			}
 		},
 	}
 </script>
 
 <style scoped>
-	.bottom-bar {
-		margin-top: 5px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
+
 </style>

src/views/Editor/dialogs/DetailsDialog.vue

@@ -6,16 +6,16 @@
 	           custom-class="details-dialog"
 	>
 		<el-tabs v-model="activeName">
-			<el-tab-pane label="项目" name="project">
+			<el-tab-pane :label="$t('Project')" name="project">
 				<project-editor/>
 			</el-tab-pane>
-			<el-tab-pane label="环境常量" name="env">
+			<el-tab-pane :label="$t('Env constant')" name="env">
 				<env-editor/>
 			</el-tab-pane>
-			<el-tab-pane label="数据映射" name="data-mapping">
+			<el-tab-pane :label="$t('Data mapping')" name="data-mapping">
 				<data-mapping-editor/>
 			</el-tab-pane>
-			<el-tab-pane label="自定义模块" name="custom">
+			<el-tab-pane :label="$t('Custom module')" name="custom">
 				<custom-editor/>
 			</el-tab-pane>
 		</el-tabs>

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

 <template>
 	<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
 		<div class="mapping-list">
-			<el-button icon="el-icon-plus" size="mini" circle @click="onAdd"/>
-			<div class="item" v-for="(link, index) in mapping">
-				<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
-				<el-icon class="el-icon-connection"/>
-				<el-input size="mini" v-model="link.path" @change="onChange"/>
-				<el-button icon="el-icon-minus" circle size="mini" type="danger" @click="toDeleteItem(link, index)"/>
+			<el-button class="add-button" icon="el-icon-plus" size="mini" circle @click="onAdd"/>
+			<div class="list">
+				<div class="item" v-for="(link, index) in mapping">
+					<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
+					<el-icon class="el-icon-connection"/>
+					<el-input size="mini" v-model="link.path" @change="onChange"/>
+					<el-button class="delete-button" icon="el-icon-minus" circle size="mini" plain type="danger" @click="toDeleteItem(link, index)"/>
+				</div>
 			</div>
 		</div>
 	</el-scrollbar>

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

 <template>
 	<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
 		<div class="mapping-list">
-			<el-button icon="el-icon-plus" size="mini" circle @click="onAdd"/>
-			<div class="item" v-for="(link, index) in env">
-				<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
-				<el-icon class="el-icon-connection"/>
-				<el-input size="mini" v-model="link.value" @change="onChange"/>
-				<el-button icon="el-icon-minus" circle size="mini" type="danger" @click="toDeleteItem(link, index)"/>
+			<el-button class="add-button" icon="el-icon-plus" size="mini" circle @click="onAdd"/>
+			<div class="list">
+				<div class="item" v-for="(link, index) in env">
+					<el-input size="mini" style="width: 30%" v-model="link.name" @change="onChange"/>
+					<el-icon class="el-icon-connection"/>
+					<el-input size="mini" v-model="link.value" @change="onChange"/>
+					<el-button class="delete-button" icon="el-icon-minus" circle size="mini" plain type="danger" @click="toDeleteItem(link, index)"/>
+				</div>
 			</div>
 		</div>
 	</el-scrollbar>

src/views/Home/DuplicateProjectDialog.vue

@@ -45,7 +45,7 @@
 				this.$refs.form.validate(async (valid)=>{
 					if(valid){
 						try {
-							const project = await playWaiting(this.createProject(this.project), this.$t('Duplicating project'));
+							const project = await playWaiting(this.duplicateProject(this.project), this.$t('Duplicating project'));
 
 							this.visible = false;
 							this.$message({