当我在 GOJS 上绘制 link 时突出显示节点

Question

我试图在绘制新的 link 时突出显示所有可能的节点，但没有成功。

我想实现类似这样的东西：

我尝试使用侦听器，但无法使其正常工作...
任何帮助将不胜感激

Answer 1

这是一个演示与我认为您要求的内容类似的示例： https://gojs.net/extras/highlightingAllValidPorts.html 该示例的完整源代码在页面中。

基本上，正如@Ba2sik 所建议的，您需要覆盖 LinkingTool.doActivate 和 LinkingTool.doDeactivate 方法以都调用他们的超级方法并做任何你想要的突出显示。

class CustomLinkingTool extends go.LinkingTool {
  constructor() {
    super();
    this.temporaryFromPort.opacity = 0.0;
    this.temporaryToPort.opacity = 0.0;
  }

  doActivate() {
    super.doActivate();
    var tool = this;
    this.diagram.nodes.each(n => {
      n.ports.each(p => {
        const valid = tool.isValidLink(tool.originalFromNode, tool.originalFromPort, n, p);
        p.fill = valid ? "red" : "black";
      });
    });
  }

  doDeactivate() {
    this.diagram.nodes.each(n => {
      n.ports.each(p => {
        p.fill = "black";
      });
    });
    super.doDeactivate();
  }
}  // end CustomLinkingTool

该示例突出显示了每个节点的所有有效端口，但您可能对更改任何具有有效端口的节点的外观更感兴趣。

当我在 GOJS 上绘制 link 时突出显示节点

Highlight nodes when while I drawing link on GOJS

javascript

reactjs

gojs