Maybe it will be useful to others. ContextMenu example prepared with React 18 on Antv G6 v5.
ContextMenu React Component.
import { Dropdown, Menu } from "antd";
import SubMenu from "antd/es/menu/SubMenu";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
const SorguYapContextMenu = ({ x, y, id, targetType, onClose }) => {
console.log("id, click element id", id);
console.log("targetType node,edge or canvas", targetType);
const [visible, setVisible] = useState(true);
useEffect(() => {
const handleClickOutside = (event) => {
if (!event.target.closest('.g6-contextmenu')) {
setTimeout(() => {
setVisible(false);
onClose();
}, 150)
}
};
const timer = setTimeout(() => {
document.addEventListener('mousedown', handleClickOutside);
}, 0);
return () => {
clearTimeout(timer);
document.removeEventListener('mousedown', handleClickOutside);
};
}, [onClose]);
const menu = (): JSX.Element => {
if (targetType === "node") {
return <Menu triggerSubMenuAction={"hover"} onClick={(e) => console.log("click", e)}>
<Menu.Item key="1">node 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<SubMenu onTitleClick={(e) => e.domEvent.stopPropagation()} key="sub1" title="Submenu 1">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</SubMenu>
</Menu>
}
else if (targetType === "edge") {
return <Menu triggerSubMenuAction={"hover"} onClick={(e) => console.log("click", e)}>
<Menu.Item key="1">edge 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<SubMenu onTitleClick={(e) => e.domEvent.stopPropagation()} key="sub1" title="Submenu 1">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</SubMenu>
</Menu>
}
else if (targetType === "canvas") {
return <Menu triggerSubMenuAction={"hover"} onClick={(e) => console.log("click", e)}>
<Menu.Item key="1">canvas 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<SubMenu onTitleClick={(e) => e.domEvent.stopPropagation()} key="sub1" title="Submenu 1">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</SubMenu>
</Menu>
}
return <></>;
}
return createPortal(
<Dropdown overlay={menu} visible={visible}>
<div className="g6-contextmenu" style={{ position: 'absolute', left: x, top: y, zIndex: 1000 }} />
</Dropdown>,
document.body
);
};
export default SorguYapContextMenu
Graph Plugins ContextMenu
plugins: [
{
type: 'contextmenu',
trigger: 'contextmenu', // 'click' or 'contextmenu'
getContent: (e) => {
const container = document.createElement('div');
document.body.appendChild(container);
const root = createRoot(container);
const closeContextMenu = () => {
root.unmount();
if (container.parentNode) {
container.parentNode.removeChild(container);
}
};
console.log("targetType",e.targetType)
root.render(<SorguYapContextMenu x={e.client.x} y={e.client.y} id={e.target.id} targetType={e.targetType} onClose={closeContextMenu} />);
return container;
},
enable: 'always',
},
]
IssueHunt
