maxGraph/packages/html/stories/UserObject.stories.js

/*
Copyright 2021-present The maxGraph project Contributors
Copyright (c) 2006-2020, JGraph Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import {
  Graph,
  Rectangle,
  DomHelpers,
  KeyHandler,
  InternalEvent,
  xmlUtils,
  Codec,
  constants,
  utils,
  EdgeStyle,
  domUtils,
  MaxForm,
  CellAttributeChange,
} from '@maxgraph/core';

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

export default {
  title: 'Xml_Json/UserObject',
  argTypes: {
    ...globalTypes,
  },
};

const Template = ({ label, ...args }) => {
  const div = document.createElement('div');

  const table = document.createElement('table');
  table.style.position = 'relative';

  table.innerHTML = `
    <tr>
      <td>
        <div 
          id="graphContainer"
          style="border:solid 1px black;overflow:hidden;width:321px;height:241px;cursor:default"
        ></div>
      </td>
      <td valign="top">
        <div 
          id="properties" 
          style="border:solid 1px black;padding:10px"
        ></div>
    </tr>
  `;
  div.appendChild(table);

  const container = document.getElementById('graphContainer');

  // Note that these XML nodes will be enclosing the
  // Cell nodes for the model cells in the output
  const doc = xmlUtils.createXmlDocument();

  const person1 = doc.createElement('Person');
  person1.setAttribute('firstName', 'Daffy');
  person1.setAttribute('lastName', 'Duck');

  const person2 = doc.createElement('Person');
  person2.setAttribute('firstName', 'Bugs');
  person2.setAttribute('lastName', 'Bunny');

  const relation = doc.createElement('Knows');
  relation.setAttribute('since', '1985');

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

  // Optional disabling of sizing
  graph.setCellsResizable(false);

  // Configures the graph contains to resize and
  // add a border at the bottom, right
  graph.setResizeContainer(true);
  graph.minimumContainerSize = new Rectangle(0, 0, 500, 380);
  graph.setBorder(60);

  // Stops editing on enter key, handles escape
  new KeyHandler(graph);

  // Overrides method to disallow edge label editing
  graph.isCellEditable = function (cell) {
    return !cell.isEdge();
  };

  // Overrides method to provide a cell label in the display
  graph.convertValueToString = function (cell) {
    if (domUtils.isNode(cell.value)) {
      if (cell.value.nodeName.toLowerCase() == 'person') {
        const firstName = cell.getAttribute('firstName', '');
        const lastName = cell.getAttribute('lastName', '');

        if (lastName != null && lastName.length > 0) {
          return `${lastName}, ${firstName}`;
        }

        return firstName;
      }
      if (cell.value.nodeName.toLowerCase() == 'knows') {
        return `${cell.value.nodeName} (Since ${cell.getAttribute('since', '')})`;
      }
    }
    return '';
  };

  // Overrides method to store a cell label in the model
  const { cellLabelChanged } = graph;
  graph.cellLabelChanged = function (cell, newValue, autoSize) {
    if (domUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
      const pos = newValue.indexOf(' ');

      const firstName = pos > 0 ? newValue.substring(0, pos) : newValue;
      const lastName = pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';

      // Clones the value for correct undo/redo
      const elt = cell.value.cloneNode(true);

      elt.setAttribute('firstName', firstName);
      elt.setAttribute('lastName', lastName);

      newValue = elt;
      autoSize = true;
    }

    cellLabelChanged.apply(this, arguments);
  };

  // Overrides method to create the editing value
  const { getEditingValue } = graph;
  graph.getEditingValue = function (cell) {
    if (domUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
      const firstName = cell.getAttribute('firstName', '');
      const lastName = cell.getAttribute('lastName', '');
      return `${firstName} ${lastName}`;
    }
  };

  // Adds a special tooltip for edges
  graph.setTooltips(true);

  const { getTooltipForCell } = graph;
  graph.getTooltipForCell = function (cell) {
    // Adds some relation details for edges
    if (cell.isEdge()) {
      const src = this.getLabel(cell.getTerminal(true));
      const trg = this.getLabel(cell.getTerminal(false));
      return `${src} ${cell.value.nodeName} ${trg}`;
    }
    return getTooltipForCell.apply(this, arguments);
  };

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

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

  // Adds an option to view the XML of the graph
  buttons.appendChild(
    DomHelpers.button('View XML', function () {
      const encoder = new Codec();
      const node = encoder.encode(graph.getDataModel());
      popup(utils.getPrettyXml(node), true);
    })
  );

  // Changes the style for match the markup
  // Creates the default style for vertices
  let style = graph.getStylesheet().getDefaultVertexStyle();
  style.strokeColor = 'gray';
  style.rounded = true;
  style.shadow = true;
  style.fillColor = '#DFDFDF';
  style.gradientColor = 'white';
  style.fontColor = 'black';
  style.fontSize = '12';
  style.spacing = 4;

  // Creates the default style for edges
  style = graph.getStylesheet().getDefaultEdgeStyle();
  style.strokeColor = '#0C0C0C';
  style.labelBackgroundColor = 'white';
  style.edge = EdgeStyle.ElbowConnector;
  style.rounded = true;
  style.fontColor = 'black';
  style.fontSize = '10';

  // 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.batchUpdate(() => {
    const v1 = graph.insertVertex(parent, null, person1, 40, 40, 80, 30);
    const v2 = graph.insertVertex(parent, null, person2, 200, 150, 80, 30);
    const e1 = graph.insertEdge(parent, null, relation, v1, v2);
  });

  // Implements a properties panel that uses
  // CellAttributeChange to change properties
  graph.getSelectionModel().addListener(InternalEvent.CHANGE, function (sender, evt) {
    selectionChanged(graph);
  });

  selectionChanged(graph);

  /**
   * Updates the properties panel
   */
  function selectionChanged(graph) {
    const div = document.getElementById('properties');

    // Forces focusout in IE
    graph.container.focus();

    // Clears the DIV the non-DOM way
    div.innerHTML = '';

    // Gets the selection cell
    const cell = graph.getSelectionCell();

    if (cell == null) {
      domUtils.writeln(div, 'Nothing selected.');
    } else {
      // Writes the title
      const center = document.createElement('center');
      domUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`);
      div.appendChild(center);
      domUtils.br(div);

      // Creates the form from the attributes of the user object
      const form = new MaxForm();
      const attrs = cell.value.attributes;

      for (let i = 0; i < attrs.length; i++) {
        createTextField(graph, form, cell, attrs[i]);
      }

      div.appendChild(form.getTable());
      domUtils.br(div);
    }
  }

  /**
   * Creates the textfield for the given property.
   */
  function createTextField(graph, form, cell, attribute) {
    const input = form.addText(`${attribute.nodeName}:`, attribute.nodeValue);

    const applyHandler = function () {
      const newValue = input.value || '';
      const oldValue = cell.getAttribute(attribute.nodeName, '');

      if (newValue != oldValue) {
        graph.batchUpdate(() => {
          const edit = new CellAttributeChange(cell, attribute.nodeName, newValue);
          graph.getDataModel().execute(edit);
          graph.updateCellSize(cell);
        });
      }
    };

    InternalEvent.addListener(input, 'keypress', function (evt) {
      // Needs to take shift into account for textareas
      if (evt.keyCode == /* enter */ 13 && !InternalEvent.isShiftDown(evt)) {
        input.blur();
      }
    });

    // Note: Known problem is the blurring of fields in
    // Firefox by changing the selection, in which case
    // no event is fired in FF and the change is lost.
    // As a workaround you should use a local variable
    // that stores the focused field and invoke blur
    // explicitely where we do the graph.focus above.
    InternalEvent.addListener(input, 'blur', applyHandler);
  }
  return div;
};

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