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 ?
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.