maxGraph/packages/html/stories/HelloWorld.stories.js

import mxgraph from '@mxgraph/core';

export default {
  title: 'Basic/HelloWorld',
  argTypes: {
    width: {
      type: 'number',
      defaultValue: 800
    },
    height: {
      type: 'number',
      defaultValue: 600
    },
    contextMenu: {
      type: 'boolean',
      defaultValue: false
    },
    rubberBand: {
      type: 'boolean',
      defaultValue: true
    }
  }
};

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

  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.cursor = 'default';

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

  const graph = new mxGraph(container);

  if (args.rubberBand)
    new mxRubberband(graph);

  const parent = graph.getDefaultParent();

  graph.batchUpdate(() => {
    // Add cells to the model in a single step
    const vertex1 = graph.insertVertex({
      parent,
      value: 'Hello',
      position: [20, 20],
      size: [80, 30],
      relative: false,
    });

    const vertex2 = graph.insertVertex({
      parent,
      value: 'World!',
      position: [200, 150],
      size: [80, 30],
      relative: false,
    });

    const edge = graph.insertEdge({
      parent,
      source: vertex1,
      target: vertex2,
    });
  });

  return container;
}

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