Diagram not fitting to the full screen on large 4k monitors

GoJS
1

We are on gojs 3.1.0. When we look at diagrams on a normal screen the diagram does take up the full space on the canvas. However, when the same diagram is loaded on a larger 4k screen or large iMac screens, the same diagram doesn’t fill the entire canvas space. Is there a setting in gojs that allows us to take up the full screen despite the aspect ratio and window size? Below, I’ve pasted screenshots of the two views and the diagram settings for our gojs diagram.

const dia = $(go.Diagram, {
      allowClipboard: false,
      allowCopy: false,
      allowDelete: true,
      allowDragOut: false,
      allowDrop: false,
      allowGroup: false,
      allowInsert: false,
      allowLink: false,
      allowMove: true,
      allowRelink: false,
      allowReshape: false,
      allowResize: false,
      allowRotate: true,
      allowSelect: true,
      allowTextEdit: false,
      allowUndo: true,
      allowUngroup: false,
      contentAlignment: go.Spot.Center,
      initialAutoScale: go.AutoScale.Uniform,
      scrollMode: go.ScrollMode.Document,
      'animationManager.isEnabled': false,
      padding: 50,
      'dragSelectingTool.delay': 250,
      'toolManager.toolTipDuration': Number.POSITIVE_INFINITY,
      draggingTool: this.multiSelectionDraggingTool,
      'undoManager.isEnabled': false,
      ChangedSelection: this.updateMultiSelectionPart,
      ModelChanged: (e) => {
        if (e.isTransactionFinished) this.updateMultiSelectionPart();
      },
      skipsUndoManager: true,
      model: new go.GraphLinksModel({
        nodeKeyProperty: 'key',
        linkKeyProperty: 'key',
        skipsUndoManager: true,
      }),
    });

Normal screens

image
image1275×403 72.9 KB

Large 4k Screens

image
image3829×1449 262 KB

2

Are the two HTMLDivElements that host the diagram in both cases exactly the same size?

3

We have the diagram wrapped by one html element and a class on the diagram itself and yes, both have the height set to 100%.
//css

.gojs-diagram {
    z-index: 10;
    height: 100%;
    margin: 0 0 0 0px;

    .gojsModel {
      background: var(--gojs-background-color);
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;

      canvas {
        outline: none;
      }
    }
  }
}

//html

4

I meant the size in device-independent pixels, not a percentage.

5

no, we have the diagram height as a percentage. The full application has a height of 100vh so the canvas has a flexible height to take up the remaining height depending on the height of the user device. I tried to change the css to have a set height, and it does look like it takes up the full space until the height becomes something large. I tested it out at 1400px height and it still did not take up the full space.

6

That’s OK – I’m still interested in knowing what the actual pixel width and height are of the diagram’s Div element in both cases.

Note that zoomToFit (or the automated behavior caused by Diagram.autoScale or initialAutoScale) will not increase the scale larger than the Diagram.defaultScale, which defaults to 1.0. That prevents small diagram documents from being zoomed into unnaturally large if zoom-to-fit is called.

7

I think this is what you’re asking for. No, both the heights vary depending on the screen. We do have a diagram event listener that watches the document bounds and calls zoom to fit. To your point, what is “unnaturally large”? Are we able to adjust those settings?

dia.addDiagramListener('DocumentBoundsChanged', (e: go.DiagramEvent) => {

  // if the context menu is not open, then call zoom to fit
  const currentTool = this.hmiDiagramComponent?.diagram.currentTool;
   if (!(currentTool instanceof ContextMenuZoomTool)) {
    dia.zoomToFit()
   }
   
});

normal screen size - 2400x 763.75

image
image1914×646 107 KB

4k size - 3200x 1214.17

image
image3831×1504 202 KB

8

And what are the values of Diagram.scale and Diagram.viewportBounds in each of those two cases?

If the value is 1.0 for the 4K monitor, that would explain why it doesn’t zoom in further – it’s limited by Diagram.defaultScale.