Spacing between group in tree mapper

i m working on a tree mapper diagram i want to the two groups in tree mapper to be always separated by a certain distance how is it possible

the groups that are leftside and rightside

do i apply a layout on whole diagram?

Yes, that’s the right idea – the DIagram.layout is responsible for positioning all top-level nodes. In your case the Group.layout is a TreeLayout to form those trees, but there is no Diagram.layout – the groups get their positions via a binding.

I suggest that you set the Diagram.layout. For example, when initializing the Diagram:

$(go.Diagram, . . .,
  {
    . . .,
    layout: $(go.GridLayout, { spacing: new go.Size(200, 100) })
  })

Of course you can adjust the 200 to be a value that suits your needs.

and is it possible to keep the spacing even if i move the node i.e adjust the position of other node

i m using this as my diagram initialization

myDiagram =
Go(go.Diagram, “myDiagramdiv”,
{
“commandHandler.copiesTree”: true,
“commandHandler.deletesTree”: true,
layout: Go(go.GridLayout, {
isOngoing :false,
spacing: new go.Size(200, 0)
}),
initialAutoScale: go.Diagram.Uniform,
// newly drawn links always map a node in one tree to a node in another tree
“linkingTool.archetypeLinkData”: { category: “Mapping” },
“linkingTool.linkValidation”: checkLink,
“relinkingTool.linkValidation”: checkLink,
//initialContentAlignment: go.Spot.Center,
“undoManager.isEnabled”: true,
“InitialLayoutCompleted”: function(e) { showIncremental(“InitialLayout”); },
“ModelChanged”: function(e) {
if (e.isTransactionFinished) { // show the model data in the page’s TextArea
showIncremental(myDiagram.model.toIncrementalJson(e));
// document.getElementById(“mySavedModel”).textContent = e.model.toJson();
}
}
});
myDiagram.addDiagramListener(“ChangedSelection”,
function(e) { updateHighlights(e); } );`

but the groups now goes one under the other

is there a way to attach one group to left of the canvas and other to right

`

That won’t work if there isn’t enough room to maintain your required distance between the groups.

I added that one line to the Tree Mapper sample, and it had the results that I think you want. Do you have any other top-level nodes in your diagram other than the two Groups?

no just 2 groups

and the inner tree is large say a 1000 nodes each

Oh, try setting Layout.isViewportSized to false.

no difference

What about setting GridLayout.wrappingColumn to 2?

i did that too but cz it has not enough space so it goes under the other if i zoom it out and set Layout.isongoing to true it sets it side by side but i need this functionality initially when the diagram is loaded

Setting Layout | GoJS API should have worked.

What’s the value of myDiagram.layout.isViewportSized ?

its false
Screenshot%20from%202019-02-28%2019-11-43
line 7603 printed false


and the diagram

You really shouldn’t be manipulating the contents of the HTMLDivElement that is the host for the Diagram. That is definitely wrong, although it might not explain this problem.

How are you initializing the Diagram? (Please ignore templates.)

> myDiagram =
>     Go(go.Diagram, "myDiagramdiv",
>       {
>         "commandHandler.copiesTree": true,
>         "commandHandler.deletesTree": true,
>         layout: Go(go.GridLayout, {
>           wrappingColumn:2,
>           //isOngoing :true,
>           isViewportSized:false,
>                 spacing: new go.Size(200, 0)
>               }),
>                //initialAutoScale: go.Diagram.Uniform,
>         // newly drawn links always map a node in one tree to a node in another tree
>         "linkingTool.archetypeLinkData": { category: "Mapping" },
>         "linkingTool.linkValidation": checkLink,
>         "relinkingTool.linkValidation": checkLink,
>         //initialContentAlignment: go.Spot.Center,
>         "undoManager.isEnabled": true,
>          "InitialLayoutCompleted": function(e) { showIncremental("InitialLayout"); },
>         "ModelChanged": function(e) {
>           if (e.isTransactionFinished) {  // show the model data in the page's TextArea
>            showIncremental(myDiagram.model.toIncrementalJson(e));
>           //  document.getElementById("mySavedModel").textContent = e.model.toJson();
>           }
>         }
>       });

this is my diagram init
then i load templates and other events

That looks OK to me, so the problem is probably somewhere else.

As I said, I know that the TreeMapper sample is working correctly with that assignment of Diagram.layout, so I don’t know what might be different in your app.