Zooming while keeping background grid

GoJS
1

@walter But when we do “zoom in” or “zoom out” on the diagram the position of the grid dots are changing. How can we set a static grid dots?

2

Did you want the grid to look the same even when the user scrolls or pans or zooms? Should it expand if the HTMLDivElement grows in size?

3

Yes. If I have this code

  const $ = go.GraphObject.make;  // for more concise visual tree definitions
  ctrl.diagram = $(go.Diagram, "canvas",
    {
      "grid.visible": true,
      "grid.gridCellSize": new go.Size(9, 9),
    }
  );

The grid is visible and when we do zoom in or zoom out the lines are in the same x,y position. They are consistent.
But if we do this

  const $ = go.GraphObject.make; 
  ctrl.diagram = $(go.Diagram, "canvas",
    {
      "grid.visible": true,
      "grid.gridCellSize": new go.Size(9, 9),
      grid: $(go.Panel, "Grid",
         { 
           gridCellSize: new go.Size(9, 9), 
           visible: true,
           gridOrigin: new go.Point(0, 0) // Set the origin of the grid
         },
        
        $(go.Shape, "LineH", { strokeDashArray: [1, 9], stroke: "gray" }),
      ),
    }
  );

The behavior of the grid zooming in or zooming out looks diferent.

4

This code sets two properties on the Diagram.grid and then throws that “Grid” Panel away by replacing it with exactly the same Panel (since Panel.gridOrigin defaults to 0,0) except that there is just one dotted Shape in the panel instead of the default six line shapes. So the grid will definitely look different from the default grid, but the behavior when scrolling or zooming should be exactly the same.

That is because the Diagram.grid is always in document coordinates, so it will shift as the user scrolls, as well as shrinking/expanding as the user zooms.

If you want a grid that does not change appearance as the user scrolls or zooms, then you cannot use the GoJS grid. Create what you want as an image and use that as the background for the diagram’s HTMLDivElement.