maxGraph/packages/html/stories/OffPage.stories.js

import { Graph, CellTracker, constants, InternalEvent } from '@maxgraph/core';

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

export default {
  title: 'Zoom_OffPage/OffPage',
  argTypes: {
    ...globalTypes,
  },
};

const Template = ({ label, ...args }) => {
  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';

  // Use complete cell as highlight region
  constants.ACTIVE_REGION = 1;

  // Creates the graph inside the given container
  const graph = new Graph(container);
  graph.setEnabled(false);

  // Highlights offpage connectors
  const highlight = new CellTracker(graph, null, function (me) {
    const cell = me.getCell();

    if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
      return cell;
    }

    return null;
  });

  // Handles clicks on offpage connectors and
  // executes function in user object
  graph.addListener(InternalEvent.CLICK, function (source, evt) {
    const cell = evt.getProperty('cell');

    if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
      cell.value.create();
    }
  });

  // Handles clicks on offpage connectors and
  // executes function in user object
  graph.getCursorForCell = function (cell) {
    if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
      return 'pointer';
    }
  };

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

  first = function () {
    const value = {
      toString() {
        return 'Next';
      },
      create: second,
    };

    // Adds cells to the model in a single step
    graph.batchUpdate(() => {
      graph.getDataModel().setRoot(graph.getDataModel().createRoot());
      const parent = graph.getDefaultParent();

      const v1 = graph.insertVertex(
        parent,
        null,
        'Click',
        30,
        20,
        80,
        30,
        'fillColor=#FFFF88;strokeColor=#FF1A00'
      );
      const v2 = graph.insertVertex(
        parent,
        null,
        'Next',
        20,
        150,
        100,
        30,
        'fillColor=#FFFF88;strokeColor=#FF1A00'
      );
      const v3 = graph.insertVertex(
        parent,
        null,
        value,
        200,
        150,
        40,
        40,
        'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'
      );
      const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#FF1A00');
    });
  };

  second = function () {
    const value = {
      toString() {
        return 'Prev';
      },
      create: first,
    };

    // Adds cells to the model in a single step
    graph.batchUpdate(() => {
      graph.getDataModel().setRoot(graph.getDataModel().createRoot());
      const parent = graph.getDefaultParent();

      const v1 = graph.insertVertex(
        parent,
        null,
        'Click',
        30,
        20,
        80,
        30,
        'fillColor=#CDEB8B;strokeColor=#008C00'
      );
      const v2 = graph.insertVertex(
        parent,
        null,
        'Prev',
        220,
        20,
        100,
        30,
        'fillColor=#CDEB8B;strokeColor=#008C00'
      );
      const v3 = graph.insertVertex(
        parent,
        null,
        value,
        30,
        150,
        40,
        40,
        'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'
      );
      const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#008C00');
    });
  };

  first();

  return container;
};

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