diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 153dc6af..8b80eced 100644 --- a/src/packages/index.d.ts +++ b/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 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index c694436d..4a50a7eb 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/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, { - x: item.attr.x, - y: item.attr.y - }) + 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 + }) + } } }, // * 移动组件 @@ -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 } diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 5f2f44df..b8627ca6 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/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() - // 移动时逻辑单独处理 - const isMove = targetData?.actionType === HistoryActionTypeEnum.MOVE - if(isMove){ - 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) + if (!targetData) { + loadingFinish() + return } + // 移除记录到前进堆 + this.pushForwardStack(targetData) loadingFinish() return targetData } @@ -138,34 +115,12 @@ export const useChartHistoryStore = defineStore({ loadingStart() if (this.getForwardStack.length) { const targetData = this.popForwardStack() - // 移动时逻辑单独处理 - const isMove = targetData?.actionType === HistoryActionTypeEnum.MOVE - if(isMove){ - 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) + if (!targetData) { + loadingFinish() + return } - + // 放入后退栈 + this.pushBackStackItem(targetData, true) loadingFinish() return targetData } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 1caac641..b6b1b61d 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/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)