import React, { useRef, useEffect } from "react";
|
import { Button } from 'antd';
|
|
//右键菜单组件
|
export const RightMenu = ((props) => {
|
|
useEffect(() => {
|
if (props.isReady) {
|
const graph = props.graphRef.current;
|
|
graph.on('blank:contextmenu', ({ e, x, y }) => {
|
// 阻止浏览器的默认行为
|
e.preventDefault();
|
closeContextMenu()
|
openContextMenu(e.clientX, e.clientY, graph);
|
});
|
|
graph.on('cell:mouseup blank:mouseup', closeContextMenu);
|
document.body.addEventListener('click', closeContextMenu);
|
}
|
})
|
|
})
|
|
function openContextMenu(x, y, graph) {
|
// 创建你的自定义菜单元素
|
let menuElement = document.createElement('div');
|
menuElement.classList.add('my-context-menu');
|
menuElement.style.left = `${x}px`;
|
menuElement.style.top = `${y}px`;
|
|
let dataList = ['选择', '移动']
|
dataList.forEach((val) => {
|
// 在这里填充你的菜单内容，例如
|
let menuItem = document.createElement('div');
|
menuItem.classList.add("right-menu-button")
|
menuItem.textContent = val;
|
menuItem.onclick = (e) => {
|
// 在这里处理菜单项点击事件，例如你可以根据点击的菜单项进行不同的操作
|
if (e.target.textContent == "选择") {
|
graph.disablePanning();//禁用移动
|
graph.enableRubberband();//开启框选
|
} else if (e.target.textContent == "移动") {
|
graph.enablePanning();//开启移动
|
graph.disableRubberband();//禁用框选
|
}
|
};
|
menuElement.append(menuItem);
|
})
|
|
|
// 最后，将菜单添加到文档中
|
document.body.append(menuElement);
|
}
|
|
function closeContextMenu() {
|
let menuElement = document.querySelector('.my-context-menu');
|
if (menuElement) {
|
document.body.removeChild(menuElement);
|
}
|
}
|
