Dynamically update nodes layout for a diagram

GoJS
1

Hi,

Could anyone please help me in achieving the following, I am not able to get that using go.js.

I have a Diagram with layout set to LayeredDigraphLayout with GraphicLinkModel, in which whenever I add a node and it’s link, the nodes are placed automatically to certain position as per the layout properties.

But what I want is whenever user manually changes the position of node, then further addition or deletion of the nodes should be set according to the layout properly.

In my case initial layout is coming fine (as per the layout set) input, output and operation are nodes:

Once I move any node manually(Operation node to upward), I am setting isLayoutPositioned to false for that particular node (location values is binded for the moved node):

After the manual change of the position of Operation node(for which isLayoutPositioned is set to false), when I add any other node (let’s say another output node) then I want it to be added in the same layer as of other output nodes but the actual behavior is something else:

Desired view:

Actual View:

Please help me in understanding the problem and the possible fix for the same.

Layout properties set:

myDiagram.layout = self.GOMake(go.LayeredDigraphLayout);
myDiagram.layout.direction = 0;
myDiagram.layout.nodeSpacing = 5;
myDiagram.layout.layerSpacing = 20;
myDiagram.layout.isInitial = false;
myDiagram.layout.layeringOption = go.LayeredDigraphLayout.LayerOptimalLinkLength;
myDiagram.layout.aggressiveOption = go.LayeredDigraphLayout.AggressiveLess;

Link Template (Please ignore self object) :

self.myDiagram.linkTemplateMap.add("",
self.GOMake(go.Link, {
curve: go.Link.Bezier,
fromShortLength: -2,
toShortLength: -2,
selectable: false,
relinkableFrom: false,
relinkableTo: false,
reshapable: false
},
self.GOMake(go.Shape, {
strokeWidth: 3
}

    )));

Thanks
Rakesh Sharma

2

Remember what I said last in http://www.nwoods.com/forum/forum_posts.asp?TID=5851 ? That’s what happens when you set Part.isLayoutPositioned = false – it no longer participates in the layout, as if the node or link no longer existed. So the node doesn’t get moved by the layout, but the layout moves everything else ignoring that node.

Can you reliably identify the nodes and links that you do want to be moved without regard to any other nodes or links? If so, you could perform a layout that only involved those nodes and links. LayeredDigraphLayout doesn’t make that easy, but you could do that with TreeLayout. In fact this is demonstrated by the Mind Map sample: http://gojs.net/latest/samples/mindmap.html

3

Hi Walter,

I understood the use isLayoutPositioned. But my issue is, even though I have set isLayoutPositioned false only for Operation node in above scenario, why the nodes getting added making it so.

If I am not understanding it wrong the output nodes getting added after setting isLayoutPositioned to false for Operation, are not getting added in a new layer, instead are moved to the existing layer.


How can I handle this? My output should be like the one shown in Desired View image above, but it is coming as Actual view. Is there any properties which I need to set for Layout or Links which I am missing.


Thanks
Rakesh Sharma

4

If you set isLayoutPositioned to false for your Operation node, then it’s as if that Node and thus all Links connecting with that Node do not exist as far as Layouts are concerned. In the screenshot there are four separate subnetworks, each with a single vertex, being laid out.

I already suggested that you do something like what the Mind Map sample does.

5

Hi,

Thanks for the response.

Could you please guide me to implement my specific requirement using go.js.

Actually what I wanted to achieve is:

By default the nodes should be arranged in layout (tree or layered) similar to mindmap example.
But when user intentionally drags any of the node to different position (different from the position set by layout), then adding further node to the diagram should not move back the node in layout and also all the nodes that will be further connected to that particular node (node which got moved) should be arranged according the layout (as if the dragged position of the node is the actual position of node assigned by layout).

Please help me in implementing the above explained scenario. What customization I should do if required.

Thanks

6

Doesn’t the Mind Map sample do exactly that? I suppose except when adding to the root, but that could be coded differently.

You could explicitly layout only those nodes and links that you do want to be laid out. That’s basically what the Mind Map sample does. TreeLayout has the handy option of setting TreeLayout.arrangement = go.TreeLayout.ArrangementFixedRoots, so that the root node stays fixed in place and all of its descendants are positioned relative to that root. There isn’t any equivalent in LayeredDigraphLayout, so after the partial layout you would need to call Diagram.moveParts to put the laid out Nodes and Links to where you want them to be relative to the rest of the diagram.