fix: 修复了比例改变后撤销内部元素错乱问题、文字换行问题

src/components/Toolbar.vue

@@ -134,6 +134,7 @@ export default {
         },
         handleScaleChange() {
             clearTimeout(this.timer)
+            this.$store.commit('setLastScale', this.scale)
             this.timer = setTimeout(() => {
                 // 画布比例设一个最小值，不能为 0
                 // eslint-disable-next-line no-bitwise

src/custom-component/VText/Component.vue

@@ -12,7 +12,7 @@
             :contenteditable="canEdit"
             :class="{ 'can-edit': canEdit }"
             tabindex="0"
-            :style="{ verticalAlign: element.style.verticalAlign }"
+            :style="{ verticalAlign: element.style.verticalAlign, padding:element.style.padding + 'px' }"
             @dblclick="setEdit"
             @paste="clearStyle"
             @mousedown="handleMousedown"
@@ -22,7 +22,7 @@
         ></div>
     </div>
     <div v-else class="v-text preview">
-        <div :style="{ verticalAlign: element.style.verticalAlign }" v-html="element.propValue"></div>
+        <div :style="{ verticalAlign: element.style.verticalAlign, padding:element.style.padding + 'px' }" v-html="element.propValue"></div>
     </div>
 </template>
 

src/custom-component/common/CommonAttr.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="v-common-attr">
+    <div class="v-common-attr" @mousedown="setInitial(curComponent.style)">
         <el-collapse v-model="activeName" accordion @change="onChange">
             <el-collapse-item title="通用样式" name="style">
                 <el-form>
@@ -13,7 +13,17 @@
                                 :value="item.value"
                             ></el-option>
                         </el-select>
-                        <el-input v-else v-model.number="curComponent.style[key]" type="number" />
+                        <el-input 
+                            v-else-if="key=='fontSize' && curComponent.component=='VText'"
+                            v-model.number="curComponent.style[key]"
+                            type="number"
+                            @input="setFontSize(curComponent)"
+                        />
+                        <el-input 
+                            v-else
+                            v-model.number="curComponent.style[key]"
+                            type="number"
+                        />
                     </el-form-item>
                 </el-form>
             </el-collapse-item>
@@ -63,10 +73,24 @@ export default {
         this.activeName = this.curComponent.collapseName
     },
     methods: {
+        setInitial(style) {
+            this.initialStyle = JSON.parse(JSON.stringify(style))
+        },
+        setFontSize() {
+            const proportion = this.curComponent.style.fontSize / this.initialStyle.fontSize
+            const updatedStyle = {
+                width: (proportion * this.initialStyle.width).toFixed(4),
+                height: (proportion * this.initialStyle.height).toFixed(4),
+                padding: (proportion * this.initialStyle.padding).toFixed(4),
+            }
+            this.curComponent.style = { ...this.curComponent.style, ...updatedStyle }
+            this.$store.commit('setShapeStyle', this.curComponent.style)
+            this.$store.commit('recordSnapshot')
+        },
         onChange() {
             this.curComponent.collapseName = this.activeName
         },
-
+    
         isIncludesColor(str) {
             return str.toLowerCase().includes('color')
         },

src/custom-component/component-list.js

@@ -42,12 +42,13 @@ const list = [
         style: {
             width: 200,
             height: 28,
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             lineHeight: '',
             letterSpacing: 0,
             textAlign: '',
             color: '',
+            padding: 4,
         },
     },
     {
@@ -61,7 +62,7 @@ const list = [
             borderWidth: 1,
             borderColor: '',
             borderRadius: '',
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             lineHeight: '',
             letterSpacing: 0,
@@ -95,7 +96,7 @@ const list = [
         style: {
             width: 200,
             height: 200,
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             lineHeight: '',
             letterSpacing: 0,
@@ -128,7 +129,7 @@ const list = [
         style: {
             width: 200,
             height: 200,
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             lineHeight: '',
             letterSpacing: 0,
@@ -150,7 +151,7 @@ const list = [
         style: {
             width: 80,
             height: 80,
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             lineHeight: '',
             letterSpacing: 0,
@@ -168,7 +169,7 @@ const list = [
         style: {
             width: 80,
             height: 80,
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             lineHeight: '',
             letterSpacing: 0,
@@ -202,7 +203,7 @@ const list = [
         style: {
             width: 600,
             height: 200,
-            fontSize: '',
+            fontSize: 14,
             fontWeight: 400,
             textAlign: 'center',
             color: '',

src/store/index.js

@@ -21,7 +21,7 @@ const data = {
         ...layer.state,
         ...snapshot.state,
         ...lock.state,
-
+        lastScale: 100, // 记录快照上次的缩放比例，用于判断是否需要更新快照
         editMode: 'edit', // 编辑器模式 edit preview
         canvasStyleData: { // 页面全局数据
             width: 1200,
@@ -55,7 +55,9 @@ const data = {
         aceSetCanvasData(state, value) {
             state.canvasStyleData = value
         },
-
+        setLastScale(state, value) {
+            state.lastScale = value
+        },
         // 通过json设置组件
         aceSetcurComponent(state, value) {
             for (let i = 0; i < state.componentData.length; i++) {
@@ -98,10 +100,11 @@ const data = {
             state.curComponentIndex = index
         },
 
-        setShapeStyle({ curComponent }, { top, left, width, height, rotate }) {
+        setShapeStyle({ curComponent }, { top, left, width, height, rotate, padding }) {
             if (top !== undefined) curComponent.style.top = Math.round(top)
             if (left !== undefined) curComponent.style.left = Math.round(left)
             if (width) curComponent.style.width = Math.round(width)
+            if (padding) curComponent.style.padding = Math.round(padding)
             if (height) curComponent.style.height = Math.round(height)
             if (rotate) curComponent.style.rotate = Math.round(rotate)
         },

src/store/snapshot.js

@@ -1,5 +1,6 @@
 import store from './index'
 import { deepCopy } from '@/utils/utils'
+import changeComponentsSizeWithScale from '@/utils/changeComponentsSizeWithScale'
 
 // 设置画布默认数据 https://github.com/woai3c/visual-drag-demo/issues/92
 let defaultcomponentData = []
@@ -20,7 +21,7 @@ export default {
         undo(state) {
             if (state.snapshotIndex >= 0) {
                 state.snapshotIndex--
-                const componentData = deepCopy(state.snapshotData[state.snapshotIndex]) || getDefaultcomponentData()
+                let componentData = deepCopy(state.snapshotData[state.snapshotIndex]) || getDefaultcomponentData()
                 if (state.curComponent) {
                     // 如果当前组件不在 componentData 中，则置空
                     const needClean = !componentData.find(component => state.curComponent.id === component.id)
@@ -32,21 +33,24 @@ export default {
                         })
                     }
                 }
-
+                componentData = changeComponentsSizeWithScale(state.lastScale, componentData)
                 store.commit('setComponentData', componentData)
             }
         },
 
         redo(state) {
             if (state.snapshotIndex < state.snapshotData.length - 1) {
                 state.snapshotIndex++
-                store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
+                let componentData = changeComponentsSizeWithScale(state.lastScale, deepCopy(state.snapshotData[state.snapshotIndex]))
+                store.commit('setComponentData', componentData)
             }
         },
 
         recordSnapshot(state) {
             // 添加新的快照
-            state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
+            let copyData = deepCopy(state.componentData)
+            copyData.forEach(v => v.lastScale = state.lastScale)
+            state.snapshotData[++state.snapshotIndex] = copyData
             // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
             if (state.snapshotIndex < state.snapshotData.length - 1) {
                 state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)

src/utils/changeComponentsSizeWithScale.js

@@ -2,31 +2,50 @@ import { deepCopy } from '@/utils/utils'
 import store from '@/store'
 import { divide, multiply } from 'mathjs'
 
-const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize']
-export default function changeComponentsSizeWithScale(scale) {
-    const componentData = deepCopy(store.state.componentData)
-    componentData.forEach(component => {
-        Object.keys(component.style).forEach(key => {
-            if (needToChangeAttrs.includes(key)) {
-                if (key === 'fontSize' && component.style[key] === '') return
-
-                // 根据原来的比例获取样式原来的尺寸
-                // 再用原来的尺寸 * 现在的比例得出新的尺寸
-                component.style[key] = format(getOriginStyle(component.style[key], store.state.canvasStyleData.scale), scale)
-            }
-        })
-    })
-
-    store.commit('setComponentData', componentData)
-    // 更新画布数组后，需要重新设置当前组件，否则在改变比例后，直接拖动圆点改变组件大小不会生效 https://github.com/woai3c/visual-drag-demo/issues/74
-    store.commit('setCurComponent', { component: componentData[store.state.curComponentIndex], index: store.state.curComponentIndex })
-    store.commit('setCanvasStyle', {
-        ...store.state.canvasStyleData,
-        scale,
+const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'padding']
+// 根据比例缩放组件尺寸  
+export default function changeComponentsSizeWithScale(scale, snapshotData = null) {  
+    const componentData = snapshotData || deepCopy(store.state.componentData)  
+    componentData.forEach(component => {  
+        Object.keys(component.style).forEach(key => {  
+            if (needToChangeAttrs.includes(key)) {  
+                let newKey  
+                if (snapshotData) {  
+                    // 根据比例计算新的属性值
+                    newKey = ((component.style[key] / snapshotData[0].lastScale) * scale).toFixed(4) - 0 
+                } else {  
+                    // 否则根据当前画布的比例计算新的属性值
+                    newKey = ((component.style[key] / store.state.canvasStyleData.scale) * scale).toFixed(4) - 0
+                }  
+
+                if (key == 'top' || key == 'left') {  
+                    component.style[key] = newKey
+                } else {  
+                    component.style[key] = newKey == 0 ? 1 : newKey 
+                }  
+            }  
+        })  
+    })  
+
+    if (snapshotData) {  
+        return componentData  
+    }  
+
+    store.commit('setComponentData', componentData) 
+    // 更新后的组件数据
+    store.commit('setCurComponent', {   
+        component: componentData[store.state.curComponentIndex],   
+        index: store.state.curComponentIndex,  
     })
+
+    // 更新画布的比例  
+    store.commit('setCanvasStyle', {  
+        ...store.state.canvasStyleData,  
+        scale,  
+    }) 
 }
 
-const needToChangeAttrs2 = ['width', 'height', 'fontSize']
+const needToChangeAttrs2 = ['width', 'height', 'fontSize', 'padding']
 export function changeComponentSizeWithScale(component) {
     Object.keys(component.style).forEach(key => {
         if (needToChangeAttrs2.includes(key)) {
@@ -40,7 +59,3 @@ export function changeComponentSizeWithScale(component) {
 function format(value, scale) {
     return multiply(value, divide(parseFloat(scale), 100))
 }
-
-function getOriginStyle(value, scale) {
-    return divide(value, divide(parseFloat(scale), 100))
-}