From d644d2cb75a6e63ed44c181cf1d4d503388f6315 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 3 Jul 2024 14:56:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E7=BB=84=E5=90=88=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E5=8F=98=E5=8A=A8=E6=94=AF=E6=8C=81=E9=87=8D?=
 =?UTF-8?q?=E6=96=B0=E8=AE=A1=E7=AE=97=E7=BB=84=E5=90=88=E8=BE=B9=E7=95=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/Shape.vue       |  2 +-
 .../modules/data-visualization/compose.ts     | 45 ++++++++++++++++---
 2 files changed, 39 insertions(+), 8 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 82ad767c19..34503dc9b9 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -933,7 +933,7 @@ const htmlToImage = () => {
 
 const handleGroupComponent = () => {
   if (element.value.canvasId.includes('Group')) {
-    composeStore.updateGroupBorder()
+    composeStore.updateGroupBorder(element.value.canvasId)
   }
 }
 
diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts
index fae03ec5af..5514ee0c8f 100644
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts
@@ -9,7 +9,7 @@ import {
   commonAttr,
   COMMON_COMPONENT_BACKGROUND_MAP
 } from '@/custom-component/component-list'
-import { createGroupStyle, getComponentRotatedStyle } from '@/utils/style'
+import { createGroupStyle, getComponentRotatedStyle, groupStyleRevert } from '@/utils/style'
 import eventBus from '@/utils/eventBus'
 
 const dvMainStore = dvMainStoreWithOut()
@@ -52,8 +52,39 @@ export const composeStore = defineStore('compose', {
     setAreaData(data) {
       this.areaData = data
     },
-    updateGroupBorder() {
-      // do updateGroupBorder
+    updateGroupBorder(canvasId) {
+      if (canvasId) {
+        // 1.查找所属分组
+        const groupId = canvasId.replace('Group-', '')
+        const sourceGroupComponent = componentData.value.filter(ele => ele.id === groupId)[0]
+        const sourceSubComponents = sourceGroupComponent.propValue
+        // 2. 还原分组内部组件再主画布位置
+        const sourceParentStyle = { ...sourceGroupComponent.style }
+        sourceSubComponents.forEach(subcomponent => {
+          decomposeComponent(subcomponent, null, sourceParentStyle)
+        })
+        const newAreaData = {
+          // 选中区域包含的组件以及区域位移信息
+          style: {
+            top: 0,
+            left: 0,
+            width: 0,
+            height: 0
+          },
+          components: sourceSubComponents
+        }
+        // 3.重新计算分组区域边界
+        this.calcComposeArea(newAreaData)
+        sourceGroupComponent.style = {
+          ...sourceGroupComponent.style,
+          ...newAreaData.style
+        }
+        sourceSubComponents.forEach(component => {
+          component.canvasId = canvasId
+        })
+        // 4.计算内部子组件位置
+        createGroupStyle(sourceGroupComponent)
+      }
     },
 
     alignment: function (params) {
@@ -191,8 +222,8 @@ export const composeStore = defineStore('compose', {
         dvMainStore.addComponent({ component: component, index: undefined, isFromGroup: true })
       })
     },
-    calcComposeArea() {
-      if (this.areaData.components <= 1) {
+    calcComposeArea(areaDataValue = this.areaData) {
+      if (areaDataValue.components <= 1) {
         return
       }
       // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
@@ -201,7 +232,7 @@ export const composeStore = defineStore('compose', {
         left = Infinity
       let right = -Infinity,
         bottom = -Infinity
-      this.areaData.components.forEach(component => {
+      areaDataValue.components.forEach(component => {
         let style = { left: 0, top: 0, right: 0, bottom: 0 }
         style = getComponentRotatedStyle(component.style)
 
@@ -212,7 +243,7 @@ export const composeStore = defineStore('compose', {
       })
 
       // 设置选中区域位移大小信息和区域内的组件数据
-      this.areaData.style = {
+      areaDataValue.style = {
         left,
         top,
         width: right - left,