+
@@ -13,7 +13,17 @@
:value="item.value"
>
-
+
+
@@ -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')
},
diff --git a/src/custom-component/component-list.js b/src/custom-component/component-list.js
index 14e51fd..353168f 100644
--- a/src/custom-component/component-list.js
+++ b/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: '',
diff --git a/src/store/index.js b/src/store/index.js
index 8db06c8..897231e 100644
--- a/src/store/index.js
+++ b/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)
},
diff --git a/src/store/snapshot.js b/src/store/snapshot.js
index 96c8dcc..785d84a 100644
--- a/src/store/snapshot.js
+++ b/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,7 +33,7 @@ export default {
})
}
}
-
+ componentData = changeComponentsSizeWithScale(state.lastScale, componentData)
store.commit('setComponentData', componentData)
}
},
@@ -40,13 +41,16 @@ export default {
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)
diff --git a/src/utils/changeComponentsSizeWithScale.js b/src/utils/changeComponentsSizeWithScale.js
index e900d7e..a5fb0a7 100644
--- a/src/utils/changeComponentsSizeWithScale.js
+++ b/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))
-}