cleanups and bugfixes

src/mxgraph/handler/mxGraphHandler.js

@@ -789,6 +789,10 @@ class mxGraphHandler {
     return shape;
   }
 
+  createGuide() {
+    return new mxGuide(this.graph, this.getGuideStates());
+  }
+
   /**
    * Function: start
    *
@@ -809,7 +813,7 @@ class mxGraphHandler {
     }
 
     if (this.guidesEnabled) {
-      this.guide = new mxGuide(this.graph, this.getGuideStates());
+      this.guide = this.createGuide();
       const parent = this.graph.model.getParent(cell);
       const ignore = this.graph.model.getChildCount(parent) < 2;
 

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

@@ -63,20 +63,6 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
    */
   function;
 
-  /**
-   * Variable: medianValue
-   *
-   * The weighted value of the cell stored.
-   */
-  medianValue = 0;
-
-  /**
-   * Variable: cell
-   *
-   * The cell whose median value is being calculated
-   */
-  cell = false;
-
   /**
    * Class: mxMedianHybridCrossingReduction
    *

src/mxgraph/util/mxGuide.js

@@ -4,6 +4,8 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxConstants from './mxConstants';
+import mxPoint from "./mxPoint";
+import mxPolyline from "../shape/mxPolyline";
 
 /**
  * Class: mxGuide

src/pages/ContextIcons.js

@@ -39,19 +39,14 @@ class ContextIcons extends React.Component {
   };
 
   componentDidMount = () => {
+    class mxVertexToolHandler extends mxVertexHandler {
       // Defines a subclass for mxVertexHandler that adds a set of clickable
       // icons to every selected vertex.
-    function mxVertexToolHandler(state) {
-      mxVertexHandler.apply(this, arguments);
-    }
 
-    mxVertexToolHandler.prototype = new mxVertexHandler();
+      domNode = null;
-    mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
 
-    mxVertexToolHandler.prototype.domNode = null;
+      init() {
-
+        super.init();
-    mxVertexToolHandler.prototype.init = function() {
-      mxVertexHandler.prototype.init.apply(this, arguments);
 
         // In this example we force the use of DIVs for images in IE. This
         // handles transparency in PNG images properly in IE and fixes the
@@ -62,9 +57,9 @@ class ContextIcons extends React.Component {
         this.domNode.style.whiteSpace = 'nowrap';
 
         // Workaround for event redirection via image tag in quirks and IE8
-      function createImage(src) {
+        const createImage = src => {
           return mxUtils.createImage(src);
-      }
+        };
 
         // Delete
         let img = createImage('images/delete2.png');
@@ -72,21 +67,14 @@ class ContextIcons extends React.Component {
         img.style.cursor = 'pointer';
         img.style.width = '16px';
         img.style.height = '16px';
-      mxEvent.addGestureListeners(
+        mxEvent.addGestureListeners(img, evt => {
-        img,
-        mxUtils.bind(this, function(evt) {
           // Disables dragging the image
           mxEvent.consume(evt);
-        })
+        });
-      );
+        mxEvent.addListener(img, 'click', evt => {
-      mxEvent.addListener(
-        img,
-        'click',
-        mxUtils.bind(this, function(evt) {
           this.graph.removeCells([this.state.cell]);
           mxEvent.consume(evt);
-        })
+        });
-      );
         this.domNode.appendChild(img);
 
         // Size
@@ -95,15 +83,13 @@ class ContextIcons extends React.Component {
         img.style.cursor = 'se-resize';
         img.style.width = '16px';
         img.style.height = '16px';
-      mxEvent.addGestureListeners(
+
-        img,
+        mxEvent.addGestureListeners(img, evt => {
-        mxUtils.bind(this, function(evt) {
           this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
           this.graph.isMouseDown = true;
           this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
           mxEvent.consume(evt);
-        })
+        });
-      );
         this.domNode.appendChild(img);
 
         // Move
@@ -112,9 +98,8 @@ class ContextIcons extends React.Component {
         img.style.cursor = 'move';
         img.style.width = '16px';
         img.style.height = '16px';
-      mxEvent.addGestureListeners(
+
-        img,
+        mxEvent.addGestureListeners(img, evt => {
-        mxUtils.bind(this, function(evt) {
           this.graph.graphHandler.start(
             this.state.cell,
             mxEvent.getClientX(evt),
@@ -124,8 +109,7 @@ class ContextIcons extends React.Component {
           this.graph.isMouseDown = true;
           this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
           mxEvent.consume(evt);
-        })
+        });
-      );
         this.domNode.appendChild(img);
 
         // Connect
@@ -134,9 +118,8 @@ class ContextIcons extends React.Component {
         img.style.cursor = 'pointer';
         img.style.width = '16px';
         img.style.height = '16px';
-      mxEvent.addGestureListeners(
+
-        img,
+        mxEvent.addGestureListeners(img, evt => {
-        mxUtils.bind(this, function(evt) {
           const pt = mxUtils.convertPoint(
             this.graph.container,
             mxEvent.getClientX(evt),
@@ -146,57 +129,49 @@ class ContextIcons extends React.Component {
           this.graph.isMouseDown = true;
           this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
           mxEvent.consume(evt);
-        })
+        });
-      );
         this.domNode.appendChild(img);
 
         this.graph.container.appendChild(this.domNode);
         this.redrawTools();
-    };
+      }
 
-    mxVertexToolHandler.prototype.redraw = function() {
+      redraw() {
-      mxVertexHandler.prototype.redraw.apply(this);
+        super.redraw();
         this.redrawTools();
-    };
+      }
 
-    mxVertexToolHandler.prototype.redrawTools = function() {
+      redrawTools() {
         if (this.state != null && this.domNode != null) {
           const dy = 4;
           this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;
           this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;
         }
-    };
+      }
 
-    mxVertexToolHandler.prototype.destroy = function(sender, me) {
+      destroy(sender, me) {
-      mxVertexHandler.prototype.destroy.apply(this, arguments);
+        super.destroy(sender, me);
 
         if (this.domNode != null) {
           this.domNode.parentNode.removeChild(this.domNode);
           this.domNode = null;
         }
-    };
+      }
+    }
 
-    // Program starts here. Creates a sample graph in the
+    class MyCustomGraph extends mxGraph {
-    // DOM node with the specified ID. This function is invoked
+      createHandler(state) {
-    // from the onLoad event handler of the document (see below).
-    function main(container) {
-      // Checks if the browser is supported
-      if (!mxClient.isBrowserSupported()) {
-        // Displays an error message if the browser is not supported.
-        mxUtils.error('Browser is not supported!', 200, false);
-      } else {
-        // Creates the graph inside the given container
-        const graph = new mxGraph(container);
-        graph.setConnectable(true);
-        graph.connectionHandler.createTarget = true;
-
-        graph.createHandler = function(state) {
         if (state != null && this.model.isVertex(state.cell)) {
           return new mxVertexToolHandler(state);
         }
+        return super.createHandler(state);
+      }
+    }
 
-          return mxGraph.prototype.createHandler.apply(this, arguments);
+    // Creates the graph inside the given container
-        };
+    const graph = new MyCustomGraph(this.el);
+    graph.setConnectable(true);
+    graph.connectionHandler.createTarget = true;
 
     // Uncomment the following if you want the container
     // to fit the size of the graph
@@ -210,25 +185,25 @@ class ContextIcons 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);
-          const v2 = graph.insertVertex(
         parent,
-            null,
+        value: 'Hello,',
-            'World!',
+        position: [20, 20],
-            200,
+        size: [80, 30],
-            150,
+      });
-            80,
+      const v2 = graph.insertVertex({
-            30
+        parent,
-          );
+        value: 'World!',
-          const e1 = graph.insertEdge(parent, null, '', v1, v2);
+        position: [200, 150],
-        } finally {
+        size: [80, 30],
-          // Updates the display
+      });
-          graph.getModel().endUpdate();
+      const e1 = graph.insertEdge({
-        }
+        parent,
-      }
+        source: v1,
-    }
+        target: v2,
+      });
+    });
   };
 }
 

src/pages/Control.js

@@ -162,9 +162,23 @@ class Control 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,
+        source: v1,
+        target: v2,
+      });
     } finally {
       // Updates the display
       graph.getModel().endUpdate();
@@ -173,13 +187,13 @@ class Control extends React.Component {
     graph.centerZoom = false;
 
     this.el2.appendChild(
-      mxUtils.button('Zoom In', function() {
+      mxUtils.button('Zoom In', () => {
         graph.zoomIn();
       })
     );
 
     this.el2.appendChild(
-      mxUtils.button('Zoom Out', function() {
+      mxUtils.button('Zoom Out', () => {
         graph.zoomOut();
       })
     );

src/pages/DragSource.js

@@ -38,16 +38,36 @@ class DragSource extends React.Component {
   };
 
   componentDidMount = () => {
-    // Enables guides
+    class MyCustomGuide extends mxGuide {
-    mxGraphHandler.prototype.guidesEnabled = true;
+      isEnabledForEvent(evt) {
-
         // Alt disables guides
-    mxGuide.prototype.isEnabledForEvent = function(evt) {
         return !mxEvent.isAltDown(evt);
-    };
+      }
+    }
 
+    class MyCustomGraphHandler extends mxGraphHandler {
+      // Enables guides
+      guidesEnabled = true;
+
+      createGuide() {
+        return new MyCustomGuide(this.graph, this.getGuideStates());
+      }
+    }
+
+    class MyCustomEdgeHandler extends mxEdgeHandler {
       // Enables snapping waypoints to terminals
-    mxEdgeHandler.prototype.snapToTerminals = true;
+      snapToTerminals = true;
+    }
+
+    class MyCustomGraph extends mxGraph {
+      createGraphHandler() {
+        return new MyCustomGraphHandler(this);
+      }
+
+      createEdgeHandler(state, edgeStyle) {
+        return new MyCustomEdgeHandler(state, edgeStyle);
+      }
+    }
 
     const graphs = [];
 
@@ -63,7 +83,7 @@ class DragSource extends React.Component {
 
       this.el.appendChild(container);
 
-      var graph = new mxGraph(container);
+      const graph = new MyCustomGraph(container);
       graph.gridSize = 30;
 
       // Uncomment the following if you want the container
@@ -78,28 +98,38 @@ class DragSource 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,
+        });
+      });
 
       graphs.push(graph);
     }
 
     // Returns the graph under the mouse
-    const graphF = function(evt) {
+    const graphF = evt => {
       const x = mxEvent.getClientX(evt);
       const y = mxEvent.getClientY(evt);
       const elt = document.elementFromPoint(x, y);
 
-      for (let i = 0; i < graphs.length; i++) {
+      for (const graph of graphs) {
-        if (mxUtils.isAncestorNode(graphs[i].container, elt)) {
+        if (mxUtils.isAncestorNode(graph.container, elt)) {
-          return graphs[i];
+          return graph;
         }
       }
 
@@ -107,7 +137,7 @@ class DragSource extends React.Component {
     };
 
     // Inserts a cell at the given location
-    const funct = function(graph, evt, target, x, y) {
+    const funct = (graph, evt, target, x, y) => {
       const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
       cell.vertex = true;
       const cells = graph.importCells([cell], x, y, target);
@@ -141,14 +171,14 @@ class DragSource extends React.Component {
       dragElt,
       null,
       null,
-      graph.autoscroll,
+      graphs[0].autoscroll,
       true
     );
 
     // Redirects feature to global switch. Note that this feature should only be used
     // if the the x and y arguments are used in funct to insert the cell.
-    ds.isGuidesEnabled = function() {
+    ds.isGuidesEnabled = () => {
-      return graph.graphHandler.guidesEnabled;
+      return graphs[0].graphHandler.guidesEnabled;
     };
 
     // Restores original drag icon while outside of graph

src/pages/Overlays.js

@@ -53,7 +53,7 @@ class Overlays extends React.Component {
 
     // Installs a handler for click events in the graph
     // that toggles the overlay for the respective cell
-    graph.addListener(mxEvent.CLICK, function(sender, evt) {
+    graph.addListener(mxEvent.CLICK, (sender, evt) => {
       const cell = evt.getProperty('cell');
 
       if (cell != null) {
@@ -67,7 +67,7 @@ class Overlays extends React.Component {
           );
 
           // Installs a handler for clicks on the overlay
-          overlay.addListener(mxEvent.CLICK, function(sender, evt2) {
+          overlay.addListener(mxEvent.CLICK, (sender, evt2) => {
             mxUtils.alert('Overlay clicked');
           });
 
@@ -81,7 +81,7 @@ class Overlays extends React.Component {
 
     // Installs a handler for double click events in the graph
     // that shows an alert box
-    graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
+    graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {
       const cell = evt.getProperty('cell');
       mxUtils.alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`);
       evt.consume();
@@ -92,23 +92,25 @@ class Overlays 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, 'Click,', 20, 20, 60, 40);
-      const v2 = graph.insertVertex(
         parent,
-        null,
+        value: 'Click,',
-        'Doubleclick',
+        position: [20, 20],
-        200,
+        size: [60, 40],
-        150,
+      });
-        100,
+      const v2 = graph.insertVertex({
-        40
+        parent,
-      );
+        value: 'Doubleclick',
-      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+        position: [200, 150],
-    } finally {
+        size: [100, 40],
-      // Updates the display
+      });
-      graph.getModel().endUpdate();
+      const e1 = graph.insertEdge({
-    }
+        parent,
+        source: v1,
+        target: v2,
+      });
+    });
   }
 }