!29 fix: 解决组件移动未加入历史栈

Merge pull request !29 from Furoe/dev

package.json

@@ -12,6 +12,7 @@
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
+    "@types/lodash": "^4.14.184",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "color": "^4.2.3",

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

@@ -313,6 +313,28 @@ export const useChartEditStore = defineStore({
         loadingError()
       }
     },
+    // * 重置组件位置
+    resetComponentPostion(item: CreateComponentType | CreateComponentGroupType, isForward: boolean):void{
+      const index = this.fetchTargetIndex(item.id)
+      if(index > -1){
+        const componentInstance = this.getComponentList[index]
+        if(isForward){
+          componentInstance.attr = Object.assign(componentInstance.attr, {
+            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
+          })
+        }
+      }
+    },
+    // * 移动组件
+    moveComponentList(item: CreateComponentType | CreateComponentGroupType){
+      chartHistoryStore.createMoveHistory([item])
+    },
     // * 更新组件列表某一项的值
     updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
       if (index < 1 && index > this.getComponentList.length) return
@@ -530,6 +552,15 @@ export const useChartEditStore = defineStore({
         return
       }
 
+      // 处理移动
+      const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE
+      if(isMove){
+        historyData.forEach(item => {
+          this.resetComponentPostion(item, isForward)
+        })
+        return
+      }
+
       // 处理层级
       const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP
       const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM

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

@@ -7,7 +7,7 @@ import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
-import throttle from 'lodash/throttle'
+import { throttle, cloneDeep } from 'lodash'
 
 const chartEditStore = useChartEditStore()
 const { onClickOutSide } = useContextMenu()
@@ -222,6 +222,16 @@ export const useMouseHandle = () => {
     const startX = e.screenX
     const startY = e.screenY
 
+    // 记录历史位置
+    let prevComponentInstance:CreateComponentType | CreateComponentGroupType
+    chartEditStore.getTargetChart.selectId.forEach(id => {
+      if (!targetMap.has(id)) return
+
+      const index = chartEditStore.fetchTargetIndex(id)
+      // 拿到初始位置数据
+      prevComponentInstance = cloneDeep(chartEditStore.getComponentList[index])
+    })
+
     // 记录初始位置
     chartEditStore.setMousePosition(undefined, undefined, startX, startY)
 
@@ -267,6 +277,19 @@ export const useMouseHandle = () => {
     const mouseup = () => {
       chartEditStore.setMousePosition(0, 0, 0, 0)
       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)
       document.removeEventListener('mouseup', mouseup)
     }