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 参考文档
Views: 2,800 · Posted: 2021-12-01
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...