GoJS 给右键菜单添加外边框
GoJS 大约 5448 字方法
contextMenu: $("ContextMenu", "Auto",
{
background: "white",
},
$(go.Shape, "Rectangle",
{
stroke: "black",
strokeWidth: 15,
},
),
效果
完整代码
<!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>
<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", "Auto",
{
background: "white",
},
$(go.Shape, "Rectangle",
{
stroke: "black",
strokeWidth: 15,
},
),
$(go.Panel, "Vertical",
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "#E9F5FF",
"_buttonFillPressed": "red",
visible: true,
desiredSize: new go.Size(100, 50)
},
$(go.TextBlock, {
text: "Alert1",
textAlign: "center",
verticalAlignment: go.Spot.Center,
}),
{
cursor: "pointer",
click: (e, obj) => {
alert(obj.part.data.key + ":1")
},
}
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "#E9F5FF",
"_buttonFillPressed": "red",
visible: true,
desiredSize: new go.Size(100, 50)
},
$(go.TextBlock, {
text: "Alert2",
textAlign: "center",
verticalAlignment: go.Spot.Center,
}),
{
cursor: "pointer",
click: (e, obj) => {
alert(obj.part.data.key + ":2")
},
}
),
),
),
},
);
diagram.model = new go.Model(
[
{ key: "Circle", visible: true },
]
);
</script>
</body>
</html>
阅读 1385 · 发布于 2021-11-26
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Prometheus+Grafana+mysqld_exporter 监控 MySQL阅读 1431
-
Spring Boot @ConfigurationProperties 配置文件映射为对象阅读 894
-
IDEA 调试 Java 多线程代码阅读 1571
-
Linux 之 CentOS yum 更换镜像阅读 3036
-
Android 使用 tools schemas 预览 UI阅读 2158
-
Java 中的死锁阅读 1306
-
Linux 命令之 tail -f 显示行号阅读 13074
-
使用 ffmpeg 合并无声视频和音频阅读 3221
-
OpenResty 使用 lua-resty-auto-ssl 配置 https 证书阅读 6124
-
Docker 容器没有 ps pidof 查看进程命令解决办法阅读 1397