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 1/2] =?UTF-8?q?style:=20=E5=A4=A7=E5=B1=8F=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=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
   })
 }

From ac7046ed27385f32a3f958cfdf916e9704b2ad93 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 14 Dec 2023 15:29:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E6=94=AF=E6=8C=81=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6=E7=9B=B4?=
 =?UTF-8?q?=E6=8E=A5=E7=A9=BF=E9=80=8F=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  | 17 +++++---
 .../data-visualization/canvas/Shape.vue       | 20 ++++++++--
 .../custom-component/common/CanvasGroup.vue   |  7 ++--
 .../src/custom-component/group/Component.vue  | 38 +++++++++++-------
 core/core-frontend/src/utils/canvasUtils.ts   |  4 ++
 .../utils/changeComponentsSizeWithScale.ts    | 18 ++++++++-
 .../src/utils/decomposeComponent.ts           | 17 +-------
 core/core-frontend/src/utils/style.ts         | 40 ++++++++++++++++++-
 .../src/views/template/index.vue              |  1 -
 9 files changed, 118 insertions(+), 44 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 4575f25e47..56a3c03a5b 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -23,7 +23,13 @@ import { storeToRefs } from 'pinia'
 import findComponent from '@/utils/components'
 import _ from 'lodash'
 import DragShadow from '@/components/data-visualization/canvas/DragShadow.vue'
-import { canvasSave, findDragComponent, isMainCanvas, isSameCanvas } from '@/utils/canvasUtils'
+import {
+  canvasSave,
+  findDragComponent,
+  isGroupCanvas,
+  isMainCanvas,
+  isSameCanvas
+} from '@/utils/canvasUtils'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import UserViewEnlarge from '@/components/visualization/UserViewEnlarge.vue'
@@ -464,17 +470,18 @@ const getTextareaHeight = (element, text) => {
 }
 
 const editStyle = computed(() => {
-  if (dashboardActive.value) {
+  if (dashboardActive.value || isGroupCanvas(canvasId.value)) {
     return {
       width: '100%',
       height: '100%'
     }
   } else {
-    return {
+    const result = {
       ...getCanvasStyle(canvasStyleData.value),
-      width: changeStyleWithScale(canvasStyleData.value['width']) + 'px',
-      height: changeStyleWithScale(canvasStyleData.value['height']) + 'px'
+      width: changeStyleWithScale(canvasStyleData.value.width) + 'px',
+      height: changeStyleWithScale(canvasStyleData.value.height) + 'px'
     }
+    return result
   }
 })
 
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 74426f150a..a6484b02d0 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -92,6 +92,8 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
 import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
+import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
+import { isGroupCanvas, isMainCanvas } from '@/utils/canvasUtils'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const contextmenuStore = contextmenuStoreWithOut()
@@ -424,9 +426,10 @@ const handleMouseDownOnShape = e => {
     const left = curX - startX + startLeft
     pos['top'] = top
     pos['left'] = left
-    // 非主画布的情况 需要检测是否从Tab中移除组件(向左移除30px 或者向右移除30px)
+    // 非主画布非分组画布的情况 需要检测是否从Tab中移除组件(向左移除30px 或者向右移除30px)
     if (
-      canvasId.value !== 'canvas-main' &&
+      !isMainCanvas(canvasId.value) &&
+      !isGroupCanvas(canvasId.value) &&
       (left < -30 || left + componentWidth - canvasWidth > 30)
     ) {
       contentDisplay.value = false
@@ -442,7 +445,8 @@ const handleMouseDownOnShape = e => {
       dvMainStore.setTabMoveOutComponentId(null)
       contentDisplay.value = true
     }
-    tabMoveInCheck()
+    // 仪表板进行Tab碰撞检查
+    dashboardActive.value && tabMoveInCheck()
     // 仪表板模式 会造成移动现象 当检测组件正在碰撞有效区内或者移入有效区内 则周边组件不进行移动
     if (
       dashboardActive.value &&
@@ -573,7 +577,17 @@ const handleMouseDownOnPoint = (point, e) => {
     //Temp dataV坐标偏移
     offsetDataVAdaptor(style, point)
     dvMainStore.setShapeStyle(style)
+    // 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排
     dashboardActive.value && emit('onResizing', moveEvent)
+    //如果当前组件是Group分组 则要进行内部组件深度计算
+    element.value.component === 'Group' && groupSizeStyleAdaptor(element.value)
+    //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中
+    if (isGroupCanvas(canvasId.value)) {
+      groupStyleRevert(element.value, {
+        width: parentNode.value.offsetWidth,
+        height: parentNode.value.offsetHeight
+      })
+    }
   }
 
   const up = () => {
diff --git a/core/core-frontend/src/custom-component/common/CanvasGroup.vue b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
index ed9848588f..8377ae6f93 100644
--- a/core/core-frontend/src/custom-component/common/CanvasGroup.vue
+++ b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { toRefs } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
-import DeCanvas from '@/views/canvas/DeCanvas.vue'
+import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
 
 const props = defineProps({
   canvasStyleData: {
@@ -53,14 +53,15 @@ const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo,
 </script>
 
 <template>
-  <de-canvas
+  <canvas-core
     v-if="isEdit"
+    class="canvas-area-shadow"
     ref="canvasGroup"
     :component-data="componentData"
     :canvas-style-data="canvasStyleData"
     :canvas-view-info="canvasViewInfo"
     :canvas-id="canvasId"
-  ></de-canvas>
+  ></canvas-core>
   <de-preview
     v-else
     :ref="'dashboardPreview'"
diff --git a/core/core-frontend/src/custom-component/group/Component.vue b/core/core-frontend/src/custom-component/group/Component.vue
index bbdf1111e4..aceef1095b 100644
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@@ -41,32 +41,40 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
 
-const { propValue, dvInfo, searchCount, element } = toRefs(props)
+const { propValue, dvInfo, searchCount, element, scale } = toRefs(props)
 const customCanvasStyle = computed(() => {
   const result = sourceCanvasStyle
   result.scale = canvasStyleData.value.scale
-  return sourceCanvasStyle
+  result.width = (element.value.style.width * 100) / result.scale
+  result.height = (element.value.style.height * 100) / result.scale
+
+  // result.width = element.value.style.width
+  // result.height = element.value.style.height
+  return result
 })
 </script>
 
 <template>
   <div class="group">
-    <div>
-      <canvas-group
-        :component-data="propValue"
-        :dv-info="dvInfo"
-        :show-position="showPosition"
-        :canvas-id="'group-' + element.id"
-        :canvas-style-data="customCanvasStyle"
-        :canvas-view-info="canvasViewInfo"
-        :is-edit="isEdit"
-        :element="element"
-      >
-      </canvas-group>
-    </div>
+    <canvas-group
+      :component-data="propValue"
+      :dv-info="dvInfo"
+      :show-position="showPosition"
+      :canvas-id="'Group-' + element.id"
+      :canvas-style-data="customCanvasStyle"
+      :canvas-view-info="canvasViewInfo"
+      :is-edit="isEdit"
+      :element="element"
+    >
+    </canvas-group>
   </div>
 </template>
 
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index fc6cd7417b..c78c8e3492 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -205,6 +205,10 @@ export function isSameCanvas(item, canvasId) {
   return item.canvasId === canvasId
 }
 
+export function isGroupCanvas(canvasId) {
+  return canvasId && canvasId.includes('Group')
+}
+
 export function findComponentIndexById(componentId, componentDataMatch = componentData.value) {
   let indexResult = -1
   componentDataMatch.forEach((component, index) => {
diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
index 722cad19ca..f555497332 100644
--- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
+++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
@@ -18,13 +18,29 @@ export function changeComponentsSizeWithScale(scale) {
     Object.keys(component.style).forEach(key => {
       if (needToChangeAttrs.includes(key)) {
         if (key === 'fontSize' && component.style[key] === '') return
-
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
         component.style[key] = format(
           getOriginStyle(component.style[key], canvasStyleData.value.scale),
           scale
         )
+        // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算
+        // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey].
+        if (component.component === 'Group') {
+          try {
+            component.propValue.forEach(groupComponent => {
+              Object.keys(groupComponent.style).forEach(sonKey => {
+                if (groupComponent.groupStyle[sonKey]) {
+                  groupComponent.style[sonKey] =
+                    component.style[sonKey] * groupComponent.groupStyle[sonKey]
+                }
+              })
+            })
+          } catch (e) {
+            // 旧Group适配
+            console.error('group adaptor error:' + e)
+          }
+        }
       }
     })
   })
diff --git a/core/core-frontend/src/utils/decomposeComponent.ts b/core/core-frontend/src/utils/decomposeComponent.ts
index 04fdfc96f8..f0b2bf7260 100644
--- a/core/core-frontend/src/utils/decomposeComponent.ts
+++ b/core/core-frontend/src/utils/decomposeComponent.ts
@@ -1,20 +1,7 @@
-import { _$ } from './utils'
-import { mod360 } from './translate'
-
 // 将组合中的各个子组件拆分出来，并计算它们新的 style
 export default function decomposeComponent(component, editorRect, parentStyle) {
-  const componentRect = _$(`#component${component.id}`).getBoundingClientRect()
-  // 获取元素的中心点坐标
-  const center = {
-    x: componentRect.left - editorRect.left + componentRect.width / 2 - 1,
-    y: componentRect.top - editorRect.top + componentRect.height / 2 - 1
-  }
-
-  component.style.rotate = mod360(component.style.rotate + parentStyle.rotate)
-  component.style.width = (parseFloat(component.groupStyle.width) / 100) * parentStyle.width
-  component.style.height = (parseFloat(component.groupStyle.height) / 100) * parentStyle.height
   // 计算出元素新的 top left 坐标
-  component.style.left = center.x - component.style.width / 2
-  component.style.top = center.y - component.style.height / 2
+  component.style.left = component.style.left + parentStyle.left
+  component.style.top = component.style.top + parentStyle.top
   component.groupStyle = {}
 }
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index cf82e0233d..5b6010bb7d 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/core/core-frontend/src/utils/style.ts
@@ -1,4 +1,4 @@
-import { sin, cos } from '@/utils/translate'
+import { sin, cos, toPercent } from '@/utils/translate'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import { hexColorToRGBA } from '@/views/chart/components/js/util'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -198,10 +198,48 @@ export function getCanvasStyle(canvasStyleData) {
   return style
 }
 
+// export function createGroupStyle(groupComponent) {
+//   const parentStyle = groupComponent.style
+//   groupComponent.propValue.forEach(component => {
+//     component.style.left = component.style.left - parentStyle.left
+//     component.style.top = component.style.top - parentStyle.top
+//   })
+// }
+
 export function createGroupStyle(groupComponent) {
   const parentStyle = groupComponent.style
   groupComponent.propValue.forEach(component => {
+    // 分组计算逻辑
+    // 1.groupStyle记录left top width height 在出现分组缩放的时候进行等比例变更（缩放来源有两种a.整个大屏的缩放 b.分组尺寸的调整）
+    // 2.component 内部进行位移或者尺寸的变更 要同步到这个比例中
+    const style = { ...component.style }
+    component.groupStyle.left = (style.left - parentStyle.left) / parentStyle.width
+    component.groupStyle.top = (style.top - parentStyle.top) / parentStyle.height
+    component.groupStyle.width = style.width / parentStyle.width
+    component.groupStyle.height = style.height / parentStyle.height
+
     component.style.left = component.style.left - parentStyle.left
     component.style.top = component.style.top - parentStyle.top
   })
 }
+
+export function groupSizeStyleAdaptor(groupComponent) {
+  const parentStyle = groupComponent.style
+  groupComponent.propValue.forEach(component => {
+    // 分组还原逻辑
+    // 当发上分组缩放是，要将内部组件按照比例转换
+    const styleScale = { ...component.groupStyle }
+    component.style.left = parentStyle.width * styleScale.left
+    component.style.top = parentStyle.height * styleScale.top
+    component.style.width = parentStyle.width * styleScale.width
+    component.style.height = parentStyle.height * styleScale.height
+  })
+}
+
+export function groupStyleRevert(innerComponent, parentStyle) {
+  const innerStyle = { ...innerComponent.style }
+  innerComponent.groupStyle.left = innerStyle.left / parentStyle.width
+  innerComponent.groupStyle.top = innerStyle.top / parentStyle.height
+  innerComponent.groupStyle.width = innerStyle.width / parentStyle.width
+  innerComponent.groupStyle.height = innerStyle.height / parentStyle.height
+}
diff --git a/core/core-frontend/src/views/template/index.vue b/core/core-frontend/src/views/template/index.vue
index 9cfd54c6ae..2a9bc60988 100644
--- a/core/core-frontend/src/views/template/index.vue
+++ b/core/core-frontend/src/views/template/index.vue
@@ -304,7 +304,6 @@ const templateEdit = templateInfo => {
 
 const categoryClick = params => {
   // do
-  console.log('categoryClick=' + JSON.stringify(params))
 }
 
 const saveTemplateEdit = templateEditForm => {