Highlight available ports in custom linking tool

GoJS
1

Is there a way to highlight all ports that are available to be linked from/to given the state of a tool?

For instance, I want to highlight all available fromPorts on the diagram. Once I select one, I want to highlight all available toPorts which match a certain criteria. This would be managed through my ClickLinkingTool I’ve created.

I’ve gone through several examples that demonstrate the highlighting of connected nodes and links, however, this is not what I want to do.

2

Some samples, such as Flowchart, demonstrate highlighting all of the ports of a node when the mouse passes over the node.

You could use the same technique to highlight all ports of all nodes that match your criteria.

Basically, I’m suggesting that you modify the color of all such ports.

3

Ah, thanks. I must have missed that one.

So, in theory, I should be able to iterate over all the nodes in the diagram, and then all the ports on each node and change background/stroke/whatever on every port that matches my criteria?

4

Yes, and in practice too.

diagram.nodes.each(function(n) {
    n.ports.each(function(p) {
        p.fill = matchesCriteria(p) ? "red" : "black";
    });
});

That’s assuming that the ports are all Shapes whose normal Shape.fill is “black”.

5

Aren’t ports GraphObjects though, not shapes?

export class Node extends Part {
    ...
   /**This read-only property returns an iterator over all of the GraphObjects in this node that act as ports.*/
   ports: Iterator<GraphObject>;
}

Edit: I guess I could coerce the type to be a Shape since it’s a derived class of GraphObject.

6

Yes, that’s why I said my example code above was making an assumption about your ports on your nodes.

If your ports are arbitrarily complex panels you’ll need to figure out how you want to highlight them.

7

Okay, thanks. Makes sense.