Partial TreeLayout with locations Two Way Binding

GoJS
1

We have a need to allow our users to “save” their layouts of the tree diagrams that they build using our GoJS app. Using two way binding on the position attribute takes care of the “saving” part. Of course, then the problem is keeping that part of the layout nailed down when they add new nodes and/or re-parent existing nodes. I tried a couple of examples, but am unable to see a way forward outside of writing our own layout algorithm. Any tips on supporting “partially automated tree layout”?
Here is what my layout looks like presently:

this.goTreeLayout = GOJS_MAKE(go.TreeLayout,
      {
        isInitial: false,
        isOngoing: false,
        treeStyle: go.TreeLayout.StyleLastParents,
        arrangement: go.TreeLayout.ArrangementHorizontal,
        angle: 90,
        layerSpacing: 35,
        alternateAngle: 90,
        alternateAlignment: go.TreeLayout.AlignmentBus,
        alternateNodeSpacing: 20,
        alternateLayerSpacing: 35,
        alternateChildPortSpot: go.Spot.Left
      });

So, when I initially build the tree, I force an auto layout and then save those positions. Going forward, when a user moves a node (I catch the ‘SelectionMoved’ event on the diagram), I save the updated position/parenting. It looked like the TreeLayout doLayout() method could accept an iterable list of parts, so I briefly tried that idea, but would appreciate advice and example before I spin my wheels too long.

A little more information - by “save” the positions, I mean I persist the information to our backend so that the next time the user loads their diagram, they get the same layout they had before.

2

Have you read GoJS Layouts -- Northwoods Software ? Basically, you can control if and when a Layout becomes invalid, thereby controlling whether it will be performed at the end of the next transaction.

You are have already set two of those properties that control layout invalidation: Layout.isInitial and Layout.isOngoing. By having them false there’s never any layout that happens unless you explicitly request it. So your app should now be faithfully saving and loading the positions of your nodes. Removing nodes or links of course is no problem. Adding a node does require specifying the position of the new node yourself.

Notice in the Mind Map sample how users can move nodes (actually subtrees) manually. But it also offers the ability for the user to request a layout for a particular node, meaning its subtree. (The command is on the context menu.)

In that Mind Map sample, adding a child to a node also performs a layout for that node, but leaves the rest of the diagram unchanged.

Is that what you are looking for? I can easily imagine completely different expectations and features.

3

Thank you so much for your quick response. The Mind Map example was exactly what I needed to get it working the rest of the way. Much appreciated!!