Children nodes can be either in serial (child 1 and child 3 in fig.) or parallel (child 1 and child 2 in fig.).
At any time, a new node can be added in the graph as a child to any node at level 1 or level 2, either in serial or parallel.
Indentation is used to depict a change in hierarchy level. [add indentation along levels in image created]
User should not be allowed to move any node freely. I plan to provide restrictive drag/drop functionality in future.
Problem: How to create a second branch from any parent node (like in fig. above) ?
I tried using GoJS’s tree layout for this, but could not make it work as expected. Here is the layout I used: layout: $(go.TreeLayout, {alignment: go.TreeLayout.AlignmentStart, angle: 90});
Please recommend a GoJs layout along with required configurations, which can solve all of the requirements mentioned above.
I’ve added “S” and “P” buttons to dynamically add a child of “serial” or “parallel” type.
The latter is indicated by an “assistant” property on the node data. (Of course you can use whatever property name you like – just replace the uses of it in the code.)
I also added a “TreeExpanderButton”, just so you can see what happens when subtrees are collapsed and expanded.
If you don’t want users to move any nodes around, set Diagram.allowMove to false. You probably also want to set Diagram.allowCopy to false.
In the solution suggested here, I see that there are two subtrees under every node, where one is serial and the other one is parallel. However, what I need is the possibility to have a node in parallel to any node present in serial line.
We can consider that there is a main serial bus of children nodes available under the parent, and one or more nodes can be added in parallel to any of these serial bus nodes (refer image below). Also, each node has the ability of creating a subtree of their own children below them, following all similar properties mentioned here and previously.
I believe the layout I created for you exactly meets all of your stated requirements. Each node can have any number of serial children and any number of parallel children. All serial children connect from the left bottom side of the parent node and are arranged vertically. All parallel children connect from the right bottom side of the parent node and are arranged horizontally. Set Diagram properties to limit the user’s permissions.
If you have additional requirements, I suggest that you adapt the code.
Hey @walter , I have been working on the layout you recommended. I have increased the width of the nodes in the layout however the amount of indentation between them remains constant.
Currently, I am only using serial children. Can you please tell me the property I should change with which I can get the indentation value increased?
Hi @walter, thanks for the response. I went thought it and I guess the difference between the layout you suggested before and this one is if the routing is allowed in the layout or not.
If you see the figure in last update there is a slight indentation in the Root and child level and similarly a slight indentation in child and grand-child level. I want to know how can I increase this indentation amount.
