GoJS 右键菜单隐藏和显示事件监听

GoJS About 6,340 words

需求

当右键菜单显示时将元素颜色改为绿色，当右键菜单隐藏时将元素颜色改为红色。

contextMenuTool

contextMenuTool是Diagram中toolManager下的属性。

showContextMenu

显示右键菜单时会回调此方法，可以用此方法获取contextMenu，并且通过它获取右键菜单附着的元素。

回调中需要手动调用call方法显示右键菜单。

diagram.toolManager.contextMenuTool.showContextMenu = (cm, obj) => {
    go.ContextMenuTool.prototype.showContextMenu.call(diagram.toolManager.contextMenuTool, cm, obj);
    const curCM = this.diagram.toolManager.contextMenuTool.currentContextMenu;
    if (curCM instanceof go.Adornment && curCM.adornedPart) {
        const shape = curCM.adornedPart.elt(0);
        if (shape instanceof go.Shape) {
            shape.stroke = "red";
            shape.fill = "green";
        }
    }
};

hideContextMenu

隐藏右键菜单时会回调此方法，可以用此方法获取contextMenu，并且通过它获取右键菜单附着的元素。

回调中需要手动调用hide方法隐藏右键菜单。

diagram.toolManager.contextMenuTool.hideContextMenu = () => {
    const curCM = this.diagram.toolManager.contextMenuTool.currentContextMenu;
    if (curCM instanceof go.Adornment && curCM.adornedPart) {
        const shape = curCM.adornedPart.elt(0);
        if (shape instanceof go.Shape) {
            shape.stroke = "green";
            shape.fill = "red";
        }
    }
    go.ContextMenuTool.prototype.hideContextMenu.call(diagram.toolManager.contextMenuTool);
};

效果

完整代码

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.38/go.js" crossorigin="anonymous"></script>
    <style>
        #myDiagramDiv canvas {
            outline: none;
        }
    </style>
</head>

<body>

    <div id="myDiagramDiv" style="width:500px; height:300px;background: #E4E7EB"></div>
    <script>

        var $ = go.GraphObject.make;

        var diagram = $(go.Diagram, "myDiagramDiv",
            {
                allowMove: true,
                allowSelect: true
            }
        );

        diagram.toolManager.contextMenuTool.showContextMenu = (cm, obj) => {
            go.ContextMenuTool.prototype.showContextMenu.call(diagram.toolManager.contextMenuTool, cm, obj);
            const curCM = this.diagram.toolManager.contextMenuTool.currentContextMenu;
            if (curCM instanceof go.Adornment && curCM.adornedPart) {
                const shape = curCM.adornedPart.elt(0);
                if (shape instanceof go.Shape) {
                    shape.stroke = "red";
                    shape.fill = "green";
                }
            }
        };

        diagram.toolManager.contextMenuTool.hideContextMenu = () => {
            const curCM = this.diagram.toolManager.contextMenuTool.currentContextMenu;
            if (curCM instanceof go.Adornment && curCM.adornedPart) {
                const shape = curCM.adornedPart.elt(0);
                if (shape instanceof go.Shape) {
                    shape.stroke = "green";
                    shape.fill = "red";
                }
            }
            go.ContextMenuTool.prototype.hideContextMenu.call(diagram.toolManager.contextMenuTool);
        };

        diagram.nodeTemplate =
            $(go.Node, "Auto",
                $(go.Shape, "Circle",
                    {
                        stroke: "green",
                        strokeWidth: 2,
                        fill: "red",
                        desiredSize: new go.Size(60, 60),
                    },
                ),
                $(go.TextBlock,
                    { margin: 3 },
                    new go.Binding("text", "key")
                ),
                {
                    contextMenu: $("ContextMenu", "Vertical",
                        {
                            background: "transparent",
                            width: 100,
                        },
                        $("ContextMenuButton",
                            {
                                "ButtonBorder.fill": "white",
                                "_buttonFillOver": "skyblue",
                                visible: true,
                            },
                            $(go.TextBlock, {
                                text: "Alert",
                                margin: new go.Margin(10, 0, 10, 0),
                            }),
                            {
                                cursor: "pointer",
                                click: (e, obj) => {
                                    alert(obj.part.data.key)
                                },
                            }
                        ),
                    )
                },
            );

        diagram.model = new go.Model(
            [
                { key: "Circle" },
            ]
        );

    </script>
</body>

</html>

ContextMenuTool 参考文档

https://gojs.net/latest/api/symbols/ContextMenuTool.html

Views: 2,922 · Posted: 2021-12-01

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓