I am having some difficulties with something that I would call fix point border linking.
I like the default behavior of lucid / lucidchart, which is as follows:
You can only draw links from and to the border of a node.
From-Side: To start drawing, there are four points (next to each side mid points) that are visibly highlighted only when you are near the node
To-Side: A link can be linked to another node on its whole border and it will stay at this fixed border point.
You can also move the Link End as well as the Link Source around the borders after the link is drawn.
I think this is a pretty straight forward feature for nodes that do not have a limited amount or a specific position of ports.
While trying to implement that kind of behavior, I recognized that this seems to be pretty incompatible with the standard behavior GoJS uses.
I was thinking about making a linking container panel that is slightly bigger than everything inside (the actual nodeTemplate panels and shapes). This works of course, but then, the links are always drawn to the center of the node, which does not resonate with the fixed linking points requirement.
Would it even be possible to save such a linking point? Are the fromSpot / toSpot link properties a possibility to save that point, where the link is connected to?
I also thought about lots of invisible and small ports at each side, but that seems to be a pretty inefficient brute force method.
Do you have any idea, how to achieve these requirements? Is there even something like an “out of the box” solution?
This isn’t exactly what you want, but the basic behavior of allowing links to connect wherever they naturally would, and then allowing users to “fix” the connection point manually, is demonstrated in Link Shifting Tool
Users can start drawing a new link from any side of a node to anywhere near another node. As you drag either node around you will see how the links connect naturally to the closest sides.
But the extension renders an extra “tool handle” on each selected Link, at each end of the link. If the user drags it, they can move that end to wherever they like along the sides of the node. After that the link will always connect at that spot, no matter how you drag the node around.
The LinkingTool could be extended to assign that Spot when the link is initially connected, if you want that behavior as you have described.
No temporary ports are needed. Although if you really want them, you could implement them. I think that’s superfluous decoration. Although I do think that sample should change the cursor when the mouse is over the edge of a node. That’s easy to implement by setting cursor: "pointer" on the Shape.
I am now using a combination of Link Shifting Tool and a transparent linkable container element that will be overwritten by its slightly smaller content panels, so that the border is linkable.
This approach indeed still has the side effect that you firstly have to connect the nodes via the standard mid point spots, but I also like the idea of the go.Spot.AllSides behavior that automatically computes optimal routes and can then be overwritten by the link due to the link shifting interactions!