From 851a4d58ecd64e6ddd0356714be7420d6a45b540 Mon Sep 17 00:00:00 2001 From: mtrun <1262327911@qq.com> Date: Mon, 28 Mar 2022 17:17:44 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=8F=B3?= =?UTF-8?q?=E9=94=AE=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/ContentEdit/index.vue | 2 +- src/views/chart/ContentLayers/index.vue | 10 +- .../chart/hooks/useContextMenu.hook.d.ts | 22 ++++ src/views/chart/hooks/useContextMenu.hook.ts | 119 ++++++++++-------- src/views/chart/hooks/useKeyboard.hook.ts | 2 +- src/views/chart/index.vue | 1 - 6 files changed, 92 insertions(+), 64 deletions(-) create mode 100644 src/views/chart/hooks/useContextMenu.hook.d.ts diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index f98fcbf5..e39fb436 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -9,7 +9,7 @@ @drop="handleDrag" @dragover="handleDragOver" > -
+
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index 34a4e20e..88c88f2b 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -33,10 +33,8 @@ import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayo import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { CreateComponentType } from '@/packages/index.d' import cloneDeep from 'lodash/cloneDeep' -import { - useContextMenu, - MenuEnum -} from '@/views/chart/hooks/useContextMenu.hook' +import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' +import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook.d' import { LayersListItem } from './components/LayersListItem/index' import { icon } from '@/plugins' @@ -45,9 +43,7 @@ const { LayersIcon } = icon.ionicons5 const chartLayoutStore = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { handleContextMenu } = useContextMenu({ - hideOptionsList: [MenuEnum.CLEAR, MenuEnum.PARSE] -}) +const { handleContextMenu } = useContextMenu() // 逆序输出 const reverseList = computed(() => { diff --git a/src/views/chart/hooks/useContextMenu.hook.d.ts b/src/views/chart/hooks/useContextMenu.hook.d.ts new file mode 100644 index 00000000..486e9b8c --- /dev/null +++ b/src/views/chart/hooks/useContextMenu.hook.d.ts @@ -0,0 +1,22 @@ +// 右键枚举 +export enum MenuEnum { + DELETE = 'delete', + COPY = 'copy', + CUT = 'cut', + PARSE = 'parse', + TOP = 'top', + BOTTOM = 'bottom', + UP = 'up', + DOWN = 'down', + CLEAR = 'clear', +} + +export interface MenuOptionsItemType { + type?: string + label?: string + key: MenuEnum | string + icon?: Function + fnHandle?: Function + disabled?: boolean + hidden?: boolean +} \ No newline at end of file diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index cc6ad019..0cde2ab3 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -1,8 +1,9 @@ -import { reactive, nextTick } from 'vue' +import { ref, nextTick } from 'vue' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { CreateComponentType } from '@/packages/index.d' import { renderIcon, loadingError } from '@/utils' import { icon } from '@/plugins' +import { MenuEnum, MenuOptionsItemType } from './useContextMenu.hook.d' const { CopyIcon, @@ -10,34 +11,12 @@ const { ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, - ChevronUpIcon + ChevronUpIcon, } = icon.ionicons5 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon } = icon.carbon const chartEditStore = useChartEditStore() -export enum MenuEnum { - DELETE = 'delete', - COPY = 'copy', - CUT = 'cut', - PARSE = 'parse', - TOP = 'top', - BOTTOM = 'bottom', - UP = 'up', - DOWN = 'down', - CLEAR = 'clear' -} - -export interface MenuOptionsItemType { - type?: string - label?: string - key: MenuEnum | string - icon?: Function - fnHandle?: Function - disabled?: boolean - hidden?: boolean -} - // * 默认选项 const defaultOptions: MenuOptionsItemType[] = [ { @@ -60,7 +39,7 @@ const defaultOptions: MenuOptionsItemType[] = [ }, { type: 'divider', - key: 'd1' + key: 'd1', }, { label: '置顶', @@ -88,7 +67,7 @@ const defaultOptions: MenuOptionsItemType[] = [ }, { type: 'divider', - key: 'd2' + key: 'd2', }, { label: '清空剪贴板', @@ -101,19 +80,53 @@ const defaultOptions: MenuOptionsItemType[] = [ key: MenuEnum.DELETE, icon: renderIcon(TrashIcon), fnHandle: chartEditStore.removeComponentList, - } + }, ] -// * 去除隐藏选项 -const clearHideOption = (options: MenuOptionsItemType[], hideList?: MenuEnum[]) => { - if(!hideList) return options - const a = options.filter((op: MenuOptionsItemType) => { - return hideList.findIndex((e: MenuEnum) => e !== op.key) +// * 无数据传递拥有的选项 +const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR] + +/** + * * 挑选选项 + * @param options + * @param pickList + * @returns + */ +const pickOption = (options: MenuOptionsItemType[], pickList?: MenuEnum[]) => { + if (!pickList) return options + return options.filter((op: MenuOptionsItemType) => { + return pickList.findIndex((e: MenuEnum) => e === op.key) !== -1 }) } +/** + * * 去除选项 + * @param options + * @param hideList + * @returns + */ +const hideOption = (options: MenuOptionsItemType[], hideList?: MenuEnum[]) => { + if (!hideList) return options + return options.filter((op: MenuOptionsItemType) => { + return hideList.findIndex((e: MenuEnum) => e !== op.key) !== -1 + }) +} + +// * 右键内容 +const menuOptions = ref([]) + // * 右键处理 -const handleContextMenu = (e: MouseEvent, item?: CreateComponentType) => { +const handleContextMenu = ( + e: MouseEvent, + // 右键对象 + item?: CreateComponentType, + // 判断函数 + optionsHandle?: Function, + // 隐藏选项列表 + hideOptionsList?: MenuEnum[], + // 挑选选项列表 + pickOptionsList?: MenuEnum[] +) => { e.stopPropagation() e.preventDefault() let target = e.target @@ -121,6 +134,20 @@ const handleContextMenu = (e: MouseEvent, item?: CreateComponentType) => { target = target.parentNode } chartEditStore.setRightMenuShow(false) + // * 设置默认选项 + menuOptions.value = defaultOptions + if (!item) { + menuOptions.value = pickOption(menuOptions.value, defaultNoItemKeys) + } + if (hideOptionsList) { + menuOptions.value = hideOption(menuOptions.value, hideOptionsList) + } + if (pickOptionsList) { + menuOptions.value = hideOption(menuOptions.value, pickOptionsList) + } + if (optionsHandle) { + menuOptions.value = optionsHandle(menuOptions.value) + } nextTick().then(() => { chartEditStore.setMousePosition(e.clientX, e.clientY) chartEditStore.setRightMenuShow(true) @@ -132,21 +159,7 @@ const handleContextMenu = (e: MouseEvent, item?: CreateComponentType) => { * @param menuConfig * @returns */ -export const useContextMenu = (menuConfig?: { - // 自定义右键配置 - selfOptions?: MenuOptionsItemType[] - // 前置处理函数 - optionsHandle?: Function - // 隐藏列表 - hideOptionsList?: MenuEnum[] -}) => { - const selfOptions = menuConfig?.selfOptions - const optionsHandle = menuConfig?.optionsHandle - const hideOptionsList = menuConfig?.hideOptionsList - - // * 右键选项 - const menuOptions: MenuOptionsItemType[] = selfOptions || defaultOptions - +export const useContextMenu = () => { // * 失焦 const onClickoutside = () => { chartEditStore.setRightMenuShow(false) @@ -155,11 +168,11 @@ export const useContextMenu = (menuConfig?: { // * 事件处理 const handleMenuSelect = (key: string) => { chartEditStore.setRightMenuShow(false) - const targetItem: MenuOptionsItemType[] = menuOptions.filter( + const targetItem: MenuOptionsItemType[] = menuOptions.value.filter( (e: MenuOptionsItemType) => e.key === key ) - menuOptions.forEach((e: MenuOptionsItemType) => { + menuOptions.value.forEach((e: MenuOptionsItemType) => { if (e.key === key) { if (e.fnHandle) { e.fnHandle() @@ -170,12 +183,10 @@ export const useContextMenu = (menuConfig?: { }) } return { - // todo 每次右键都执行判断功能 - // menuOptions: clearHideOption ? clearHideOption(menuOptions, hideOptionsList) : menuOptions, - menuOptions: menuOptions, + menuOptions, handleContextMenu, onClickoutside, handleMenuSelect, - mousePosition: chartEditStore.getMousePosition + mousePosition: chartEditStore.getMousePosition, } } diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 4b327d95..949cdd6b 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -1,6 +1,6 @@ import { isMac, addEventListener, removeEventListener } from '@/utils' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook' +import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook.d' const chartEditStore = useChartEditStore() diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue index a143f748..9382d9f3 100644 --- a/src/views/chart/index.vue +++ b/src/views/chart/index.vue @@ -69,7 +69,6 @@ const { menuOptions, onClickoutside, mousePosition, - handleContextMenu, handleMenuSelect } = useContextMenu()