简体   繁体   English

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

[英]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:我想实现类似的东西: 在此处输入图像描述

I tried to use listeners, but couldn't make it work...我尝试使用侦听器,但无法使其正常工作...
Any help would be appreciated任何帮助,将不胜感激

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.这是一个示例,演示了与我认为您要求的内容类似的内容: https://gojs.net/extras/highlightingAllValidPorts.html该示例的完整源代码位于页面中。

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.基本上,正如@Ba2sik 所建议的那样,您需要覆盖LinkingTool.doActivateLinkingTool.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

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.该示例突出显示了每个节点的所有有效端口,但您可能对更改具有有效端口的任何节点的外观更感兴趣。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM