Resize document bounds

GoJS
1

Hey,

My diagram is listening to “InitialLayoutCompleted” event.
What I’m trying to do is position the diagram at the center of div horizontally and vertically.
Another thing, the diagram can’t be in the top 50 pixels of the div. please see the following example:

image
image.png773×394 4.14 KB

The problem starts when the size of the diagram (documentBounds) is larger than the size of the div.
In this case, I would like to change the height of the diagram. smaller than the height of the div.

How do I change the diagram size (documentBounds) and fit the zoom to the new size?

this.diagram.addDiagramListener(‘InitialLayoutCompleted’, this.centralizOnLoad);

centralizOnLoad(): void {
let divHeight = this.diagram.div.clientHeight;
let documentHeigth = this.diagram.documentBounds.height;
if (divHeight < documentHeigth) {
this.diagram.documentBounds.height = divHeight - 50;
this.diagram.zoomToFit();
this.diagram.position = new go.Point(paddingFromLeft, -50);
this.diagram.requestUpdate();
}
}

Thank you

2

Why not have the menu be above the diagram DIV, rather than overlapping it? Then you can just set Diagram.initialAutoScale to go.Diagram.Uniform.

3

I try to avoid overlapping only on the first loading (the user can drag the diagram over the menu)

4

At which time you could resize the Diagram DIV…

5

So there is no way to resize the document bounds before loading?

6

What you could try is setting the Diagram.padding to have a large margin on the top.

You can then set it back to have a small narrow margin all-around when you don’t need to worry about the overlapping menu.

7

I’m setting the Diagram.padding with the following values: new go.Margin(50, 0 , 0, 0)
When I test it on a smaller browser’s screen the top margin looks smaller then 50 pixel

8

Well, the Diagram.padding is in document coordinates, so the apparent distance depends on the Diagram.scale. I suppose in your “InitialLayoutCompleted” DiagramEvent listener you could set the Diagram.padding depending on the Diagram.scale.