From c1b74b1826f535eb182ab7f4e51e3ffb0d6abdb7 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 13 Dec 2023 22:30:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=A4=A7=E5=B1=8F=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/custom-component/group/Component.vue  | 14 +++++++++++---
 core/core-frontend/src/utils/style.ts         | 19 +++----------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/core/core-frontend/src/custom-component/group/Component.vue b/core/core-frontend/src/custom-component/group/Component.vue
index a87eb1b2ff..bbdf1111e4 100644
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs, computed } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import CanvasGroup from '@/custom-component/common/CanvasGroup.vue'
+import { deepCopy } from '@/utils/utils'
+import { DEFAULT_CANVAS_STYLE_DATA_DARK } from '@/views/chart/components/editor/util/dataVisualiztion'
 const dvMainStore = dvMainStoreWithOut()
 const { canvasViewInfo, canvasStyleData } = storeToRefs(dvMainStore)
+const sourceCanvasStyle = deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK)
 
 const props = defineProps({
   propValue: {
@@ -41,7 +44,12 @@ const props = defineProps({
   }
 })
 
-const { propValue, dvInfo, searchCount } = toRefs(props)
+const { propValue, dvInfo, searchCount, element } = toRefs(props)
+const customCanvasStyle = computed(() => {
+  const result = sourceCanvasStyle
+  result.scale = canvasStyleData.value.scale
+  return sourceCanvasStyle
+})
 </script>
 
 <template>
@@ -52,7 +60,7 @@ const { propValue, dvInfo, searchCount } = toRefs(props)
         :dv-info="dvInfo"
         :show-position="showPosition"
         :canvas-id="'group-' + element.id"
-        :canvas-style-data="canvasStyleData"
+        :canvas-style-data="customCanvasStyle"
         :canvas-view-info="canvasViewInfo"
         :is-edit="isEdit"
         :element="element"
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index 7dd4ad5718..cf82e0233d 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/core/core-frontend/src/utils/style.ts
@@ -1,4 +1,4 @@
-import { sin, cos, toPercent } from '@/utils/translate'
+import { sin, cos } from '@/utils/translate'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import { hexColorToRGBA } from '@/views/chart/components/js/util'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -201,20 +201,7 @@ export function getCanvasStyle(canvasStyleData) {
 export function createGroupStyle(groupComponent) {
   const parentStyle = groupComponent.style
   groupComponent.propValue.forEach(component => {
-    // component.groupStyle 的 top left 是相对于 group 组件的位置
-    // 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
-    if (!Object.keys(component.groupStyle).length) {
-      const style = { ...component.style }
-      if (component.component.startsWith('SVG')) {
-        component.groupStyle = getSVGStyle(style)
-      } else {
-        component.groupStyle = getStyle(style)
-      }
-
-      component.groupStyle.left = toPercent((style.left - parentStyle.left) / parentStyle.width)
-      component.groupStyle.top = toPercent((style.top - parentStyle.top) / parentStyle.height)
-      component.groupStyle.width = toPercent(style.width / parentStyle.width)
-      component.groupStyle.height = toPercent(style.height / parentStyle.height)
-    }
+    component.style.left = component.style.left - parentStyle.left
+    component.style.top = component.style.top - parentStyle.top
   })
 }