How to move the diagram to the center of the Canvas after ViewportBound width change?

GoJS
1

CSS and Diagram attribute values of TreeModel map are as below:
CSS :
width : 100%;
height : 250px;
border : 1px solid black;
margin : 2px

Diagram :
initialAutoScale : go.Diagram.UniformToFill,
maxScale : 0.25,
contentAlignment : go.Spot.Center,
isReadOnly: true,
“animationManager.isEnabled” : false,
Layout : $(go.TreeLayout,
{ angle:90,
layerSpacing:80,
sorting:go.TreeLayout.SortingAscending})

Question: How to re-center GoJS Tree Model diagram auto/dynamically after expanding the width of the view area ?

Scenario : GoJS TreeModel diagram completed “InitialLayoutCompleted” event and gets drawn on web page. The web page contains Notification area + Inspect Element along with GoJS diagram covering around 40% of the entire page.
So let’s say GoJS took 60% of the page width to draw Local View map diagram centered at (x1,y1) and Notification area + Inspect element took 40% of the entire page on the right side.
Now if I close Notification area + Inspect element dynamically after drawing Local View map, I am getting full 100% width of the page for Local View diagram with new page center (x2,y2), but it is not getting redrawn automatically. Instead it just stays in the old page center (x1,y1) without moving to the middle of the page as shown below:

Initial rendering with less space:

Map view - During initial rendering with less space
Map view - During initial rendering with less space1578×958 145 KB

After closing Notification and inspect element: (Map is still centered in the old center)

Map view - After closing Notification and inspect element
Map view - After closing Notification and inspect element1594×938 30 KB

Please suggest me a solution for this problem.

2

Since you have set Diagram.contentAlignment but the content isn’t aligned, my guess is that the diagram doesn’t know that the HTMLDivElement has changed size. There is no DOM event by which it can automatically notice the change in size, so you need to call Diagram.requestUpdate. Please read Resizing Diagrams -- Northwoods Software

3

Resizing Diagrams -- Northwoods Software - In this link it explains how to expand Div, but inside diagram on the canvas remains in same spot.
I’m looking for a solution that explains how to move diagram to new center of the page, not expanding the outside Div. So please suggest me is there any method that does it ?

4

From your screenshots (for which, thank you!) it seems clear that the diagram’s HTMLDivElement should have gotten wider. Since the whole window hasn’t gotten wider, there’s no way (other than polling) for GoJS to know that the Div element has changed size. So if the Div has changed size, you have to call Diagram.requestUpdate afterwards.

In your situation, has the Div changed size? If so, have you called Diagram.requestUpdate?

Then you can call Diagram.alignDocument:

setTimeout(function() { myDiagram.alignDocument(go.Spot.Center, go.Spot.Center); }, 10);
5

Thanks a lot Walter, this tweak helped me in resolving the problem to some extent.