From 31d1983958cc8fb387c62312c5d603f83efb1111 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Mon, 31 Jan 2022 23:37:43 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E4=BF=AE=E6=94=B9=E5=8F=B3?= =?UTF-8?q?=E9=94=AE=E5=88=A4=E5=AE=9A=E5=8C=BA=E5=9F=9F=EF=BC=8C=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartEditStore/chartEditStore.d.ts | 2 + .../modules/chartEditStore/chartEditStore.ts | 9 +++ .../chartHistoryStore/chartHistoryStore.d.ts | 28 +++++++-- .../chartHistoryStore/chartHistoryStore}.ts | 61 +++++++++++++++++-- .../ContentEdit/components/ShapeBox/index.vue | 10 +-- .../chart/ContentEdit/hooks/useStyle.hook.ts | 2 +- src/views/chart/ContentEdit/index.vue | 24 +------- .../hooks/useContextMenu.hook.ts | 14 ++--- src/views/chart/index.vue | 24 ++++++++ 9 files changed, 128 insertions(+), 46 deletions(-) rename src/views/chart/{ContentEdit => }/hooks/useContextMenu.hook.ts (78%) diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 551bde63..22e3d60c 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -55,6 +55,7 @@ export type TargetChartType = { export enum ChartEditStoreEnum { EDIT_RANGE = 'editRange', EDIT_CANVAS = 'editCanvas', + RIGHT_MENU_SHOW = 'rightMenuShow', MOUSE_POSITION = 'mousePosition', TARGET_CHART = 'targetChart', COMPONENT_LIST = 'componentList' @@ -63,6 +64,7 @@ export enum ChartEditStoreEnum { // Store 类型 export interface chartEditStoreType { [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType + [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType [ChartEditStoreEnum.TARGET_CHART]: TargetChartType [ChartEditStoreEnum.COMPONENT_LIST]: any[] diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 6c67dd45..b127bd4a 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -32,6 +32,8 @@ export const useChartEditStoreStore = defineStore({ // 默认背景色 background: undefined }, + // 右键菜单 + rightMenuShow: false, // 鼠标定位 mousePosition: { x: 0, @@ -49,6 +51,9 @@ export const useChartEditStoreStore = defineStore({ getMousePosition(): MousePositionType { return this.mousePosition }, + getRightMenuShow(): boolean { + return this.rightMenuShow + }, getEditCanvas(): EditCanvasType { return this.editCanvas }, @@ -64,6 +69,10 @@ export const useChartEditStoreStore = defineStore({ setEditCanvasItem< T extends keyof EditCanvasType, K extends EditCanvasType[T] >(key: T, value: K) { this.editCanvas[key] = value }, + // * 设置右键菜单 + setRightMenuShow(value: boolean) { + this.rightMenuShow = value + }, // * 设置目标数据 hover setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) { this.targetChart.hoverIndex = hoverIndex diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 83268af6..6bef1a12 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -1,10 +1,28 @@ -export interface HistoryStackType { - +import { CreateComponentType } from '@/packages/index.d' + +// 操作类型枚举 +export enum HistoryTypeEnum { + ADD = 'add', + DELETE = 'delete', + MOVE = 'move', + SELECT_HISTORY = 'selectHistory' } -export interface chartHistoryStoreType { +// 历史栈 +export enum HistoryStackEnum { + BACK_STACK= 'backStack', + FORWARD_STACK= 'forwardStack', +} + +// 历史记录项类型 +export interface HistoryItemType extends CreateComponentType { + historyType: HistoryTypeEnum +} + +// 历史 Store 类型 +export interface ChartHistoryStoreType { // 后退栈 - backStack: [], + [HistoryStackEnum.BACK_STACK]: Array, // 前进栈 - forwardStack: [] + [HistoryStackEnum.FORWARD_STACK]: Array, } \ No newline at end of file diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore}.ts b/src/store/modules/chartHistoryStore/chartHistoryStore}.ts index 37c37490..af8ac839 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore}.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore}.ts @@ -1,11 +1,62 @@ import { defineStore } from 'pinia' -import { chartHistoryStoreType } from './chartHistoryStore.d' +import { + HistoryStackEnum, + HistoryItemType, + ChartHistoryStoreType +} from './chartHistoryStore.d' import { setLocalStorage, getLocalStorage } from '@/utils' import { StorageEnum } from '@/enums/storageEnum' export const useChartHistoryStoreStore = defineStore({ id: 'useChartHistoryStore', - state: (): chartHistoryStoreType => ({}), - getters: {}, - actions: {} -}) \ No newline at end of file + state: (): ChartHistoryStoreType => ({ + // 后退栈（记录栈） + backStack: [], + // 前进栈 + forwardStack: [] + }), + getters: { + getBackStack(): Array { + return this.backStack + }, + getForwardStack(): Array { + return this.forwardStack + } + }, + actions: { + // * 推入记录栈 + addBackStackItem(item: HistoryItemType | Array): void { + if(item instanceof Array) this.backStack = [...this.backStack, ...item] + else this.backStack.push(item) + }, + // * 推入前进栈 + addForwardStack(item: HistoryItemType | Array): void { + if(item instanceof Array) this.forwardStack = [...this.forwardStack, ...item] + else this.forwardStack.push(item) + }, + // * 移出记录栈 + popBackStackItem( + index?: number + ): HistoryItemType[] | HistoryItemType | undefined { + const length = this.backStack.length + if (index && length >= index) { + return this.backStack.splice(-index) + } + if (this.backStack.length > 0) { + return this.backStack.pop() + } + }, + // * 移出前进栈 + popForwardStack( + index?: number + ): HistoryItemType[] | HistoryItemType | undefined { + const length = this.forwardStack.length + if (index && length >= index) { + return this.forwardStack.splice(-index) + } + if (this.forwardStack.length > 0) { + return this.forwardStack.pop() + } + } + } +}) diff --git a/src/views/chart/ContentEdit/components/ShapeBox/index.vue b/src/views/chart/ContentEdit/components/ShapeBox/index.vue index 33c190ee..51a0c262 100644 --- a/src/views/chart/ContentEdit/components/ShapeBox/index.vue +++ b/src/views/chart/ContentEdit/components/ShapeBox/index.vue @@ -58,17 +58,17 @@ const select = computed(() => { } .shape-modal-select { - opacity: 0.2; - top: 1px; - left: 1px; + opacity: 0.1; + top: 2px; + left: 2px; &.active { background-color: v-bind('themeColor'); } } .shape-modal-change { - border: 1px solid rgba(0, 0, 0, 0); + border: 2px solid rgba(0, 0, 0, 0); &.active { - border: 1px solid v-bind('themeColor'); + border: 2px solid v-bind('themeColor'); } } } diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts index fcfb765a..c48cea0b 100644 --- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts @@ -7,7 +7,7 @@ interface AttrType { export const useComponentStyle = (attr: AttrType, index: number) => { const componentStyle = { - zIndex: index, + zIndex: index + 1, left: `${attr.x}px`, top: `${attr.y}px`, } diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index b446869e..f05912c9 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -13,18 +13,6 @@
- - { - const showDropdownRef = ref(false) const targetIndex = ref(0) // * 右键选项 @@ -29,21 +28,21 @@ export const useContextMenu = () => { while (target instanceof SVGElement) { target = target.parentNode } - showDropdownRef.value = false + chartEditStore.setRightMenuShow(false) nextTick().then(() => { chartEditStore.setMousePosition(e.clientX, e.clientY) - showDropdownRef.value = true + chartEditStore.setRightMenuShow(true) }) } // * 失焦 const onClickoutside = (e: MouseEvent) => { - showDropdownRef.value = false + chartEditStore.setRightMenuShow(false) } // * 事件处理 const handleMenuSelect = (key: string) => { - showDropdownRef.value = false + chartEditStore.setRightMenuShow(false) switch (key) { case MenuEnum.DELETE: chartEditStore.removeComponentList(targetIndex.value) @@ -53,7 +52,6 @@ export const useContextMenu = () => { } return { - showDropdownRef, menuOptions, handleContextMenu, onClickoutside, diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue index 0ade2b7a..636c6038 100644 --- a/src/views/chart/index.vue +++ b/src/views/chart/index.vue @@ -20,11 +20,26 @@
+ +