bugfixes+example cleanups

src/mxgraph/layout/hierarchical/stage/MedianCellSorter.js

@@ -1,4 +1,18 @@
 class MedianCellSorter {
+  /**
+   * Variable: medianValue
+   *
+   * The weighted value of the cell stored.
+   */
+  medianValue = 0;
+
+  /**
+   * Variable: cell
+   *
+   * The cell whose median value is being calculated
+   */
+  cell = false;
+
   constructor() {
     // empty
   }

src/mxgraph/view/mxGraph.js

@@ -4533,7 +4533,7 @@ class mxGraph extends mxEventSource {
       const params = args[0];
       parent = params.parent;
       id = params.id;
-      value = params.value;
+      value = params.value || '';
       source = params.source;
       target = params.target;
       style = params.style;

src/pages/Anchors.js

@@ -83,9 +83,24 @@ class Anchors extends React.Component {
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
     try {
-      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+      const v1 = graph.insertVertex({
-      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+        parent,
-      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+        value: 'Hello,',
+        position: [20, 20],
+        size: [80, 30],
+      });
+      const v2 = graph.insertVertex({
+        parent,
+        value: 'World!',
+        position: [200, 150],
+        size: [80, 30],
+      });
+      const e1 = graph.insertEdge({
+        parent,
+        value: '',
+        position: v1,
+        size: v2,
+      });
     } finally {
       // Updates the display
       graph.getModel().endUpdate();
@@ -97,9 +112,8 @@ class Anchors extends React.Component {
     return (
       <>
         <h1>Anchors</h1>
-        This example demonstrates defining
+        This example demonstrates defining fixed connection points for all
-        fixed connection points for all shapes.
+        shapes.
-
         <div
           ref={el => {
             this.el = el;

src/pages/Animation.js

@@ -47,34 +47,27 @@ class Animation extends React.Component {
 
     graph.getModel().beginUpdate();
     try {
-      const v1 = graph.insertVertex(
+      const v1 = graph.insertVertex({
         parent,
-        null,
+        value: 'Pump',
-        'Pump',
+        position: [20, 20],
-        20,
+        size: [60, 60],
-        20,
+        style: vertexStyle,
-        60,
+      });
-        60,
+      const v2 = graph.insertVertex({
-        vertexStyle
-      );
-      const v2 = graph.insertVertex(
         parent,
-        null,
+        value: 'Tank',
-        'Tank',
+        position: [200, 150],
-        200,
+        size: [60, 60],
-        150,
+        style: vertexStyle,
-        60,
+      });
-        60,
+      var e1 = graph.insertEdge({
-        vertexStyle
-      );
-      var e1 = graph.insertEdge(
         parent,
-        null,
+        source: v1,
-        '',
+        target: v2,
-        v1,
+        style:
-        v2,
+          'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;',
-        'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;'
+      });
-      );
       e1.geometry.points = [new mxPoint(230, 50)];
       graph.orderCells(true, [e1]);
     } finally {

src/pages/AutoLayout.js

@@ -24,13 +24,12 @@ class AutoLayout extends React.Component {
   }
 
   render = () => {
-    // A this.el for the graph
+    // A container for the graph
     return (
       <>
         <h1>Auto layout</h1>
-        This example demonstrates running
+        This example demonstrates running and animating a layout algorithm after
-        and animating a layout algorithm after every change to a graph.
+        every change to a graph.
-
         <div
           ref={el => {
             this.el = el;
@@ -50,14 +49,9 @@ class AutoLayout extends React.Component {
   componentDidMount = () => {
     mxEvent.disableContextMenu(this.el);
 
-    const mxCellRendererInstallCellOverlayListeners =
+    class MyCustomCellRenderer extends mxCellRenderer {
-      mxCellRenderer.prototype.installCellOverlayListeners;
+      installCellOverlayListeners(state, overlay, shape) {
-    mxCellRenderer.prototype.installCellOverlayListeners = function(
+        super.installCellOverlayListeners(state, overlay, shape);
-      state,
-      overlay,
-      shape
-    ) {
-      mxCellRendererInstallCellOverlayListeners.apply(this, arguments);
 
         mxEvent.addListener(
           shape.node,
@@ -77,9 +71,27 @@ class AutoLayout extends React.Component {
           });
         }
       };
+    }
+
+    class MyCustomEdgeHandler extends mxEdgeHandler {
+      connect(edge, terminal, isSource, isClone, me) {
+        super.connect(edge, terminal, isSource, isClone, me);
+        executeLayout();
+      }
+    }
+
+    class MyCustomGraph extends mxGraph {
+      createEdgeHandler(state, edgeStyle) {
+        return new MyCustomEdgeHandler(state, edgeStyle);
+      }
+
+      createCellRenderer() {
+        return new MyCustomCellRenderer();
+      }
+    }
 
     // Creates the graph inside the given this.el
-    const graph = new mxGraph(this.el);
+    const graph = new MyCustomGraph(this.el);
     graph.setPanning(true);
     graph.panningHandler.useLeftButtonForPanning = true;
     graph.setAllowDanglingEdges(false);
@@ -94,7 +106,7 @@ class AutoLayout extends React.Component {
     const parent = graph.getDefaultParent();
 
     const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
-    const executeLayout = function(change, post) {
+    const executeLayout = (change, post) => {
       graph.getModel().beginUpdate();
       try {
         if (change != null) {
@@ -106,15 +118,12 @@ class AutoLayout extends React.Component {
       } finally {
         // New API for animating graph layout results asynchronously
         const morph = new mxMorphing(graph);
-        morph.addListener(
+        morph.addListener(mxEvent.DONE, () => {
-          mxEvent.DONE,
-          mxUtils.bind(this, function() {
           graph.getModel().endUpdate();
           if (post != null) {
             post();
           }
-          })
+        });
-        );
         morph.startAnimation();
       }
     };
@@ -136,18 +145,19 @@ class AutoLayout extends React.Component {
 
         executeLayout(
           function() {
-            v2 = graph.insertVertex(
+            v2 = graph.insertVertex({
               parent,
-              null,
+              value: 'World!',
-              'World!',
+              position: [geo.x, geo.y],
-              geo.x,
+              size: [80, 30],
-              geo.y,
+            });
-              80,
-              30
-            );
             addOverlay(v2);
             graph.view.refresh(v2);
-            const e1 = graph.insertEdge(parent, null, '', cell, v2);
+            const e1 = graph.insertEdge({
+              parent,
+              source: cell,
+              target: v2,
+            });
           },
           function() {
             graph.scrollCellToVisible(v2);
@@ -182,25 +192,18 @@ class AutoLayout extends React.Component {
     graph.getModel().beginUpdate();
     let v1;
     try {
-      v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
+      v1 = graph.insertVertex({
+        parent,
+        value: 'Hello,',
+        position: [0, 0],
+        size: [80, 30],
+      });
       addOverlay(v1);
     } finally {
       // Updates the display
       graph.getModel().endUpdate();
     }
 
-    const edgeHandleConnect = mxEdgeHandler.prototype.connect;
-    mxEdgeHandler.prototype.connect = function(
-      edge,
-      terminal,
-      isSource,
-      isClone,
-      me
-    ) {
-      edgeHandleConnect.apply(this, arguments);
-      executeLayout();
-    };
-
     graph.resizeCell = function() {
       mxGraph.prototype.resizeCell.apply(this, arguments);
       executeLayout();

src/pages/Boundary.js

@@ -9,8 +9,8 @@ import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
 import mxConstants from '../mxgraph/util/mxConstants';
 import mxPoint from '../mxgraph/util/mxPoint';
-import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
+import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
-import mxUtils from "../mxgraph/util/mxUtils";
+import mxUtils from '../mxgraph/util/mxUtils';
 
 class Boundary extends React.Component {
   constructor(props) {
@@ -18,13 +18,11 @@ class Boundary extends React.Component {
   }
 
   render = () => {
-    // A this.el for the graph
+    // A container for the graph
     return (
       <>
         <h1>Boundary</h1>
-        This example demonstrates
+        This example demonstrates implementing boundary events in BPMN diagrams.
-        implementing boundary events in BPMN diagrams.
-
         <div
           ref={el => {
             this.el = el;
@@ -34,7 +32,7 @@ class Boundary extends React.Component {
             overflow: 'hidden',
             height: '241px',
             background: 'url("editors/images/grid.gif")',
-            cursor: 'default'
+            cursor: 'default',
           }}
         />
       </>
@@ -45,22 +43,14 @@ class Boundary extends React.Component {
     // Disables the built-in context menu
     mxEvent.disableContextMenu(this.el);
 
-    // Creates the graph inside the given this.el
+    class MyCustomGraph extends mxGraph {
-    const graph = new mxGraph(this.el);
+      // Enables moving of relative children
-
+      isCellLocked(cell) {
-    // Sets the base style for all vertices
+        return false;
-    const style = graph.getStylesheet().getDefaultVertexStyle();
+      }
-    style[mxConstants.STYLE_ROUNDED] = true;
-    style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
-    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
-    style[mxConstants.STYLE_STROKEWIDTH] = '2';
-    style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-    style[mxConstants.STYLE_FONTSIZE] = '12';
-    style[mxConstants.STYLE_FONTSTYLE] = 1;
-    graph.getStylesheet().putDefaultVertexStyle(style);
 
       // Removes folding icon for relative children
-    graph.isCellFoldable = function(cell, collapse) {
+      isCellFoldable(cell, collapse) {
         const childCount = this.model.getChildCount(cell);
 
         for (let i = 0; i < childCount; i++) {
@@ -73,10 +63,10 @@ class Boundary extends React.Component {
         }
 
         return childCount > 0;
-    };
+      }
 
       // Returns the relative position of the given child
-    function getRelativePosition(state, dx, dy) {
+      getRelativePosition(state, dx, dy) {
         if (state != null) {
           const model = graph.getModel();
           const geo = model.getGeometry(state.cell);
@@ -118,8 +108,8 @@ class Boundary extends React.Component {
       }
 
       // Replaces translation for relative children
-    graph.translateCell = function(cell, dx, dy) {
+      translateCell(cell, dx, dy) {
-      const rel = getRelativePosition(
+        const rel = this.getRelativePosition(
           this.view.getState(cell),
           dx * graph.view.scale,
           dy * graph.view.scale
@@ -138,7 +128,22 @@ class Boundary extends React.Component {
         } else {
           mxGraph.prototype.translateCell.apply(this, arguments);
         }
-    };
+      }
+    }
+
+    // Creates the graph inside the given this.el
+    const graph = new MyCustomGraph(this.el);
+
+    // Sets the base style for all vertices
+    const style = graph.getStylesheet().getDefaultVertexStyle();
+    style[mxConstants.STYLE_ROUNDED] = true;
+    style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
+    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
+    style[mxConstants.STYLE_STROKEWIDTH] = '2';
+    style[mxConstants.STYLE_FONTCOLOR] = '#000000';
+    style[mxConstants.STYLE_FONTSIZE] = '12';
+    style[mxConstants.STYLE_FONTSTYLE] = 1;
+    graph.getStylesheet().putDefaultVertexStyle(style);
 
     // Replaces move preview for relative children
     graph.graphHandler.getDelta = function(me) {
@@ -155,7 +160,7 @@ class Boundary extends React.Component {
         this.cells[0] != null
       ) {
         const state = this.graph.view.getState(this.cells[0]);
-        const rel = getRelativePosition(state, delta.x, delta.y);
+        const rel = graph.getRelativePosition(state, delta.x, delta.y);
 
         if (rel != null) {
           const pstate = this.graph.view.getState(
@@ -190,11 +195,6 @@ class Boundary extends React.Component {
       );
     };
 
-    // Enables moving of relative children
-    graph.isCellLocked = function(cell) {
-      return false;
-    };
-
     // Enables rubberband selection
     new mxRubberband(graph);
 
@@ -203,37 +203,34 @@ class Boundary extends React.Component {
     const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
-    graph.getModel().beginUpdate();
+    graph.batchUpdate(() => {
-    try {
+      const v1 = graph.insertVertex({
-      const v1 = graph.insertVertex(parent, null, 'Process', 60, 60, 90, 40);
+        parent,
-      const v2 = graph.insertVertex(
+        value: 'Process',
-        v1,
+        position: [60, 60],
-        null,
+        size: [90, 40],
-        'in',
+      });
-        0,
+
-        0.5,
+      const v2 = graph.insertVertex({
-        20,
+        parent: v1,
-        20,
+        value: 'in',
-        'fontSize=9;shape=ellipse;resizable=0;'
+        position: [0, 0.5],
-      );
+        size: [20, 20],
+        style: 'fontSize=9;shape=ellipse;resizable=0;',
+      });
       v2.geometry.offset = new mxPoint(-10, -10);
       v2.geometry.relative = true;
-      const v3 = graph.insertVertex(
+
-        v1,
+      const v3 = graph.insertVertex({
-        null,
+        parent: v1,
-        'out',
+        value: 'out',
-        1,
+        position: [1, 0.5],
-        0.5,
+        size: [20, 20],
-        20,
+        style: 'fontSize=9;shape=ellipse;resizable=0;',
-        20,
+      });
-        'fontSize=9;shape=ellipse;resizable=0;'
-      );
       v3.geometry.offset = new mxPoint(-10, -10);
       v3.geometry.relative = true;
-    } finally {
+    });
-      // Updates the display
-      graph.getModel().endUpdate();
-    }
   };
 }
 

src/pages/Clipboard.js

@@ -19,13 +19,12 @@ class Clipboard extends React.Component {
   }
 
   render = () => {
-    // A this.el for the graph
+    // A container for the graph
     return (
       <>
         <h1>Clipboard</h1>
-        This example demonstrates using the clipboard
+        This example demonstrates using the clipboard for providing cross-tab
-        for providing cross-tab and cross-browser copy and paste.
+        and cross-browser copy and paste.
-
         <div
           ref={el => {
             this.el = el;
@@ -277,7 +276,7 @@ class Clipboard extends React.Component {
       }
     };
 
-    // Cross-browser function to fetch text from paste events
+    // Function to fetch text from paste events
     const extractGraphModelFromEvent = function(evt) {
       let data = null;
 
@@ -286,9 +285,6 @@ class Clipboard extends React.Component {
           evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
 
         if (provider != null) {
-          if (document.documentMode === 10 || document.documentMode === 11) {
-            data = provider.getData('Text');
-          } else {
           data =
             mxUtils.indexOf(provider.types, 'text/html') >= 0
               ? provider.getData('text/html')
@@ -304,7 +300,6 @@ class Clipboard extends React.Component {
           }
         }
       }
-      }
 
       return data;
     };
@@ -343,15 +338,21 @@ class Clipboard extends React.Component {
     const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
-    graph.getModel().beginUpdate();
+    graph.batchUpdate(() => {
-    try {
+      const v1 = graph.insertVertex({
-      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+        parent,
-      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+        value: 'Hello,',
-      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+        position: [20, 20],
-    } finally {
+        size: [80, 30],
-      // Updates the display
+      });
-      graph.getModel().endUpdate();
+      const v2 = graph.insertVertex({
-    }
+        parent,
+        value: 'World!',
+        position: [200, 150],
+        size: [80, 30],
+      });
+      const e1 = graph.insertEdge({ parent, source: v1, target: v2 });
+    });
   };
 }
 

src/pages/Drop.js

@@ -16,7 +16,7 @@ class Drop extends React.Component {
   }
 
   render() {
-    // A this.el for the graph
+    // A container for the graph
     return (
       <>
         <h1>Drop</h1>