style: 大屏分组样式调整

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"

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.style.left = component.style.left - parentStyle.left
-    // 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
+    component.style.top = component.style.top - parentStyle.top
-    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)
-    }
   })
 }