Position of nodes when in tabs

GoJS
1

hi ,
I have tabs which shows different nodes as gojs diagram. I have a functionality to restore unsaved tabs, when i restore the tabs, the first tab renders the diagram in appropriate position.(it does auto layout). But all other tabs show diagram on the top left corner.
Is there a way to auto layout or centralize the diagrams in each tab ?
I tried using initialContentAlignment to go.Spot.Center, but that isnt wrking.
Layout used is LayeredDigraphLayout

2

Is there a different instance of Diagram for each tab? Then when you load the model a layout should happen automatically (unless you have set Layout.isInitial to false).

If you are sharing a single Diagram amongst the tabs, how are you replacing the contents to be appropriate for each tab? If you are replacing the Diagram.model, then (as above), a layout should be happening automatically. If not, how are you customizing the contents of the diagram to be what you want for each tab?

3

we r replacing the model,

this is set in initdiagram,
initialDocumentSpot: go.Spot.Center,
initialViewportSpot: go.Spot.Center,
minScale: 0.08,
maxScale: 4.6,
// contentAlignment: go.Spot.Center,
initialContentAlignment: go.Spot.Center,

and layout is
diagram.layout = $(go.LayeredDigraphLayout, {
setsPortSpots: false,
isOngoing: false,
isInitial: true,
});

4

So each time the user clicks a new tab that has a diagram in it, your code sets Diagram.model to a new instance of a Model?

If so, that should cause a layout to happen.

If you aren’t doing that, then maybe you just need to call myDiagram.layoutDiagram(true)

5

we r doing that ,
InitialLayoutCompleted: (e) => {
setTimeout(() => {
e.diagram.layoutDiagram(true);
});
},

still it doesnt go to center.

In fact we have a autolayout button too, which when clicked auto layouts the diagram.
In this case when i click , the diagram still remains at the top. Is it that the the diagram assumes the autolayout position to be at top or maybe the size/positions of the canvas/view port is not being determined.

6

Oh, so you aren’t complaining about the layout not happening, but just where the diagram is scrolled. Have you set Diagram.initialContentAlignment to go.Spot.Center or something like that?

If you explicitly call Diagram.layoutDiagram, then you could call Diagram.alignDocument.

7

On doing diagram.alignDocument - go.Spot.center, the canvas is focused to the center, the diagram still remains at the left top corner, i have to scroll to left to see the diagram.
I have tried adding Diagram.initialContentAlignment to go.Spot.Center, but that doesnot make any change.
I gave ContentAlignment as go.Spot.Center , this works and it moves the diagram to center, but on using this, i would not be able to move / drag the diagram nodes. In my project , we should allow the user to move the nodes/diagram

8

I suspect that there wasn’t time for the diagram to respond to the changed Div size before you called alignDocument. Try calling Diagram.requestUpdate immediately after each change of the Div size. Resizing Diagrams -- Northwoods Software