diff --git a/src/packages/utils/publicConfig.ts b/src/packages/utils/publicConfig.ts index 61965aa5..1fe3cb8b 100644 --- a/src/packages/utils/publicConfig.ts +++ b/src/packages/utils/publicConfig.ts @@ -1,15 +1,15 @@ import { getUUID } from '@/utils' import { PublicConfigType } from '@/packages/index.d' -export class publicConfig implements PublicConfigType{ +export class publicConfig implements PublicConfigType { public id = getUUID() // 重命名 public rename = undefined // 基本信息 - public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: 0 } + public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: -1 } // 设置坐标 public setPosition(x: number, y: number): void { this.attr.x = x this.attr.y = y } -} \ No newline at end of file +} diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index 12b2a54a..54232acd 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -17,6 +17,7 @@ import { NInput, NImage, NButton, + NButtonGroup, NForm, NFormItem, NCheckboxGroup, @@ -101,6 +102,7 @@ const naive = create({ NGradientText, NInput, NButton, + NButtonGroup, NForm, NFormItem, NCheckboxGroup, diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 149bdc65..07bf25ac 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -13,7 +13,7 @@ import { // 记录记录 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' -import { HistoryActionTypeEnum, HistoryItemType } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' +import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' const chartHistoryStoreStore = useChartHistoryStoreStore() @@ -115,22 +115,22 @@ export const useChartEditStoreStore = defineStore({ * @returns */ addComponentList(chartData: CreateComponentType, isEnd = false, isHistory = false): void { - if(isHistory) { + if (isHistory) { chartHistoryStoreStore.createAddHistory(chartData) } - if(isEnd) { + if (isEnd) { this.componentList.unshift(chartData) return } this.componentList.push(chartData) }, // * 删除组件列表 - removeComponentList(): void { + removeComponentList(isHistory = true): void { try { loadingStart() const index = this.fetchTargetIndex() if (index !== -1) { - chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index]) + isHistory ? chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index]) : undefined this.componentList.splice(index, 1) loadingFinish() return @@ -141,7 +141,7 @@ export const useChartEditStoreStore = defineStore({ }, // * 更新组件列表某一项的值 updateComponentList(index: number, newData: CreateComponentType) { - if(index < 1 && index > this.getComponentList.length) return + if (index < 1 && index > this.getComponentList.length) return this.componentList[index] = newData }, // * 设置页面样式属性 @@ -155,25 +155,41 @@ export const useChartEditStoreStore = defineStore({ } }, // * 移动组件列表位置到两端 - setBothEnds(isEnd = false): void { + setBothEnds(isEnd = false, isHistory = true): void { try { loadingStart() const length = this.getComponentList.length - if(length < 2) { + if (length < 2) { loadingFinish() return } const index = this.fetchTargetIndex() + const targetData = this.getComponentList[index] if (index !== -1) { // 置底排除最底层, 置顶排除最顶层 if ((isEnd && index === 0) || (!isEnd && index === length - 1 )) { loadingFinish() return } + + // 记录原有位置 + const setIndex = (t:CreateComponentType, i:number) => { + const temp = cloneDeep(t) + temp.attr.zIndex = i + return temp + } + + // 历史记录 + if (isHistory) { + chartHistoryStoreStore.createLaryerHistory( + setIndex(targetData, index), + isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP + ) + } + // 插入两端 - chartHistoryStoreStore.createLaryerHistory(this.getComponentList[index]) - this.addComponentList(this.getComponentList[index], isEnd) + this.addComponentList(targetData, isEnd) this.getComponentList.splice(isEnd ? index + 1: index, 1) loadingFinish() return @@ -183,15 +199,15 @@ export const useChartEditStoreStore = defineStore({ } }, // * 置顶 - setTop(): void { - this.setBothEnds() + setTop(isHistory = true): void { + this.setBothEnds(false, isHistory) }, // * 置底 - setBottom(): void { - this.setBothEnds(true) + setBottom(isHistory = true): void { + this.setBothEnds(true, isHistory) }, // * 互换图表位置 - wrap(isDown = false) { + wrap(isDown = false, isHistory = true) { try { loadingStart() const length = this.getComponentList.length @@ -212,10 +228,15 @@ export const useChartEditStoreStore = defineStore({ const targetItem = this.getComponentList[index] const swapItem = this.getComponentList[swapIndex] - chartHistoryStoreStore.createLaryerHistory(targetItem) + // 历史记录 + if (isHistory) { + chartHistoryStoreStore.createLaryerHistory( + targetItem, + isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP + ) + } this.updateComponentList(index, swapItem) this.updateComponentList(swapIndex, targetItem) - loadingFinish() return } @@ -224,12 +245,12 @@ export const useChartEditStoreStore = defineStore({ } }, // * 上移 - setUp() { - this.wrap() + setUp(isHistory = true) { + this.wrap(false, isHistory) }, // * 下移 - setDown() { - this.wrap(true) + setDown(isHistory = true) { + this.wrap(true, isHistory) }, // * 复制 setCopy(isCut = false) { @@ -279,7 +300,7 @@ export const useChartEditStoreStore = defineStore({ // 剪切需删除原数据 if (isCut) { this.setTargetSelectChart(e.id) - this.removeComponentList() + this.removeComponentList(true) } }) if (isCut) this.setRecordChart(undefined) @@ -288,7 +309,7 @@ export const useChartEditStoreStore = defineStore({ } // 单项 this.addComponentList(parseHandle(recordCharts.charts), undefined, true) - if(isCut) { + if (isCut) { this.setTargetSelectChart(recordCharts.charts.id) this.removeComponentList() this.setRecordChart(undefined) @@ -298,19 +319,62 @@ export const useChartEditStoreStore = defineStore({ loadingError() } }, - // 撤回处理 + // * 撤回/前进 目标处理 setBackAndSetForwardHandle(item: HistoryItemType, isForward = false) { - // 前进 - if (isForward) { + // 处理画布 + if (item.targetType === HistoryTargetTypeEnum.CANVAS) { + this.editCanvas = item.historyData as EditCanvasType return } - console.log(item); + + const historyData = item.historyData as CreateComponentType + + // 处理新增类型 + const isAdd = item.actionType === HistoryActionTypeEnum.ADD + const isDel = item.actionType === HistoryActionTypeEnum.DELETE + this.setTargetSelectChart(historyData.id) + if (isAdd || isDel) { + if ((isAdd && isForward) || (isDel && !isForward)) { + this.addComponentList(historyData) + return + } + this.removeComponentList(false) + return + } + + // 处理层级 + const isTop = item.actionType === HistoryActionTypeEnum.TOP + const isBottom = item.actionType === HistoryActionTypeEnum.BOTTOM + if (isTop || isBottom) { + if (!isForward) { + // 插入到原有位置 + if (isTop) this.getComponentList.pop() + if (isBottom) this.getComponentList.shift() + this.getComponentList.splice(historyData.attr.zIndex, 0, historyData) + return + } + if (isTop) this.setTop(false) + if (isBottom) this.setBottom(false) + } + + const isUp = item.actionType === HistoryActionTypeEnum.UP + const isDown = item.actionType === HistoryActionTypeEnum.DOWN + if (isUp || isDown) { + if ((isUp && isForward) || (isDown && !isForward)) { + this.setUp(false) + return + } + this.setDown(false) + return + } + + // 处理内容修改 + this.getComponentList[this.fetchTargetIndex()] = item.historyData as CreateComponentType }, // * 撤回 setBack() { try { loadingStart() - console.log('撤回'); const targetData = chartHistoryStoreStore.backAction() if (!targetData) { loadingFinish() @@ -334,7 +398,6 @@ export const useChartEditStoreStore = defineStore({ setForward() { try { loadingStart() - console.log('前进'); const targetData = chartHistoryStoreStore.forwardAction() if (!targetData) { loadingFinish() diff --git a/src/store/modules/chartHistoryStore/chartHistoryDefine.ts b/src/store/modules/chartHistoryStore/chartHistoryDefine.ts index b7ec76d7..8114bfb9 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryDefine.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryDefine.ts @@ -9,7 +9,12 @@ export const historyActionTypeName = { [HistoryActionTypeEnum.UPDATE]: '修改属性', [HistoryActionTypeEnum.MOVE]: '移动图表', [HistoryActionTypeEnum.PASTE]: '粘贴图表', - [HistoryActionTypeEnum.LARYER]: '改变层级', + [HistoryActionTypeEnum.COPY]: '复制图表', + [HistoryActionTypeEnum.CUT]: '剪切图表', + [HistoryActionTypeEnum.TOP]: '层级置顶', + [HistoryActionTypeEnum.BOTTOM]: '层级置底', + [HistoryActionTypeEnum.UP]: '层级上移', + [HistoryActionTypeEnum.DOWN]: '层级下移', [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录', [HistoryTargetTypeEnum.CANVAS]: '画布初始化' diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 253e104d..1aee786d 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -1,5 +1,5 @@ import { CreateComponentType } from '@/packages/index.d' -import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' +import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' // 操作类型枚举 export enum HistoryActionTypeEnum { @@ -17,8 +17,14 @@ export enum HistoryActionTypeEnum { CUT = 'cut', // 粘贴 PASTE = 'paste', - // 改变层级 - LARYER = 'laryer', + // 置顶 + TOP = 'top', + // 置底 + BOTTOM = 'bottom', + // 上移 + UP = 'up', + // 下移 + DOWN = 'down', // 选择历史记录 SELECT_HISTORY = 'selectHistory' } @@ -48,7 +54,7 @@ export interface HistoryItemType { [HistoryStackItemEnum.ID]: string [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum - [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | ChartLayoutType + [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType } // 历史 Store 类型 diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 6e387ffd..19b3b87d 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 } from '@/packages/index.d' -import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' -import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' +import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' import { loadingStart, loadingFinish, loadingError } from '@/utils' import { HistoryStackEnum, @@ -35,25 +34,36 @@ export const useChartHistoryStoreStore = defineStore({ * @param actionType 动作类型 * @param targetType 对象类型(默认图表) */ - createStackItem(item: CreateComponentType | ChartLayoutType, actionType: HistoryActionTypeEnum, targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART) { + createStackItem( + item: CreateComponentType | EditCanvasType, + 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, + [HistoryStackItemEnum.TARGET_TYPE]: targetType }) }, // * 画布初始化 - canvasInit(canvas: ChartLayoutType) { - this.createStackItem(canvas, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS) + canvasInit(canvas: EditCanvasType) { + this.createStackItem( + canvas, + HistoryActionTypeEnum.ADD, + HistoryTargetTypeEnum.CANVAS + ) }, // * 推入记录栈 - pushBackStackItem(item: HistoryItemType | Array, notClear = false): void { + pushBackStackItem( + item: HistoryItemType | Array, + notClear = false + ): void { if (item instanceof Array) this.backStack = [...this.backStack, ...item] else this.backStack.push(item) - + this.backStack.splice(0, this.backStack.length - 20) // 新动作需清空前进栈 - if(notClear) return + if (notClear) return this.clearForwardStack() }, // * 推入前进栈 @@ -63,7 +73,9 @@ export const useChartHistoryStoreStore = defineStore({ else this.forwardStack.push(item) }, // * 移出记录栈 - popBackStackItem( index?: number ): HistoryItemType[] | HistoryItemType | undefined { + popBackStackItem( + index?: number + ): HistoryItemType[] | HistoryItemType | undefined { const length = this.backStack.length if (index && length >= index) { return this.backStack.splice(-index) @@ -73,7 +85,9 @@ export const useChartHistoryStoreStore = defineStore({ } }, // * 移出前进栈 - popForwardStack( index?: number ): HistoryItemType[] | HistoryItemType | undefined { + popForwardStack( + index?: number + ): HistoryItemType[] | HistoryItemType | undefined { const length = this.forwardStack.length if (index && length >= index) { return this.forwardStack.splice(-index) @@ -96,7 +110,7 @@ export const useChartHistoryStoreStore = defineStore({ if (!targetData) { loadingFinish() return - } + } // 移除记录到前进堆 this.pushForwardStack(targetData) loadingFinish() @@ -116,7 +130,7 @@ export const useChartHistoryStoreStore = defineStore({ if (!targetData) { loadingFinish() return - } + } // 放入后退栈 this.pushBackStackItem(targetData, true) loadingFinish() @@ -129,27 +143,58 @@ export const useChartHistoryStoreStore = defineStore({ }, // * 新增组件记录 createAddHistory(item: CreateComponentType) { - this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART) + this.createStackItem( + item, + HistoryActionTypeEnum.ADD, + HistoryTargetTypeEnum.CHART + ) }, // * 更新属性记录(大小、图表属性) createUpdateHistory(item: CreateComponentType) { - this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART) + this.createStackItem( + item, + HistoryActionTypeEnum.UPDATE, + HistoryTargetTypeEnum.CHART + ) }, // * 删除组件记录 createDeleteHistory(item: CreateComponentType) { - this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART) + this.createStackItem( + item, + HistoryActionTypeEnum.DELETE, + HistoryTargetTypeEnum.CHART + ) }, // * 移动组件记录 createMoveHistory(item: CreateComponentType) { - this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART) + this.createStackItem( + item, + HistoryActionTypeEnum.MOVE, + HistoryTargetTypeEnum.CHART + ) }, // * 改变层级组件记录 - createLaryerHistory(item: CreateComponentType) { - this.createStackItem(item, HistoryActionTypeEnum.LARYER, HistoryTargetTypeEnum.CHART) + createLaryerHistory( + item: CreateComponentType, + type: + | HistoryActionTypeEnum.TOP + | HistoryActionTypeEnum.DOWN + | HistoryActionTypeEnum.UP + | HistoryActionTypeEnum.BOTTOM + ) { + this.createStackItem( + item, + type, + HistoryTargetTypeEnum.CHART + ) }, - // * 粘贴组件记录 + // * 剪切组件记录 createPasteHistory(item: CreateComponentType) { - this.createStackItem(item, HistoryActionTypeEnum.PASTE, HistoryTargetTypeEnum.CHART) - }, + this.createStackItem( + item, + HistoryActionTypeEnum.CUT, + HistoryTargetTypeEnum.CHART + ) + } } }) diff --git a/src/views/chart/ContentDetails/components/Behind/index.vue b/src/views/chart/ContentDetails/components/Behind/index.vue index 294e8810..56978192 100644 --- a/src/views/chart/ContentDetails/components/Behind/index.vue +++ b/src/views/chart/ContentDetails/components/Behind/index.vue @@ -1,6 +1,6 @@ diff --git a/src/views/chart/ContentDetails/components/Setting/index.vue b/src/views/chart/ContentDetails/components/Setting/index.vue index 93348d95..981f82b0 100644 --- a/src/views/chart/ContentDetails/components/Setting/index.vue +++ b/src/views/chart/ContentDetails/components/Setting/index.vue @@ -1,13 +1,13 @@ - + \ No newline at end of file diff --git a/src/views/chart/ContentDetails/index.vue b/src/views/chart/ContentDetails/index.vue index a74654c2..e4e0fe84 100644 --- a/src/views/chart/ContentDetails/index.vue +++ b/src/views/chart/ContentDetails/index.vue @@ -90,7 +90,7 @@ const tabList = shallowRef([ }, { key: 'behind', - title: '后端数据', + title: '数据', icon: FlashIcon, render: Behind } diff --git a/src/views/chart/ContentEdit/components/History/index.vue b/src/views/chart/ContentEdit/components/History/index.vue index 54fafda4..215e85eb 100644 --- a/src/views/chart/ContentEdit/components/History/index.vue +++ b/src/views/chart/ContentEdit/components/History/index.vue @@ -75,7 +75,13 @@ const iconHandle = (e: HistoryItemType) => { return renderIcon(TrashIcon) case HistoryActionTypeEnum.PASTE: return renderIcon(CopyIcon) - case HistoryActionTypeEnum.LARYER: + case HistoryActionTypeEnum.TOP: + return renderIcon(LayersIcon) + case HistoryActionTypeEnum.BOTTOM: + return renderIcon(LayersIcon) + case HistoryActionTypeEnum.UP: + return renderIcon(LayersIcon) + case HistoryActionTypeEnum.DOWN: return renderIcon(LayersIcon) case HistoryActionTypeEnum.MOVE: return renderIcon(StackedMoveIcon) diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index acc271c2..3a6a7d35 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -50,7 +50,7 @@ import { EditBottom } from './components/EditBottom' import { ShapeBox } from './components/ShapeBox/index' import { useLayout } from './hooks/useLayout.hook' -import { useAddKeyboard, useRemoveKeyboard } from './hooks/useKeyboard.hook' +import { useAddKeyboard } from '../hooks/useKeyboard.hook' import { handleDrop, handleDragOver, useMouseHandle } from './hooks/useDrop.hook' import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' import { getChartEditStore } from './hooks/useStore.hook' diff --git a/src/views/chart/HeaderLeftBtn/index.vue b/src/views/chart/HeaderLeftBtn/index.vue index 1b4684c5..e2d310a3 100644 --- a/src/views/chart/HeaderLeftBtn/index.vue +++ b/src/views/chart/HeaderLeftBtn/index.vue @@ -27,7 +27,7 @@ import { icon } from '@/plugins' const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' -import { useRemoveKeyboard } from '../ContentEdit/hooks/useKeyboard.hook' +import { useRemoveKeyboard } from '../hooks/useKeyboard.hook' const { setItem } = useChartLayoutStore() const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore()) diff --git a/src/views/chart/ContentEdit/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts similarity index 94% rename from src/views/chart/ContentEdit/hooks/useKeyboard.hook.ts rename to src/views/chart/hooks/useKeyboard.hook.ts index 233b83e2..f6aadedb 100644 --- a/src/views/chart/ContentEdit/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -1,5 +1,5 @@ import { isMac, addEventListener, removeEventListener } from '@/utils' -import { getChartEditStore } from './useStore.hook' +import { getChartEditStore } from '../ContentEdit/hooks/useStore.hook' import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook' const chartEditStore = getChartEditStore() @@ -25,6 +25,7 @@ const KeyboardHandle = (e: KeyboardEvent) => { chartEditStore.removeComponentList() return } + // 前进 if (e.ctrlKey && e.shiftKey && key == keyboardValue.back) { chartEditStore.setForward()