fixed: scripts.options -> scripts.props

src/store/modules/project.js

@@ -126,6 +126,7 @@ export const projectStore = {
 				state.operateStack.pop();
 			}
 
+			// 将数据更新至当前选中的节点上
 			_.forIn(view, (value, key) => {
 				Vue.set(state.activeComponent, key, _view[key]);
 			})
@@ -143,6 +144,7 @@ export const projectStore = {
 				Vue.set(state.activeComponent, 'properties', _properties);
 			}
 
+			// 同步修改镜像节点
 			state.activeComponentCopy = _.cloneDeep(state.activeComponent);
 		},
 		/**
@@ -434,7 +436,7 @@ export const projectStore = {
 			let _scripts = _.cloneDeep(state.activeComponent.scripts || []);
 			_scripts.push({
 				script: script,
-				options: {}
+				props: {}
 			});
 			commit('modifyActiveView', {
 				scripts: _scripts

src/utils/common.js

@@ -26,8 +26,8 @@ export const componentsMap = [
 
 // 属性的计算方法
 const propsComputeRules = {
-	x: 'add',
-	y: 'add',
+	left: 'add',
+	top: 'add',
 	rotation: 'add',
 	scaleX: 'multi',
 	scaleY: 'multi',
@@ -47,8 +47,8 @@ function invalidAttr(key, value) {
 
 // 属性简称 对照表
 const attrShortMapper = {
-	x: 'left',
-	y: 'top',
+	// x: 'left',
+	// y: 'top',
 	align: 'text-align',
 	size: 'font-size',
 	alpha: 'opacity',
@@ -60,12 +60,14 @@ const attrShortMapper = {
 
 // 编辑时想拖拽组件需要生成的css属性
 // 只需要位置，不需要来源透明度等等
-const operatProps = ['x', 'y', 'left', 'top', 'width', 'height', 'rotation'];
+const operatProps = ['left', 'top','right', 'bottom', 'width', 'height', 'rotation'];
 
 // 属性单位 对照表, 如果是数值的时候需要添加单位
 const attrUnitMapper = {
-	x: 'px',
-	y: 'px',
+	left: 'px',
+	top: 'px',
+	right: 'px',
+	bottom: 'px',
 	width: 'px',
 	height: 'px',
 	fontSize: 'px',
@@ -136,18 +138,22 @@ export const flattenViews = function (views) {
  */
 function inheritProps(props, parent) {
 	_.forIn(parent, (value, key) => {
+		let _pValue = parent[key];
+		if (_pValue === null || _pValue === undefined) {
+			return ;
+		}
 		let rule = propsComputeRules[key];
 		// 加法
 		if (rule === 'add') {
-			props[key] += parent[key];
+			props[key] += _pValue;
 		}
 		// 乘法
 		if (rule === 'multi') {
-			props[key] *= parent[key];
+			props[key] *= _pValue;
 		}
 		// 可见，特殊处理
 		if (rule === 'visible') {
-			props[key] = !props[key] || !parent[key] ? false : true;
+			props[key] = !props[key] || !_pValue ? false : true;
 		}
 	});
 }
@@ -175,10 +181,14 @@ function completeSelfProps(component) {
 export const styles = {
 	getStyles(value, key) {
 		const attr = attrShortMapper[key] || changeCamle(key);
-		const unit = attrUnitMapper[key] || '';
+		let unit = attrUnitMapper[key] || '';
 
 		if (invalidAttr(key, value)) return '';
 
+		// if ((key === 'width' || key === 'height') && (value + '').indexOf('%') > -1) {
+		// 	unit = '';
+		// }
+
 		switch (attr) {
 			case 'rotation':
 				return ['transform', [`rotate(${value}deg)`]]; //`transform: rotate(${value}deg);`;
@@ -267,7 +277,7 @@ export const styles = {
 		});
 		result += `background-position: center;background-size: 100% 100%;`
 
-		// console.log('getComponentStyle', result);
+		// console.log('getComponentStyle',component.name, result);
 		return result;
 	}
 }

src/utils/properties.js

@@ -3,15 +3,25 @@
 export default {
   node: {
     groupName: '基础',
-    x: {
-      title: 'X坐标',
+    left: {
+      title: '左边距',
       type: 'inputNumber',
-      value: 0
+      value: undefined,
+    },
+    top: {
+      title: '上边距',
+      type: 'inputNumber',
+      value: undefined,
     },
-    y: {
-      title: 'Y坐标',
+    right: {
+      title: '右边距',
       type: 'inputNumber',
-      value: 0
+      value: undefined,
+    },
+    bottom: {
+      title: '下边距',
+      type: 'inputNumber',
+      value: undefined,
     },
     width: {
       title: '宽度',
@@ -23,6 +33,18 @@ export default {
       type: 'inputNumber',
       value: 1
     },
+    horizonCenter: {
+      title: '水平偏移',
+      type: 'inputNumber',
+      value: undefined,
+      desc: '相对于父元素中心点的水平偏移，0为正中心'
+    },
+    verticalCenter: {
+      title: '垂直偏移',
+      type: 'inputNumber',
+      value: undefined,
+      desc: '相对于父元素中心点的垂直偏移，0为正中心'
+    },
     rotation: {
       title: '旋转',
       type: 'inputNumber',
@@ -66,27 +88,8 @@ export default {
         width: 40
       },
       value: true
-    },
-    left: {
-      title: '左边距',
-      type: 'inputNumber',
-      value: undefined,
-    },
-    top: {
-      title: '上边距',
-      type: 'inputNumber',
-      value: undefined,
-    },
-    right: {
-      title: '右边距',
-      type: 'inputNumber',
-      value: undefined,
-    },
-    bottom: {
-      title: '下边距',
-      type: 'inputNumber',
-      value: undefined,
-    },
+    }
+
   },
   label: {
     groupName: '文本',

src/views/Editor/Inspector/PropsTab.vue

@@ -15,7 +15,12 @@
             <template v-for="(p, key) in cmpProps">
               <el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
                 <!-- {{key}} -->
-                <dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
+                <el-tooltip :disabled="!p.desc" placement="top-start">
+                  <div slot="content">{{p.desc}}</div>
+                  <div>
+                    <dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
+                  </div>
+                </el-tooltip>
               </el-form-item>
             </template>
           </el-collapse-item>
@@ -160,6 +165,8 @@ export default {
       return getCmpProps(this.activeComponent.type);
     },
     scripts: function() {
+      console.log('scripts', this.$store.state.env.scripts);
+      
       return this.$store.state.env.scripts;
     }
   },
@@ -201,11 +208,11 @@ export default {
      * 事件属性发生改变
      */
     handleScriptChange(index, key, v) {
-      let _options = {};
-      _options[key] = v;
+      let _props = {};
+      _props[key] = v;
       let _scripts = _.cloneDeep(this.activeComponent.scripts);
       let _script = _scripts[index];
-      _script.options = _.assign(_script.options, _options);
+      _script.props = _.assign(_script.props, _props);
       _scripts[index] = _script;
       this.$store.dispatch('modifyActiveView', {
         scripts: _scripts
@@ -239,7 +246,7 @@ export default {
     getScriptValue(item, key, index) {
       let _script = this.activeComponent.scripts[index];
       // let result =
-      return _script.options[key] || item.default;
+      return _script.props[key] || item.default;
     },
     getScriptProps(item, index) {
       let _type = item.type;
@@ -272,14 +279,12 @@ export default {
       return scriptTypeMap[_type].component;
     },
     getScriptName(id) {
-      console.log('getScriptName', id);
-
       let _script = this.scripts.find(script => script.id === id);
       return _script ? _script.name : '';
     },
     getScriptOptions(id) {
       let _script = this.scripts.find(script => script.id === id);
-      return _script ? _script.options : {};
+      return _script ? _script.props : {};
     }
   }
 };

src/views/Editor/components/drawPanel.vue

@@ -51,8 +51,8 @@ export default {
 
       if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
         this.$store.dispatch('modifyCopyProperties', {
-          x: x,
-          y: y,
+          left: x,
+          top: y,
           width: w,
           height: h
         });
@@ -68,8 +68,8 @@ export default {
 
       if (_prop.x !== x || _prop.y !== y) {
         this.$store.dispatch('modifyCopyProperties', {
-          x: x,
-          y: y
+          left: x,
+          top: y
         });
         // console.log('handleDragging', x, y);
       }
@@ -80,10 +80,10 @@ export default {
       }
       let _prop = this.activeComponent.properties;
 
-      if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
+      if (_prop.left !== x || _prop.top !== y || _prop.width !== w || _prop.height !== h) {
         this.$store.dispatch('modifyProperties', {
-          x: x,
-          y: y,
+          left: x,
+          top: y,
           width: w,
           height: h
         });
@@ -95,10 +95,10 @@ export default {
       }
       let _prop = this.activeComponent.properties;
 
-      if (_prop.x !== x || _prop.y !== y) {
+      if (_prop.left !== x || _prop.top !== y) {
         this.$store.dispatch('modifyProperties', {
-          x: x,
-          y: y
+          left: x,
+          top: y
         });
       }
     }
@@ -118,8 +118,8 @@ export default {
       const _node = properties.node;
       // console.log('********', _props);
       let result = {
-        x: _props.x || _node.x.value,
-        y: _props.y || _node.y.value,
+        x: _props.left || _node.left.value,
+        y: _props.top || _node.top.value,
         w: _props.width || _node.width.value,
         h: _props.height || _node.height.value
       };

src/views/Editor/components/dynamicComponent.vue

 <template>
-  <component v-if="cmpValue !== null" :is="componentType" v-model="cmpValue" v-bind="componentProps" @change="v => handleChange(v)" @input="v=>handleInput(v)">
+	<component v-if="cmpValue !== null" :is="componentType" v-model="cmpValue" v-bind="componentProps" @change="v => handleChange(v)" @input="v=>handleInput(v)">
     <d-slot 
       v-for="oitem in componentProps.options"
       :is="componentProps.slotComponent"