The diagram location is always top center

GoJS
1

I use the following settings to initiate a diagram:

this.packageDiagram.initialDocumentSpot = go.Spot.TopCenter;
this.packageDiagram.initialViewportSpot = go.Spot.TopCenter;

My model is added after the diagram layout has loaded. When adding it, I add a location to each node and simply increase the “y” coordinate so that the nodes do not “stick” to each other.

Node height - 20, indent - 10

My location looks like this:

node1 - loc: “0, 0”
node2 - loc: “0, 30”
node3 - loc: “0, 60”
…

In order to align the diagram, I execute the following code:

this.packageDiagram.alignDocument(go.Spot.TopCenter, go.Spot.TopCenter);
this.packageDiagram.requestUpdate();

Since other elements or a decrease in the size of the browser can change the size of the diagram, I need to call the alignDocument function and the requestUpdate function each time.

In order to determine that the resizing has occurred, I listen to the diagram event - ViewportBoundsChanged and when it occurs, I call the following code:

this.packageDiagram.alignDocument(go.Spot.TopCenter, go.Spot.TopCenter);
this.packageDiagram.requestUpdate();

This works well, but I can’t use a scroll on the diagram, because when I move it, ViewportBoundsChanged is called and the code is executed to align the diagram.

Is there a way to make it work in a different way and also get a workable scroll?

2

You cannot depend on the “ViewportBoundsChanged” DiagramEvent to detect that the HTML DIV has changed size. In fact there is no DOM event that anyone can depend on to find out that a DIV has changed size, or else there would not be a need for Diagram.requestUpdate and Resizing Diagrams -- Northwoods Software.

A call to requestUpdate will result in a “ViewportBoundsChanged” event if the DIV changed size, among many other reasons that event will occur.