feat: 新增多选的历史记录处理

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -117,7 +117,7 @@ export type TargetChartType = {
 
 // 数据记录
 export type RecordChartType = {
-  charts: CreateComponentType | CreateComponentType[] | CreateComponentGroupType
+  charts: CreateComponentType | CreateComponentGroupType | Array<CreateComponentType | CreateComponentGroupType>
   type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY
 }
 

src/store/modules/chartEditStore/chartEditStore.ts

@@ -252,41 +252,60 @@ export const useChartEditStore = defineStore({
     // * 统一格式化处理入参 id
     idPreFormat(id?: string | string[]) {
       const idArr = []
-      if (!id) idArr.push(...this.getTargetChart.selectId)
+      if (!id) {
+        idArr.push(...this.getTargetChart.selectId)
+        return idArr
+    }
       if (isString(id)) idArr.push(id)
       if (isArray(id)) idArr.push(...id)
       return idArr
     },
     /**
      * * 新增组件列表
-     * @param chartConfig 新图表实例
+     * @param componentInstance 新图表实例
      * @param isHead 是否头部插入
      * @param isHistory 是否进行记录
      * @returns
      */
-    addComponentList(chartConfig: CreateComponentType | CreateComponentGroupType, isHead = false, isHistory = false): void {
+     addComponentList(
+      componentInstance:
+        | CreateComponentType
+        | CreateComponentGroupType
+        | CreateComponentType[]
+        | CreateComponentGroupType[],
+      isHead = false,
+      isHistory = false
+    ): void {
+      if(componentInstance instanceof Array) {
+        componentInstance.forEach(item => {
+          this.addComponentList(item, isHead, isHistory)
+        })
+        return
+      }
       if (isHistory) {
-        chartHistoryStore.createAddHistory(chartConfig)
+        chartHistoryStore.createAddHistory([componentInstance])
       }
       if (isHead) {
-        this.componentList.unshift(chartConfig)
+        this.componentList.unshift(componentInstance)
         return
       }
-      this.componentList.push(chartConfig)
+      this.componentList.push(componentInstance)
     },
     // * 删除组件
     removeComponentList(id?:string | string[], isHistory = true): void {
       try {
         loadingStart()
         const idArr = this.idPreFormat(id)
+        const history: Array<CreateComponentType | CreateComponentGroupType> = []
         // 遍历所有对象
         idArr.forEach(ids => {
           const index  = this.fetchTargetIndex(ids)
           if (index !== -1) {
-            isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
+            history.push(this.getComponentList[index])
             this.componentList.splice(index, 1)
           }
         })
+        isHistory && chartHistoryStore.createDeleteHistory(history)
         loadingFinish()
         return
       } catch(value) {
@@ -331,8 +350,8 @@ export const useChartEditStore = defineStore({
           }
 
           // 记录原有位置
-          const setIndex = (t:CreateComponentType | CreateComponentGroupType, i:number) => {
-            const temp = cloneDeep(t)
+          const setIndex = (componentInstance:CreateComponentType | CreateComponentGroupType, i:number) => {
+            const temp = cloneDeep(componentInstance)
             temp.attr.zIndex = i
             return temp
           }
@@ -340,7 +359,7 @@ export const useChartEditStore = defineStore({
           // 历史记录
           if (isHistory) {
             chartHistoryStore.createLayerHistory(
-              setIndex(targetData, index),
+              [setIndex(targetData, index)],
               isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP
             )
           }
@@ -391,7 +410,7 @@ export const useChartEditStore = defineStore({
           // 历史记录
           if (isHistory) {
             chartHistoryStore.createLayerHistory(
-              targetItem,
+              [targetItem],
               isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP
             )
           }
@@ -482,45 +501,54 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 撤回/前进 目标处理
-    setBackAndSetForwardHandle(item: HistoryItemType, isForward = false) {
+    setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
       // 处理画布
-      if (item.targetType === HistoryTargetTypeEnum.CANVAS) {
-        this.editCanvas = item.historyData as EditCanvasType
+      if (HistoryItem.targetType === HistoryTargetTypeEnum.CANVAS) {
+        this.editCanvas = HistoryItem.historyData[0] as EditCanvasType
         return
       }
 
-      const historyData = item.historyData as CreateComponentType
+      let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
+      if(isArray(historyData)) {
+        // 选中目标元素，支持多个
+        historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
+          this.setTargetSelectChart(item.id, true)
+        })
+      }
 
       // 处理新增类型
-      const isAdd = item.actionType === HistoryActionTypeEnum.ADD
-      const isDel = item.actionType === HistoryActionTypeEnum.DELETE
-      this.setTargetSelectChart(historyData.id)
+      const isAdd = HistoryItem.actionType === HistoryActionTypeEnum.ADD
+      const isDel = HistoryItem.actionType === HistoryActionTypeEnum.DELETE
       if (isAdd || isDel) {
         if ((isAdd && isForward) || (isDel && !isForward)) {
-          this.addComponentList(historyData)
-          return  
+          historyData.forEach(item => {
+            this.addComponentList(item)
+          })
+          return
         }
-        this.removeComponentList(undefined, false)
+        historyData.forEach(item => {
+          this.removeComponentList(item.id, false)
+        })
         return
       }
 
       // 处理层级
-      const isTop = item.actionType === HistoryActionTypeEnum.TOP
-      const isBottom = item.actionType === HistoryActionTypeEnum.BOTTOM
+      const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP
+      const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM
       if (isTop || isBottom) {
         if (!isForward) {
           // 插入到原有位置
           if (isTop) this.getComponentList.pop()
           if (isBottom) this.getComponentList.shift()
-          this.getComponentList.splice(historyData.attr.zIndex, 0, historyData)
+          this.getComponentList.splice(historyData[0].attr.zIndex, 0, historyData[0])
           return
         }
         if (isTop) this.setTop(false)
         if (isBottom) this.setBottom(false)
       }
 
-      const isUp = item.actionType === HistoryActionTypeEnum.UP
-      const isDown = item.actionType === HistoryActionTypeEnum.DOWN
+      const isUp = HistoryItem.actionType === HistoryActionTypeEnum.UP
+      const isDown = HistoryItem.actionType === HistoryActionTypeEnum.DOWN
       if (isUp || isDown) {
         if ((isUp && isForward) || (isDown && !isForward)) {
           this.setUp(false)
@@ -530,8 +558,17 @@ export const useChartEditStore = defineStore({
         return
       }
 
-      // 处理内容修改
-      this.getComponentList[this.fetchTargetIndex()] = item.historyData as CreateComponentType
+      // 处理分组
+      const isGroup = HistoryItem.actionType === HistoryActionTypeEnum.GROUP
+      const isUnGroup = HistoryItem.actionType === HistoryActionTypeEnum.UN_GROUP
+      if (isGroup || isUnGroup) {
+        if ((isGroup && isForward) || (isUnGroup && !isForward)) {
+          this.setGroup(false)
+          return
+        }
+        this.setUnGroup([historyData[0].id], undefined, false)
+        return
+      }
     },
     // * 撤回
     setBack() {
@@ -542,13 +579,6 @@ export const useChartEditStore = defineStore({
           loadingFinish()
           return
         }
-        if (Array.isArray(targetData)) {
-          targetData.forEach((e: HistoryItemType) => {
-            this.setBackAndSetForwardHandle(e)
-          })
-          loadingFinish()
-          return
-        }
         this.setBackAndSetForwardHandle(targetData)
         loadingFinish()
 
@@ -565,13 +595,6 @@ export const useChartEditStore = defineStore({
           loadingFinish()
           return
         }
-        if (Array.isArray(targetData)) {
-          targetData.forEach((e: HistoryItemType) => {
-            this.setBackAndSetForwardHandle(e, true)
-          })
-          loadingFinish()
-          return
-        }
         this.setBackAndSetForwardHandle(targetData, true)
         loadingFinish()
 
@@ -599,9 +622,9 @@ export const useChartEditStore = defineStore({
           attr.x -= distance
           break;
       }
-    }, 
+    },
     // * 创建分组
-    setGroup() {
+    setGroup(isHistory = true) {
       try {
         const selectIds = this.getTargetChart.selectId
         if (selectIds.length < 2) return 
@@ -628,7 +651,7 @@ export const useChartEditStore = defineStore({
                 newSelectIds.push(e.id)
               })
             }, false)
-          } else {
+          } else if (targetIndex !== -1) {
             newSelectIds.push(id)
           }
         })
@@ -649,6 +672,9 @@ export const useChartEditStore = defineStore({
           targetList.push(item)
         })
 
+        // 修改原数据之前，先记录
+        if(isHistory) chartHistoryStore.createGroupHistory(targetList)
+
         // 设置子组件的位置
         targetList.forEach((item: CreateComponentType) => {
           item.attr.x = item.attr.x - groupAttr.l

src/store/modules/chartHistoryStore/chartHistoryDefine.ts

@@ -15,6 +15,8 @@ export const historyActionTypeName = {
   [HistoryActionTypeEnum.BOTTOM]: '层级置底',
   [HistoryActionTypeEnum.UP]: '层级上移',
   [HistoryActionTypeEnum.DOWN]: '层级下移',
+  [HistoryActionTypeEnum.GROUP]: '创建分组',
+  [HistoryActionTypeEnum.UN_GROUP]: '解除分组',
   [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
   
   [HistoryTargetTypeEnum.CANVAS]: '画布初始化'

src/store/modules/chartHistoryStore/chartHistoryStore.d.ts

@@ -56,10 +56,10 @@ export enum HistoryStackItemEnum {
 // 历史记录项类型
 export interface HistoryItemType {
   // 会有同时操作多个组件场景
-  [HistoryStackItemEnum.ID]: string | string[]
+  [HistoryStackItemEnum.ID]: string
   [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
   [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
-  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | CreateComponentGroupType | EditCanvasType
+  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType[] | CreateComponentGroupType[] | EditCanvasType[]
 }
 
 // 历史 Store 类型

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -35,31 +35,26 @@ export const useChartHistoryStore = defineStore({
      * @param targetType 对象类型（默认图表）
      */
     createStackItem(
-      item: CreateComponentType | CreateComponentGroupType | EditCanvasType,
+      item: CreateComponentType[] | CreateComponentGroupType[] | EditCanvasType[],
       actionType: HistoryActionTypeEnum,
       targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART
     ) {
-      // 优化性能转为freeze
-      this.pushBackStackItem(Object.freeze({
-        [HistoryStackItemEnum.ID]: new Date().getTime().toString(),
-        [HistoryStackItemEnum.HISTORY_DATA]: item,
-        [HistoryStackItemEnum.ACTION_TYPE]: actionType,
-        [HistoryStackItemEnum.TARGET_TYPE]: targetType
-      } as const))
+      // 优化性能转为 freeze
+      this.pushBackStackItem(
+        Object.freeze({
+          [HistoryStackItemEnum.ID]: new Date().getTime().toString(),
+          [HistoryStackItemEnum.HISTORY_DATA]: item,
+          [HistoryStackItemEnum.ACTION_TYPE]: actionType,
+          [HistoryStackItemEnum.TARGET_TYPE]: targetType
+        } as const)
+      )
     },
     // * 画布初始化
     canvasInit(canvas: EditCanvasType) {
-      this.createStackItem(
-        canvas,
-        HistoryActionTypeEnum.ADD,
-        HistoryTargetTypeEnum.CANVAS
-      )
+      this.createStackItem([canvas], HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS)
     },
     // * 推入后退栈
-    pushBackStackItem(
-      item: HistoryItemType | Array<HistoryItemType>,
-      notClear = false
-    ): void {
+    pushBackStackItem(item: HistoryItemType | Array<HistoryItemType>, notClear = false): void {
       if (item instanceof Array) this.backStack = [...this.backStack, ...item]
       else this.backStack.push(item)
       this.backStack.splice(0, this.backStack.length - editHistoryMax)
@@ -69,30 +64,17 @@ export const useChartHistoryStore = defineStore({
     },
     // * 推入前进栈
     pushForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
-      if (item instanceof Array)
-        this.forwardStack = [...this.forwardStack, ...item]
+      if (item instanceof Array) this.forwardStack = [...this.forwardStack, ...item]
       else this.forwardStack.push(item)
     },
     // * 移出后退栈
-    popBackStackItem(
-      index?: number
-    ): HistoryItemType[] | HistoryItemType | undefined {
-      const length = this.backStack.length
-      if (index && length >= index) {
-        return this.backStack.splice(-index)
-      }
+    popBackStackItem(): HistoryItemType | undefined {
       if (this.backStack.length > 0) {
         return this.backStack.pop()
       }
     },
     // * 移出前进栈
-    popForwardStack(
-      index?: number
-    ): HistoryItemType[] | HistoryItemType | undefined {
-      const length = this.forwardStack.length
-      if (index && length >= index) {
-        return this.forwardStack.splice(-index)
-      }
+    popForwardStack(): HistoryItemType | undefined {
       if (this.forwardStack.length > 0) {
         return this.forwardStack.pop()
       }
@@ -104,7 +86,7 @@ export const useChartHistoryStore = defineStore({
     // * 清空后退栈(保留初始化)
     clearBackStack() {
       const canvasHistory = this.getBackStack[0]
-      this.backStack =  [canvasHistory]
+      this.backStack = [canvasHistory]
     },
     // * 撤回
     backAction() {
@@ -148,59 +130,43 @@ export const useChartHistoryStore = defineStore({
       }
     },
     // * 新增组件记录
-    createAddHistory(item: CreateComponentType | CreateComponentGroupType) {
-      this.createStackItem(
-        item,
-        HistoryActionTypeEnum.ADD,
-        HistoryTargetTypeEnum.CHART
-      )
+    createAddHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART)
     },
     // * 更新属性记录（大小、图表属性）
-    createUpdateHistory(item: CreateComponentType | CreateComponentGroupType) {
-      this.createStackItem(
-        item,
-        HistoryActionTypeEnum.UPDATE,
-        HistoryTargetTypeEnum.CHART
-      )
+    createUpdateHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART)
     },
     // * 删除组件记录
-    createDeleteHistory(item: CreateComponentType | CreateComponentGroupType) {
-      this.createStackItem(
-        item,
-        HistoryActionTypeEnum.DELETE,
-        HistoryTargetTypeEnum.CHART
-      )
+    createDeleteHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART)
     },
     // * 移动组件记录
-    createMoveHistory(item: CreateComponentType | CreateComponentGroupType) {
-      this.createStackItem(
-        item,
-        HistoryActionTypeEnum.MOVE,
-        HistoryTargetTypeEnum.CHART
-      )
+    createMoveHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART)
     },
     // * 改变层级组件记录
     createLayerHistory(
-      item: CreateComponentType | CreateComponentGroupType,
+      item: Array<CreateComponentType | CreateComponentGroupType>,
       type:
         | HistoryActionTypeEnum.TOP
         | HistoryActionTypeEnum.DOWN
         | HistoryActionTypeEnum.UP
         | HistoryActionTypeEnum.BOTTOM
     ) {
-      this.createStackItem(
-        item,
-        type,
-        HistoryTargetTypeEnum.CHART
-      )
+      this.createStackItem(item, type, HistoryTargetTypeEnum.CHART)
     },
     // * 剪切组件记录
-    createPasteHistory(item: CreateComponentType | CreateComponentGroupType) {
-      this.createStackItem(
-        item,
-        HistoryActionTypeEnum.CUT,
-        HistoryTargetTypeEnum.CHART
-      )
+    createPasteHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.CUT, HistoryTargetTypeEnum.CHART)
+    },
+    // * 创建分组
+    createGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.GROUP, HistoryTargetTypeEnum.CHART)
+    },
+    // * 解除分组
+    createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.GROUP, HistoryTargetTypeEnum.CHART)
     }
   }
 })

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

@@ -96,7 +96,7 @@ const labelHandle = (e: HistoryItemType) => {
   } else if (e.actionType === HistoryActionTypeEnum.GROUP) {
     return `${historyActionTypeName[e.actionType]}`
   } else {
-    return `${historyActionTypeName[e.actionType]} - ${(e.historyData as CreateComponentType).chartConfig.title}`
+    return `${historyActionTypeName[e.actionType]} - ${(e.historyData[0] as CreateComponentType).chartConfig.title}`
   }
 }
 

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

@@ -136,6 +136,8 @@ export const useMouseHandle = () => {
       let offsetY = (moveEvent.screenY - startY) / scale
 
       chartEditStore.getTargetChart.selectId.forEach(id => {
+        if(!targetMap.has(id)) return
+        
         const index = chartEditStore.fetchTargetIndex(id)
         // 拿到初始位置数据
         const { x, y, w, h } = targetMap.get(id)