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.