Printing

Printing a Diagram is typically accomplished by making several images of the Diagram and either saving them, inserting them into a PDF or other document, or printing them directly from the browser. On this page we will create several images out of a large Diagram and prepare a separate window holding those images. That window is what is actually printed.

This page uses Diagram.makeSvg, which has its own introduction page: Making Images with GoJS. Depending on your situation, you may want to use raster images to print by calling Diagram.makeImage instead.

Below is the Diagram we are going to prepare for printing, scaled down to fit on this page.

  window.myDiagram = diagram;
  myDiagram.autoScale = go.AutoScale.Uniform;

  // define the Node template
  myDiagram.nodeTemplate =
    new go.Node("Spot", { locationSpot: go.Spot.Center })
      .add(
        new go.Shape("Rectangle",
            { fill: "lightgray",  // the initial value, but data-binding may provide different value
              stroke: "black",
              desiredSize: new go.Size(30, 30) })
          .bind("fill"),
        new go.TextBlock()
          .bind("text")
      );

  // define the Link template to be minimal
  myDiagram.linkTemplate =
    new go.Link({ selectable: false })
      .add(new go.Shape());

  myDiagram.layout = new go.LayeredDigraphLayout();

  const minNodes = 125, maxNodes = 125;
  myDiagram.startTransaction("generateDigraph");
  // replace the diagram's model's nodeDataArray
  const nodeArray = [];
  // get the values from the fields and create a random number of nodes within the range
  let min = parseInt(minNodes, 10);
  let max = parseInt(maxNodes, 10);
  if (isNaN(min)) min = 0;
  if (isNaN(max) || max < min) max = min;
  const numNodes = Math.floor(Math.random() * (max - min + 1)) + min;
  for (let i = 0; i < numNodes; i++) {
    nodeArray.push({
      key: i,
      text: i.toString(),
      fill: go.Brush.randomColor()
    });
  }

  // randomize the node data
  for (let i = 0; i < nodeArray.length; i++) {
    const swap = Math.floor(Math.random() * nodeArray.length);
    const temp = nodeArray[swap];
    nodeArray[swap] = nodeArray[i];
    nodeArray[i] = temp;
  }

  // set the nodeDataArray to this array of objects
  myDiagram.model.nodeDataArray = nodeArray;
  // replace the diagram's model's linkDataArray
  const linkArray = [];
  const nit = myDiagram.nodes;
  const nodes = new go.List();
  nodes.addAll(nit);
  for (let i = 0; i < nodes.count - 1; i++) {
    const from = nodes.elt(i);
    const numto = Math.floor(1 + (Math.random() * 3) / 2);
    for (let j = 0; j < numto; j++) {
      let idx = Math.floor(i + 5 + Math.random() * 10);
      if (idx >= nodes.count) idx = i + (Math.random() * (nodes.count - i)) | 0;
      const to = nodes.elt(idx);
      linkArray.push({ from: from.data.key, to: to.data.key });
    }
  }
  myDiagram.model.linkDataArray = linkArray;
  myDiagram.commitTransaction("generateDigraph");

  // print the diagram by opening a new window holding SVG images of the diagram contents for each page
  function printDiagram(width, height) {
    if (!width) width = 700;
    if (!height) height = 960;
    const svgWindow = window.open();
    if (!svgWindow) return; // failure to open a new Window
    svgWindow.document.title = "GoJS Flowchart";
    svgWindow.document.body.style.margin = "0px";
    const printSize = new go.Size(width, height);
    const bnds = myDiagram.documentBounds;
    let x = bnds.x;
    let y = bnds.y;
    while (y < bnds.bottom) {
      while (x < bnds.right) {
        const svg = myDiagram.makeSvg({
          scale: 1.0,
          position: new go.Point(x, y),
          size: printSize,
          background: myDiagram.div.style.background
        });
        svgWindow.document.body.appendChild(svg);
        x += printSize.width;
      }
      x = bnds.x;
      y += printSize.height;
    }
    setTimeout(() => { svgWindow.print(); svgWindow.close(); }, 1);
  }
  window.printDiagram = printDiagram;

Our code for print preparation is in a printDiagram function that cuts the Diagram into several images of a given width and height and renders each such page individually. Those images are in a separate window just to make it easier to manage than combining them with the contents of this page.

  // print the diagram by opening a new window holding SVG images of the diagram contents for each page
  function printDiagram(width, height) {
    if (!width) width = 700;
    if (!height) height = 960;
    const svgWindow = window.open();
    if (!svgWindow) return; // failure to open a new Window
    svgWindow.document.title = "GoJS Printing";
    svgWindow.document.body.style.margin = "0px";
    const printSize = new go.Size(width, height);
    const bnds = myDiagram.documentBounds;
    let x = bnds.x;
    let y = bnds.y;
    while (y < bnds.bottom) {
      while (x < bnds.right) {
        const svg = myDiagram.makeSvg({
          scale: 1.0,
          position: new go.Point(x, y),
          size: printSize,
          background: myDiagram.themeManager.findValue('div', 'colors'),
        });
        svgWindow.document.body.appendChild(svg);
        x += printSize.width;
      }
      x = bnds.x;
      y += printSize.height;
    }
    setTimeout(() => { svgWindow.print(); svgWindow.close(); }, 1);
  }