|
| 1 | +/** |
| 2 | + * @description 节点的右键菜单 |
| 3 | + */ |
| 4 | + |
| 5 | +import { Menu } from '@antv/x6-react-components'; |
| 6 | +import type { Cell } from '@antv/xflow'; |
| 7 | +// 不引入组件样式的话，节点右键菜单样式会有问题 |
| 8 | +import '@antv/x6-react-components/es/menu/style/index.css'; |
| 9 | + |
| 10 | +import { useGraphEvent } from '@antv/xflow'; |
| 11 | +import React, { useState, useMemo, useCallback } from 'react'; |
| 12 | +import ReactDOM from 'react-dom'; |
| 13 | + |
| 14 | +import { Utils } from '../utils'; |
| 15 | + |
| 16 | +import styles from './index.less'; |
| 17 | + |
| 18 | +// https://g6.antv.antgroup.com/manual/advanced/coordinate-system |
| 19 | +// 获取到位置后将 dom 节点挂到 body 上定位，否则可能 dom 展示位位置和鼠标点击的位置有偏差 |
| 20 | +const contextMenuRoot = document.createElement('div'); |
| 21 | +document.body.appendChild(contextMenuRoot); |
| 22 | + |
| 23 | +interface IProps { |
| 24 | + // 重命名群组 |
| 25 | + renameCombineGroup: ( |
| 26 | + cell: Cell, |
| 27 | + confirmPosition: { confirmX: number; confirmY: number }, |
| 28 | + ) => void; |
| 29 | + // 解散群组 |
| 30 | + removeCombineGroup: ( |
| 31 | + cell: Cell, |
| 32 | + confirmPosition: { confirmX: number; confirmY: number }, |
| 33 | + ) => void; |
| 34 | +} |
| 35 | +const ContextMenu = (props: IProps) => { |
| 36 | + const { renameCombineGroup, removeCombineGroup } = props; |
| 37 | + const [contextMenuPosition, setContextMenuPosition] = useState<{ |
| 38 | + contextMenuX: number; |
| 39 | + contextMenuY: number; |
| 40 | + } | null>(null); |
| 41 | + // 当前操作的 cell |
| 42 | + const [currentCell, setCurrnetCell] = useState<Cell | null>(); |
| 43 | + |
| 44 | + // 取消右键菜单 |
| 45 | + const cancelCellContextMenu = () => { |
| 46 | + setCurrnetCell(null); |
| 47 | + setContextMenuPosition(null); |
| 48 | + }; |
| 49 | + |
| 50 | + useGraphEvent('cell:contextmenu', ({ e, x, y, cell, view }) => { |
| 51 | + if (cell.isNode()) { |
| 52 | + const nodeType = cell?.getData()?.originData?.conceptType; |
| 53 | + // 除组合节点内部的普通子节点外，其它节点右键都会有操作 |
| 54 | + if (!(cell.getParent() && !Utils.isCombineGroup(nodeType))) { |
| 55 | + setCurrnetCell(cell); |
| 56 | + setContextMenuPosition({ contextMenuX: e.pageX, contextMenuY: e.pageY }); |
| 57 | + } |
| 58 | + } else { |
| 59 | + setCurrnetCell(cell); |
| 60 | + setContextMenuPosition({ contextMenuX: e.pageX, contextMenuY: e.pageY }); |
| 61 | + } |
| 62 | + }); |
| 63 | + |
| 64 | + // 取消右键菜单 |
| 65 | + useGraphEvent('blank:click', () => { |
| 66 | + setCurrnetCell(null); |
| 67 | + setContextMenuPosition(null); |
| 68 | + }); |
| 69 | + |
| 70 | + useGraphEvent('cell:click', () => { |
| 71 | + setCurrnetCell(null); |
| 72 | + setContextMenuPosition(null); |
| 73 | + }); |
| 74 | + |
| 75 | + // 解散组 |
| 76 | + const handleRemoveCombineGroup = useCallback(() => { |
| 77 | + removeCombineGroup(currentCell as Cell, { |
| 78 | + confirmX: contextMenuPosition?.contextMenuX || 0, |
| 79 | + confirmY: contextMenuPosition?.contextMenuY || 0, |
| 80 | + }); |
| 81 | + cancelCellContextMenu(); |
| 82 | + }, [currentCell, contextMenuPosition, removeCombineGroup]); |
| 83 | + |
| 84 | + // 重命名组 |
| 85 | + const handleRenameCombineGroup = useCallback(() => { |
| 86 | + renameCombineGroup(currentCell as Cell, { |
| 87 | + confirmX: contextMenuPosition?.contextMenuX || 0, |
| 88 | + confirmY: contextMenuPosition?.contextMenuY || 0, |
| 89 | + }); |
| 90 | + cancelCellContextMenu(); |
| 91 | + }, [currentCell, contextMenuPosition, renameCombineGroup]); |
| 92 | + |
| 93 | + // 获取右键菜单操作 |
| 94 | + const rightMenuItem = useMemo(() => { |
| 95 | + let menuItem: { |
| 96 | + key: string; |
| 97 | + dom: React.ReactNode; |
| 98 | + }[] = []; |
| 99 | + if ( |
| 100 | + currentCell?.isNode() && |
| 101 | + Utils.isCombineGroup(currentCell?.getData()?.nodeType) |
| 102 | + ) { |
| 103 | + menuItem = [ |
| 104 | + { |
| 105 | + key: 'removeCombineGroup', |
| 106 | + dom: ( |
| 107 | + <Menu.Item key="removeCombineGroup" onClick={handleRemoveCombineGroup}> |
| 108 | + 解除组 |
| 109 | + </Menu.Item> |
| 110 | + ), |
| 111 | + }, |
| 112 | + { |
| 113 | + key: 'renameCombineGroup', |
| 114 | + dom: ( |
| 115 | + <Menu.Item key="renameCombineGroup" onClick={handleRenameCombineGroup}> |
| 116 | + 重命名组 |
| 117 | + </Menu.Item> |
| 118 | + ), |
| 119 | + }, |
| 120 | + ]; |
| 121 | + } |
| 122 | + return menuItem; |
| 123 | + }, [currentCell, handleRemoveCombineGroup, handleRenameCombineGroup]); |
| 124 | + |
| 125 | + return ReactDOM.createPortal( |
| 126 | + currentCell?.isNode() && |
| 127 | + Utils.isCombineGroup(currentCell?.getData()?.nodeType) && |
| 128 | + contextMenuPosition ? ( |
| 129 | + <div |
| 130 | + className={styles['context-menu-wrapper']} |
| 131 | + style={{ |
| 132 | + left: contextMenuPosition?.contextMenuX, |
| 133 | + top: contextMenuPosition?.contextMenuY, |
| 134 | + }} |
| 135 | + > |
| 136 | + <Menu>{rightMenuItem.map((item) => item.dom)}</Menu> |
| 137 | + </div> |
| 138 | + ) : null, |
| 139 | + contextMenuRoot, |
| 140 | + ); |
| 141 | +}; |
| 142 | + |
| 143 | +export default ContextMenu; |
0 commit comments