feat: 新增复制粘贴功能

src/store/modules/chartHistoryStore/chartHistoryDefine.ts

@@ -0,0 +1,16 @@
+import {
+  HistoryTargetTypeEnum,
+  HistoryActionTypeEnum
+} from './chartHistoryStore.d'
+
+export const historyActionTypeName = {
+  [HistoryActionTypeEnum.ADD]: '新增图表',
+  [HistoryActionTypeEnum.DELETE]: '删除图表',
+  [HistoryActionTypeEnum.UPDATE]: '修改属性',
+  [HistoryActionTypeEnum.MOVE]: '移动图表',
+  [HistoryActionTypeEnum.PASTE]: '粘贴图表',
+  [HistoryActionTypeEnum.LARYER]: '改变层级',
+  [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
+  
+  [HistoryTargetTypeEnum.CANVAS]: '画布初始化'
+}

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

@@ -1,28 +1,56 @@
 import { CreateComponentType } from '@/packages/index.d'
+import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 
 // 操作类型枚举
-export enum HistoryTypeEnum {
+export enum HistoryActionTypeEnum {
+  // 新增
   ADD = 'add',
+  // 删除
   DELETE = 'delete',
+  // 更新（位置，属性）
+  UPDATE = 'update',
+  // 移动
   MOVE = 'move',
+  // 粘贴
+  PASTE = 'paste',
+  // 改变层级
+  LARYER = 'laryer',
+  // 选择历史记录
   SELECT_HISTORY = 'selectHistory'
 }
 
+// 对象类型
+export enum HistoryTargetTypeEnum {
+  CANVAS = 'canvas',
+  CHART = 'chart'
+}
+
 // 历史栈
 export enum HistoryStackEnum {
-  BACK_STACK= 'backStack',
-  FORWARD_STACK= 'forwardStack',
+  BACK_STACK = 'backStack',
+  FORWARD_STACK = 'forwardStack'
+}
+
+// 历史记录项
+export enum HistoryStackItemEnum {
+  ID = 'id',
+  TARGET_TYPE = 'targetType',
+  ACTION_TYPE = 'actionType',
+  HISTORY_DATA = 'historyData'
 }
 
 // 历史记录项类型
-export interface HistoryItemType extends  CreateComponentType {
-  historyType: HistoryTypeEnum
+export interface HistoryItemType {
+  [HistoryStackItemEnum.ID]: string
+  [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
+  [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
+  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | ChartLayoutType
 }
 
 // 历史 Store 类型
 export interface ChartHistoryStoreType {
   // 后退栈
-  [HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>,
+  [HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>
   // 前进栈
-  [HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>,
-}
+  [HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>
+}

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+import { CreateComponentType } from '@/packages/index.d'
+import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import {
+  HistoryStackEnum,
+  HistoryStackItemEnum,
+  HistoryActionTypeEnum,
+  HistoryTargetTypeEnum,
+  HistoryItemType,
+  ChartHistoryStoreType
+} from './chartHistoryStore.d'
+
+export const useChartHistoryStoreStore = defineStore({
+  id: 'useChartHistoryStore',
+  state: (): ChartHistoryStoreType => ({
+    // 后退栈（记录栈）
+    backStack: [],
+    // 前进栈
+    forwardStack: []
+  }),
+  getters: {
+    getBackStack(): Array<HistoryItemType> {
+      return this.backStack
+    },
+    getForwardStack(): Array<HistoryItemType> {
+      return this.forwardStack
+    }
+  },
+  actions: {
+    /**
+     * * 新增记录并插入栈
+     * @param item 图表实例
+     * @param actionType 动作类型
+     * @param targetType 对象类型（默认图表）
+     */
+    createStackItem(item: CreateComponentType | ChartLayoutType, actionType: HistoryActionTypeEnum, targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART) {
+      this.pushBackStackItem({
+        [HistoryStackItemEnum.ID]: new Date().getTime().toString(),
+        [HistoryStackItemEnum.HISTORY_DATA]: item,
+        [HistoryStackItemEnum.ACTION_TYPE]: actionType,
+        [HistoryStackItemEnum.TARGET_TYPE]: targetType,
+      })
+    },
+    // * 画布初始化
+    canvasInit(canvas: ChartLayoutType) {
+      this.createStackItem(canvas, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS)
+    },
+    // * 推入记录栈
+    pushBackStackItem(item: HistoryItemType | Array<HistoryItemType>): void {
+      if (item instanceof Array) this.backStack = [...this.backStack, ...item]
+      else this.backStack.push(item)
+    },
+    // * 推入前进栈
+    pushForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
+      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)
+      }
+      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)
+      }
+      if (this.forwardStack.length > 0) {
+        return this.forwardStack.pop()
+      }
+    },
+    // * 新增组件记录
+    createAddHistory(item: CreateComponentType) {
+      this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART)
+    },
+    // * 更新属性记录（大小、图表属性）
+    createUpdateHistory(item: CreateComponentType) {
+      this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART)
+    },
+    // * 删除组件记录
+    createDeleteHistory(item: CreateComponentType) {
+      this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART)
+    },
+    // * 移动组件记录
+    createMoveHistory(item: CreateComponentType) {
+      this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART)
+    },
+    // * 改变层级组件记录
+    createLaryerHistory(item: CreateComponentType) {
+      this.createStackItem(item, HistoryActionTypeEnum.LARYER, HistoryTargetTypeEnum.CHART)
+    },
+    // * 粘贴组件记录
+    createPasteHistory(item: CreateComponentType) {
+      this.createStackItem(item, HistoryActionTypeEnum.PASTE, HistoryTargetTypeEnum.CHART)
+    },
+  }
+})

src/store/modules/chartHistoryStore/chartHistoryStore}.ts

@@ -1,62 +0,0 @@
-import { defineStore } from 'pinia'
-import {
-  HistoryStackEnum,
-  HistoryItemType,
-  ChartHistoryStoreType
-} from './chartHistoryStore.d'
-import { setLocalStorage, getLocalStorage } from '@/utils'
-import { StorageEnum } from '@/enums/storageEnum'
-
-export const useChartHistoryStoreStore = defineStore({
-  id: 'useChartHistoryStore',
-  state: (): ChartHistoryStoreType => ({
-    // 后退栈（记录栈）
-    backStack: [],
-    // 前进栈
-    forwardStack: []
-  }),
-  getters: {
-    getBackStack(): Array<HistoryItemType> {
-      return this.backStack
-    },
-    getForwardStack(): Array<HistoryItemType> {
-      return this.forwardStack
-    }
-  },
-  actions: {
-    // * 推入记录栈
-    addBackStackItem(item: HistoryItemType | Array<HistoryItemType>): void {
-      if(item instanceof Array) this.backStack = [...this.backStack, ...item]
-      else this.backStack.push(item)
-    },
-    // * 推入前进栈
-    addForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
-      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)
-      }
-      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)
-      }
-      if (this.forwardStack.length > 0) {
-        return this.forwardStack.pop()
-      }
-    }
-  }
-})