GoJS ContextMenu 右键菜单
GoJS 大约 7422 字ContextMenu
ContextMenu
的类型是Adornment
,整个继承关系是
> GraphObject
> Panel
> Part
> Adornment
ContextMenuButton
ButtonBorder.fill
:按钮背景填充色ButtonBorder.stroke
:按钮边框颜色ButtonBorder.strokeWidth
:按钮边框线条宽度_buttonFillOver
:按钮悬停背景填充色_buttonStrokeOver
:按钮悬停边框颜色_buttonFillPressed
:按钮按压背景填充色_buttonStrokePressed
:按钮按压边框色
主要代码
{
contextMenu: $("ContextMenu", "Vertical",
{
background: "transparent",
width: 100,
},
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"ButtonBorder.stroke": "darkcyan",
"ButtonBorder.strokeWidth": 3,
"_buttonFillOver": "#E9F5FF",
"_buttonStrokeOver": "darkcyan",
"_buttonStrokePressed": "darkcyan",
"_buttonFillPressed": "pink",
visible: true,
margin: new go.Margin(10, 0, 10, 0),
},
$(go.TextBlock, {
text: "Alert3",
margin: new go.Margin(10, 0, 10, 0),
}),
{
cursor: "pointer",
click: (e, obj) => {
console.log(obj)
alert(obj.part.data.key + ":3")
},
}
)
),
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/gojs/2.1.38/go.js" crossorigin="anonymous"></script>
<style>
#myDiagramDiv canvas {
outline: none;
}
</style>
</head>
<body style="margin: 0;">
<div id="myDiagramDiv" style="width:500px; height:300px;background: #E4E7EB"></div>
<script>
var $ = go.GraphObject.make;
var diagram = $(go.Diagram, "myDiagramDiv",
{
allowHorizontalScroll: false,
allowVerticalScroll: false,
allowMove: false,
allowSelect: true
}
);
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": "#E9F5FF",
"_buttonFillPressed": "red",
visible: true,
},
$(go.TextBlock, {
text: "Alert1",
margin: new go.Margin(10, 0, 10, 0),
}),
{
cursor: "pointer",
click: (e, obj) => {
alert(obj.part.data.key + ":1")
},
}
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "#E9F5FF",
},
new go.Binding("visible", "visible"),
$(go.TextBlock, {
text: "Alert2",
margin: new go.Margin(10, 0, 10, 0),
}),
{
cursor: "pointer",
click: (e, obj) => {
alert(obj.part.data.key + ":2")
},
}
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"ButtonBorder.stroke": "darkcyan",
"ButtonBorder.strokeWidth": 3,
"_buttonFillOver": "#E9F5FF",
"_buttonStrokeOver": "darkcyan",
"_buttonStrokePressed": "darkcyan",
"_buttonFillPressed": "pink",
visible: true,
margin: new go.Margin(10, 0, 10, 0),
},
$(go.TextBlock, {
text: "Alert3",
margin: new go.Margin(10, 0, 10, 0),
}),
{
cursor: "pointer",
click: (e, obj) => {
console.log(obj)
alert(obj.part.data.key + ":3")
},
}
)
),
},
);
diagram.model = new go.Model(
[
{ key: "Circle", visible: false },
]
);
</script>
</body>
</html>
官方文档
阅读 2176 · 发布于 2021-11-20
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Hyper-V Default Switch 无法联网解决办法阅读 5737
-
Kubernetes Label 相关命令阅读 1081
-
Docker 部署 OpenLDAP阅读 921
-
Java 删除非空文件夹阅读 1622
-
Docker CMD ENTRYPOINT 区别阅读 1214
-
Spring Boot OpenFeign PATCH 请求报错:java.net.ProtocolException: Invalid HTTP method: PATCH阅读 1203
-
Rust 使用 Cargo 创建和运行工程阅读 442
-
算法:使用深度优先搜索对二叉树遍历、查找和删除阅读 1661
-
IDEA 一直卡在 Reopening files 对话框解决方法阅读 3704
-
Spring Boot JPA 打印 SQL 执行时间阅读 868