diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue index f6f5d1f2..994440f1 100644 --- a/src/views/chart/ContentEdit/components/EditGroup/index.vue +++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue @@ -17,7 +17,7 @@ @mousedown="mousedownHandle($event, groupData)" @mouseenter="mouseenterHandle($event, groupData)" @mouseleave="mouseleaveHandle($event, groupData)" - @contextmenu="handleContextMenu($event, groupData, undefined, hideOptionsList)" + @contextmenu="handleContextMenu($event, groupData, optionsHandle)" > { + const filter = (menulist: MenuEnum[]) => { + const list: MenuOptionsItemType[] = [] + allList.forEach(item => { + if (menulist.includes(item.key as MenuEnum)) { + list.push(item) + } + }) + return list + } + + // 多选处理 + if (chartEditStore.getTargetChart.selectId.length > 1) { + return filter([MenuEnum.GROUP]) + } else { + return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList] + } +} + // 配置项 const themeColor = computed(() => { const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 0bbb5190..34045c80 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -105,7 +105,7 @@ const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } const optionsHandle = ( targetList: MenuOptionsItemType[], allList: MenuOptionsItemType[], - item: CreateComponentType + targetInstance: CreateComponentType ) => { // 多选处理 if (chartEditStore.getTargetChart.selectId.length > 1) { diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue index 77ef5b98..2c4adcee 100644 --- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue @@ -7,7 +7,7 @@ @mousedown="groupMousedownHandle()" @mouseenter="mouseenterHandle(componentGroupData)" @mouseleave="mouseleaveHandle(componentGroupData)" - @contextmenu="handleContextMenu($event, componentGroupData, undefined, undefined, pickOptionsList)" + @contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)" >
@@ -46,7 +46,8 @@ import { MouseEventButton } from '@/enums/editPageEnum' import { MenuEnum } from '@/enums/editPageEnum' import { useDesignStore } from '@/store/modules/designStore/designStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' +import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook' +import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d' import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { LayersListItem } from '../LayersListItem' import throttle from 'lodash/throttle' @@ -72,6 +73,30 @@ const { handleContextMenu, onClickOutSide } = useContextMenu() const themeColor = ref(designStore.getAppTheme) const expend = ref(false) +// 右键 +const optionsHandle = ( + targetList: MenuOptionsItemType[], + allList: MenuOptionsItemType[], + targetInstance: CreateComponentType +) => { + const filter = (menulist: MenuEnum[]) => { + const list: MenuOptionsItemType[] = [] + allList.forEach(item => { + if (menulist.includes(item.key as MenuEnum)) { + list.push(item) + } + }) + return list + } + + // 多选处理 + if (chartEditStore.getTargetChart.selectId.length > 1) { + return filter([MenuEnum.GROUP]) + } else { + return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList] + } +} + // 点击 const clickHandle = (e: MouseEvent) => { // 判断左右键 diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index 830e3530..1a41efd9 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -65,7 +65,7 @@ const { handleContextMenu, onClickOutSide } = useContextMenu() const optionsHandle = ( targetList: MenuOptionsItemType[], allList: MenuOptionsItemType[], - item: CreateComponentType + targetInstance: CreateComponentType ) => { // 多选处理 if (chartEditStore.getTargetChart.selectId.length > 1) { diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index 42f55043..d6e0adb2 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -12,13 +12,17 @@ const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Car const chartEditStore = useChartEditStore() -// * 分割线 -const divider = [ - { +/** + * 分割线 + * @param {number} n > 2 + * @returns + */ +export const divider = (n:number = 3) => { + return { type: 'divider', - key: 'd3' + key: `d${n}` } -] +} // * 默认单组件选项 export const defaultOptions: MenuOptionsItemType[] = [ @@ -140,7 +144,7 @@ const menuOptions = ref([]) const handleContextMenu = ( e: MouseEvent, // 右键对象 - item?: CreateComponentType | CreateComponentGroupType, + targetInstance?: CreateComponentType | CreateComponentGroupType, // 判断函数 optionsHandle?: Function, // 隐藏选项列表 @@ -167,21 +171,21 @@ const handleContextMenu = ( menuOptions.value = defaultOptions } - if (!item) { + if (!targetInstance) { menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys) } if (hideOptionsList) { - menuOptions.value = hideOption([...defaultMultiSelectOptions, ...divider, ...defaultOptions], hideOptionsList) + menuOptions.value = hideOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], hideOptionsList) } if (pickOptionsList) { - menuOptions.value = pickOption([...defaultMultiSelectOptions, ...divider, ...defaultOptions], pickOptionsList) + menuOptions.value = pickOption([...defaultMultiSelectOptions, divider(), ...defaultOptions], pickOptionsList) } if (optionsHandle) { // 自定义函数能够拿到当前选项和所有选项 menuOptions.value = optionsHandle( cloneDeep(toRaw(menuOptions.value)), [...defaultMultiSelectOptions, ...defaultOptions], - item + targetInstance ) } nextTick().then(() => {