feat: xy转换

src/utils/common.js

@@ -17,8 +17,8 @@ export const componentsMap = [{
 
 // 属性的计算方法
 const propsComputeRules = {
-  left: 'add',
-  top: 'add',
+  x: 'add',
+  y: 'add',
   rotate: 'add',
   scaleX: 'multi',
   scaleY: 'multi',
@@ -36,6 +36,8 @@ function invalidAttr(key, value) {
 }
 // 属性简称 对照表
 const attrShortMapper = {
+  x: 'left',
+  y: 'top',
   align: 'text-align',
   size: 'font-size',
   alpha: 'opacity',
@@ -47,8 +49,8 @@ const attrShortMapper = {
 
 // 属性单位 对照表, 如果是数值的时候需要添加单位
 const attrUnitMapper = {
-  top: 'px',
-  left: 'px',
+  x: 'px',
+  y: 'px',
   width: 'px',
   height: 'px',
   fontSize: 'px',
@@ -76,7 +78,7 @@ function getParentCmps(uuid, list) {
   return _self.parent ? parentLoop(_self.parent, list) : [];
 }
 
-export { getParentCmps, buildCompleteProps };
+export { getParentCmps, completeSelfProps };
 
 /**
  * 移除组件从父级继承的属性
@@ -87,6 +89,15 @@ export const removeParentProps = function(cmp, list) {
 
 }
 
+/**
+ * 根据
+ * @param {*} cmp 
+ * @param {*} list 
+ */
+export const buildPropsByParent = function(cmp, list) {
+
+}
+
 /**
  * 根据propsComputeRules的计算规则，继承父级的属性
  * @param {*} props 
@@ -110,7 +121,11 @@ function inheritProps(props, parent) {
   });
 }
 
-function buildCompleteProps(component) {
+/**
+ * 根据组件type 依赖properties.js构建组件完整的属性对象
+ * @param {*} component 
+ */
+function completeSelfProps(component) {
   // 根据组件类型，获取默认属性
   let defaultProps = getCmpProps(component.type);
 
@@ -180,13 +195,12 @@ export const styles = {
   getComponentStyle(component, project, componentList) {
     // debugger;
     let result = '';
-    let cmpSelfProps = buildCompleteProps(component);
+    let cmpSelfProps = completeSelfProps(component);
 
     // 根据uuid获取节点的所有父节点
     let propsMatrix = getParentCmps(component.uuid, componentList);
-    propsMatrix = propsMatrix.map(buildCompleteProps);
+    propsMatrix = propsMatrix.map(completeSelfProps);
     console.log('propsMatrix', propsMatrix);
-    console.log('cmpSelfProps', cmpSelfProps);
     if (propsMatrix.length) {
       propsMatrix.forEach(prop => {
         inheritProps(cmpSelfProps, prop);
@@ -194,16 +208,13 @@ export const styles = {
     }
 
     console.log('cmpSelfProps after inherit ', cmpSelfProps);
-
     cmpSelfProps = styles.getStylesFromObj(cmpSelfProps, project);
-
     _.forIn(cmpSelfProps, (value, key) => {
       result += `${key}: ${value.join(' ')};`
     });
     result += `background-position: center;background-size: contain;`
 
     console.log('getComponentStyle', result);
-
     return result;
   }
 }

src/utils/compoleteCmpData.js

 import { guid } from './index';
 import _ from 'lodash';
-import { getComposedComponents } from './getComposedComponents';
+// import { getComposedComponents } from './getComposedComponents';
 
-const composedComponents = getComposedComponents();
+// const composedComponents = getComposedComponents();
 
 export const compoleteComponentData = (views) => {
   views.forEach(view => {
+    delete view.properties.left;
+    delete view.properties.top;
 
-    view.uuid = view.uuid || guid();
+
+    // view.uuid = view.uuid || guid();
     // let _composedCmp = composedComponents[view.type];
     // view.component = _composedCmp.component.default;
     // let _composedProps = _.cloneDeep(_composedCmp.properties); // 组件预设的属性，Object类型

src/utils/properties.js

@@ -3,25 +3,25 @@
 export default {
   node: {
     groupName: '基础',
-    left: {
+    x: {
       title: 'X坐标',
       type: 'inputNumber',
-      value: 50
+      value: 0
     },
-    top: {
+    y: {
       title: 'Y坐标',
       type: 'inputNumber',
-      value: 50
+      value: 0
     },
     width: {
       title: '宽度',
       type: 'inputNumber',
-      value: 100
+      value: 1
     },
     height: {
       title: '高度',
       type: 'inputNumber',
-      value: 50
+      value: 1
     },
     rotate: {
       title: '旋转',
@@ -78,7 +78,7 @@ export default {
     color: {
       title: '颜色',
       type: 'colorPicker',
-      value: '#fff'
+      value: '#000'
     },
     size: {
       title: '字体大小',

src/views/Editor/components/drawPanel.vue

@@ -3,8 +3,8 @@
   <div class="zero-draw-panel-container" >
     <div class="zero-components-container" >
       <div
-        :key="index"
-        v-for="(item, index) in componentList"
+        :key="item.uuid"
+        v-for="item in componentList"
         >
         <wrapper :component-data="item"/>
       </div>

src/views/Editor/components/wrapper.vue

@@ -157,49 +157,32 @@ export default {
       return this.componentData.group === 'text';
     },
     styleObject() {
-      console.log('wrapper styleObject');
-
       return styles.getComponentStyle(this.componentData, this.project, this.componentList);
     },
     position() {
-      // const componentData = this.componentData;
       let _props = this.componentData.properties;
-      // componentData.properties = componentData.properties || {};
       const _node = properties.node;
-      console.log('*******left', _props.left, _node.left.value);
-      console.log('*******top', _props.top, _node.top.value);
-
-      let _left = _props.left || _node.left.value;
-      let _top = _props.top || _node.top.value;
-
-      if (_props.left) {
-        return {
-          x: _left,
-          y: _top,
-          w: _props.width || _node.width.value,
-          h: _props.height || _node.height.value
-        };
-      } else {
-        return {
-          x: 50,
-          y: 50,
-          w: 100,
-          h: 100
-        };
+      console.log('********', _props);
+      let result = {
+        x: _props.x || _node.x.value,
+        y: _props.y || _node.y.value,
+        w: _props.width || _node.width.value,
+        h: _props.height || _node.height.value
       }
+      console.log('####position', result);
+
+      // if (this.active) {
+      //   return result;
+      // } else {
+      //   return {
+      //     x: 30,
+      //     y: 30,
+      //     w: 40,
+      //     h: 40
+      //   }
+      // }
 
-      // return {
-      //   x: 50,
-      //   y: 50,
-      //   w: _props.width || _node.width.value,
-      //   h: _props.height || _node.height.value
-      // };
-      // return {
-      //   x: _props.left || _node.left.value,
-      //   y: _props.top || _node.top.value,
-      //   w: _props.width || _node.width.value,
-      //   h: _props.height || _node.height.value
-      // };
+      return result;
     }
   },
   watch: {