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

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

  • 13
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
GoJS节点的常用事件包括: 1. click:当用户单击节点时触发。可以使用`node.addEventListener('click', function(event) {...})`来添加click事件监听器。 2. doubleClick:当用户双击节点时触发。可以使用`node.addEventListener('doubleClick', function(event) {...})`来添加doubleClick事件监听器。 3. contextMenu:当用户右键单击节点时触发。可以使用`node.addEventListener('contextMenu', function(event) {...})`来添加contextMenu事件监听器。 4. mouseEnter:当用户将鼠标移动到节点上时触发。可以使用`node.addEventListener('mouseEnter', function(event) {...})`来添加mouseEnter事件监听器。 5. mouseLeave:当用户将鼠标从节点上移开时触发。可以使用`node.addEventListener('mouseLeave', function(event) {...})`来添加mouseLeave事件监听器。 6. mouseOver:当用户将鼠标移动到节点上时触发。可以使用`node.addEventListener('mouseOver', function(event) {...})`来添加mouseOver事件监听器。 7. mouseOut:当用户将鼠标从节点上移开时触发。可以使用`node.addEventListener('mouseOut', function(event) {...})`来添加mouseOut事件监听器。 8. select:当节点被选中时触发。可以使用`node.addDiagramListener('ObjectSingleSelected', function(event) {...})`来添加select事件监听器。 9. unselect:当节点被取消选中时触发。可以使用`node.addDiagramListener('ObjectSingleDeselected', function(event) {...})`来添加unselect事件监听器。 10. mouseDrop:当用户在节点上释放鼠标按钮时触发。可以使用`node.addDiagramListener('ExternalObjectsDropped', function(event) {...})`来添加mouseDrop事件监听器。 11. layoutCompleted:当节点布局完成时触发。可以使用`node.addDiagramListener('LayoutCompleted', function(event) {...})`来添加layoutCompleted事件监听器。 12. animationFinished:当节点动画完成时触发。可以使用`node.addDiagramListener('AnimationFinished', function(event) {...})`来添加animationFinished事件监听器。 13. propertyChanged:当节点属性发生变化时触发。可以使用`node.addChangedListener(function(event) {...})`来添加propertyChanged事件监听器。 14. dataChanged:当节点数据发生变化时触发。可以使用`node.addModelChangedListener(function(event) {...})`来添加dataChanged事件监听器。 15. removed:当节点从图表中删除时触发。可以使用`node.addDiagramListener('ObjectRemoved', function(event) {...})`来添加removed事件监听器。 以上是一些常用的GoJS节点事件,具体的事件可参考GoJS官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小纯洁w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值