fix: 处理右键不统一的问题

This commit is contained in:
奔跑的面条 2022-08-14 01:04:03 +08:00
parent 2928eaa4ae
commit 3b7f9e5dec
5 changed files with 70 additions and 16 deletions

View File

@ -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)"
>
<!-- 组合组件 -->
<edit-shape-box
@ -54,9 +54,10 @@ import { computed, PropType } from 'vue'
import { MenuEnum } from '@/enums/editPageEnum'
import { chartColors } from '@/settings/chartThemes/index'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
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 { useMouseHandle } from '../../hooks/useDrag.hook'
import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
import { EditShapeBox } from '../../components/EditShapeBox'
@ -81,6 +82,30 @@ const hideOptionsList = [MenuEnum.GROUP]
//
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
//
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 themeColor = computed(() => {
const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor

View File

@ -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) {

View File

@ -7,7 +7,7 @@
@mousedown="groupMousedownHandle()"
@mouseenter="mouseenterHandle(componentGroupData)"
@mouseleave="mouseleaveHandle(componentGroupData)"
@contextmenu="handleContextMenu($event, componentGroupData, undefined, undefined, pickOptionsList)"
@contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)"
>
<div class="go-flex-items-center item-content">
<n-icon size="20" class="go-ml-1">
@ -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) => {
//

View File

@ -65,7 +65,7 @@ const { handleContextMenu, onClickOutSide } = useContextMenu()
const optionsHandle = (
targetList: MenuOptionsItemType[],
allList: MenuOptionsItemType[],
item: CreateComponentType
targetInstance: CreateComponentType
) => {
//
if (chartEditStore.getTargetChart.selectId.length > 1) {

View File

@ -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<MenuOptionsItemType[]>([])
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(() => {