Hi,
I found strange a behavior in flowgrammer example. Let me show you in below steps:-
I don’t want to shift the paths of Decision Box after adding action3.
Please help.
I believe that sample uses LayeredDigraphLayout, so one does not really control the ordering of nodes in each layer. I suppose you could try using TreeLayout to see what happens in that situation. TreeLayout lets you control the ordering of the children of each parent node.
Thanks for the reply. I tried the TreeLayout, but same behavior happened. Can you please provide me the setting, so that this behavior can be eliminated.
You could use TreeLayout.sorting and TreeLayout.comparer to keep children in the order you want them. See the bottom of the Intro page on trees. You could either compare them based on keys, or add some separate index property to the data for comparing purposes.
Using TreeLayout.sorting and TreeLayout.comparer, i can do the sorting of children nodes. But i don’t want to do any sorting. Is there any configuration, so that my nodes should not be moved. Nodes should remain at their original positions.
Thanks in Advance
The whole point of any layout is to position nodes in certain manners, and if you have added a node and some links, you want to perform a layout so that the new node is positioned reasonably relative to the other nodes. Certainly if you are adding that “action3” node, you want at least the “action2” and “End” nodes to move down to make room for the new node.
And as I said, LayeredDigraphLayout tries to minimize link crossings, so it explicitly does not try to order the nodes in a layer in any particular manner.
I’ll take a look at this later today and see if we can improve the sample.
Hi walter,
Thanks for the solution. But still i am stuck.In your solution, you had put two different port on the Decision node. And links are coming out from those two different ports. But i want both outward links from a single port on Decision box. Because your solution will work only if there are two outward link from Decision Box. What if i want four outward link from Decision box from a single port.
In short, i want same behavior of original flowgrammer example except sorting and and shifting of children nodes of decision box node.
Thanks
LayeredDigraphLayout understands about the positions/orders of the ports with which links connect with nodes. When there are multiple links connecting with the same port, LayeredDigraphLayout will treat all of those links as causing the same amount of link crossings, so the connected nodes could be re-ordered unless there are other links that influence the number of link crossings. That is why having the “true” and “false” links coming out of the left and right ports will cause them to tend to stay on their respective sides of the “Condition” node, assuming other links do not force a different ordering.
Yes walter,I understood the concept of LayeredDigraphlayout. But Is there any way or solution, so that i can solve my problem.
Problem is:-Avoid sorting or reshuffling of brances and branches should come from single port of condition node.
Thanks.
I’m saying that if you want to use LayeredDigraphLayout, you’ll need to use links connected with separate ports at different locations, so that the layout knows about the possibility of crossing links.
Ok. I got it. So using LayeredDigraphLayout, I cannot solve my problem. Is there any other layout, which solves my problem?
Thanks
Why can you not do basically what I did in the new Flowgrammer sample? Add ports as you add links.
Yes walter, according to your new Flowgrammer sample, i can add atmost 3 outward links from condition node. But if i want to add 6 or more outward link from condition node, then how can i achieve.
Could you please provide me the sample with 6 or more outward links from condition node? It would be a great help.
Thanks a lot.
The easiest thing to do would be to define the “Condition” node template with 6 or more ports, each at different X positions. The Y position probably does not matter if the layout direction is downward.
As you connect up links you need to make sure that they connect with ports that are not already in use. Of course that’s easy if you create all six links at once, as the Flowgrammer sample always has done with the two true/false links.
Can you please provide me the new flowgrammer sample of the solution which you have provided above?
It would help me.
Thanks
?? The new Flowgrammer sample is at the Flowgrammer link that I gave above. As is typical for most samples, the complete implementation is contained within the page itself.
No, i want implementation with 6 outwards links from condition node. Can you please provide me the implementation as i am new to GOJS. Thanks
I suggest that you learn how to design nodes using panels: GoJS Panels -- Northwoods Software and GoJS Table Panels -- Northwoods Software. Also look at GoJS Nodes -- Northwoods Software.
And of course you can look carefully at the node templates both in the Flowgrammer sample as well as in the hundreds of other samples that we have at GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software.
