feat: 数据处理

src/components/customElement/image/index.vue

 <template>
-  <div class="zero-custom-picture" :style="`background-image:url(${properties.source.value}); background-size: contain;`"></div>
+  <div class="zero-custom-picture" :style="`background-image:url(${properties.source}); background-size: contain;`"></div>
 </template>
 
 <style>

src/components/customElement/label/index.vue

@@ -36,8 +36,8 @@ export default {
     showPlaceholder() {
       return (
         !this.isTyping &&
-        typeof this.properties.text.value !== 'undefined' &&
-        !this.properties.text.value.replace(/\s|( )/g, '')
+        typeof this.properties.text !== 'undefined' &&
+        !this.properties.text.replace(/\s|( )/g, '')
       );
     },
     addNBSP() {
@@ -45,7 +45,7 @@ export default {
     }
   },
   created() {
-    this.selfText = this.properties.text.value || this.selfText;
+    this.selfText = this.properties.text || this.selfText;
   }
 };
 </script>

src/components/customElement/rect/index.vue

 <template>
-  <div class="zero-custom-shape-rect-blue" :style="`background-color: ${properties.fillColor.value};border-width: ${properties.strokeWidth.value}px; border-color: ${properties.strokeColor.value};`"></div>
+  <div class="zero-custom-shape-rect-blue" :style="`background-color: ${properties.fillColor};border-width: ${properties.strokeWidth}px; border-color: ${properties.strokeColor};`"></div>
 </template>
 
 <style>

src/store/modules/project.js

@@ -45,26 +45,25 @@ export const projectStore = {
 					Vue.set(localData, 'dataMapping', dataMapping || []);
 				}
 			}
-			compoleteComponentData(state.data.views);
+			// compoleteComponentData(state.data.views);
 		},
 		/**
 		 * 激活组件
 		 * @param {*} state 
 		 * @param {*} id 
 		 */
-		activeComponent(state, id) {
+		activeComponent(state, item) {
 			// todo drag
 			// if (state.cmpListDragging) {
 			// 	state.cmpListDragging = false;
 			// 	return;
 			// }
-			if (id !== state.activeComponent.id) {
-				const _active = this.getters.componentList.find(cmp => cmp.id === id);
-				state.activeComponent = _active || state.activeComponent;
+			if (item !== state.activeComponent) {
+				state.activeComponent = item || state.activeComponent;
 			}
 
-			state.activeComponent = id;
-			state.activeIdList = [id];
+			state.activeComponent = item;
+			// state.activeIdList = [id];
 			console.log('mutations activeComponent', state);
 		},
 		modifyProject(state, ) {
@@ -169,10 +168,7 @@ export const projectStore = {
 					return flat.concat(toFlat.children ? flatten(toFlat.children).concat([toFlat]) : [toFlat]);
 				}, []);
 			};
-			let result = flatten(state.data.views).map(v => {
-				delete v.children;
-				return v;
-			});
+			let result = flatten(state.data.views);
 			// let result = state.data.views.flatMap(v => [v, v.children || []])
 			console.log('componentList', result);
 			return result;

src/themes/light/pane.scss

@@ -27,6 +27,7 @@
 		display: flex;
 		flex: 1;
 		border-radius: 2px;
+		position: relative;
 	}
 
 	.title-bar {

src/utils/compoleteCmpData.js

@@ -4,20 +4,24 @@ import { getComposedComponents } from './getComposedComponents';
 
 const composedComponents = getComposedComponents();
 
+/**
+ * 初始化配置中的views数据
+ * @param {*} views 
+ */
 export const compoleteComponentData = (views) => {
   views.forEach(view => {
 
-    view.id = view.id || guid();
-    let _composedCmp = composedComponents[view.type];
-    view.component = _composedCmp.component.default;
-    let _composedProps = _.cloneDeep(_composedCmp.properties); // 组件预设的属性，Object类型
+    // view.id = view.id || guid();
+    // let _composedCmp = composedComponents[view.type];
+    // // view.component = _composedCmp.component.default;
+    // let _composedProps = _.cloneDeep(_composedCmp.properties); // 组件预设的属性，Object类型
 
-    let _viewProps = view.properties || {}; // 组件对象的具体属性，key:value
-    let _keys = Object.keys(_viewProps);
-    _keys.forEach(k => {
-      _composedProps[k].value = _viewProps[k]
-    });
-    view.properties = _composedProps;
+    // let _viewProps = view.properties || {}; // 组件对象的具体属性，key:value
+    // let _keys = Object.keys(_viewProps);
+    // _keys.forEach(k => {
+    //   _composedProps[k].value = _viewProps[k]
+    // });
+    // view.properties = _composedProps;
 
     if (view.children) {
       compoleteComponentData(view.children);

src/utils/getComposedComponents.js

 
+/**
+ * 获取customElement下的所有组件
+ */
 export const getComposedComponents = () => {
   // 去中心化;
   const context = require.context(

src/views/Editor/Inspector.vue

@@ -5,19 +5,19 @@
 				<el-form-item >
 					<el-button @click="testGetter">test</el-button>
 				</el-form-item>
-				<p>基础</p>
-				<el-divider></el-divider>
+				<!-- <p>基础</p> -->
+				<!-- <el-divider></el-divider> -->
+				<el-divider content-position="left">基础</el-divider>
 				<el-form-item label="类型">
 					<el-select v-model="activeComponent.type" placeholder="请选择类型">
 						<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
 					</el-select>
 				</el-form-item>
-				<p>{{activeComponent.properties.groupName}}</p>
-				<el-divider></el-divider>
+				<el-divider content-position="left">{{activeComponent.properties.groupName}}</el-divider>
 				<!-- <template v-for=""></template> -->
 			</el-form>
 		</div>
-		<div class="inspec-test" style="position: absolute;bottom: 0;font-size: 12px;background-color:#fff; width: 100%;height: 100px;" @click.native="testGetter">
+		<div class="inspec-test" style="word-break: break-all;position: absolute;bottom: 0;font-size: 12px;background-color:#fff; width: 100%;height: 100px;" @click.native="testGetter">
 			{{JSON.stringify(activeComponent.properties)}}
 		</div>
 	</pane>
@@ -34,8 +34,7 @@ export default {
   components: { Pane },
   data() {
     return {
-      componentsMap,
-      sel: ''
+      componentsMap
     };
   },
   computed: {
@@ -70,5 +69,8 @@ export default {
   .el-form-item--mini.el-form-item {
     margin-bottom: 10px;
 	}
+	.el-divider__text{
+		background-color: #e9e9e9;
+	}
 }
 </style>
\ No newline at end of file

src/views/Editor/components/drawPanel.vue

@@ -3,13 +3,11 @@
   <div class="zero-draw-panel-container" >
     <div class="zero-components-container" >
       <div
-        v-if="item.id"
-        :key="item.id"
-        :id="item.id"
-        v-for="item in componentList"
-        @click.exact="activeComponent(item.id)"
-        @click.shift.exact="changeActiveIdList(item.id)"
-        @contextmenu.prevent="activeComponent(item.id)"
+        :key="index"
+        v-for="(item, index) in componentList"
+        @click.exact="activeComponent(item)"
+        @click.shift.exact="changeActiveIdList(item)"
+        @contextmenu.prevent="activeComponent(item)"
         >
         <wrapper :component-data="item"/>
       </div>
@@ -28,11 +26,11 @@ import wrapper from './wrapper';
 export default {
   components: { wrapper },
   methods: {
-    activeComponent(id) {
-      this.$store.dispatch('activeComponent', id);
+    activeComponent(item) {
+      this.$store.dispatch('activeComponent', item);
     },
-    changeActiveIdList(id) {
-      this.$store.commit('changeActiveIdList', id);
+    changeActiveIdList(item) {
+      this.$store.commit('changeActiveIdList', item);
     }
   },
   computed: {

src/views/Editor/components/wrapper.vue

@@ -18,13 +18,20 @@
       @input="handleInput"
       @keyup.delete.prevent="changeEditRange"
       >
-      <component :is="componentData.component" :is-typing="false" :properties="componentData.properties" />
+      <component :is="composedComponents[componentData.type].component.default" :is-typing="false" :properties="componentData.properties" />
     </div>
   </vue-draggable-resizable>
 
 </template>
 
 <script>
+import { getComposedComponents } from '../../../utils/getComposedComponents';
+
+const composedComponents = getComposedComponents();
+
+console.log('composedComponents', composedComponents);
+
+
 export default {
   props: {
     from: {
@@ -35,6 +42,11 @@ export default {
       require: true
     }
   },
+  data() {
+    return {
+      composedComponents
+    }
+  },
   methods: {
     handleEnableInput() {
       // 处于编辑状态的组件不可进行 删除、移动、缩放操作
@@ -149,11 +161,14 @@ export default {
     },
     position() {
       const componentData = this.componentData;
+      console.log('componentData', componentData);
+      componentData.properties = componentData.properties || {};
+      
       return {
-        x: componentData.properties.left.value,
-        y: componentData.properties.top.value,
-        w: componentData.properties.width.value,
-        h: componentData.properties.height.value
+        x: componentData.properties.left || 0,
+        y: componentData.properties.top || 0,
+        w: componentData.properties.width || 10,
+        h: componentData.properties.height || 10
       }
 
       // return !componentData
@@ -196,9 +211,6 @@ export default {
 .vdr.isTyping {
   cursor: text;
 }
-/* .handle {
-  border-radius: 50%;
-} */
 .vdr.choosed-cmp > .handle {
   display: block !important;
 }