feat: drawpanel 375 -> 750

src/store/modules/project.js

@@ -98,7 +98,7 @@ export const projectStore = {
 				return;
 			}
 
-			let _view = _.cloneDeep(state.activeComponent || {});
+			let oldView = _.cloneDeep(state.activeComponent || {});
 			if (state.operateStack.length) {
 				if (state.stackIndex !== 0) {
 					// 如果操作栈index有值，说明之前做过撤销/重做
@@ -108,19 +108,19 @@ export const projectStore = {
 				let _last_operate = state.operateStack[0];
 				// 上一次的操作和最新一次操作uuid不同，表示发生了不同视图的操作
 				// 需要记录当前视图的原始数据
-				if (_last_operate.uuid !== _view.uuid) {
-					state.operateStack.unshift(_.cloneDeep(_view));
+				if (_last_operate.uuid !== oldView.uuid) {
+					state.operateStack.unshift(_.cloneDeep(oldView));
 				}
 			} else {
 				// 如果操作栈中是空的，说明从来没有操作
 				// 则在开始插入数据的时候，额外插入一条最原始的数据
-				state.operateStack.unshift(_.cloneDeep(_view));
+				state.operateStack.unshift(_.cloneDeep(oldView));
 			}
 
 			state.stackIndex = 0; // 开始编辑的时候，重置操作栈的下标
-			_view = _.merge(_view, view);
+			let newView = _.merge(oldView, view);
 			// 在操作栈中插入最新值
-			state.operateStack.unshift(_.cloneDeep(_.assign({uuid: _view.uuid}, view)));
+			state.operateStack.unshift(_.cloneDeep(_.assign({uuid: newView.uuid}, view)));
 			// 操作栈最大200
 			if (state.operateStack.length > 200) {
 				state.operateStack.pop();
@@ -128,7 +128,36 @@ export const projectStore = {
 
 			// 将数据更新至当前选中的节点上
 			_.forIn(view, (value, key) => {
-				Vue.set(state.activeComponent, key, _view[key]);
+				if (key === 'properties') {
+					// horizonCenter和left\right
+					// verticalCenter和top\bottom
+					// 互斥，只要修改了一项，则把互斥项置空
+					if (value.horizonCenter) {
+						delete newView.properties.left;
+						delete newView.properties.right;
+					}
+					if (value.verticalCenter) {
+						delete newView.properties.top;
+						delete newView.properties.bottom;
+					}
+					if (value.left || value.right) {
+						delete newView.properties.horizonCenter;
+					}
+					if (value.top || value.bottom) {
+						delete newView.properties.verticalCenter;
+					}
+
+					// 如果left\right   top\bottom组合同时存在
+					// 则根据数值，计算width height
+					if (newView.properties.left && newView.properties.right) {
+						
+					}
+					if (newView.properties.top && newView.properties.bottom) {
+						
+					}
+
+				}
+				Vue.set(state.activeComponent, key, newView[key]);
 			})
 
 			if (view.type) {

src/themes/light/playground.scss

 .zero-playground-body-center{
   position: relative;
-  width: 375px;
+  width: 750px;
   margin: 10px auto;
-  height: 100%;
-  max-height: 600px;
+  height: 1200px;
+  max-height: 1200px;
   background-color: transparent;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
   overflow: hidden;
+  transform: scale(.5, .5);
+  transform-origin: 50% 0%;
 }
 .zero-playground-draw-panel{
-  height: 600px;
+  height: 1200px;
   background: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiUlEQVQ4jZ1TSxLFIAhLOp7C+19NjyFvlQ7lUUvLRgXzgVGOMQyb6L3/5cwMJAEAxw6sy3FP8tw/EkhJqp7klQMBtKpWcpC1oVp7IoiqviXg4xBFRPL7EM/6WsviYDxwzrkVaBHsz5U4MlWfKxHEySpXIdk6qLRzcXBHVnKQfZRKCy1Ty979XfwApOBe0rB0KiIAAAAASUVORK5CYII=);
   background-repeat: repeat;
   overflow-y: auto;
@@ -18,8 +20,8 @@
 .zero-draw-panel-container {
   position: relative;
   // border: 5px #000 solid;
-  width: 375px; // 谨慎修改，要和drawPanel宽度保持一致
-  min-height: 600px;
+  width: 100%; // 谨慎修改，要和drawPanel宽度保持一致
+  min-height: 1200px;
 }
 .zero-draw-panel-container.scroll {
   height: 1200px;

src/utils/common.js

@@ -166,16 +166,10 @@ function completeSelfProps(component) {
 	// 根据组件类型，获取默认属性
 	let defaultProps = getCmpProps(component.type);
 	
-	// omit从defaultProps中过滤出组件properties中没有的属性，格式参考properties.js
-	defaultProps = _.omit(defaultProps, _.keys(component.properties));
-	// 再把这些属性格式转换成key: value
+	// 把这些属性格式转换成key: value
 	defaultProps = _.mapValues(defaultProps, o => (o.value));
 
-	// 将组件properties中的属性和默认属性拼装成组件自身的属性
-	return {
-		...component.properties,
-		...defaultProps
-	}
+	return _.merge(defaultProps, component.properties);
 }
 
 export const styles = {
@@ -244,9 +238,10 @@ export const styles = {
 		// 根据uuid获取节点的所有父节点
 		let propsMatrix = getParentCmps(component.uuid, componentList);
 		propsMatrix = propsMatrix.map(completeSelfProps);
-		// console.log('propsMatrix', propsMatrix);
+
 		if (propsMatrix.length) {
 			propsMatrix.forEach(prop => {
+				// 继承每个父节点的属性
 				inheritProps(cmpSelfProps, prop);
 			});
 		}

src/utils/properties.js

@@ -8,13 +8,13 @@ export default {
       type: 'inputNumber',
       value: undefined,
     },
-    top: {
-      title: '上边距',
+    right: {
+      title: '右边距',
       type: 'inputNumber',
       value: undefined,
     },
-    right: {
-      title: '右边距',
+    top: {
+      title: '上边距',
       type: 'inputNumber',
       value: undefined,
     },