gojs contextMenu样式修改事件处理

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
          }
      }
  }}
)

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！