Merge branch 'dev-v2' into pr@dev-v2_dzz

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',
+      width: changeStyleWithScale(canvasStyleData.value.width) + 'px',
-      height: changeStyleWithScale(canvasStyleData.value['height']) + 'px'
+      height: changeStyleWithScale(canvasStyleData.value.height) + 'px'
     }
+    return result
   }
 })
 

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 = () => {

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'"

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: {
@@ -38,28 +41,41 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
 
-const { propValue, dvInfo, searchCount } = toRefs(props)
+const { propValue, dvInfo, searchCount, element, scale } = toRefs(props)
+const customCanvasStyle = computed(() => {
+  const result = sourceCanvasStyle
+  result.scale = canvasStyleData.value.scale
+  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-id="'Group-' + element.id"
-        :canvas-style-data="canvasStyleData"
+      :canvas-style-data="customCanvasStyle"
       :canvas-view-info="canvasViewInfo"
       :is-edit="isEdit"
       :element="element"
     >
     </canvas-group>
   </div>
-  </div>
 </template>
 
 <style lang="less" scoped>

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) => {

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)
+          }
+        }
       }
     })
   })

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.left = component.style.left + parentStyle.left
-  component.style.top = center.y - component.style.height / 2
+  component.style.top = component.style.top + parentStyle.top
   component.groupStyle = {}
 }

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

@@ -198,23 +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 => {
-    // component.groupStyle 的 top left 是相对于 group 组件的位置
+    // 分组计算逻辑
-    // 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
+    // 1.groupStyle记录left top width height 在出现分组缩放的时候进行等比例变更（缩放来源有两种a.整个大屏的缩放 b.分组尺寸的调整）
-    if (!Object.keys(component.groupStyle).length) {
+    // 2.component 内部进行位移或者尺寸的变更 要同步到这个比例中
     const style = { ...component.style }
-      if (component.component.startsWith('SVG')) {
+    component.groupStyle.left = (style.left - parentStyle.left) / parentStyle.width
-        component.groupStyle = getSVGStyle(style)
+    component.groupStyle.top = (style.top - parentStyle.top) / parentStyle.height
-      } else {
+    component.groupStyle.width = style.width / parentStyle.width
-        component.groupStyle = getStyle(style)
+    component.groupStyle.height = style.height / parentStyle.height
-      }
 
-      component.groupStyle.left = toPercent((style.left - parentStyle.left) / parentStyle.width)
+    component.style.left = component.style.left - parentStyle.left
-      component.groupStyle.top = toPercent((style.top - parentStyle.top) / parentStyle.height)
+    component.style.top = component.style.top - parentStyle.top
-      component.groupStyle.width = toPercent(style.width / parentStyle.width)
-      component.groupStyle.height = toPercent(style.height / parentStyle.height)
-    }
   })
 }
+
+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
+}

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 => {