feat: scale bug

src/components/customElement/node/index.vue

@@ -15,6 +15,7 @@
     margin: 0;
     width: 100%;
     height: 100%;
+    line-height: 1;
   }
 }
 </style>

src/utils/common.js

@@ -66,7 +66,7 @@ const attrShortMapper = {
 
 // 编辑时想拖拽组件需要生成的css属性
 // 只需要位置，不需要来源透明度等等
-const operatProps = ['x', 'y', 'left', 'top', 'right', 'bottom', 'width', 'height', 'rotation'];
+const operatProps = ['x', 'y', 'left', 'top', 'right', 'bottom', 'width', 'height', 'rotation', 'scaleX', 'scaleY'];
 const ignoreProps = ['left', 'right', 'top', 'bottom'];
 
 // 属性单位 对照表, 如果是数值的时候需要添加单位
@@ -207,10 +207,10 @@ export const styles = {
 				return ['transform', [`rotate(${value}deg)`]]; //`transform: rotate(${value}deg);`;
 			case 'background-image':
 				return ['background-image', [`url(${value})`]]; //`background-image: url(${value});background-position:center;background-size:contain;`;
-			// case 'scale-x':
-			//   return ['transform', [`scaleX(${value})`]]; //`transform: scaleX(${value});`;
-			// case 'scale-y':
-			//   return ['transform', [`scaleY(${value})`]]; //`transform: scaleY(${value});`;
+			case 'scale-x':
+			  return ['transform', [`scaleX(${value})`]]; //`transform: scaleX(${value});`;
+			case 'scale-y':
+			  return ['transform', [`scaleY(${value})`]]; //`transform: scaleY(${value});`;
 			case 'visible':
 				return ['display', [value ? 'block' : 'none']]; // `display: ${value ? 'block' : 'none'};`;
 			default:
@@ -272,18 +272,20 @@ export const styles = {
 					delete cmpSelfProps[key];
 				}
 			});
-
+			
 			// 如果节点的width/height未定义，则设置拖拽组件的width/height为0
 			cmpSelfProps.width = cmpSelfProps.width || 0;
 			cmpSelfProps.height = cmpSelfProps.height || 0;
-		}
-
-		if (cmpSelfProps.scaleX && cmpSelfProps.width) {
-			cmpSelfProps.width *= cmpSelfProps.scaleX;
-		}
-
-		if (cmpSelfProps.scaleY && cmpSelfProps.height) {
-			cmpSelfProps.height *= cmpSelfProps.scaleY;
+			
+			if (cmpSelfProps.scaleX && cmpSelfProps.width) {
+				cmpSelfProps.width *= cmpSelfProps.scaleX;
+				delete cmpSelfProps.scaleX;
+			}
+			
+			if (cmpSelfProps.scaleY && cmpSelfProps.height) {
+				cmpSelfProps.height *= cmpSelfProps.scaleY;
+				delete cmpSelfProps.scaleY;
+			}
 		}
 
 		// 把不需要参与样式计算的属性干掉
@@ -305,7 +307,7 @@ export const styles = {
 				result += 'border-style: solid;'
 			}
 		});
-		result += `background-position: center;background-size: 100% 100%;`
+		result += `background-position: center;background-size: 100% 100%;transform-origin: left top;`
 
 		if (component.type === 'circle' && !onlyOpera) {
 			// 如果是circle类型，加圆角