feat: 新增多选的选中框

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="item.id"
-      :data-id="item.id"
+      :key="groupData.id"
+      :data-id="groupData.id"
       :index="groupIndex"
-      :style="useComponentStyle(item.attr, groupIndex)"
-      :item="item"
-      @click="mouseClickHandle($event, item)"
-      @mousedown="mousedownHandle($event, item)"
-      @mouseenter="mouseenterHandle($event, item)"
-      @mouseleave="mouseleaveHandle($event, item)"
-      @contextmenu="handleContextMenu($event, item, undefined, undefined, pickOptionsList)"
+      :item="groupData"
+      :style="{
+        ...useComponentStyle(groupData.attr, groupIndex),
+        ...useSizeStyle(groupData.attr),
+        ...getFilterStyle(groupData.styles),
+        ...getTransformStyle(groupData.styles)
+      }"
+      @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"
-        :class="animationsClass(item.styles.animations)"
-        :is="item.chartConfig.chartKey"
-        :chartConfig="item"
-        :themeSetting="themeSetting"
-        :themeColor="themeColor"
+      <!-- 组合组件 -->
+      <edit-shape-box
+        v-for="item in groupData.groupList"
+        :key="item.id"
+        :data-id="item.id"
+        :index="groupIndex"
+        :item="item"
         :style="{
-          ...useSizeStyle(item.attr),
-          ...getFilterStyle(item.styles),
-          ...getTransformStyle(item.styles)
+          ...useComponentStyle(item.attr, groupIndex)
         }"
-      ></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)"