integrated more examples into the next.js app and moved static files into the public next.js dir

src/mxgraph/shape/mxArrow.js

@@ -4,6 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxShape from './mxShape';
+import mxConstants from "../util/mxConstants";
 
 class mxArrow extends mxShape {
   /**

src/pages/Guides.js

@@ -12,8 +12,13 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
+import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
+import mxConstants from '../mxgraph/util/mxConstants';
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
+import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
 
-class MYNAMEHERE extends React.Component {
+class Guides extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -23,161 +28,120 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Guides example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            overflow: 'hidden',
+            width: '801px',
+            height: '601px',
+            background: "url('editors/images/grid.gif')",
+            cursor: 'default',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    // Enables guides
+    mxGraphHandler.prototype.guidesEnabled = true;
 
-  };
+    // Alt disables guides
+    mxGraphHandler.prototype.useGuidesForEvent = function(me) {
+      return !mxEvent.isAltDown(me.getEvent());
+    };
+
+    // Defines the guides to be red (default)
+    mxConstants.GUIDE_COLOR = '#FF0000';
+
+    // Defines the guides to be 1 pixel (default)
+    mxConstants.GUIDE_STROKEWIDTH = 1;
+
+    // Enables snapping waypoints to terminals
+    mxEdgeHandler.prototype.snapToTerminals = true;
+
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
+    graph.setConnectable(true);
+    graph.gridSize = 30;
+
+    // Changes the default style for edges "in-place" and assigns
+    // an alternate edge style which is applied in mxGraph.flip
+    // when the user double clicks on the adjustment control point
+    // of the edge. The ElbowConnector edge style switches to TopToBottom
+    // if the horizontal style is true.
+    const style = graph.getStylesheet().getDefaultEdgeStyle();
+    style[mxConstants.STYLE_ROUNDED] = true;
+    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+    graph.alternateEdgeStyle = 'elbow=vertical';
+
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // 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.getModel().beginUpdate();
+    let v1;
+    try {
+      v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+
+    // Handles cursor keys
+    const nudge = function(keyCode) {
+      if (!graph.isSelectionEmpty()) {
+        let dx = 0;
+        let dy = 0;
+
+        if (keyCode === 37) {
+          dx = -1;
+        } else if (keyCode === 38) {
+          dy = -1;
+        } else if (keyCode === 39) {
+          dx = 1;
+        } else if (keyCode === 40) {
+          dy = 1;
+        }
+
+        graph.moveCells(graph.getSelectionCells(), dx, dy);
+      }
+
+      // Transfer initial focus to graph container for keystroke handling
+      graph.container.focus();
+
+      // Handles keystroke events
+      const keyHandler = new mxKeyHandler(graph);
+
+      // Ignores enter keystroke. Remove this line if you want the
+      // enter keystroke to stop editing
+      keyHandler.enter = function() {};
+
+      keyHandler.bindKey(37, function() {
+        nudge(37);
+      });
+
+      keyHandler.bindKey(38, function() {
+        nudge(38);
+      });
+
+      keyHandler.bindKey(39, function() {
+        nudge(39);
+      });
+
+      keyHandler.bindKey(40, function() {
+        nudge(40);
+      });
+    };
+  }
 }
 
-export default MYNAMEHERE;
-
-
-    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
-      {
-        // Enables guides
-        mxGraphHandler.prototype.guidesEnabled = true;
-
-          // Alt disables guides
-          mxGraphHandler.prototype.useGuidesForEvent = function(me)
-          {
-            return !mxEvent.isAltDown(me.getEvent());
-          };
-
-          // Defines the guides to be red (default)
-        mxConstants.GUIDE_COLOR = '#FF0000';
-
-          // Defines the guides to be 1 pixel (default)
-        mxConstants.GUIDE_STROKEWIDTH = 1;
-
-        // Enables snapping waypoints to terminals
-        mxEdgeHandler.prototype.snapToTerminals = true;
-
-        // Creates the graph inside the given container
-        let graph = new mxGraph(container);
-        graph.setConnectable(true);
-        graph.gridSize = 30;
-
-        // Changes the default style for edges "in-place" and assigns
-        // an alternate edge style which is applied in mxGraph.flip
-        // when the user double clicks on the adjustment control point
-        // of the edge. The ElbowConnector edge style switches to TopToBottom
-        // if the horizontal style is true.
-        let style = graph.getStylesheet().getDefaultEdgeStyle();
-        style[mxConstants.STYLE_ROUNDED] = true;
-        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-        graph.alternateEdgeStyle = 'elbow=vertical';
-
-        // Enables rubberband selection
-        new mxRubberband(graph);
-
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
-
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        var v1;
-        try
-        {
-          v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
-        }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
-        }
-
-          // Handles cursor keys
-          let nudge = function(keyCode)
-          {
-            if (!graph.isSelectionEmpty())
-          {
-              let dx = 0;
-              let dy = 0;
-
-              if (keyCode == 37)
-            {
-                dx = -1;
-            }
-              else if (keyCode == 38)
-              {
-                dy = -1;
-              }
-              else if (keyCode == 39)
-              {
-                dx = 1;
-              }
-              else if (keyCode == 40)
-              {
-                dy = 1;
-              }
-
-              graph.moveCells(graph.getSelectionCells(), dx, dy);
-          }
-          };
-
-        // Transfer initial focus to graph container for keystroke handling
-        graph.container.focus();
-
-          // Handles keystroke events
-          let keyHandler = new mxKeyHandler(graph);
-
-          // Ignores enter keystroke. Remove this line if you want the
-          // enter keystroke to stop editing
-          keyHandler.enter = function() {};
-
-          keyHandler.bindKey(37, function()
-        {
-          nudge(37);
-        });
-
-          keyHandler.bindKey(38, function()
-          {
-            nudge(38);
-          });
-
-          keyHandler.bindKey(39, function()
-          {
-            nudge(39);
-          });
-
-          keyHandler.bindKey(40, function()
-          {
-            nudge(40);
-          });
-      }
-    };
-  </script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-  <!-- Creates a container for the graph with a grid wallpaper -->
-  <div id="graphContainer"
-    style="overflow:hidden;width:801px;height:601px;background:url('editors/images/grid.gif');cursor:default;">
-  </div>
-</body>
-</html>
+export default Guides;

src/pages/Handles.js

@@ -8,8 +8,15 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxUtils from '../mxgraph/util/mxUtils';
+import mxVertexHandler from '../mxgraph/handler/mxVertexHandler';
+import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
+import mxRectangle from '../mxgraph/util/mxRectangle';
+import mxCylinder from '../mxgraph/shape/mxCylinder';
+import mxPoint from '../mxgraph/util/mxPoint';
+import mxHandle from '../mxgraph/handler/mxHandle';
 
-class MYNAMEHERE extends React.Component {
+class Handles extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -19,196 +26,249 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Handles example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            position: 'relative',
+            overflow: 'hidden',
+            width: '621px',
+            height: '441px',
+            background: "url('editors/images/grid.gif')",
+            cursor: 'default',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    class MyShape extends mxCylinder {
+      defaultPos1 = 20;
 
-  };
-}
+      defaultPos2 = 60;
 
-export default MYNAMEHERE;
+      getLabelBounds(rect) {
+        const pos1 =
+          mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
+        const pos2 =
+          mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
+        return new mxRectangle(
+          rect.x,
+          rect.y + pos1,
+          rect.width,
+          Math.min(rect.height, pos2) - Math.max(0, pos1)
+        );
+      }
 
-    function MyShape()
-    {
-      mxCylinder.call(this);
-    };
+      redrawPath(path, x, y, w, h, isForeground) {
+        const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
+        const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
 
-    mxUtils.extend(MyShape, mxCylinder);
+        if (isForeground) {
+          if (pos1 < h) {
+            path.moveTo(0, pos1);
+            path.lineTo(w, pos1);
+          }
 
-    MyShape.prototype.defaultPos1 = 20;
-    MyShape.prototype.defaultPos2 = 60;
-
-    MyShape.prototype.getLabelBounds = function(rect)
-    {
-       var pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
-       var pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
-
-       return new mxRectangle(rect.x, rect.y + pos1, rect.width, Math.min(rect.height, pos2) - Math.max(0, pos1));
-    };
-
-    MyShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
-    {
-       var pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
-       var pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
-
-      if (isForeground)
-      {
-        if (pos1 < h)
-        {
-          path.moveTo(0, pos1);
-          path.lineTo(w, pos1);
-        }
-
-        if (pos2 < h)
-        {
-          path.moveTo(0, pos2);
-          path.lineTo(w, pos2);
+          if (pos2 < h) {
+            path.moveTo(0, pos2);
+            path.lineTo(w, pos2);
+          }
+        } else {
+          path.rect(0, 0, w, h);
         }
       }
-      else
-      {
-        path.rect(0, 0, w, h);
-      }
-    };
-
+    }
     mxCellRenderer.registerShape('myShape', MyShape);
 
-    mxVertexHandler.prototype.createCustomHandles = function()
-    {
-      if (this.state.style['shape'] == 'myShape')
-      {
-        // Implements the handle for the first divider
-        let firstHandle = new mxHandle(this.state);
+    class MyCustomVertexHandler extends mxVertexHandler {
+      livePreview = true;
 
-        firstHandle.getPosition = function(bounds)
-        {
-          var pos2 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
-          var pos1 = Math.max(0, Math.min(pos2, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
+      rotationEnabled = true;
 
-          return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
-        };
+      createCustomHandles() {
+        if (this.state.style.shape === 'myShape') {
+          // Implements the handle for the first divider
+          const firstHandle = new mxHandle(this.state);
 
-        firstHandle.setPosition = function(bounds, pt)
-        {
-          var pos2 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
+          firstHandle.getPosition = function(bounds) {
+            const pos2 = Math.max(
+              0,
+              Math.min(
+                bounds.height,
+                parseFloat(
+                  mxUtils.getValue(
+                    this.state.style,
+                    'pos2',
+                    MyShape.prototype.defaultPos2
+                  )
+                )
+              )
+            );
+            const pos1 = Math.max(
+              0,
+              Math.min(
+                pos2,
+                parseFloat(
+                  mxUtils.getValue(
+                    this.state.style,
+                    'pos1',
+                    MyShape.prototype.defaultPos1
+                  )
+                )
+              )
+            );
 
-          this.state.style['pos1'] = Math.round(Math.max(0, Math.min(pos2, pt.y - bounds.y)));
-        };
+            return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
+          };
 
-        firstHandle.execute = function()
-        {
-          this.copyStyle('pos1');
+          firstHandle.setPosition = function(bounds, pt) {
+            const pos2 = Math.max(
+              0,
+              Math.min(
+                bounds.height,
+                parseFloat(
+                  mxUtils.getValue(
+                    this.state.style,
+                    'pos2',
+                    MyShape.prototype.defaultPos2
+                  )
+                )
+              )
+            );
+
+            this.state.style.pos1 = Math.round(
+              Math.max(0, Math.min(pos2, pt.y - bounds.y))
+            );
+          };
+
+          firstHandle.execute = function() {
+            this.copyStyle('pos1');
+          };
+
+          firstHandle.ignoreGrid = true;
+
+          // Implements the handle for the second divider
+          const secondHandle = new mxHandle(this.state);
+
+          secondHandle.getPosition = function(bounds) {
+            const pos1 = Math.max(
+              0,
+              Math.min(
+                bounds.height,
+                parseFloat(
+                  mxUtils.getValue(
+                    this.state.style,
+                    'pos1',
+                    MyShape.prototype.defaultPos1
+                  )
+                )
+              )
+            );
+            const pos2 = Math.max(
+              pos1,
+              Math.min(
+                bounds.height,
+                parseFloat(
+                  mxUtils.getValue(
+                    this.state.style,
+                    'pos2',
+                    MyShape.prototype.defaultPos2
+                  )
+                )
+              )
+            );
+
+            return new mxPoint(bounds.getCenterX(), bounds.y + pos2);
+          };
+
+          secondHandle.setPosition = function(bounds, pt) {
+            const pos1 = Math.max(
+              0,
+              Math.min(
+                bounds.height,
+                parseFloat(
+                  mxUtils.getValue(
+                    this.state.style,
+                    'pos1',
+                    MyShape.prototype.defaultPos1
+                  )
+                )
+              )
+            );
+
+            this.state.style.pos2 = Math.round(
+              Math.max(pos1, Math.min(bounds.height, pt.y - bounds.y))
+            );
+          };
+
+          secondHandle.execute = function() {
+            this.copyStyle('pos2');
+          };
+
+          secondHandle.ignoreGrid = true;
+
+          return [firstHandle, secondHandle];
         }
 
-        firstHandle.ignoreGrid = true;
-
-        // Implements the handle for the second divider
-        let secondHandle = new mxHandle(this.state);
-
-        secondHandle.getPosition = function(bounds)
-        {
-          var pos1 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
-          var pos2 = Math.max(pos1, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
-
-          return new mxPoint(bounds.getCenterX(), bounds.y + pos2);
-        };
-
-        secondHandle.setPosition = function(bounds, pt)
-        {
-          var pos1 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
-
-          this.state.style['pos2'] = Math.round(Math.max(pos1, Math.min(bounds.height, pt.y - bounds.y)));
-        };
-
-        secondHandle.execute = function()
-        {
-          this.copyStyle('pos2');
-        }
-
-        secondHandle.ignoreGrid = true;
-
-        return [firstHandle, secondHandle];
+        return null;
       }
+    }
 
-      return null;
-    };
-
-    mxVertexHandler.prototype.livePreview = true;
-    mxVertexHandler.prototype.rotationEnabled = true;
-
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // 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);
+    class MyCustomGraph extends mxGraph {
+      createVertexHandler(state) {
+        return new MyCustomVertexHandler(state);
       }
-      else
-      {
-        // Disables the built-in context menu
-        mxEvent.disableContextMenu(container);
+    }
 
-        // Creates the graph inside the given container
-        let graph = new mxGraph(container);
-        graph.setCellsCloneable(true);
-        graph.setHtmlLabels(true);
-        graph.setPanning(true);
-        graph.centerZoom = false;
+    // Disables the built-in context menu
+    mxEvent.disableContextMenu(this.el);
 
-        // Enables rubberband selection
-        new mxRubberband(graph);
+    // Creates the graph inside the given container
+    const graph = new MyCustomGraph(this.el);
+    graph.setCellsCloneable(true);
+    graph.setHtmlLabels(true);
+    graph.setPanning(true);
+    graph.centerZoom = false;
 
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    // Enables rubberband selection
+    new mxRubberband(graph);
 
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try
-        {
-          var v1 = graph.insertVertex(parent, null, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-            20, 20, 240, 120, 'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;');
-        }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
-        }
+    // Gets the default parent for inserting new cells. This
+    // is normally the first child of the root (ie. layer 0).
+    const parent = graph.getDefaultParent();
 
-        document.body.appendChild(mxUtils.button('+', function()
-        {
-          graph.zoomIn();
-        }));
-        document.body.appendChild(mxUtils.button('-', function()
-        {
-          graph.zoomOut();
-        }));
-      }
-    };
-  </script>
-</head>
+    // Adds cells to the model in a single step
+    graph.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(
+        parent,
+        null,
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        20,
+        20,
+        240,
+        120,
+        'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;'
+      );
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
 
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
+    document.body.appendChild(
+      mxUtils.button('+', function() {
+        graph.zoomIn();
+      })
+    );
+    document.body.appendChild(
+      mxUtils.button('-', function() {
+        graph.zoomOut();
+      })
+    );
+  }
+}
 
-  <!-- Creates a container for the graph with a grid wallpaper -->
-  <div id="graphContainer"
-    style="position:relative;overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
-  </div>
-</body>
-</html>
+export default Handles;

src/pages/HelloPort.js

@@ -9,8 +9,13 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxConstants from '../mxgraph/util/mxConstants';
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
+import mxPoint from '../mxgraph/util/mxPoint';
+import mxCodec from '../mxgraph/io/mxCodec';
+import mxUtils from '../mxgraph/util/mxUtils';
 
-class MYNAMEHERE extends React.Component {
+class HelloPort extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -20,140 +25,99 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Hello, World! example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            overflow: 'hidden',
+            width: '321px',
+            height: '241px',
+            background: "url('editors/images/grid.gif')",
+            cursor: 'default',
+          }}
+        />
+        <div
+          ref={el => {
+            this.el2 = el;
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
+    graph.setConnectable(true);
+    graph.setTooltips(true);
 
-  };
+    // Sets the default edge style
+    const style = graph.getStylesheet().getDefaultEdgeStyle();
+    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+
+    // Ports are not used as terminals for edges, they are
+    // only used to compute the graphical connection point
+    graph.isPort = function(cell) {
+      const geo = this.getCellGeometry(cell);
+
+      return geo != null ? geo.relative : false;
+    };
+
+    // Implements a tooltip that shows the actual
+    // source and target of an edge
+    graph.getTooltipForCell = function(cell) {
+      if (this.model.isEdge(cell)) {
+        return `${this.convertValueToString(
+          this.model.getTerminal(cell, true)
+        )} => ${this.convertValueToString(
+          this.model.getTerminal(cell, false)
+        )}`;
+      }
+
+      return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
+    };
+
+    // Removes the folding icon and disables any folding
+    graph.isCellFoldable = function(cell) {
+      return false;
+    };
+
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // 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.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
+      v1.setConnectable(false);
+      const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
+      v11.geometry.offset = new mxPoint(-5, -5);
+      v11.geometry.relative = true;
+      const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
+      v12.geometry.offset = new mxPoint(-5, -5);
+      v12.geometry.relative = true;
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+      const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
+      var e1 = graph.insertEdge(parent, null, '', v11, v2);
+      var e1 = graph.insertEdge(parent, null, '', v12, v3);
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+
+    const button = mxUtils.button('View XML', function() {
+      const encoder = new mxCodec();
+      const node = encoder.encode(graph.getModel());
+      mxUtils.popup(mxUtils.getPrettyXml(node), true);
+    });
+
+    this.el2.appendChild(button);
+  }
 }
 
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-  <title></title>
-
-  <!-- Sets the basepath for the library if not in same directory -->
-  <script type="text/javascript">
-    mxBasePath = '../src';
-  </script>
-
-  <!-- Loads and initializes the library -->
-  <script type="text/javascript" src="../src/js/mxClient.js"></script>
-
-  <!-- Example code -->
-  <script type="text/javascript">
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // 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
-        let graph = new mxGraph(container);
-        graph.setConnectable(true);
-        graph.setTooltips(true);
-
-        // Sets the default edge style
-        let style = graph.getStylesheet().getDefaultEdgeStyle();
-        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-
-        // Ports are not used as terminals for edges, they are
-        // only used to compute the graphical connection point
-        graph.isPort = function(cell)
-        {
-          let geo = this.getCellGeometry(cell);
-
-          return (geo != null) ? geo.relative : false;
-        };
-
-        // Implements a tooltip that shows the actual
-        // source and target of an edge
-        graph.getTooltipForCell = function(cell)
-        {
-          if (this.model.isEdge(cell))
-          {
-            return this.convertValueToString(this.model.getTerminal(cell, true)) + ' => ' +
-              this.convertValueToString(this.model.getTerminal(cell, false))
-          }
-
-          return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
-        };
-
-        // Removes the folding icon and disables any folding
-        graph.isCellFoldable = function(cell)
-        {
-          return false;
-        };
-
-        // Enables rubberband selection
-        new mxRubberband(graph);
-
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
-
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try
-        {
-          var v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
-          v1.setConnectable(false);
-          var v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
-          v11.geometry.offset = new mxPoint(-5, -5);
-          v11.geometry.relative = true;
-          var v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
-          v12.geometry.offset = new mxPoint(-5, -5);
-          v12.geometry.relative = true;
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-          var v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
-          var e1 = graph.insertEdge(parent, null, '', v11, v2);
-          var e1 = graph.insertEdge(parent, null, '', v12, v3);
-        }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
-        }
-
-        let button = mxUtils.button('View XML', function()
-        {
-          let encoder = new mxCodec();
-          let node = encoder.encode(graph.getModel());
-          mxUtils.popup(mxUtils.getPrettyXml(node), true);
-        });
-
-        document.body.insertBefore(button, container.nextSibling);
-      }
-    };
-  </script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-  <!-- Creates a container for the graph with a grid wallpaper -->
-  <div id="graphContainer"
-    style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
-  </div>
-</body>
-</html>
+export default HelloPort;

src/pages/HierarchicalLayout.js

@@ -10,8 +10,13 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalLayout';
+import mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';
+import mxConstants from '../mxgraph/util/mxConstants';
+import mxPerimeter from '../mxgraph/view/mxPerimeter';
+import mxUtils from "../mxgraph/util/mxUtils";
 
-class MYNAMEHERE extends React.Component {
+class HierarchicalLayout extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -21,149 +26,102 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Hierarchical Layout example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            position: 'absolute',
+            overflow: 'auto',
+            top: '36px',
+            bottom: '0px',
+            left: '0px',
+            right: '0px',
+            borderTop: 'gray 1px solid',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
 
-  };
+    // Adds rubberband selection
+    new mxRubberband(graph);
+
+    // Changes the default vertex style in-place
+    let style = graph.getStylesheet().getDefaultVertexStyle();
+    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
+    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
+    style[mxConstants.STYLE_PERIMETER_SPACING] = 6;
+    style[mxConstants.STYLE_ROUNDED] = true;
+    style[mxConstants.STYLE_SHADOW] = true;
+
+    style = graph.getStylesheet().getDefaultEdgeStyle();
+    style[mxConstants.STYLE_ROUNDED] = true;
+
+    // Creates a layout algorithm to be used
+    // with the graph
+    const layout = new mxHierarchicalLayout(graph);
+    const organic = new mxFastOrganicLayout(graph);
+    organic.forceConstant = 120;
+
+    const parent = graph.getDefaultParent();
+
+    // Adds a button to execute the layout
+    let button = document.createElement('button');
+    mxUtils.write(button, 'Hierarchical');
+    mxEvent.addListener(button, 'click', function(evt) {
+      layout.execute(parent);
+    });
+    document.body.appendChild(button);
+
+    // Adds a button to execute the layout
+    button = document.createElement('button');
+    mxUtils.write(button, 'Organic');
+
+    mxEvent.addListener(button, 'click', function(evt) {
+      organic.execute(parent);
+    });
+
+    document.body.appendChild(button);
+
+    // Load cells and layouts the graph
+    graph.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);
+      const v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);
+      const v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);
+      const v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);
+      const v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);
+      const v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);
+      const v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);
+      const v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);
+      const v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);
+
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+      const e2 = graph.insertEdge(parent, null, '', v1, v3);
+      const e3 = graph.insertEdge(parent, null, '', v3, v4);
+      const e4 = graph.insertEdge(parent, null, '', v2, v5);
+      const e5 = graph.insertEdge(parent, null, '', v1, v6);
+      const e6 = graph.insertEdge(parent, null, '', v2, v3);
+      const e7 = graph.insertEdge(parent, null, '', v6, v4);
+      const e8 = graph.insertEdge(parent, null, '', v6, v1);
+      const e9 = graph.insertEdge(parent, null, '', v6, v7);
+      const e10 = graph.insertEdge(parent, null, '', v7, v8);
+      const e11 = graph.insertEdge(parent, null, '', v7, v9);
+      const e12 = graph.insertEdge(parent, null, '', v7, v6);
+      const e13 = graph.insertEdge(parent, null, '', v7, v5);
+
+      // Executes the layout
+      layout.execute(parent);
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+  }
 }
 
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-  <title></title>
-
-  <!-- Sets the basepath for the library if not in same directory -->
-  <script type="text/javascript">
-    mxBasePath = '../src';
-  </script>
-
-  <!-- Loads and initializes the library -->
-  <script type="text/javascript" src="../src/js/mxClient.js"></script>
-
-  <!-- Example code -->
-  <script type="text/javascript">
-
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // from the onLoad event handler of the document (see below).
-    function main(container)
-    {
-      // Checks if 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
-        let graph = new mxGraph(container);
-
-        // Adds rubberband selection
-        new mxRubberband(graph);
-
-        // Changes the default vertex style in-place
-        let style = graph.getStylesheet().getDefaultVertexStyle();
-        style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-        style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-        style[mxConstants.STYLE_PERIMETER_SPACING] = 6;
-        style[mxConstants.STYLE_ROUNDED] = true;
-        style[mxConstants.STYLE_SHADOW] = true;
-
-        style = graph.getStylesheet().getDefaultEdgeStyle();
-        style[mxConstants.STYLE_ROUNDED] = true;
-
-        // Creates a layout algorithm to be used
-        // with the graph
-        let layout = new mxHierarchicalLayout(graph);
-        let organic = new mxFastOrganicLayout(graph);
-        organic.forceConstant = 120;
-
-        let parent = graph.getDefaultParent();
-
-        // Adds a button to execute the layout
-        let button = document.createElement('button');
-        mxUtils.write(button, 'Hierarchical');
-        mxEvent.addListener(button, 'click', function(evt)
-        {
-          layout.execute(parent);
-        });
-        document.body.appendChild(button);
-
-        // Adds a button to execute the layout
-        let button = document.createElement('button');
-        mxUtils.write(button, 'Organic');
-
-        mxEvent.addListener(button, 'click', function(evt)
-        {
-          organic.execute(parent);
-        });
-
-        document.body.appendChild(button);
-
-        // Load cells and layouts the graph
-        graph.getModel().beginUpdate();
-        try
-        {
-          var v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);
-          var v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);
-          var v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);
-          var v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);
-          var v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);
-          var v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);
-          var v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);
-          var v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);
-          var v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);
-
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
-          var e2 = graph.insertEdge(parent, null, '', v1, v3);
-          var e3 = graph.insertEdge(parent, null, '', v3, v4);
-          var e4 = graph.insertEdge(parent, null, '', v2, v5);
-          var e5 = graph.insertEdge(parent, null, '', v1, v6);
-          var e6 = graph.insertEdge(parent, null, '', v2, v3);
-          var e7 = graph.insertEdge(parent, null, '', v6, v4);
-          var e8 = graph.insertEdge(parent, null, '', v6, v1);
-          var e9 = graph.insertEdge(parent, null, '', v6, v7);
-          var e10 = graph.insertEdge(parent, null, '', v7, v8);
-          var e11 = graph.insertEdge(parent, null, '', v7, v9);
-          var e12 = graph.insertEdge(parent, null, '', v7, v6);
-          var e13 = graph.insertEdge(parent, null, '', v7, v5);
-
-          // Executes the layout
-          layout.execute(parent);
-        }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
-        }
-      }
-    };
-  </script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))" style="margin:4px;">
-
-  <!-- Creates a container for the graph with a grid wallpaper. Make sure to define the position
-    and overflow attributes! See comments on the adding of the size-listener on line 54 ff!  -->
-  <div id="graphContainer"
-    style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;">
-  </div>
-</body>
-</html>
+export default HierarchicalLayout;

src/pages/HoverIcons.js

@@ -9,8 +9,12 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
+import mxUtils from '../mxgraph/util/mxUtils';
+import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxImage from "../mxgraph/util/mxImage";
 
-class MYNAMEHERE extends React.Component {
+class HoverIcons extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -26,44 +30,30 @@ class MYNAMEHERE extends React.Component {
             this.el = el;
           }}
           style={{
-
+            overflow: 'hidden',
+            width: '321px',
+            height: '241px',
+            background: "url('editors/images/grid.gif')",
+            cursor: 'default',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
-
-  };
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-  <title></title>
-
-  <!-- Sets the basepath for the library if not in same directory -->
-  <script type="text/javascript">
-    mxBasePath = '../src';
-  </script>
-
-  <!-- Loads and initializes the library -->
-  <script type="text/javascript" src="../src/js/mxClient.js"></script>
-
-  <!-- Example code -->
-  <script type="text/javascript">
     // Defines an icon for creating new connections in the connection handler.
     // This will automatically disable the highlighting of the source vertex.
-    mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
+    mxConnectionHandler.prototype.connectImage = new mxImage(
+      'images/connector.gif',
+      16,
+      16
+    );
 
     // Defines a new class for all icons
-    function mxIconSet(state)
-    {
+    function mxIconSet(state) {
       this.images = [];
-      let graph = state.view.graph;
+      const { graph } = state.view;
 
       // Icon1
       let img = mxUtils.createImage('images/copy.png');
@@ -72,57 +62,48 @@ export default MYNAMEHERE;
       img.style.cursor = 'pointer';
       img.style.width = '16px';
       img.style.height = '16px';
-      img.style.left = (state.x + state.width) + 'px';
-      img.style.top = (state.y + state.height) + 'px';
+      img.style.left = `${state.x + state.width}px`;
+      img.style.top = `${state.y + state.height}px`;
 
-      mxEvent.addGestureListeners(img,
-        (evt) => {
-          let s = graph.gridSize;
-          graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
-          mxEvent.consume(evt);
-          this.destroy();
-        })
-      );
+      mxEvent.addGestureListeners(img, evt => {
+        const s = graph.gridSize;
+        graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
+        mxEvent.consume(evt);
+        this.destroy();
+      });
 
       state.view.graph.container.appendChild(img);
       this.images.push(img);
 
       // Delete
-      let img = mxUtils.createImage('images/delete2.png');
+      img = mxUtils.createImage('images/delete2.png');
       img.setAttribute('title', 'Delete');
       img.style.position = 'absolute';
       img.style.cursor = 'pointer';
       img.style.width = '16px';
       img.style.height = '16px';
-      img.style.left = (state.x + state.width) + 'px';
-      img.style.top = (state.y - 16) + 'px';
+      img.style.left = `${state.x + state.width}px`;
+      img.style.top = `${state.y - 16}px`;
 
-      mxEvent.addGestureListeners(img,
-        (evt) => {
-          // Disables dragging the image
-          mxEvent.consume(evt);
-        }
-      );
+      mxEvent.addGestureListeners(img, evt => {
+        // Disables dragging the image
+        mxEvent.consume(evt);
+      });
 
-      mxEvent.addListener(img, 'click',
-        (evt) => {
-          graph.removeCells([state.cell]);
-          mxEvent.consume(evt);
-          this.destroy();
-        }
-      );
+      mxEvent.addListener(img, 'click', evt => {
+        graph.removeCells([state.cell]);
+        mxEvent.consume(evt);
+        this.destroy();
+      });
 
       state.view.graph.container.appendChild(img);
       this.images.push(img);
-    };
+    }
 
-    mxIconSet.prototype.destroy = function()
-    {
-      if (this.images != null)
-      {
-        for (let i = 0; i < this.images.length; i++)
-        {
-          let img = this.images[i];
+    mxIconSet.prototype.destroy = function() {
+      if (this.images != null) {
+        for (let i = 0; i < this.images.length; i++) {
+          const img = this.images[i];
           img.parentNode.removeChild(img);
         }
       }
@@ -130,127 +111,96 @@ export default MYNAMEHERE;
       this.images = null;
     };
 
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // 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
-        let graph = new mxGraph(container);
-        graph.setConnectable(true);
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
+    graph.setConnectable(true);
 
-        // Defines the tolerance before removing the icons
-        let iconTolerance = 20;
+    // Defines the tolerance before removing the icons
+    const iconTolerance = 20;
 
-        // Shows icons if the mouse is over a cell
-        graph.addMouseListener(
-        {
-            currentState: null,
-            currentIconSet: null,
-            mouseDown: function(sender, me)
-            {
-              // Hides icons on mouse down
-                if (this.currentState != null)
-                {
-                    this.dragLeave(me.getEvent(), this.currentState);
-                    this.currentState = null;
-                }
-            },
-            mouseMove: function(sender, me)
-            {
-              if (this.currentState != null && (me.getState() == this.currentState ||
-                me.getState() == null))
-              {
-                let tol = iconTolerance;
-                let tmp = new mxRectangle(me.getGraphX() - tol,
-                  me.getGraphY() - tol, 2 * tol, 2 * tol);
-
-                if (mxUtils.intersects(tmp, this.currentState))
-                {
-                  return;
-                }
-              }
-
-            let tmp = graph.view.getState(me.getCell());
-
-              // Ignores everything but vertices
-            if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell)))
-            {
-              tmp = null;
-            }
-
-                if (tmp != this.currentState)
-                {
-                  if (this.currentState != null)
-                  {
-                      this.dragLeave(me.getEvent(), this.currentState);
-                  }
-
-                  this.currentState = tmp;
-
-                  if (this.currentState != null)
-                  {
-                      this.dragEnter(me.getEvent(), this.currentState);
-                  }
-                }
-            },
-            mouseUp: function(sender, me) { },
-            dragEnter: function(evt, state)
-            {
-              if (this.currentIconSet == null)
-              {
-                this.currentIconSet = new mxIconSet(state);
-              }
-            },
-            dragLeave: function(evt, state)
-            {
-              if (this.currentIconSet != null)
-              {
-                this.currentIconSet.destroy();
-                this.currentIconSet = null;
-              }
-            }
-        });
-
-        // Enables rubberband selection
-        new mxRubberband(graph);
-
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
-
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try
-        {
-          var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
+    // Shows icons if the mouse is over a cell
+    graph.addMouseListener({
+      currentState: null,
+      currentIconSet: null,
+      mouseDown(sender, me) {
+        // Hides icons on mouse down
+        if (this.currentState != null) {
+          this.dragLeave(me.getEvent(), this.currentState);
+          this.currentState = null;
         }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
+      },
+      mouseMove(sender, me) {
+        if (
+          this.currentState != null &&
+          (me.getState() == this.currentState || me.getState() == null)
+        ) {
+          const tol = iconTolerance;
+          const tmp = new mxRectangle(
+            me.getGraphX() - tol,
+            me.getGraphY() - tol,
+            2 * tol,
+            2 * tol
+          );
+
+          if (mxUtils.intersects(tmp, this.currentState)) {
+            return;
+          }
         }
-      }
-    };
-  </script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
+        let tmp = graph.view.getState(me.getCell());
 
-  <!-- Creates a container for the graph with a grid wallpaper -->
-  <div id="graphContainer"
-    style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
-  </div>
-</body>
-</html>
+        // Ignores everything but vertices
+        if (
+          graph.isMouseDown ||
+          (tmp != null && !graph.getModel().isVertex(tmp.cell))
+        ) {
+          tmp = null;
+        }
+
+        if (tmp != this.currentState) {
+          if (this.currentState != null) {
+            this.dragLeave(me.getEvent(), this.currentState);
+          }
+
+          this.currentState = tmp;
+
+          if (this.currentState != null) {
+            this.dragEnter(me.getEvent(), this.currentState);
+          }
+        }
+      },
+      mouseUp(sender, me) {},
+      dragEnter(evt, state) {
+        if (this.currentIconSet == null) {
+          this.currentIconSet = new mxIconSet(state);
+        }
+      },
+      dragLeave(evt, state) {
+        if (this.currentIconSet != null) {
+          this.currentIconSet.destroy();
+          this.currentIconSet = null;
+        }
+      },
+    });
+
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // 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.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+  }
+}
+
+export default HoverIcons;

src/pages/HoverStyle.js

@@ -9,8 +9,9 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxConstants from "../mxgraph/util/mxConstants";
 
-class MYNAMEHERE extends React.Component {
+class HoverStyle extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -20,183 +21,127 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Hoverstyle example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            position: 'relative',
+            overflow: 'hidden',
+            width: '321px',
+            height: '241px',
+            background: "url('editors/images/grid.gif')",
+            cursor: 'default',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
 
-  };
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-  <title></title>
-
-  <!-- Sets the basepath for the library if not in same directory -->
-  <script type="text/javascript">
-    mxBasePath = '../src';
-  </script>
-
-  <!-- Loads and initializes the library -->
-  <script type="text/javascript" src="../src/js/mxClient.js"></script>
-
-  <!-- Example code -->
-  <script type="text/javascript">
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // 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);
+    function updateStyle(state, hover) {
+      if (hover) {
+        state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
       }
-      else
-      {
-        // Creates the graph inside the given container
-        let graph = new mxGraph(container);
 
-        function updateStyle(state, hover)
-        {
-          if (hover)
-          {
-            state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
+      // Sets rounded style for both cases since the rounded style
+      // is not set in the default style and is therefore inherited
+      // once it is set, whereas the above overrides the default value
+      state.style[mxConstants.STYLE_ROUNDED] = hover ? '1' : '0';
+      state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1';
+      state.style[mxConstants.STYLE_FONTSTYLE] = hover
+        ? mxConstants.FONT_BOLD
+        : '0';
+    }
+
+    // Changes fill color to red on mouseover
+    graph.addMouseListener({
+      currentState: null,
+      previousStyle: null,
+      mouseDown(sender, me) {
+        if (this.currentState != null) {
+          this.dragLeave(me.getEvent(), this.currentState);
+          this.currentState = null;
+        }
+      },
+      mouseMove(sender, me) {
+        if (this.currentState != null && me.getState() == this.currentState) {
+          return;
+        }
+
+        let tmp = graph.view.getState(me.getCell());
+
+        // Ignores everything but vertices
+        if (
+          graph.isMouseDown ||
+          (tmp != null && !graph.getModel().isVertex(tmp.cell))
+        ) {
+          tmp = null;
+        }
+
+        if (tmp != this.currentState) {
+          if (this.currentState != null) {
+            this.dragLeave(me.getEvent(), this.currentState);
           }
 
-          // Sets rounded style for both cases since the rounded style
-          // is not set in the default style and is therefore inherited
-          // once it is set, whereas the above overrides the default value
-          state.style[mxConstants.STYLE_ROUNDED] = (hover) ? '1' : '0';
-          state.style[mxConstants.STYLE_STROKEWIDTH] = (hover) ? '4' : '1';
-          state.style[mxConstants.STYLE_FONTSTYLE] = (hover) ? mxConstants.FONT_BOLD : '0';
-        };
+          this.currentState = tmp;
 
-        // Changes fill color to red on mouseover
-        graph.addMouseListener(
-        {
-            currentState: null,
-            previousStyle: null,
-            mouseDown: function(sender, me)
-            {
-                if (this.currentState != null)
-                {
-                  this.dragLeave(me.getEvent(), this.currentState);
-                  this.currentState = null;
-                }
-            },
-            mouseMove: function(sender, me)
-            {
-                if (this.currentState != null && me.getState() == this.currentState)
-                {
-                    return;
-                }
-
-                let tmp = graph.view.getState(me.getCell());
-
-                // Ignores everything but vertices
-                if (graph.isMouseDown || (tmp != null && !
-                    graph.getModel().isVertex(tmp.cell)))
-                {
-                  tmp = null;
-                }
-
-                if (tmp != this.currentState)
-                {
-                    if (this.currentState != null)
-                    {
-                        this.dragLeave(me.getEvent(), this.currentState);
-                    }
-
-                    this.currentState = tmp;
-
-                    if (this.currentState != null)
-                    {
-                        this.dragEnter(me.getEvent(), this.currentState);
-                    }
-                }
-            },
-            mouseUp: function(sender, me) { },
-            dragEnter: function(evt, state)
-            {
-                if (state != null)
-                {
-                  this.previousStyle = state.style;
-                  state.style = mxUtils.clone(state.style);
-                  updateStyle(state, true);
-                  state.shape.apply(state);
-                  state.shape.redraw();
-
-                  if (state.text != null)
-                  {
-                    state.text.apply(state);
-                    state.text.redraw();
-                  }
-                }
-            },
-            dragLeave: function(evt, state)
-            {
-                if (state != null)
-                {
-                  state.style = this.previousStyle;
-                  updateStyle(state, false);
-                  state.shape.apply(state);
-                  state.shape.redraw();
-
-                  if (state.text != null)
-                  {
-                    state.text.apply(state);
-                    state.text.redraw();
-                  }
-                }
-            }
-        });
-
-        // Enables rubberband selection
-        new mxRubberband(graph);
-
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
-
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try
-        {
-          var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
+          if (this.currentState != null) {
+            this.dragEnter(me.getEvent(), this.currentState);
+          }
         }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
+      },
+      mouseUp(sender, me) {},
+      dragEnter(evt, state) {
+        if (state != null) {
+          this.previousStyle = state.style;
+          state.style = mxUtils.clone(state.style);
+          updateStyle(state, true);
+          state.shape.apply(state);
+          state.shape.redraw();
+
+          if (state.text != null) {
+            state.text.apply(state);
+            state.text.redraw();
+          }
         }
-      }
-    };
-  </script>
-</head>
+      },
+      dragLeave(evt, state) {
+        if (state != null) {
+          state.style = this.previousStyle;
+          updateStyle(state, false);
+          state.shape.apply(state);
+          state.shape.redraw();
 
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
+          if (state.text != null) {
+            state.text.apply(state);
+            state.text.redraw();
+          }
+        }
+      },
+    });
 
-  <!-- Creates a container for the graph with a grid wallpaper -->
-  <div id="graphContainer"
-    style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
-  </div>
-</body>
-</html>
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // 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.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+  }
+}
+
+export default HoverStyle;

src/pages/Images.js

@@ -9,8 +9,13 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxConstants from '../mxgraph/util/mxConstants';
+import mxUtils from '../mxgraph/util/mxUtils';
+import mxRectangle from '../mxgraph/util/mxRectangle';
+import mxImage from '../mxgraph/util/mxImage';
+import mxPerimeter from "../mxgraph/view/mxPerimeter";
 
-class MYNAMEHERE extends React.Component {
+class Images extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -20,94 +25,94 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Images example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            position: 'relative',
+            overflow: 'hidden',
+            width: '360px',
+            height: '200px',
+            cursor: 'default',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
 
-  };
-}
+    // Sets a background image and restricts child movement to its bounds
+    graph.setBackgroundImage(
+      new mxImage('images/gradient_background.jpg', 360, 200)
+    );
+    graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);
 
-export default MYNAMEHERE;
+    // Resizes the container but never make it bigger than the background
+    graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);
+    graph.setResizeContainer(true);
 
+    // Disables basic selection and cell handling
+    // graph.setEnabled(false);
+    configureStylesheet(graph);
 
-<html>
-<head>
-  <title></title>
+    // Gets the default parent for inserting new cells. This
+    // is normally the first child of the root (ie. layer 0).
+    const parent = graph.getDefaultParent();
 
-  <!-- Sets the basepath for the library if not in same directory -->
-  <script type="text/javascript">
-    mxBasePath = '../src';
-  </script>
+    // Adds cells to the model in a single step
+    graph.getModel().beginUpdate();
+    try {
+      var v1 = graph.insertVertex(
+        parent,
+        null,
+        'First Line\nSecond Line',
+        20,
+        10,
+        80,
+        100,
+        'bottom'
+      );
+      var v1 = graph.insertVertex(
+        parent,
+        null,
+        'First Line\nSecond Line',
+        130,
+        10,
+        80,
+        100,
+        'top'
+      );
+      var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');
+      var v2 = graph.insertVertex(
+        parent,
+        null,
+        'First Line\nSecond Line',
+        20,
+        130,
+        140,
+        60,
+        'right'
+      );
+      var v2 = graph.insertVertex(
+        parent,
+        null,
+        'First Line\nSecond Line',
+        180,
+        130,
+        140,
+        60,
+        'left'
+      );
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
 
-  <!-- Loads and initializes the library -->
-  <script type="text/javascript" src="../src/js/mxClient.js"></script>
-
-  <!-- Example code -->
-  <script type="text/javascript">
-
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // 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
-        let graph = new mxGraph(container);
-
-        // Sets a background image and restricts child movement to its bounds
-        graph.setBackgroundImage(new mxImage('images/gradient_background.jpg', 360, 200));
-        graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);
-
-        // Resizes the container but never make it bigger than the background
-        graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);
-        graph.setResizeContainer(true);
-
-        // Disables basic selection and cell handling
-        //graph.setEnabled(false);
-        configureStylesheet(graph);
-
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
-
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try
-        {
-          var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 10, 80, 100, 'bottom');
-          var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 130, 10, 80, 100, 'top');
-          var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');
-          var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 130, 140, 60, 'right');
-          var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 180, 130, 140, 60, 'left');
-        }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
-        }
-      }
-    };
-
-    function configureStylesheet(graph)
-    {
+    function configureStylesheet(graph) {
       let style = {};
       style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
       style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
@@ -151,15 +156,8 @@ export default MYNAMEHERE;
       delete style[mxConstants.STYLE_SPACING_LEFT];
       style[mxConstants.STYLE_SPACING_RIGHT] = '55';
       graph.getStylesheet().putCellStyle('left', style);
-    };
-  </script>
-</head>
+    }
+  }
+}
 
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-  <!-- Creates a container for the graph -->
-  <div id="graphContainer" style="position:relative;overflow:hidden;width:360px;height:200px;cursor:default;">
-  </div>
-</body>
-</html>
+export default Images;

src/pages/Indicators.js

@@ -7,11 +7,12 @@
  */
 
 import React from 'react';
-import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
-import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxConstants from '../mxgraph/util/mxConstants';
+import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
+import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
 
-class MYNAMEHERE extends React.Component {
+class Indicators extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -21,114 +22,83 @@ class MYNAMEHERE extends React.Component {
     return (
       <>
         <h1>Indicators example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            position: 'relative',
+            overflow: 'hidden',
+            height: '300ph',
           }}
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
+    graph.setConnectable(true);
+    new mxKeyHandler(graph);
 
-  };
+    // Enables moving of vertex labels
+    graph.vertexLabelsMovable = true;
+
+    // Creates a style with an indicator
+    let style = graph.getStylesheet().getDefaultVertexStyle();
+
+    style[mxConstants.STYLE_SHAPE] = 'label';
+    style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
+    style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse';
+    style[mxConstants.STYLE_INDICATOR_WIDTH] = 34;
+    style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34;
+    style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment
+    style[mxConstants.STYLE_IMAGE_ALIGN] = 'center';
+    style[mxConstants.STYLE_INDICATOR_COLOR] = 'green';
+    delete style[mxConstants.STYLE_STROKECOLOR]; // transparent
+    delete style[mxConstants.STYLE_FILLCOLOR]; // transparent
+
+    // Creates a style with an indicator
+    style = graph.getStylesheet().getDefaultEdgeStyle();
+
+    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+    style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;
+    style[mxConstants.STYLE_ROUNDED] = true;
+
+    // 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.getModel().beginUpdate();
+    try {
+      graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);
+      graph.insertVertex(
+        parent,
+        null,
+        'Top Label',
+        200,
+        80,
+        60,
+        60,
+        'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top'
+      );
+      graph.insertVertex(
+        parent,
+        null,
+        'Right Label',
+        300,
+        80,
+        120,
+        60,
+        'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44'
+      );
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+  }
 }
 
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-  <title></title>
-
-  <!-- Sets the basepath for the library if not in same directory -->
-  <script type="text/javascript">
-    mxBasePath = '../src';
-  </script>
-
-  <!-- Loads and initializes the library -->
-  <script type="text/javascript" src="../src/js/mxClient.js"></script>
-
-  <!-- Example code -->
-  <script type="text/javascript">
-
-    // Program starts here. Creates a sample graph in the
-    // DOM node with the specified ID. This function is invoked
-    // 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
-        let graph = new mxGraph(container);
-        graph.setConnectable(true);
-        new mxKeyHandler(graph);
-
-        // Enables moving of vertex labels
-        graph.vertexLabelsMovable = true;
-
-        // Creates a style with an indicator
-        let style = graph.getStylesheet().getDefaultVertexStyle();
-
-        style[mxConstants.STYLE_SHAPE] = 'label';
-        style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
-        style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse';
-        style[mxConstants.STYLE_INDICATOR_WIDTH] = 34;
-        style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34;
-        style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment
-        style[mxConstants.STYLE_IMAGE_ALIGN] = 'center';
-        style[mxConstants.STYLE_INDICATOR_COLOR] = 'green';
-        delete style[mxConstants.STYLE_STROKECOLOR]; // transparent
-        delete style[mxConstants.STYLE_FILLCOLOR]; // transparent
-
-        // Creates a style with an indicator
-        let style = graph.getStylesheet().getDefaultEdgeStyle();
-
-        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-        style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;
-        style[mxConstants.STYLE_ROUNDED] = true;
-
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
-
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try
-        {
-          graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);
-          graph.insertVertex(parent, null, 'Top Label', 200, 80, 60, 60,
-            'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top');
-          graph.insertVertex(parent, null, 'Right Label', 300, 80, 120, 60,
-            'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44');
-        }
-        finally
-        {
-          // Updates the display
-          graph.getModel().endUpdate();
-        }
-      }
-    };
-  </script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-  <!-- Creates a container for the graph with a grid wallpaper -->
-  <div id="graphContainer"
-    style="position:absolute;top:0px;left:0px;overflow:hidden;width:100%;height:100%;">
-  </div>
-</body>
-</html>
+export default Indicators;

src/pages/index.js

@@ -51,6 +51,14 @@ import Layers from "./Layers";
 import Labels from "./Labels";
 import LabelPosition from "./LabelPosition";
 import JsonData from "./JsonData";
+import Indicators from "./Indicators";
+import Images from "./Images";
+import HoverIcons from "./HoverIcons";
+import HoverStyle from "./HoverStyle";
+import HierarchicalLayout from "./HierarchicalLayout";
+import HelloPort from "./HelloPort";
+import Handles from "./Handles";
+import Guides from "./Guides";
 
 export default function Home() {
   return (
@@ -79,6 +87,14 @@ export default function Home() {
       <EdgeTolerance />
       <Editing />
 
+      <Guides />
+      <Handles />
+      <HelloPort />
+      {/*<HierarchicalLayout />*/}
+      <HoverStyle />
+      <HoverIcons />
+      <Images />
+      <Indicators />
       <JsonData />
       <LabelPosition />
       <Labels />