Search code examples
javascriptreactjsgojs

Highlight nodes when while I drawing link on GOJS

I'm trying to highlight all possible nodes while drawing a new link, without success.

I want to achieve something similar to this: enter image description here

I tried to use listeners, but couldn't make it work...
Any help would be appreciated

Solution

  • Here's a sample that demonstrates something similar to what I think you are asking for: https://gojs.net/extras/highlightingAllValidPorts.html The complete source code for the sample is there in the page.

    Basically, as @Ba2sik suggests, you need to override the LinkingTool.doActivate and LinkingTool.doDeactivate methods to both call their super method and to do whatever highlighting you want.

    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

    That sample highlights all of the valid ports of each node, but you might be more interested in changing the appearance of any Node that has a valid port.