We’re currently trying to produce a BPMN layout very similar to the BPMN example on the GoJS samples page, but we want the nodes to be positioned automatically. I have a screenshot below of a simple example:
Yes, GoJS does not have an existing sample like that. We should work on that.
So do you know ahead of time exactly which lane each node should be in? Is the vertical order of the lanes fixed beforehand?
I think the basic idea is to set each lane’s Group.layout to null, and to set the layout of the container of the lanes to a LayeredDigraphLayout (or perhaps a TreeLayout if the graphs are suitable). This will layout all of the nodes and links in all of those lane groups as if the groups did not exist.
The layout would need to be extended to shift nodes up or down to make sure they were in the correct lane, and to expand the breadth of lanes that had multiple nodes overlapping in any area.
We do know ahead of time which nodes appear in which groups. I don’t really mind at the moment which vertical order the lanes are in. The diagram data has no position information in it, so I’m trying to create a fully automatic layout. We do not allow the user to position or resize objects, we rely solely on the layout (currently the tree layout).
In our case, the lanes do not have a container, they’re individual groups on the diagram (we don’t have a concept of pools).
I currently extend the the layeredDigraph layout and manually size and position the lanes after doLayout has been run of LayeredDigraph layout - maybe this isn’t the best way to do it.
Assuming each lane is one row, you can assign the row for each node. To determine the column for each node, you would run a TreeLayout or a LayeredDigraphLayout with overrides that made commitNodes and commitLinks no-ops, and with an override of commitLayers, which provides column information.
So Diagram.layout would be a TableLayout, and you would not need to use Groups at all – all Nodes would be top-level Nodes. Note that that TreeLayout or LayeredDigraphLayout would not be the Diagram.layout – it would just be an instance upon which you explicitly called doLayout, passing all of the Nodes and Links that you want to lay out, just to capture the “column” information for each node.
I think you can implement the visual appearance of lanes by using Parts in layerName: "Background" at column: 1 with columnSpan: 9999 consisting of simple rectangular Shapes. Lane headers would go in column: 0, just as that Table Layout sample demonstrates.
I found this topic，which is a bit old.But that’s exactly what I’ve come across，I am a novice for gojs,and I see you have solved this problem, so I want to learn from your code, can you share your gojs code? Thank you.