Dangling nodes automatically move to bottom side of the diagram

GoJS
#1

Hi,

We are using go js for building diagrams and we enabled relinking in our diagrams. So when user attempts to relink a link, the disconnected node, automatically moves to the bottom side of the diagram.

For instance, say initially the diagram is in below state:

Screenshot 2020-12-07 at 9.50.43 PM
Screenshot 2020-12-07 at 9.50.43 PM952×1358 30.8 KB

And after user attempts to relink “Start” node to “Select Radio Button”, the “Get Input Fields” node moves down.

Screenshot 2020-12-07 at 9.50.10 PM
Screenshot 2020-12-07 at 9.50.10 PM1027×1359 31.8 KB

But we to the “Get Input Fields” node to stay there itself. May be it can move to left or right but stay in the same layer where it was originally.

Is this even possible, if yes, is there any configuration to control this behaviour?

#2

As always, the automatic positioning of nodes is determined by the layout. What is your Diagram.layout?

#3

It’s tree layout with below configuration :

$(go.TreeLayout, {
			angle: 90,
			nodeSpacing: 100,
			layerSpacing: 120,
			alternateAngle: 90,
		});
#4

Your second screenshot doesn’t show a tree-structured graph, so it shouldn’t be surprising when TreeLayout doesn’t do what you were hoping for.

I think the reason you got the result that you did is because the new graph now has two roots. And since the default value for TreeLayout.arrangement is go.TreeLayout.ArrangementVertical, the two trees were placed above each other.

How is the layout supposed to know that the new root is supposed to stay there?

I suppose you could try setting TreeLayout.arrangement to go.TreeLayout.ArrangementFixedRoots, but I bet you’ll soon run into another situation where the layout doesn’t do what you want.

Can you provide a concise algorithm for how you want your diagram to be laid out, for all kinds of graphs that the user might possibly create?

#5

So I tried setting the layout’s arrangement property to go.TreeLayout.ArrangementFixedRoots. Though it leaves dangling node at the same level, it overlaps with other nodes.

And after setting arrangement property, the above diagram state becomes as below:

Screenshot 2020-12-08 at 10.31.29 AM
Screenshot 2020-12-08 at 10.31.29 AM964×1198 22.3 KB

The “Get Input Fields” moved underneath the “Select Radio Button” node.

And regarding, various possible layouts, as we allow relinking/ deleting some nodes in between, any such operation may leave behind some dangling nodes. And such nodes should be placed at the same layer (level) where they were originally - shouldn’t overlap with other nodes and shouldn’t move down to the bottom of the diagram.

Though we would be using go.TreeLayout, in future we might allow flipping layout’s angle :

  • top to bottom (We are currently using this for all diagrams)
  • left to right
  • right to left

It would just be awesome, if we can retain position of dangling nodes in all of these layouts with relinking/ deleing nodes support.

#6

I still don’t understand what kind of layout you want. Have you tried using LayeredDigraphLayout instead? Or maybe ParallelLayout?

You might be interested in: https://gojs.net/latest/samples/flowgrammer.html