How did Ports work?

[rsoika]

Hi, can someone explain how ports (SPort) are working? I want to define only 4 specific docking ports for my visual elements. But I did not found any example or documentation how the SPorts are working and how I can define them.

In my current implementation I guess I have no specific ports and the edges connect somewhere in my elements:

I am thankful for any kind of hint or example code.

[spoenemann]

An edge has one source and one target element. The source and target are either nodes or ports. Ports are similar to nodes, but are assumed to be directly contained by a node and to be positioned somewhere on the node's border.

Basically you can define four ports as children of your nodes, give them fixed positions relative to the node's bounding box, and connect the edges with them. But if you also want to edit the diagram graphically and reassign edges to such ports, the situation is more complex.

[rsoika]

Thanks for your Answer. Yes I figured out this behaviour and I solved it after a lot of guessing. I do now defining 4 ports on North,South,West,East. And I did a lot of CSS to give more user feedback.

I have written also a documentation which is more for GLSP but in its core concept it is all Sprotty stuff. If you like, you can take parts of that for you own project documentation. Sprotty and GLSP are so cool projects - but poorly documented ;-)