From 58adc4f2f082de4df68908debaf334383223eef9 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 4 Mar 2024 16:49:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=84=E4=BB=B6=E4=BF=9D=E6=8C=81=E5=AE=BD?= =?UTF-8?q?=E9=AB=98=E6=AF=94=E4=BE=8B=E6=97=B6,=E5=BF=AB=E9=80=9F?= =?UTF-8?q?=E6=9D=A5=E5=9B=9E=E6=8B=96=E6=8B=BD=E5=8F=AF=E8=83=BD=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E5=AE=BD=E9=AB=98=E6=AF=94=E4=BE=8B=E6=9C=89=E5=BE=AE?= =?UTF-8?q?=E5=B0=8F=E5=81=8F=E5=B7=AE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/Shape.vue | 2 +- .../common/ComponentPosition.vue | 21 ++++++++++++++----- .../src/custom-component/component-list.ts | 1 + .../modules/data-visualization/dvMain.ts | 10 ++++----- core/core-frontend/src/utils/canvasUtils.ts | 1 + 5 files changed, 24 insertions(+), 11 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index b146885f68..1c80945a4f 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -629,7 +629,7 @@ const handleMouseDownOnPoint = (point, e) => { let isFirst = true const needLockProportion = isNeedLockProportion() - const originRadio = curComponent.value.style.width / curComponent.value.style.height + const originRadio = curComponent.value.aspectRatio const move = moveEvent => { // 第一次点击时也会触发 move，所以会有“刚点击组件但未移动，组件的大小却改变了”的情况发生 // 因此第一次点击时不触发 move 事件 diff --git a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue index 59f2949f8e..41a4eccbcc 100644 --- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue +++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue @@ -82,17 +82,22 @@ const onPositionChange = key => { if (!positionMounted.value[key]) { positionMounted.value[key] = 0 } - const originRadio = curComponent.value.style.width / curComponent.value.style.height if (curComponent.value.maintainRadio) { curComponent.value.style[key] = Math.ceil( (positionMounted.value[key] * canvasStyleData.value.scale) / 100 ) if (key === 'width') { - curComponent.value.style['height'] = curComponent.value.style['width'] / originRadio - positionMounted.value['height'] = Math.round(positionMounted.value['width'] / originRadio) + curComponent.value.style['height'] = + curComponent.value.style['width'] / curComponent.value.aspectRatio + positionMounted.value['height'] = Math.round( + positionMounted.value['width'] / curComponent.value.aspectRatio + ) } else if (key === 'height') { - curComponent.value.style['width'] = curComponent.value.style['height'] * originRadio - positionMounted.value['width'] = Math.round(positionMounted.value['height'] * originRadio) + curComponent.value.style['width'] = + curComponent.value.style['height'] * curComponent.value.aspectRatio + positionMounted.value['width'] = Math.round( + positionMounted.value['height'] * curComponent.value.aspectRatio + ) } } else { curComponent.value.style[key] = Math.round( @@ -110,6 +115,7 @@ const onPositionChange = key => { } const maintainRadioChange = () => { + curComponent.value.aspectRatio = curComponent.value.style.width / curComponent.value.style.height snapshotStore.recordSnapshotCache() } @@ -120,6 +126,11 @@ const positionInit = () => { (curComponent.value.style[key] * 100) / canvasStyleData.value.scale ) }) + if (curComponent.value.maintainRadio) { + positionMounted.value.width = Math.round( + positionMounted.value.height * curComponent.value.aspectRatio + ) + } } } diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 8a3bc85067..e376c6f174 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -59,6 +59,7 @@ export const commonAttr = { groupStyle: {}, // 当一个组件成为 Group 的子组件时使用 isLock: false, // 是否锁定组件 maintainRadio: false, // 布局时保持宽高比例 + aspectRatio: 1, // 锁定时的宽高比例 isShow: true, // 是否显示组件 collapseName: ['position', 'background', 'style', 'picture'], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验 linkage: { diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts index ebb23c79e2..a32247e92d 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts @@ -258,11 +258,11 @@ export const dvMainStore = defineStore('dataVisualization', { if (height) this.curComponent.style.height = Math.round(height) if (rotate) this.curComponent.style.rotate = Math.round(rotate) } else { - if (top) this.curComponent.style.top = Math.round(top) - if (left) this.curComponent.style.left = Math.round(left) - if (width) this.curComponent.style.width = Math.round(width) - if (height) this.curComponent.style.height = Math.round(height) - if (rotate) this.curComponent.style.rotate = Math.round(rotate) + if (top) this.curComponent.style.top = top + if (left) this.curComponent.style.left = left + if (width) this.curComponent.style.width = width + if (height) this.curComponent.style.height = height + if (rotate) this.curComponent.style.rotate = rotate } }, diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index b735aaf236..13b5c53e39 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -116,6 +116,7 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) { componentItem.expand = componentItem.expand || false } componentItem['maintainRadio'] = componentItem['maintainRadio'] || false + componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1 }) const curPreviewGap = dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes'