feat: 新增多选的选中框

src/packages/public/publicConfig.ts

@@ -92,7 +92,7 @@ export class PublicGroupConfigClass implements CreateComponentGroupType {
   // 标识
   public id = getUUID()
   // 基本信息
-  public attr = { ...chartInitConfig, zIndex: -1 }
+  public attr = { w: 0, h: 0, x: 0, y: 0, zIndex: -1 }
   // 基本样式
   public styles = {
     // 色相

src/store/modules/chartEditStore/chartEditStore.ts

@@ -597,11 +597,44 @@ export const useChartEditStore = defineStore({
       try {
         loadingStart()
         const groupClass = new PublicGroupConfigClass()
+        // 记录整体坐标
+        const groupAttr = {
+          l: this.getEditCanvasConfig.width,
+          t: this.getEditCanvasConfig.height,
+          r: 0,
+          b: 0
+        }
+        const targetList: CreateComponentType[] = []
         this.getTargetChart.selectId.forEach((id: string) => {
           // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
           const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
+          const { x, y, w, h } = item.attr
+          const { l, t, r, b } = groupAttr
+          // 左
+          groupAttr.l = l > x ? x : l
+          // 上
+          groupAttr.t = t > y ? y : t
+          // 宽
+          groupAttr.r = r < x + w ? x + w : r
+          // 高
+          groupAttr.b = b < y + h ? y + h  : b
+
+          targetList.push(item)
+        })
+
+        // 设置子组件的位置
+        targetList.forEach((item: CreateComponentType) => {
+          item.attr.x = item.attr.x - groupAttr.l
+          item.attr.y = item.attr.y - groupAttr.t
           groupClass.groupList.push(item)
         })
+
+        // 设置 group 属性
+        groupClass.attr.x = groupAttr.l
+        groupClass.attr.y = groupAttr.t
+        groupClass.attr.w = groupAttr.r - groupAttr.l
+        groupClass.attr.h = groupAttr.b - groupAttr.t
+
         this.addComponentList(groupClass)
         loadingFinish()
       } catch (error) {

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -1,32 +1,47 @@
 <template>
   <div class="go-edit-group-box">
-    <!-- 组合组件 -->
     <edit-shape-box
-      v-for="item in groupData.groupList"
+      :key="groupData.id"
-      :key="item.id"
+      :data-id="groupData.id"
-      :data-id="item.id"
       :index="groupIndex"
-      :style="useComponentStyle(item.attr, groupIndex)"
+      :item="groupData"
-      :item="item"
+      :style="{
-      @click="mouseClickHandle($event, item)"
+        ...useComponentStyle(groupData.attr, groupIndex),
-      @mousedown="mousedownHandle($event, item)"
+        ...useSizeStyle(groupData.attr),
-      @mouseenter="mouseenterHandle($event, item)"
+        ...getFilterStyle(groupData.styles),
-      @mouseleave="mouseleaveHandle($event, item)"
+        ...getTransformStyle(groupData.styles)
-      @contextmenu="handleContextMenu($event, item, undefined, undefined, pickOptionsList)"
+      }"
+      @click="mouseClickHandle($event, groupData)"
+      @mousedown="mousedownHandle($event, groupData)"
+      @mouseenter="mouseenterHandle($event, groupData)"
+      @mouseleave="mouseleaveHandle($event, groupData)"
+      @contextmenu="handleContextMenu($event, groupData, undefined, undefined, pickOptionsList)"
     >
-      <component
+      <!-- 组合组件 -->
-        class="edit-content-chart"
+      <edit-shape-box
-        :class="animationsClass(item.styles.animations)"
+        v-for="item in groupData.groupList"
-        :is="item.chartConfig.chartKey"
+        :key="item.id"
-        :chartConfig="item"
+        :data-id="item.id"
-        :themeSetting="themeSetting"
+        :index="groupIndex"
-        :themeColor="themeColor"
+        :item="item"
         :style="{
-          ...useSizeStyle(item.attr),
+          ...useComponentStyle(item.attr, groupIndex)
-          ...getFilterStyle(item.styles),
-          ...getTransformStyle(item.styles)
         }"
-      ></component>
+      >
+        <component
+          class="edit-content-chart"
+          :class="animationsClass(item.styles.animations)"
+          :is="item.chartConfig.chartKey"
+          :chartConfig="item"
+          :themeSetting="themeSetting"
+          :themeColor="themeColor"
+          :style="{
+            ...useSizeStyle(item.attr),
+            ...getFilterStyle(item.styles),
+            ...getTransformStyle(item.styles)
+          }"
+        ></component>
+      </edit-shape-box>
     </edit-shape-box>
   </div>
 </template>
@@ -43,7 +58,6 @@ import { useMouseHandle } from '../../hooks/useDrag.hook'
 import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
 import { EditShapeBox } from '../../components/EditShapeBox'
 
-
 const props = defineProps({
   groupData: {
     type: Object as PropType<CreateComponentGroupType>,

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -22,13 +22,13 @@
 import { ref, computed, PropType, toRefs } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
 import { useMousePointHandle } from '../../hooks/useDrag.hook'
 
 const props = defineProps({
   item: {
-    type: Object as PropType<CreateComponentType>,
+    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
     required: true
   }
 })

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -1,7 +1,7 @@
 import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
-import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -51,7 +51,7 @@ export const dragoverHandle = (e: DragEvent) => {
 }
 
 // * 不拦截默认行为点击
-export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType) => {
+export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
   if (item) {
     chartEditStore.setTargetSelectChart(item.id)
     return
@@ -62,7 +62,7 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType)
 // * 移动图表
 export const useMouseHandle = () => {
   // *  Click 事件, 松开鼠标触发
-  const mouseClickHandle = (e: MouseEvent, item: CreateComponentType) => {
+  const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
     // 若此时按下了 CTRL, 表示多选
@@ -75,7 +75,7 @@ export const useMouseHandle = () => {
   }
 
   // * 按下事件（包含移动事件）
-  const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
+  const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
     onClickOutSide()
@@ -148,14 +148,14 @@ export const useMouseHandle = () => {
   }
 
   // * 进入事件
-  const mouseenterHandle = (e: MouseEvent, item: CreateComponentType) => {
+  const mouseenterHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
     chartEditStore.setTargetHoverChart(item.id)
   }
 
   // * 移出事件
-  const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType) => {
+  const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)

src/views/chart/ContentEdit/index.vue

@@ -26,7 +26,7 @@
             <EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
             <!-- 单组件 -->
             <edit-shape-box
-              v-else
+              v-if="!item.isGroup"
               :data-id="item.id"
               :index="index"
               :style="useComponentStyle(item.attr, index)"