Merge pull request #9119 from dataease/pr@dev-v2@feat_group-resize

feat(数据大屏): 批量选中一些组件可以在没有组合时批量变更大小

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -55,7 +55,6 @@
       </div>
       <div
         v-for="item in isActive() ? getPointList() : []"
-        v-show="!isGroupArea"
         :key="item"
         class="shape-point"
         :style="getPointStyle(item)"
@@ -528,9 +527,9 @@ const handleMouseDownOnShape = e => {
       isFirst = false
     }
     // 修改当前组件样式
-    dvMainStore.setShapeStyle(pos, areaData.value.components)
+    dvMainStore.setShapeStyle(pos, areaData.value.components, 'move')
     // 等更新完当前组件的样式并绘制到屏幕后再判断是否需要吸附
-    // GroupArea是分组视括租金 不需要进行吸附
+    // GroupArea是分组视括组件 不需要进行吸附
     // 如果不使用 nextTick，吸附后将无法移动
     if (!isGroupArea.value) {
       nextTick(() => {
@@ -685,7 +684,7 @@ const handleMouseDownOnPoint = (point, e) => {
     }
     calculateRadioComponentPositionAndSize(point, style, symmetricPoint)
 
-    dvMainStore.setShapeStyle(style)
+    dvMainStore.setShapeStyle(style, areaData.value.components, 'resize')
     // 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排
     dashboardActive.value && emit('onResizing', moveEvent)
     //如果当前组件是Group分组 则要进行内部组件深度计算

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -255,18 +255,31 @@ export const dvMainStore = defineStore('dataVisualization', {
       this.bashMatrixInfo = bashMatrixInfo
     },
 
-    setShapeStyle({ top, left, width, height, rotate }, areaDataComponents = []) {
+    setShapeStyle(
+      { top, left, width, height, rotate },
+      areaDataComponents = [],
+      moveType = 'move'
+    ) {
       if (this.curComponent.component === 'GroupArea' && areaDataComponents.length > 0) {
         const topOffset = top - this.curComponent.style.top
         const leftOffset = left - this.curComponent.style.left
         const widthOffset = width - this.curComponent.style.width
         const heightOffset = height - this.curComponent.style.height
-        areaDataComponents.forEach(component => {
-          component.style.top = component.style.top + topOffset
-          component.style.left = component.style.left + leftOffset
-          component.style.width = component.style.width + widthOffset
-          component.style.height = component.style.height + heightOffset
-        })
+        if (moveType === 'move') {
+          areaDataComponents.forEach(component => {
+            component.style.top = component.style.top + topOffset
+            component.style.left = component.style.left + leftOffset
+            component.style.width = component.style.width + widthOffset
+            component.style.height = component.style.height + heightOffset
+          })
+        } else {
+          areaDataComponents.forEach(component => {
+            component.style.top = component.style.top + topOffset
+            component.style.left = component.style.left + leftOffset
+            component.style.width = component.style.width + widthOffset
+            component.style.height = component.style.height + heightOffset
+          })
+        }
       }
       if (this.dvInfo.type === 'dashboard') {
         if (top) this.curComponent.style.top = top < 0 ? 0 : Math.round(top)