#

Junjie

2024-05-20 4d8bb57c9eb3fda399fd7b9e9de7ecbf754244f7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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);
    }
}