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,43 +28,28 @@ 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() {
-
-  };
-}
-
-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)
+    mxGraphHandler.prototype.useGuidesForEvent = function(me) {
-          {
       return !mxEvent.isAltDown(me.getEvent());
     };
 
@@ -73,7 +63,7 @@ export default MYNAMEHERE;
     mxEdgeHandler.prototype.snapToTerminals = true;
 
     // Creates the graph inside the given container
-        let graph = new mxGraph(container);
+    const graph = new mxGraph(this.el);
     graph.setConnectable(true);
     graph.gridSize = 30;
 
@@ -82,7 +72,7 @@ export default MYNAMEHERE;
     // 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();
+    const style = graph.getStylesheet().getDefaultEdgeStyle();
     style[mxConstants.STYLE_ROUNDED] = true;
     style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
     graph.alternateEdgeStyle = 'elbow=vertical';
@@ -92,92 +82,66 @@ export default MYNAMEHERE;
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        var v1;
+    let v1;
-        try
+    try {
-        {
       v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
-        }
+    } finally {
-        finally
-        {
       // Updates the display
       graph.getModel().endUpdate();
     }
 
     // Handles cursor keys
-          let nudge = function(keyCode)
+    const nudge = function(keyCode) {
-          {
+      if (!graph.isSelectionEmpty()) {
-            if (!graph.isSelectionEmpty())
-          {
         let dx = 0;
         let dy = 0;
 
-              if (keyCode == 37)
+        if (keyCode === 37) {
-            {
           dx = -1;
-            }
+        } else if (keyCode === 38) {
-              else if (keyCode == 38)
-              {
           dy = -1;
-              }
+        } else if (keyCode === 39) {
-              else if (keyCode == 39)
-              {
           dx = 1;
-              }
+        } else if (keyCode === 40) {
-              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);
+      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()
+      keyHandler.bindKey(37, function() {
-        {
         nudge(37);
       });
 
-          keyHandler.bindKey(38, function()
+      keyHandler.bindKey(38, function() {
-          {
         nudge(38);
       });
 
-          keyHandler.bindKey(39, function()
+      keyHandler.bindKey(39, function() {
-          {
         nudge(39);
       });
 
-          keyHandler.bindKey(40, function()
+      keyHandler.bindKey(40, function() {
-          {
         nudge(40);
       });
-      }
     };
-  </script>
+  }
-</head>
+}
 
-<!-- Page passes the container for the graph to the program -->
+export default Guides;
-<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>

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,122 +26,187 @@ 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()
+      redrawPath(path, x, y, w, h, isForeground) {
-    {
+        const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
-      mxCylinder.call(this);
+        const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
-    };
 
-    mxUtils.extend(MyShape, mxCylinder);
+        if (isForeground) {
-
+          if (pos1 < h) {
-    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)
+          if (pos2 < h) {
-        {
             path.moveTo(0, pos2);
             path.lineTo(w, pos2);
           }
-      }
+        } else {
-      else
-      {
           path.rect(0, 0, w, h);
         }
-    };
+      }
-
+    }
     mxCellRenderer.registerShape('myShape', MyShape);
 
-    mxVertexHandler.prototype.createCustomHandles = function()
+    class MyCustomVertexHandler extends mxVertexHandler {
-    {
+      livePreview = true;
-      if (this.state.style['shape'] == 'myShape')
-      {
-        // Implements the handle for the first divider
-        let firstHandle = new mxHandle(this.state);
 
-        firstHandle.getPosition = function(bounds)
+      rotationEnabled = true;
-        {
+
-          var pos2 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
+      createCustomHandles() {
-          var pos1 = Math.max(0, Math.min(pos2, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
+        if (this.state.style.shape === 'myShape') {
+          // Implements the handle for the first divider
+          const firstHandle = new mxHandle(this.state);
+
+          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
+                  )
+                )
+              )
+            );
 
             return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
           };
 
-        firstHandle.setPosition = function(bounds, pt)
+          firstHandle.setPosition = function(bounds, pt) {
-        {
+            const pos2 = Math.max(
-          var pos2 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
+              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)));
+            this.state.style.pos1 = Math.round(
+              Math.max(0, Math.min(pos2, pt.y - bounds.y))
+            );
           };
 
-        firstHandle.execute = function()
+          firstHandle.execute = function() {
-        {
             this.copyStyle('pos1');
-        }
+          };
 
           firstHandle.ignoreGrid = true;
 
           // Implements the handle for the second divider
-        let secondHandle = new mxHandle(this.state);
+          const secondHandle = new mxHandle(this.state);
 
-        secondHandle.getPosition = function(bounds)
+          secondHandle.getPosition = function(bounds) {
-        {
+            const pos1 = Math.max(
-          var pos1 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
+              0,
-          var pos2 = Math.max(pos1, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
+              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)
+          secondHandle.setPosition = function(bounds, pt) {
-        {
+            const pos1 = Math.max(
-          var pos1 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
+              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)));
+            this.state.style.pos2 = Math.round(
+              Math.max(pos1, Math.min(bounds.height, pt.y - bounds.y))
+            );
           };
 
-        secondHandle.execute = function()
+          secondHandle.execute = function() {
-        {
             this.copyStyle('pos2');
-        }
+          };
 
           secondHandle.ignoreGrid = true;
 
@@ -142,29 +214,20 @@ export default MYNAMEHERE;
         }
 
         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);
       }
-      else
+    }
-      {
+
+    class MyCustomGraph extends mxGraph {
+      createVertexHandler(state) {
+        return new MyCustomVertexHandler(state);
+      }
+    }
+
     // Disables the built-in context menu
-        mxEvent.disableContextMenu(container);
+    mxEvent.disableContextMenu(this.el);
 
     // Creates the graph inside the given container
-        let graph = new mxGraph(container);
+    const graph = new MyCustomGraph(this.el);
     graph.setCellsCloneable(true);
     graph.setHtmlLabels(true);
     graph.setPanning(true);
@@ -175,40 +238,37 @@ export default MYNAMEHERE;
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
+      const v1 = graph.insertVertex(
-          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.',
+        parent,
-            20, 20, 240, 120, 'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;');
+        null,
-        }
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        finally
+        20,
-        {
+        20,
+        240,
+        120,
+        'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;'
+      );
+    } finally {
       // Updates the display
       graph.getModel().endUpdate();
     }
 
-        document.body.appendChild(mxUtils.button('+', function()
+    document.body.appendChild(
-        {
+      mxUtils.button('+', function() {
         graph.zoomIn();
-        }));
+      })
-        document.body.appendChild(mxUtils.button('-', function()
+    );
-        {
+    document.body.appendChild(
+      mxUtils.button('-', function() {
         graph.zoomOut();
-        }));
+      })
+    );
   }
-    };
+}
-  </script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default Handles;
-<body onload="main(document.getElementById('graphContainer'))">
-
-  <!-- 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>

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,88 +25,61 @@ 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() {
-
-  };
-}
-
-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);
+    const graph = new mxGraph(this.el);
     graph.setConnectable(true);
     graph.setTooltips(true);
 
     // Sets the default edge style
-        let style = graph.getStylesheet().getDefaultEdgeStyle();
+    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)
+    graph.isPort = function(cell) {
-        {
+      const geo = this.getCellGeometry(cell);
-          let geo = this.getCellGeometry(cell);
 
-          return (geo != null) ? geo.relative : false;
+      return geo != null ? geo.relative : false;
     };
 
     // Implements a tooltip that shows the actual
     // source and target of an edge
-        graph.getTooltipForCell = function(cell)
+    graph.getTooltipForCell = function(cell) {
-        {
+      if (this.model.isEdge(cell)) {
-          if (this.model.isEdge(cell))
+        return `${this.convertValueToString(
-          {
+          this.model.getTerminal(cell, true)
-            return this.convertValueToString(this.model.getTerminal(cell, true)) + ' => ' +
+        )} => ${this.convertValueToString(
-              this.convertValueToString(this.model.getTerminal(cell, false))
+          this.model.getTerminal(cell, false)
+        )}`;
       }
 
       return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
     };
 
     // Removes the folding icon and disables any folding
-        graph.isCellFoldable = function(cell)
+    graph.isCellFoldable = function(cell) {
-        {
       return false;
     };
 
@@ -110,50 +88,36 @@ export default MYNAMEHERE;
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
+      const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
-          var v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
       v1.setConnectable(false);
-          var v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
+      const 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);
+      const 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);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-          var v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 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 {
-        finally
-        {
       // Updates the display
       graph.getModel().endUpdate();
     }
 
-        let button = mxUtils.button('View XML', function()
+    const button = mxUtils.button('View XML', function() {
-        {
+      const encoder = new mxCodec();
-          let encoder = new mxCodec();
+      const node = encoder.encode(graph.getModel());
-          let node = encoder.encode(graph.getModel());
       mxUtils.popup(mxUtils.getPrettyXml(node), true);
     });
 
-        document.body.insertBefore(button, container.nextSibling);
+    this.el2.appendChild(button);
   }
-    };
+}
-  </script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default HelloPort;
-<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>

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,58 +26,27 @@ 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() {
-
-  };
-}
-
-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);
+    const graph = new mxGraph(this.el);
 
     // Adds rubberband selection
     new mxRubberband(graph);
@@ -90,27 +64,25 @@ export default MYNAMEHERE;
 
     // Creates a layout algorithm to be used
     // with the graph
-        let layout = new mxHierarchicalLayout(graph);
+    const layout = new mxHierarchicalLayout(graph);
-        let organic = new mxFastOrganicLayout(graph);
+    const organic = new mxFastOrganicLayout(graph);
     organic.forceConstant = 120;
 
-        let parent = graph.getDefaultParent();
+    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)
+    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');
+    button = document.createElement('button');
     mxUtils.write(button, 'Organic');
 
-        mxEvent.addListener(button, 'click', function(evt)
+    mxEvent.addListener(button, 'click', function(evt) {
-        {
       organic.execute(parent);
     });
 
@@ -118,52 +90,38 @@ export default MYNAMEHERE;
 
     // Load cells and layouts the graph
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
+      const v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);
-          var v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);
+      const v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);
-          var v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);
+      const v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);
-          var v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);
+      const v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);
-          var v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);
+      const v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);
-          var v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);
+      const v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);
-          var v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);
+      const v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);
-          var v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);
+      const v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);
-          var v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);
+      const v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);
-          var v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);
 
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
-          var e2 = graph.insertEdge(parent, null, '', v1, v3);
+      const e2 = graph.insertEdge(parent, null, '', v1, v3);
-          var e3 = graph.insertEdge(parent, null, '', v3, v4);
+      const e3 = graph.insertEdge(parent, null, '', v3, v4);
-          var e4 = graph.insertEdge(parent, null, '', v2, v5);
+      const e4 = graph.insertEdge(parent, null, '', v2, v5);
-          var e5 = graph.insertEdge(parent, null, '', v1, v6);
+      const e5 = graph.insertEdge(parent, null, '', v1, v6);
-          var e6 = graph.insertEdge(parent, null, '', v2, v3);
+      const e6 = graph.insertEdge(parent, null, '', v2, v3);
-          var e7 = graph.insertEdge(parent, null, '', v6, v4);
+      const e7 = graph.insertEdge(parent, null, '', v6, v4);
-          var e8 = graph.insertEdge(parent, null, '', v6, v1);
+      const e8 = graph.insertEdge(parent, null, '', v6, v1);
-          var e9 = graph.insertEdge(parent, null, '', v6, v7);
+      const e9 = graph.insertEdge(parent, null, '', v6, v7);
-          var e10 = graph.insertEdge(parent, null, '', v7, v8);
+      const e10 = graph.insertEdge(parent, null, '', v7, v8);
-          var e11 = graph.insertEdge(parent, null, '', v7, v9);
+      const e11 = graph.insertEdge(parent, null, '', v7, v9);
-          var e12 = graph.insertEdge(parent, null, '', v7, v6);
+      const e12 = graph.insertEdge(parent, null, '', v7, v6);
-          var e13 = graph.insertEdge(parent, null, '', v7, v5);
+      const e13 = graph.insertEdge(parent, null, '', v7, v5);
 
       // Executes the layout
       layout.execute(parent);
-        }
+    } finally {
-        finally
-        {
       // Updates the display
       graph.getModel().endUpdate();
     }
   }
-    };
+}
-  </script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default HierarchicalLayout;
-<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>

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.left = `${state.x + state.width}px`;
-      img.style.top = (state.y + state.height) + 'px';
+      img.style.top = `${state.y + state.height}px`;
 
-      mxEvent.addGestureListeners(img,
+      mxEvent.addGestureListeners(img, evt => {
-        (evt) => {
+        const s = graph.gridSize;
-          let 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.left = `${state.x + state.width}px`;
-      img.style.top = (state.y - 16) + 'px';
+      img.style.top = `${state.y - 16}px`;
 
-      mxEvent.addGestureListeners(img,
+      mxEvent.addGestureListeners(img, evt => {
-        (evt) => {
         // Disables dragging the image
         mxEvent.consume(evt);
-        }
+      });
-      );
 
-      mxEvent.addListener(img, 'click',
+      mxEvent.addListener(img, 'click', evt => {
-        (evt) => {
         graph.removeCells([state.cell]);
         mxEvent.consume(evt);
         this.destroy();
-        }
+      });
-      );
 
       state.view.graph.container.appendChild(img);
       this.images.push(img);
-    };
+    }
 
-    mxIconSet.prototype.destroy = function()
+    mxIconSet.prototype.destroy = function() {
-    {
+      if (this.images != null) {
-      if (this.images != null)
+        for (let i = 0; i < this.images.length; i++) {
-      {
+          const img = this.images[i];
-        for (let i = 0; i < this.images.length; i++)
-        {
-          let img = this.images[i];
           img.parentNode.removeChild(img);
         }
       }
@@ -130,51 +111,38 @@ 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);
+    const graph = new mxGraph(this.el);
     graph.setConnectable(true);
 
     // Defines the tolerance before removing the icons
-        let iconTolerance = 20;
+    const iconTolerance = 20;
 
     // Shows icons if the mouse is over a cell
-        graph.addMouseListener(
+    graph.addMouseListener({
-        {
       currentState: null,
       currentIconSet: null,
-            mouseDown: function(sender, me)
+      mouseDown(sender, me) {
-            {
         // Hides icons on mouse down
-                if (this.currentState != null)
+        if (this.currentState != null) {
-                {
           this.dragLeave(me.getEvent(), this.currentState);
           this.currentState = null;
         }
       },
-            mouseMove: function(sender, me)
+      mouseMove(sender, me) {
-            {
+        if (
-              if (this.currentState != null && (me.getState() == this.currentState ||
+          this.currentState != null &&
-                me.getState() == null))
+          (me.getState() == this.currentState || me.getState() == null)
-              {
+        ) {
-                let tol = iconTolerance;
+          const tol = iconTolerance;
-                let tmp = new mxRectangle(me.getGraphX() - tol,
+          const tmp = new mxRectangle(
-                  me.getGraphY() - tol, 2 * tol, 2 * tol);
+            me.getGraphX() - tol,
+            me.getGraphY() - tol,
+            2 * tol,
+            2 * tol
+          );
 
-                if (mxUtils.intersects(tmp, this.currentState))
+          if (mxUtils.intersects(tmp, this.currentState)) {
-                {
             return;
           }
         }
@@ -182,42 +150,37 @@ export default MYNAMEHERE;
         let tmp = graph.view.getState(me.getCell());
 
         // Ignores everything but vertices
-            if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell)))
+        if (
-            {
+          graph.isMouseDown ||
+          (tmp != null && !graph.getModel().isVertex(tmp.cell))
+        ) {
           tmp = null;
         }
 
-                if (tmp != this.currentState)
+        if (tmp != this.currentState) {
-                {
+          if (this.currentState != null) {
-                  if (this.currentState != null)
-                  {
             this.dragLeave(me.getEvent(), this.currentState);
           }
 
           this.currentState = tmp;
 
-                  if (this.currentState != null)
+          if (this.currentState != null) {
-                  {
             this.dragEnter(me.getEvent(), this.currentState);
           }
         }
       },
-            mouseUp: function(sender, me) { },
+      mouseUp(sender, me) {},
-            dragEnter: function(evt, state)
+      dragEnter(evt, state) {
-            {
+        if (this.currentIconSet == null) {
-              if (this.currentIconSet == null)
-              {
           this.currentIconSet = new mxIconSet(state);
         }
       },
-            dragLeave: function(evt, state)
+      dragLeave(evt, state) {
-            {
+        if (this.currentIconSet != null) {
-              if (this.currentIconSet != null)
-              {
           this.currentIconSet.destroy();
           this.currentIconSet = null;
         }
-            }
+      },
     });
 
     // Enables rubberband selection
@@ -225,32 +188,19 @@ export default MYNAMEHERE;
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
+      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-          var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
+    } finally {
-        }
-        finally
-        {
       // Updates the display
       graph.getModel().endUpdate();
     }
   }
-    };
+}
-  </script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default HoverIcons;
-<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>

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,150 +21,107 @@ 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() {
-
-  };
-}
-
-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);
+    const graph = new mxGraph(this.el);
 
-        function updateStyle(state, hover)
+    function updateStyle(state, hover) {
-        {
+      if (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_ROUNDED] = hover ? '1' : '0';
-          state.style[mxConstants.STYLE_STROKEWIDTH] = (hover) ? '4' : '1';
+      state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1';
-          state.style[mxConstants.STYLE_FONTSTYLE] = (hover) ? mxConstants.FONT_BOLD : '0';
+      state.style[mxConstants.STYLE_FONTSTYLE] = hover
-        };
+        ? mxConstants.FONT_BOLD
+        : '0';
+    }
 
     // Changes fill color to red on mouseover
-        graph.addMouseListener(
+    graph.addMouseListener({
-        {
       currentState: null,
       previousStyle: null,
-            mouseDown: function(sender, me)
+      mouseDown(sender, me) {
-            {
+        if (this.currentState != null) {
-                if (this.currentState != null)
-                {
           this.dragLeave(me.getEvent(), this.currentState);
           this.currentState = null;
         }
       },
-            mouseMove: function(sender, me)
+      mouseMove(sender, me) {
-            {
+        if (this.currentState != null && me.getState() == this.currentState) {
-                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 && !
+        if (
-                    graph.getModel().isVertex(tmp.cell)))
+          graph.isMouseDown ||
-                {
+          (tmp != null && !graph.getModel().isVertex(tmp.cell))
+        ) {
           tmp = null;
         }
 
-                if (tmp != this.currentState)
+        if (tmp != this.currentState) {
-                {
+          if (this.currentState != null) {
-                    if (this.currentState != null)
-                    {
             this.dragLeave(me.getEvent(), this.currentState);
           }
 
           this.currentState = tmp;
 
-                    if (this.currentState != null)
+          if (this.currentState != null) {
-                    {
             this.dragEnter(me.getEvent(), this.currentState);
           }
         }
       },
-            mouseUp: function(sender, me) { },
+      mouseUp(sender, me) {},
-            dragEnter: function(evt, state)
+      dragEnter(evt, state) {
-            {
+        if (state != null) {
-                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)
+          if (state.text != null) {
-                  {
             state.text.apply(state);
             state.text.redraw();
           }
         }
       },
-            dragLeave: function(evt, state)
+      dragLeave(evt, state) {
-            {
+        if (state != null) {
-                if (state != null)
-                {
           state.style = this.previousStyle;
           updateStyle(state, false);
           state.shape.apply(state);
           state.shape.redraw();
 
-                  if (state.text != null)
+          if (state.text != null) {
-                  {
             state.text.apply(state);
             state.text.redraw();
           }
         }
-            }
+      },
     });
 
     // Enables rubberband selection
@@ -171,32 +129,19 @@ export default MYNAMEHERE;
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
+      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-          var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-          var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+      const e1 = graph.insertEdge(parent, null, '', v1, v2);
-          var e1 = graph.insertEdge(parent, null, '', v1, v2);
+    } finally {
-        }
-        finally
-        {
       // Updates the display
       graph.getModel().endUpdate();
     }
   }
-    };
+}
-  </script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default HoverStyle;
-<body onload="main(document.getElementById('graphContainer'))">
-
-  <!-- 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>

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,60 +25,30 @@ 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() {
-
-  };
-}
-
-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);
+    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.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
@@ -81,33 +56,63 @@ export default MYNAMEHERE;
     graph.setResizeContainer(true);
 
     // Disables basic selection and cell handling
-        //graph.setEnabled(false);
+    // 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();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
+      var v1 = graph.insertVertex(
-          var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 10, 80, 100, 'bottom');
+        parent,
-          var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 130, 10, 80, 100, 'top');
+        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(
-          var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 180, 130, 140, 60, 'left');
+        parent,
-        }
+        null,
-        finally
+        '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 -->
+export default Images;
-<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>

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,57 +22,23 @@ 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() {
-
-  };
-}
-
-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);
+    const graph = new mxGraph(this.el);
     graph.setConnectable(true);
     new mxKeyHandler(graph);
 
@@ -93,7 +60,7 @@ export default MYNAMEHERE;
     delete style[mxConstants.STYLE_FILLCOLOR]; // transparent
 
     // Creates a style with an indicator
-        let style = graph.getStylesheet().getDefaultEdgeStyle();
+    style = graph.getStylesheet().getDefaultEdgeStyle();
 
     style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
     style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;
@@ -101,34 +68,37 @@ export default MYNAMEHERE;
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
-        let parent = graph.getDefaultParent();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-        try
+    try {
-        {
       graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);
-          graph.insertVertex(parent, null, 'Top Label', 200, 80, 60, 60,
+      graph.insertVertex(
-            'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top');
+        parent,
-          graph.insertVertex(parent, null, 'Right Label', 300, 80, 120, 60,
+        null,
-            'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44');
+        'Top Label',
-        }
+        200,
-        finally
+        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 -->
+export default Indicators;
-<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>

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 />