How to make ruler for full screen diagram width for horizontal and vertical

GoJS
1

var gradScaleHoriz =

$(go.Part, "Graduated",

  { graduatedTickUnit: 10, pickable: false, layerName: "Grid", isAnimated: false },

  $(go.Shape, { geometryString: "M0 0 H400" } ,new go.Binding('width')),

  $(go.Shape, { geometryString: "M0 0 V3", interval: 1 }),

  $(go.Shape, { geometryString: "M0 0 V15", interval: 10 }),

  $(go.TextBlock,

    {

      font: "12px sans-serif",

      interval: 10,

      alignmentFocus: go.Spot.TopLeft,

      segmentOffset: new go.Point(0, 0)

    }

    

  ),



   

  

);

var gradScaleVert =

$(go.Part, "Graduated",

  { graduatedTickUnit: 10, pickable: false, layerName: "Grid", isAnimated: false ,graduatedMin:0, graduatedMax: 10,

  graduatedTickBase: 0,  },

  $(go.Shape, { geometryString: "M0 0 V400" }),

  $(go.Shape, { geometryString: "M0 0 V3", interval: 1, alignmentFocus: go.Spot.Bottom }),

  $(go.Shape, { geometryString: "M0 0 V15", interval: 20, alignmentFocus: go.Spot.Bottom }),

  $(go.TextBlock,

    {

      font: "12px sans-serif",

      segmentOrientation: go.Link.OrientOpposite,

      interval: 5,

      alignmentFocus: go.Spot.BottomLeft,

      segmentOffset: new go.Point(0, -7)

    }

  )

  

);

myDiagram.addDiagramListener(“ViewportBoundsChanged”, updateScales);

function updateScales() {

  var vb = myDiagram.viewportBounds;

  vb.width = 1000;

  vb.height = 600;

    

  if (!vb.isReal()) return;

  myDiagram.commit(function(diag) {

    // Update properties of horizontal scale to reflect viewport

    gradScaleHoriz.location = new go.Point(vb.x, vb.y);

    gradScaleHoriz.graduatedMin = vb.x;

    gradScaleHoriz.graduatedMax = vb.right;

    gradScaleHoriz.scale = 1 / diag.scale;

   

    // Update properties of vertical scale to reflect viewport

    gradScaleVert.location = new go.Point(vb.x, vb.y);

    gradScaleVert.graduatedMin = vb.y;

    gradScaleVert.graduatedMax = vb.bottom;

    gradScaleVert.scale = 1 / diag.scale;

  }, null);

}
2

You started from the Rulered Diagram sample, didn’t you? Diagram with Rulers

If so, you need to add two statements to the updateScales function in that sample:

      function updateScales() {
        var vb = myDiagram.viewportBounds;
        if (!vb.isReal()) return;
        myDiagram.commit(function(diag) {
          // Update properties of horizontal scale to reflect viewport
          gradScaleHoriz.elt(0).width = diag.viewportBounds.width * diag.scale;
          gradScaleHoriz.location = new go.Point(vb.x, vb.y);
          gradScaleHoriz.graduatedMin = vb.x;
          gradScaleHoriz.graduatedMax = vb.right;
          gradScaleHoriz.scale = 1 / diag.scale;
          // Update properties of vertical scale to reflect viewport
          gradScaleVert.elt(0).height = diag.viewportBounds.height * diag.scale;
          gradScaleVert.location = new go.Point(vb.x, vb.y);
          gradScaleVert.graduatedMin = vb.y;
          gradScaleVert.graduatedMax = vb.bottom;
          gradScaleVert.scale = 1 / diag.scale;
        }, null);
      }

That change causes the horizontal or vertical path to fit the possibly changed width or height of the viewport.

Whether the diagram or part of your page is full-screen or not should not matter to GoJS. That’s just HTML/CSS/DOM/JavaScript.