cleanups and bugfixes

src/pages/Anchors.js

@@ -107,7 +107,7 @@ class Anchors extends React.Component {
     }
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>

src/pages/Animation.js

@@ -12,7 +12,7 @@ class Animation extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -35,7 +35,7 @@ class Animation extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     const graph = new mxGraph(this.el);
     graph.setEnabled(false);
     const parent = graph.getDefaultParent();

src/pages/AutoLayout.js

@@ -23,7 +23,7 @@ class AutoLayout extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -46,7 +46,7 @@ class AutoLayout extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     mxEvent.disableContextMenu(this.el);
 
     class MyCustomCellRenderer extends mxCellRenderer {

src/pages/Boundary.js

@@ -17,7 +17,7 @@ class Boundary extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -39,7 +39,7 @@ class Boundary extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Disables the built-in context menu
     mxEvent.disableContextMenu(this.el);
 

src/pages/Clipboard.js

@@ -18,7 +18,7 @@ class Clipboard extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -41,7 +41,7 @@ class Clipboard extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Disables the built-in context menu
     mxEvent.disableContextMenu(this.el);
 

src/pages/Collapse.js

@@ -13,7 +13,7 @@ class Collapse extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -36,7 +36,7 @@ class Collapse extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     class MyCustomModel extends mxGraphModel {
       getStyle(cell) {
         // Extends mxGraphModel.getStyle to show an image when collapsed

src/pages/Constituent.js

@@ -14,7 +14,7 @@ class Constituent extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>

src/pages/ContextIcons.js

@@ -16,7 +16,7 @@ class ContextIcons extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -38,7 +38,7 @@ class ContextIcons extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     class mxVertexToolHandler extends mxVertexHandler {
       // Defines a subclass for mxVertexHandler that adds a set of clickable
       // icons to every selected vertex.

src/pages/Control.js

@@ -18,7 +18,7 @@ class Control extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -44,7 +44,7 @@ class Control extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Specifies the URL and size of the new control
     const deleteImage = new mxImage(
       'editors/images/overlays/forbidden.png',

src/pages/DragSource.js

@@ -20,7 +20,7 @@ class DragSource extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -37,7 +37,7 @@ class DragSource extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     class MyCustomGuide extends mxGuide {
       isEnabledForEvent(evt) {
         // Alt disables guides

src/pages/Drop.js

@@ -142,22 +142,17 @@ class Drop extends React.Component {
               data = `data:image/svg+xml,${btoa(
                 mxUtils.getXml(svgs[0], '\n')
               )}`;
-              graph.insertVertex(
-                null,
-                null,
-                '',
-                x,
-                y,
-                w,
-                h,
-                `shape=image;image=${data};`
-              );
+              graph.insertVertex({
+                position: [x, y],
+                size: [w, h],
+                style: `shape=image;image=${data};`,
+              });
             }
           }
         } else {
           const img = new Image();
 
-          img.onload = function() {
+          img.onload = () => {
             const w = Math.max(1, img.width);
             const h = Math.max(1, img.height);
 
@@ -170,16 +165,11 @@ class Drop extends React.Component {
                 data.substring(data.indexOf(',', semi + 1));
             }
 
-            graph.insertVertex(
-              null,
-              null,
-              '',
-              x,
-              y,
-              w,
-              h,
-              `shape=image;image=${data};`
-            );
+            graph.insertVertex({
+              position: [x, y],
+              size: [w, h],
+              style: `shape=image;image=${data};`,
+            });
           };
 
           img.src = data;

src/pages/DynamicLoading.js

@@ -18,7 +18,7 @@ class DynamicLoading extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -41,7 +41,7 @@ class DynamicLoading extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     let requestId = 0;
 
     // Speedup the animation

src/pages/DynamicStyle.js

@@ -14,7 +14,7 @@ class DynamicStyle extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -35,7 +35,7 @@ class DynamicStyle extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Creates the graph inside the given container
     const graph = new mxGraph(this.el);
 

src/pages/DynamicToolbar.js

@@ -25,7 +25,7 @@ class DynamicToolbar extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Toolbar</h1>
+        <h1>Dynamic Toolbar</h1>
         This example demonstrates changing the state of the toolbar at runtime.
         <div
           ref={el => {
@@ -64,7 +64,7 @@ class DynamicToolbar extends React.Component {
     this.el.appendChild(tbContainer);
 
     // Creates new toolbar without event processing
-    const toolbar = new mxToolbar(tbContainer);
+    const toolbar = (this.toolbar = new mxToolbar(tbContainer));
     toolbar.enabled = false;
 
     // Creates the div for the graph
@@ -82,7 +82,7 @@ class DynamicToolbar extends React.Component {
     // Creates the model and the graph inside the container
     // using the fastest rendering available on the browser
     const model = new mxGraphModel();
-    const graph = new mxGraph(container, model);
+    const graph = (this.graph = new mxGraph(container, model));
 
     // Enables new connections in the graph
     graph.setConnectable(true);
@@ -92,34 +92,34 @@ class DynamicToolbar extends React.Component {
     const keyHandler = new mxKeyHandler(graph);
     const rubberband = new mxRubberband(graph);
 
-    const addVertex = (icon, w, h, style) => {
-      const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
-      vertex.setVertex(true);
+    this.addVertex('editors/images/rectangle.gif', 100, 40, '');
+    this.addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
+    this.addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
+    this.addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
+    this.addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');
+    this.addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
+    this.addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
+  }
 
-      const img = this.addToolbarItem(graph, toolbar, vertex, icon);
-      img.enabled = true;
+  addVertex(icon, w, h, style) {
+    const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
+    vertex.setVertex(true);
 
-      graph.getSelectionModel().addListener(mxEvent.CHANGE, function() {
-        const tmp = graph.isSelectionEmpty();
-        mxUtils.setOpacity(img, tmp ? 100 : 20);
-        img.enabled = tmp;
-      });
-    };
+    const img = this.addToolbarItem(this.graph, this.toolbar, vertex, icon);
+    img.enabled = true;
 
-    addVertex('editors/images/rectangle.gif', 100, 40, '');
-    addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
-    addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
-    addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
-    addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');
-    addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
-    addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
+    this.graph.getSelectionModel().addListener(mxEvent.CHANGE, () => {
+      const tmp = this.graph.isSelectionEmpty();
+      mxUtils.setOpacity(img, tmp ? 100 : 20);
+      img.enabled = tmp;
+    });
   }
 
   addToolbarItem(graph, toolbar, prototype, image) {
     // Function that is executed when the image is dropped on
     // the graph. The cell argument points to the cell under
     // the mousepointer if there is one.
-    const funct = function(graph, evt, cell, x, y) {
+    const funct = (graph, evt, cell, x, y) => {
       graph.stopEditing(false);
 
       const vertex = graph.getModel().cloneCell(prototype);
@@ -131,7 +131,7 @@ class DynamicToolbar extends React.Component {
     };
 
     // Creates the image which is used as the drag icon (preview)
-    const img = toolbar.addMode(null, image, function(evt, cell) {
+    const img = toolbar.addMode(null, image, (evt, cell) => {
       const pt = this.graph.getPointForEvent(evt);
       funct(graph, evt, cell, pt.x, pt.y);
     });
@@ -139,20 +139,19 @@ class DynamicToolbar extends React.Component {
     // Disables dragging if element is disabled. This is a workaround
     // for wrong event order in IE. Following is a dummy listener that
     // is invoked as the last listener in IE.
-    mxEvent.addListener(img, 'mousedown', function(evt) {
+    mxEvent.addListener(img, 'mousedown', evt => {
       // do nothing
     });
 
     // This listener is always called first before any other listener
     // in all browsers.
-    mxEvent.addListener(img, 'mousedown', function(evt) {
+    mxEvent.addListener(img, 'mousedown', evt => {
       if (img.enabled == false) {
         mxEvent.consume(evt);
       }
     });
 
     mxUtils.makeDraggable(img, graph, funct);
-
     return img;
   }
 }

src/pages/ExtendCanvas.js

@@ -16,7 +16,7 @@ class ExtendCanvas extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -39,7 +39,7 @@ class ExtendCanvas extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Disables the built-in context menu
     mxEvent.disableContextMenu(this.el);
 

src/pages/FileIO.js

@@ -20,7 +20,7 @@ class FileIO extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -47,7 +47,7 @@ class FileIO extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // 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).

src/pages/FixedIcon.js

@@ -16,7 +16,7 @@ class FixedIcon extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -39,7 +39,7 @@ class FixedIcon extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Overrides the image bounds code to change the position
     mxLabel.prototype.getImageBounds = function(x, y, w, h) {
       const iw = mxUtils.getValue(

src/pages/FixedPoints.js

@@ -19,7 +19,7 @@ class FixedPoints extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -42,7 +42,7 @@ class FixedPoints extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Snaps to fixed points
     mxConstraintHandler.prototype.intersects = function(
       icon,

src/pages/Folding.js

@@ -15,7 +15,7 @@ class Folding extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph
     return (
       <>
@@ -38,7 +38,7 @@ class Folding extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Enables crisp rendering of rectangles in SVG
     mxConstants.ENTITY_SEGMENT = 20;
 

src/pages/Groups.js

@@ -18,7 +18,7 @@ class Groups extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World!</h1>
+        <h1>Groups</h1>
         This example demonstrates using cells as parts of other cells.
         <div
           ref={el => {

src/pages/HelloPort.js

@@ -22,7 +22,7 @@ class HelloPort extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World!</h1>
+        <h1>Hello Port</h1>
         This example demonstrates using the isPort hook for visually connecting
         to another cell.
         <div

src/pages/HelloWorld.js

@@ -13,7 +13,7 @@ class HelloWorld extends React.Component {
     super(props);
   }
 
-  render = () => {
+  render() {
     // A container for the graph with a grid wallpaper
     return (
       <>
@@ -36,7 +36,7 @@ class HelloWorld extends React.Component {
     );
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     // Create a sample graph in the DOM node with the specified ID.
     mxEvent.disableContextMenu(this.el); // Disable the built-in context menu
     const graph = new mxGraph(this.el); // Create the graph inside the given container

src/pages/Labels.js

@@ -19,7 +19,7 @@ class Labels extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World!</h1>
+        <h1>Labels</h1>
         This example demonstrates the use of wrapping and clipping for HTML
         labels of vertices, truncating labels to fit the size of a vertex, and
         manually placing vertex labels and relative children that act as

src/pages/Monitor.js

@@ -22,7 +22,7 @@ class Monitor extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>mxGraph Workflow Monitor</h1>
+        <h1>Workflow Monitor</h1>
         This example demonstrates using a graph to display the current state of
         a workflow.
         <div

src/pages/Permissions.js

@@ -11,18 +11,20 @@ import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
 import mxImage from '../mxgraph/util/mxImage';
 import mxUtils from '../mxgraph/util/mxUtils';
 
-function Permission(locked, createEdges, editEdges, editVertices, cloneCells) {
-  this.locked = locked != null ? locked : false;
-  this.createEdges = createEdges != null ? createEdges : true;
-  this.editEdges = editEdges != null ? editEdges : true;
-  this.editVertices = editVertices != null ? editVertices : true;
-  this.cloneCells = cloneCells != null ? cloneCells : true;
-}
+class Permission {
+  constructor(locked, createEdges, editEdges, editVertices, cloneCells) {
+    this.locked = locked != null ? locked : false;
+    this.createEdges = createEdges != null ? createEdges : true;
+    this.editEdges = editEdges != null ? editEdges : true;
+    this.editVertices = editVertices != null ? editVertices : true;
+    this.cloneCells = cloneCells != null ? cloneCells : true;
+  }
 
-Permission.prototype.apply = function(graph) {
-  graph.setConnectable(this.createEdges);
-  graph.setCellsLocked(this.locked);
-};
+  apply(graph) {
+    graph.setConnectable(this.createEdges);
+    graph.setCellsLocked(this.locked);
+  }
+}
 
 class Permissions extends React.Component {
   constructor(props) {

src/pages/RadialTreeLayout.js

@@ -19,7 +19,7 @@ class RadialTreeLayout extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hierarchical Layout</h1>
+        <h1>Radial Tree (Hierarchical) Layout</h1>
         This example demonstrates the use of the hierarchical and organic
         layouts. Note that the hierarchical layout requires another script tag
         in the head of the page.