节点怎么和UI组件交互 #1798

ThreeLambs · 2022-02-08T07:01:32Z

ThreeLambs
Feb 8, 2022

如何添加节点右键菜单 ContextMenu 组件，或者在mousein时添加其他UI组件
graph.on('node:contextmenu', ({node}) => {
//TODO: 添加UI组件 ContextMenu
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/script/x6/dist/x6.css" rel="stylesheet" />
    <link href="/script/x6-react-components/index.css" rel="stylesheet" />
    <style>
        :root {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
    </style>
</head>

<body style="margin: 0;padding: 0;">
    <div id="app" style="width: 100%;height: 100vh;"> 
    </div> 

    <script src="/script/polly/polyfill.min.js"></script>
    <script src="/script/babel/babel.min.js"></script> 
    <script src="/script/react/react.production.min.js"></script>
    <script src="/script/react-dom/react-dom.production.min.js"></script>
    <script src="/script/x6-react-components/x6-react-components.js"></script>
    <script src="/script/x6/dist/x6.js"></script>

    <script type="text/babel"> 
        var Graph = X6.Graph
        const graph = new Graph({
            container: document.getElementById('app'),
            grid: {
                size: 10,
                visible: true,
                type: 'mesh', // 'dot' | 'fixedDot' | 'mesh' 
            },
        })
        const rect1 = graph.addNode({
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            label: 'Source',
        })
        const rect2 = graph.addNode({
            x: 360,
            y: 40,
            width: 100,
            height: 40,
            label: 'Target',
        })

        const Menu = X6ReactComponents.Menu
        const MenuItem = Menu.Item
        
        graph.on('node:click', ({ node }) => {
            graph.drawBackground({ color: '#fff' })
            const nodes = graph.getNodes()

            nodes.forEach((node) => {
                node.attr('body/stroke', '#000')
            })
            node.attr('body/stroke', 'orange')
        })

        graph.on('node:contextmenu', ({node}) => { 
            //TODO: 添加UI组件 ContextMenu 
        })

        // ReactDOM.render(( 
        //     <Menu >
        //         <MenuItem name="undo" hotkey="Cmd+Z" text="Undo" />
        //         <MenuItem name="redo" hotkey="Cmd+Shift+Z" text="Redo" />
        //     </Menu>
        // ), document.getElementById('app'))
    </script>
</body>

</html>

NewByVector · 2022-02-12T07:58:36Z

NewByVector
Feb 12, 2022
Maintainer

右键菜单可以参考这个 demo

1 reply

ThreeLambs Feb 14, 2022
Author

右键菜单可以参考这个 demo

我需要 standalone (UMD) Demo ...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

节点怎么和UI组件交互 #1798

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

节点怎么和UI组件交互 #1798

ThreeLambs Feb 8, 2022

Replies: 1 comment · 1 reply

NewByVector Feb 12, 2022 Maintainer

ThreeLambs Feb 14, 2022 Author

ThreeLambs
Feb 8, 2022

Replies: 1 comment 1 reply

NewByVector
Feb 12, 2022
Maintainer

ThreeLambs Feb 14, 2022
Author