diff --git a/package.json b/package.json index 5908446bf69e9a22104c7ed613cd118d6929c2ab..24bab76053743f3941e4cbc892fd7de400bf63d0 100644 --- a/package.json +++ b/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", diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 153dc6af91ff0dceb2e669d9d6e5ac05a8b450d2..8b80eced1902f1dfba7b8293c7e228b6b9547a81 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/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index a285cf1387483f1f5a4a74d9136bb8189d19cfd1..ddccc09d8516d77ddf4988328877d2985aeace83 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -104,5 +104,5 @@ export class PublicGroupConfigClass extends publicConfig implements CreateCompon // 鏍囪瘑 public id = getUUID() // 鍩烘湰淇℃伅 - public attr = { w: 0, h: 0, x: 0, y: 0, zIndex: -1 } + public attr = { w: 0, h: 0, x: 0, y: 0, offsetX: 0, offsetY: 0, zIndex: -1 } } diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 56e2d6ad56413b653d74788a93905fac7e236246..b919db14f0ce7b2f97c3d455216973d1ee5c5a42 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -25,7 +25,10 @@ export const chartInitConfig = { x: 50, y: 50, w: 500, - h: 300 + h: 300, + // 涓嶅缓璁姩 offset + offsetX: 0, + offsetY: 0, } // dialog 鍥炬爣鐨勫ぇ灏� diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index e8ebcaa3c6a7b9b7c05351e3ac9824056bc0c96b..68c77dec8b2f61241888fb4319fd1d371b173767 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -337,6 +337,28 @@ export const useChartEditStore = defineStore({ loadingError() } }, + // * 閲嶇疆缁勪欢浣嶇疆 + resetComponentPosition(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: Array<CreateComponentType | CreateComponentGroupType>) { + chartHistoryStore.createMoveHistory(item) + }, // * 鏇存柊缁勪欢鍒楄〃鏌愪竴椤圭殑鍊� updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { if (index < 1 && index > this.getComponentList.length) return @@ -554,6 +576,15 @@ export const useChartEditStore = defineStore({ return } + // 澶勭悊绉诲姩 + const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE + if (isMove) { + historyData.forEach(item => { + this.resetComponentPosition(item, isForward) + }) + return + } + // 澶勭悊灞傜骇 const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM @@ -586,12 +617,12 @@ export const useChartEditStore = defineStore({ if (isGroup || isUnGroup) { if ((isGroup && isForward) || (isUnGroup && !isForward)) { const ids: string[] = [] - if(historyData.length > 1) { + if (historyData.length > 1) { historyData.forEach(item => { ids.push(item.id) }) } else { - (historyData[0] as CreateComponentGroupType).groupList.forEach(item => { + ;(historyData[0] as CreateComponentGroupType).groupList.forEach(item => { ids.push(item.id) }) } @@ -599,7 +630,7 @@ export const useChartEditStore = defineStore({ return } // 閮介渶浣跨敤瀛愮粍浠剁殑id鍘昏В缁� - if(historyData.length > 1) { + if (historyData.length > 1) { this.setUnGroup([(historyData[0] as CreateComponentType).id], undefined, false) } else { this.setUnGroup([(historyData[0] as CreateComponentGroupType).groupList[0].id], undefined, false) diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index 21cd161f6d2d3111975e4099edc55a40ba75f1b7..e65f5c6d995c8210e59e59c441007642319b0440 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -85,6 +85,8 @@ const canvasPositionList = computed(() => { h: cloneDeep(chartEditStore.getEditCanvasConfig.height), x: 0, y: 0, + offsetX: 0, + offsetY: 0, zIndex: 0 } } diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue index e307e1186883b68ef991975ac4e99e863dd99987..1a8df6c7487c00f73238f3c36f0511eed50664f4 100644 --- a/src/views/chart/ContentEdit/components/EditSelect/index.vue +++ b/src/views/chart/ContentEdit/components/EditSelect/index.vue @@ -41,7 +41,10 @@ watch( // 瀹� w: 0, // 楂� - h: 0 + h: 0, + // 鍋忕Щ + offsetX: 0, + offsetY: 0 } // 澶勭悊浣嶇疆 diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index ed15914fad60c8368d9189123be62aa91504f07c..2e2218b682c0e6c7fe3ec51ad5a26b030d69df20 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/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() @@ -111,7 +111,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale) selectAttr.y1 = startOffsetY selectAttr.x2 = startOffsetX - selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY ) / scale) + selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale) // 宸︿笅鏂瑰悜 } else { // 宸︿笂鏂瑰悜 @@ -222,6 +222,16 @@ export const useMouseHandle = () => { const startX = e.screenX const startY = e.screenY + // 璁板綍鍘嗗彶浣嶇疆 + let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = [] + chartEditStore.getTargetChart.selectId.forEach(id => { + if (!targetMap.has(id)) return + + const index = chartEditStore.fetchTargetIndex(id) + // 鎷垮埌鍒濆浣嶇疆鏁版嵁 + prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index])) + }) + // 璁板綍鍒濆浣嶇疆 chartEditStore.setMousePosition(undefined, undefined, startX, startY) @@ -267,6 +277,24 @@ export const useMouseHandle = () => { const mouseup = () => { chartEditStore.setMousePosition(0, 0, 0, 0) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) + // 鍔犲叆鍘嗗彶鏍� + if (prevComponentInstance.length) { + chartEditStore.getTargetChart.selectId.forEach(id => { + if (!targetMap.has(id)) return + const index = chartEditStore.fetchTargetIndex(id) + const curComponentInstance = chartEditStore.getComponentList[index] + // 鎵惧埌璁板綍鐨勬墍閫夌粍浠� + prevComponentInstance.forEach(preItem => { + if (preItem.id === id) { + preItem.attr = Object.assign(preItem.attr, { + offsetX: curComponentInstance.attr.x - preItem.attr.x, + offsetY: curComponentInstance.attr.y - preItem.attr.y + }) + } + }) + }) + chartEditStore.moveComponentList(prevComponentInstance) + } document.removeEventListener('mousemove', mousemove) document.removeEventListener('mouseup', mouseup) }