maxGraph/packages/html/stories/PageBreaks.stories.js

import mxgraph from '@mxgraph/core';

import { globalTypes } from '../.storybook/preview';

export default {
  title: 'Printing/PageBreaks',
  argTypes: {
    ...globalTypes,
    contextMenu: {
      type: 'boolean',
      defaultValue: false
    },
    rubberBand: {
      type: 'boolean',
      defaultValue: true
    }
  }
};

const Template = ({ label, ...args }) => {
  const {
    mxGraph,
    mxRectangle,
    mxRubberband,
    mxDomHelpers,
    mxEvent
  } = mxgraph;

  const div = document.createElement('div');

  const container = document.createElement('div');
  container.style.position = 'relative';
  container.style.overflow = 'hidden';
  container.style.width = `${args.width}px`;
  container.style.height = `${args.height}px`;
  container.style.background = 'url(/images/grid.gif)';
  container.style.cursor = 'default';
  div.appendChild(container);

  if (!args.contextMenu)
    mxEvent.disableContextMenu(container);

  // Creates the graph inside the given container
  const graph = new mxGraph(container);
  graph.view.setScale(0.15);
  graph.pageBreaksVisible = true;
  graph.pageBreakDashed = true;
  graph.preferPageSize = true;
  graph.centerZoom = false;
  graph.setPanning(true);

  // Account for the header and footer size in the page format
  const headerSize = 100;
  const footerSize = 100;

  // Removes header and footer from page height
  graph.pageFormat.height -= headerSize + footerSize;

  // Takes zoom into account for moving cells
  graph.graphHandler.scaleGrid = true;

  // Enables rubberband selection
  if (args.rubberBand)
    new mxRubberband(graph);

  // Gets the default parent for inserting new cells. This
  // is normally the first child of the root (ie. layer 0).
  const parent = graph.getDefaultParent();

  // Adds cells to the model in a single step
  graph.getModel().beginUpdate();
  try {
    const v1 = graph.insertVertex(parent, null, 'Hello,', 10, 10, 280, 330);
    const v2 = graph.insertVertex(
      parent,
      null,
      'World!',
      graph.pageFormat.width * graph.pageScale - 280 - 10,
      graph.pageFormat.height * graph.pageScale - 330 - 10,
      280,
      330
    );
    const e1 = graph.insertEdge(parent, null, '', v1, v2);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }

  const buttons = document.createElement('div');
  div.appendChild(buttons);

  buttons.appendChild(
    mxDomHelpers.button('Toggle Page Breaks', function(evt) {
      graph.pageBreaksVisible = !graph.pageBreaksVisible;
      graph.sizeDidChange();
    })
  );

  buttons.appendChild(
    mxDomHelpers.button('Zoom In', function(evt) {
      graph.zoomIn();
    })
  );

  buttons.appendChild(
    mxDomHelpers.button('Zoom Out', function(evt) {
      graph.zoomOut();
    })
  );

  buttons.appendChild(
    mxDomHelpers.button('Print', function(evt) {
      // Matches actual printer paper size and avoids blank pages
      const scale = 0.5;

      // Applies scale to page
      const pf = mxRectangle.fromRectangle(
        graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT
      );
      pf.width = Math.round(pf.width * scale * graph.pageScale);
      pf.height = Math.round(pf.height * scale * graph.pageScale);

      // Finds top left corner of top left page
      const bounds = mxRectangle.fromRectangle(graph.getGraphBounds());
      bounds.x -= graph.view.translate.x * graph.view.scale;
      bounds.y -= graph.view.translate.y * graph.view.scale;

      const x0 = Math.floor(bounds.x / pf.width) * pf.width;
      const y0 = Math.floor(bounds.y / pf.height) * pf.height;

      const preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0);
      preview.marginTop = headerSize * scale * graph.pageScale;
      preview.marginBottom = footerSize * scale * graph.pageScale;
      preview.autoOrigin = false;

      const oldRenderPage = preview.renderPage;
      preview.renderPage = function(w, h, x, y, content, pageNumber) {
        const div = oldRenderPage.apply(this, arguments);

        const header = document.createElement('div');
        header.style.position = 'absolute';
        header.style.boxSizing = 'border-box';
        header.style.fontFamily = 'Arial,Helvetica';
        header.style.height = `${this.marginTop - 10}px`;
        header.style.textAlign = 'center';
        header.style.verticalAlign = 'middle';
        header.style.marginTop = 'auto';
        header.style.fontSize = '12px';
        header.style.width = '100%';

        // Vertical centering for text in header/footer
        header.style.lineHeight = `${this.marginTop - 10}px`;

        const footer = header.cloneNode(true);

        mxUtils.write(header, `Page ${pageNumber} - Header`);
        header.style.borderBottom = '1px solid gray';
        header.style.top = '0px';

        mxUtils.write(footer, `Page ${pageNumber} - Footer`);
        footer.style.borderTop = '1px solid gray';
        footer.style.bottom = '0px';

        div.firstChild.appendChild(footer);
        div.firstChild.appendChild(header);

        return div;
      };

      preview.open();
    })
  );

  buttons.appendChild(
    mxDomHelpers.button('Reset View', function(evt) {
      graph.view.scaleAndTranslate(0.15, 0, 0);
    })
  );

  return div;
}

export const Default = Template.bind({});