Merge pull request #8313 from dataease/pr@dev-v2@fix_shape-drage

fix(数据大屏): 修复组件保持宽高比例时,快速来回拖拽可能导致宽高比例有微小偏差问题

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 事件

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
+      curComponent.value.style['height'] =
-      positionMounted.value['height'] = Math.round(positionMounted.value['width'] / originRadio)
+        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
+      curComponent.value.style['width'] =
-      positionMounted.value['width'] = Math.round(positionMounted.value['height'] * originRadio)
+        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
+      )
+    }
   }
 }
 

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: {

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 (top) this.curComponent.style.top = top
-        if (left) this.curComponent.style.left = Math.round(left)
+        if (left) this.curComponent.style.left = left
-        if (width) this.curComponent.style.width = Math.round(width)
+        if (width) this.curComponent.style.width = width
-        if (height) this.curComponent.style.height = Math.round(height)
+        if (height) this.curComponent.style.height = height
-        if (rotate) this.curComponent.style.rotate = Math.round(rotate)
+        if (rotate) this.curComponent.style.rotate = rotate
       }
     },
 

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'