GoJS的ContextMenuButton实际上是一个构造出来的控件模板。虽然它是由包含填充颜色和边框的Shape和用于显示文本的TextBlock组成的Panel,但是ContextMenuButton自身并不直接支持stroke这个样式参数。这就是你尝试设置stroke时出现错误的原因。
你可以通过访问Chicago实例的子控件并进行修改,来设置或改变Shape的边框或者TextBlock的文本颜色。以下是一个简单的例子:
var partContextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.Shape,
{ fill: "red", // 设置背景色
strokeWidth: 1, // 设置边框宽度
stroke: "white", // 设置边框色
geometryString: "M0 0 H100 V50 H0 Z", // 设置形状
width: 100, height: 50, // 设置大小
position: new go.Point(0, 0) },
),
$(go.TextBlock, "Menu Option 1", // 设置文字
{ stroke: "black", // 设置文字颜色
width: 100, height: 50, // 设置大小
position: new go.Point(0, 0) },
),
{ click: function(e, obj) { alert("Clicked!"); } },
),
);
在上述代码中,我通过定义Shape和TextBlock来分别设置按钮的背景及文字的样式。
gojs ContextMenuButton 中注册makeButton(“重命名”)的事件
在GoJS中,"ContextMenuButton"是一个面板(Panel),你可以在其中设置GraphObject.click事件处理器。在事件处理器中,obj.part将是整个上下文菜单。你可以通过这个在"ContextMenuButton"中注册事件。例如:
$("ContextMenuButton",
$(go.TextBlock, "重命名"),
{ click: function(e, obj) {
var node = obj.part.adornedPart; // 获取节点
if (node instanceof go.Node) { // 确保获取的是节点
var key = node.data.key; // 获取节点的key
/* 你的代码 */
}
}}
)
在上述代码的点击事件处理器中,我们首先获取ContextMenuButton所在的节点。然后,我们验证了我们获取的实际上是节点,而非链接线。确认是节点后,我们可以从节点的数据中读取key。这就是你如何在GoJS的ContextMenuButton点击事件处理器中获取当前节点的key。
需要使用node.findObject或node.findObjects方法来找到节点中的某个特定对象,例如一个TextBlock。但是,这需要你在创建TextBlock时,已经使用了name属性为其设定了一个名称。以下是一个节点创建的例子,其中我们为TextBlock设置了名称"LABEL":
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" }),
$(go.TextBlock,
{ name: "LABEL", // 给TextBlock设置名称
margin: 5, editable: true }, // 设置TextBlock为可编辑
new go.Binding("text", "key"))); // 绑定数据源
在以下的示例中,我们可以使用node.findObject(“LABEL”)来找到这个TextBlock:
$("ContextMenuButton",
$(go.TextBlock, "重命名"),
{ click: function(e, obj) {
var node = obj.part.adornedPart; // 获取节点
if (node instanceof go.Node) { // 确保获取的是节点
var tb = node.findObject("LABEL"); // 获取名为"LABEL"的TextBlock
if (tb) {
e.diagram.commandHandler.editTextBlock(tb); // 编辑TextBlock
}
}
}}
)
以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!