Group with multiple placeholders?

GoJS
1

Hello, I’d like to achieve this type of diagram:

Blank Flowchart - New Page (2).png800×800 12 KB

I can have Node1, 2, 3… in Group’s main placeholder.
But I’d like to have other nodes (so I can link them) belonging to the groups and positioned on their boundaries.
I’ve been looking around layers and layout but I’m not sure which approach to start with.
Could you please provide me with some hints?
Thanks & Regards,
Jerome

2

Do you really need X,Y,Z,W to be Nodes, or can they just be ports on Group1 or Group2?
In other words, must they be separately selectable and movable/copyable/deletable Nodes? Or can they just be big blue circular ports that are always positioned on the left or right sides of a group, just as they might be on regular nodes?

3

Hey Walter,
They can be ports actually. The diagram is read-only. The number of port can vary. How will I achieve even port distribution along the group boundary (one port: vertically centered, 2 ports: on the third, etc). Would I have to add them once the group is calculated so I know it’s dimension? Or just have a “Vertical” panel and add as many ports I have within it, and position the panel on the side of the group? Anyway, will tinker further with ports.
Thanks for the idea!
Jerome

4

Here you go: Minimal GoJS Sample

5

Great! With tables… will definitely integrate this. Many thanks for the fast and comprehensive answer!

6

Previously my group had a GridLayout with a wrappingColumn: 1. Now that I have a Table layout for the group, how can I vertically stack the items in the Placeholder?

7

The Group.layout is a Layout that positions the group’s member Nodes.

That is completely independent of the Panel.type that the Group is, because the Group class derives from the Panel class.

Layout positions Nodes in document coordinates. Panel lays out GraphObjects (its visual tree) within its own coordinate system.

8

Ok, I could have tried that! Thanks.