refactor: 图层样式优化

core/core-frontend/src/components/data-visualization/RealTimeGroup.vue

@@ -365,7 +365,7 @@ const handleContextMenu = e => {
           font-size: 12px;
           margin-left: 10px;
           position: relative;
-          min-width: 65px;
+          min-width: 43px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;

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

@@ -1203,6 +1203,14 @@ const linkageSetOpen = item => {
   })
 }
 
+const contextMenuShow = computed(() => {
+  if (curComponent.value) {
+    return curComponent.value.canvasId === canvasId.value
+  } else {
+    return isMainCanvas(canvasId.value)
+  }
+})
+
 const markLineShow = computed(() => isMainCanvas(canvasId.value))
 
 onMounted(() => {
@@ -1333,7 +1341,7 @@ defineExpose({
       />
     </Shape>
     <!-- 右击菜单 -->
-    <ContextMenu show-position="canvasCore" />
+    <ContextMenu v-if="contextMenuShow" show-position="canvasCore" />
     <!-- 标线 -->
     <MarkLine v-if="markLineShow" />
     <!-- 选中区域 -->

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

@@ -454,6 +454,17 @@ const handleMouseDownOnShape = e => {
     ) {
       emit('onDragging', e)
     }
+
+    //如果当前组件是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
+      })
+    }
+
     // 防止首次组件在tab旁边无法触发矩阵移动
     if (isFirst) {
       isFirst = false

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

@@ -84,8 +84,12 @@ export const composeStore = defineStore('compose', {
         }
       })
 
+      const newId = generateID()
+      components.forEach(component => {
+        component.canvasId = 'Group-' + newId
+      })
       const groupComponent = {
-        id: generateID(),
+        id: newId,
         component: 'Group',
         name: '组合',
         label: '组合',

core/core-frontend/src/utils/changeComponentsSizeWithScale.ts

@@ -2,6 +2,7 @@ import { deepCopy } from './utils'
 import { divide, multiply } from 'mathjs'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { groupSizeStyleAdaptor } from '@/utils/style'
 
 const dvMainStore = dvMainStoreWithOut()
 const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore)
@@ -28,14 +29,7 @@ export function changeComponentsSizeWithScale(scale) {
         // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey].
         if (component.component === 'Group') {
           try {
-            component.propValue.forEach(groupComponent => {
+            groupSizeStyleAdaptor(component)
-              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)

core/core-frontend/src/utils/decomposeComponent.ts

@@ -4,4 +4,5 @@ export default function decomposeComponent(component, editorRect, parentStyle) {
   component.style.left = component.style.left + parentStyle.left
   component.style.top = component.style.top + parentStyle.top
   component.groupStyle = {}
+  component.canvasId = 'canvas-main'
 }

core/core-frontend/src/utils/style.ts

@@ -228,7 +228,7 @@ export function groupSizeStyleAdaptor(groupComponent) {
   groupComponent.propValue.forEach(component => {
     // 分组还原逻辑
     // 当发上分组缩放是，要将内部组件按照比例转换
-    const styleScale = { ...component.groupStyle }
+    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