perf: 解耦移动相关后退、前进逻辑

src/packages/index.d.ts

@@ -63,7 +63,7 @@ export enum FilterEnum {
 export interface PublicConfigType {
   id: string
   isGroup: boolean
-  attr: { x: number; y: number; w: number; h: number; zIndex: number }
+  attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; }
   styles: {
     [FilterEnum.OPACITY]: number
     [FilterEnum.SATURATE]: number

src/store/modules/chartEditStore/chartEditStore.ts

@@ -314,14 +314,21 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 重置组件位置
-    resetComponentPostion(item: CreateComponentType | CreateComponentGroupType):void{
+    resetComponentPostion(item: CreateComponentType | CreateComponentGroupType, isForward: boolean):void{
       const index = this.fetchTargetIndex(item.id)
       if(index > -1){
         const componentInstance = this.getComponentList[index]
-        componentInstance.attr = Object.assign(componentInstance.attr, {
+        if(isForward){
-          x: item.attr.x,
+          componentInstance.attr = Object.assign(componentInstance.attr, {
-          y: item.attr.y
+            x: item.attr.x + item.attr.offsetX,
-        })
+            y: item.attr.y + item.attr.offsetY
+          })
+        }else{
+          componentInstance.attr = Object.assign(componentInstance.attr, {
+            x: item.attr.x,
+            y: item.attr.y
+          })
+        }
       }
     },
     // * 移动组件
@@ -549,7 +556,7 @@ export const useChartEditStore = defineStore({
       const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE
       if(isMove){
         historyData.forEach(item => {
-          this.resetComponentPostion(item)
+          this.resetComponentPostion(item, isForward)
         })
         return
       }

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import { editHistoryMax } from '@/settings/designSetting'
 import {
@@ -11,7 +10,6 @@ import {
   HistoryItemType,
   ChartHistoryStoreType
 } from './chartHistoryStore.d'
-import { cloneDeep } from 'lodash'
 
 export const useChartHistoryStore = defineStore({
   id: 'useChartHistoryStore',
@@ -97,33 +95,12 @@ export const useChartHistoryStore = defineStore({
         // 排除画布初始化
         if (this.getBackStack.length > 1) {
           const targetData = this.popBackStackItem()
-          // 移动时逻辑单独处理
+          if (!targetData) {
-          const isMove  = targetData?.actionType === HistoryActionTypeEnum.MOVE
+            loadingFinish()
-          if(isMove){
+            return
-            const chartEditStore = useChartEditStore()
-            // 将当前状态存入前进栈
-            const curTargetData:HistoryItemType = cloneDeep(targetData)
-            curTargetData.historyData.forEach(item  => {
-              if(item.id){
-                const index = chartEditStore.fetchTargetIndex(item.id)
-                if(index > -1){
-                  const componentInstance = chartEditStore.getComponentList[index]
-                  item.attr = Object.assign(item.attr, {
-                    x: componentInstance.attr.x,
-                    y: componentInstance.attr.y
-                  })
-                }
-              }
-            })
-            this.pushForwardStack(curTargetData)
-          }else{
-            if (!targetData) {
-              loadingFinish()
-              return
-            }
-            // 移除记录到前进栈
-            this.pushForwardStack(targetData)
           }
+          // 移除记录到前进堆
+          this.pushForwardStack(targetData)
           loadingFinish()
           return targetData
         }
@@ -138,34 +115,12 @@ export const useChartHistoryStore = defineStore({
         loadingStart()
         if (this.getForwardStack.length) {
           const targetData = this.popForwardStack()
-          // 移动时逻辑单独处理
+          if (!targetData) {
-          const isMove  = targetData?.actionType === HistoryActionTypeEnum.MOVE
+            loadingFinish()
-          if(isMove){
+            return
-            const chartEditStore = useChartEditStore()
-            // 将当前状态存入后退栈
-            const curTargetData:HistoryItemType = cloneDeep(targetData)
-            curTargetData.historyData.forEach(item  => {
-              if(item.id){
-                const index = chartEditStore.fetchTargetIndex(item.id)
-                if(index > -1){
-                  const componentInstance = chartEditStore.getComponentList[index]
-                  item.attr = Object.assign(item.attr, {
-                    x: componentInstance.attr.x,
-                    y: componentInstance.attr.y
-                  })
-                }
-              }
-            })
-            this.pushBackStackItem(curTargetData, true)
-          }else{
-            if (!targetData) {
-              loadingFinish()
-              return
-            }
-            // 放入后退栈
-            this.pushBackStackItem(targetData, true)
           }
-          
+          // 放入后退栈
+          this.pushBackStackItem(targetData, true)
           loadingFinish()
           return targetData
         }

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

@@ -279,6 +279,15 @@ export const useMouseHandle = () => {
       chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
       // 加入历史栈
       if(prevComponentInstance){
+        chartEditStore.getTargetChart.selectId.forEach(id => {
+          if (!targetMap.has(id)) return
+          const index = chartEditStore.fetchTargetIndex(id)
+          const curComponentInstance = chartEditStore.getComponentList[index]
+          prevComponentInstance.attr = Object.assign(prevComponentInstance.attr, {
+            offsetX: curComponentInstance.attr.x - prevComponentInstance.attr.x,
+            offsetY: curComponentInstance.attr.y - prevComponentInstance.attr.y
+          })
+        })
         chartEditStore.moveComponentList(prevComponentInstance)
       }
       document.removeEventListener('mousemove', mousemove)