started integrating more examples into the next.js app

src/mxgraph/shape/mxShape.js

@@ -779,14 +779,14 @@ class mxShape {
 
       c.stroke = (...args) => {
         strokeDrawn = true;
-        stroke.apply(this, args);
+        stroke.apply(c, args);
       };
 
       const { fillAndStroke } = c;
 
       c.fillAndStroke = (...args) => {
         strokeDrawn = true;
-        fillAndStroke.apply(this, args);
+        fillAndStroke.apply(c, args);
       };
     }
 

src/mxgraph/shape/mxSwimlane.js

@@ -6,6 +6,7 @@
 import mxShape from './mxShape';
 import mxRectangle from '../util/mxRectangle';
 import mxConstants from '../util/mxConstants';
+import mxUtils from "../util/mxUtils";
 
 class mxSwimlane extends mxShape {
   /**
@@ -89,20 +90,20 @@ class mxSwimlane extends mxShape {
 
     // East is default
     const shapeVertical =
-      this.direction == mxConstants.DIRECTION_NORTH ||
+      this.direction === mxConstants.DIRECTION_NORTH ||
-      this.direction == mxConstants.DIRECTION_SOUTH;
+      this.direction === mxConstants.DIRECTION_SOUTH;
     const realHorizontal = horizontal == !shapeVertical;
 
     const realFlipH =
       !realHorizontal &&
       flipH !=
-        (this.direction == mxConstants.DIRECTION_SOUTH ||
+        (this.direction === mxConstants.DIRECTION_SOUTH ||
-          this.direction == mxConstants.DIRECTION_WEST);
+          this.direction === mxConstants.DIRECTION_WEST);
     const realFlipV =
       realHorizontal &&
       flipV !=
-        (this.direction == mxConstants.DIRECTION_SOUTH ||
+        (this.direction === mxConstants.DIRECTION_SOUTH ||
-          this.direction == mxConstants.DIRECTION_WEST);
+          this.direction === mxConstants.DIRECTION_WEST);
 
     // Shape is horizontal
     if (!shapeVertical) {

src/mxgraph/util/mxDragSource.js

@@ -6,6 +6,11 @@
 import mxRectangle from './mxRectangle';
 import mxCellHighlight from '../handler/mxCellHighlight';
 import mxUtils from './mxUtils';
+import mxEvent from "./mxEvent";
+import mxClient from "../mxClient";
+import mxGuide from "./mxGuide";
+import mxConstants from "./mxConstants";
+import mxPoint from "./mxPoint";
 
 class mxDragSource {
   /**
@@ -175,7 +180,7 @@ class mxDragSource {
       const evtName = evt.getProperty('eventName');
       const me = evt.getProperty('event');
 
-      if (evtName != mxEvent.MOUSE_DOWN) {
+      if (evtName !== mxEvent.MOUSE_DOWN) {
         me.consume();
       }
     };
@@ -419,7 +424,7 @@ class mxDragSource {
     let elt = this.getElementForEvent(evt);
 
     if (this.checkEventSource) {
-      while (elt != null && elt != graph.container) {
+      while (elt != null && elt !== graph.container) {
         elt = elt.parentNode;
       }
     }
@@ -449,7 +454,7 @@ class mxDragSource {
       graph = null;
     }
 
-    if (graph != this.currentGraph) {
+    if (graph !== this.currentGraph) {
       if (this.currentGraph != null) {
         this.dragExit(this.currentGraph, evt);
       }
@@ -468,7 +473,7 @@ class mxDragSource {
     if (
       this.dragElement != null &&
       (this.previewElement == null ||
-        this.previewElement.style.visibility != 'visible')
+        this.previewElement.style.visibility !== 'visible')
     ) {
       let x = mxEvent.getClientX(evt);
       let y = mxEvent.getClientY(evt);
@@ -506,7 +511,7 @@ class mxDragSource {
       if (
         this.currentPoint != null &&
         (this.previewElement == null ||
-          this.previewElement.style.visibility != 'hidden')
+          this.previewElement.style.visibility !== 'hidden')
       ) {
         const { scale } = this.currentGraph.view;
         const tr = this.currentGraph.view.translate;

src/pages/Boundary.js

@@ -32,8 +32,8 @@ class Boundary extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '821px',
+            width: '321px',
-            height: '641px',
+            height: '241px',
             background: 'url("editors/images/grid.gif")',
             cursor: 'default'
           }}

src/pages/Collapse.js

@@ -1,16 +1,15 @@
-<!--
+/**
-  Copyright (c) 2006-2013, JGraph Ltd
+ * Copyright (c) 2006-2013, JGraph Ltd
-  
+ *
-  Collapse example for mxGraph. This example demonstrates changing
+ * Collapse example for mxGraph. This example demonstrates changing
-  the style of a cell based on its collapsed state.
+ * the style of a cell based on its collapsed state.
--->
+ */
 
 import React from 'react';
-import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
-import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxRectangle from '../mxgraph/util/mxRectangle';
 
-class MYNAMEHERE extends React.Component {
+class Collapse extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -19,14 +18,19 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1></h1>
+        <h1>Collapse 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',
           }}
         />
       </>
@@ -34,47 +38,19 @@ class MYNAMEHERE extends React.Component {
   };
 
   componentDidMount = () => {
-
+    const graph = new mxGraph(this.el);
-  };
+    const parent = graph.getDefaultParent();
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-	<title>Collapse example for mxGraph</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)
-		{
-			let graph = new mxGraph(container);
-			let parent = graph.getDefaultParent();
 
     // Extends mxGraphModel.getStyle to show an image when collapsed
-			let modelGetStyle = graph.model.getStyle;
+    const modelGetStyle = graph.model.getStyle;
-			graph.model.getStyle = function(cell)
+    graph.model.getStyle = function(cell) {
-			{
+      if (cell != null) {
-				if (cell != null)
-				{
         let style = modelGetStyle.apply(this, arguments);
 
-					if (this.isCollapsed(cell))
+        if (this.isCollapsed(cell)) {
-					{
+          style =
-						style = style + ';shape=image;image=http://www.jgraph.com/images/mxgraph.gif;' +
+            `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
-							'noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9';
+            `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
         }
 
         return style;
@@ -84,27 +60,23 @@ export default MYNAMEHERE;
     };
 
     graph.getModel().beginUpdate();
-			try
+    try {
-			{
+      const v1 = graph.insertVertex(
-				var v1 = graph.insertVertex(parent, null, 'Container', 20, 20, 200, 200,
+        parent,
-					'shape=swimlane;startSize=20;');
+        null,
+        'Container',
+        20,
+        20,
+        200,
+        200,
+        'shape=swimlane;startSize=20;'
+      );
       v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
-				var v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
+      const v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
-			}
+    } finally {
-			finally
-			{
       graph.getModel().endUpdate();
     }
   };
-	</script>
+}
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default Collapse;
-<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/Constituent.js

@@ -1,16 +1,18 @@
-<!--
+/**
-  Copyright (c) 2006-2013, JGraph Ltd
+ * Copyright (c) 2006-2013, JGraph Ltd
-  
+ *
-  Consistuent example for mxGraph. This example demonstrates using
+ * Consistuent example for mxGraph. This example demonstrates using
-  cells as parts of other cells.
+ * cells as parts of other cells.
--->
+ */
 
 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 mxClient from "../mxgraph/mxClient";
 
-class MYNAMEHERE extends React.Component {
+class Constituent extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -19,127 +21,94 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1></h1>
+        <h1>Consistuent 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 = () => {
+  componentDidMount() {
-
+    class MyCustomGraphHandler extends mxGraphHandler {
-  };
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-	<title>Consistuent example for mxGraph</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">
-		
       /**
        * Redirects start drag to parent.
        */
-		let graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
+      getInitialCellForEvent(me) {
-		mxGraphHandler.prototype.getInitialCellForEvent = function(me)
+        let cell = super.getInitialCellForEvent(me);
-		{
+        if (this.graph.isPart(cell)) {
-			let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
+          cell = this.graph.getModel().getParent(cell);
-			
-			if (this.graph.isPart(cell))
-			{
-				cell = this.graph.getModel().getParent(cell)
         }
-			
         return cell;
-		};
-
-		// 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
+    }
-			{
+
     // Disables the built-in context menu
-				mxEvent.disableContextMenu(container);
+    mxEvent.disableContextMenu(this.el);
 
-				// Creates the graph inside the given container
+    class MyCustomGraph extends mxGraph {
-				let graph = new mxGraph(container);
+      foldingEnabled = false;
-				graph.foldingEnabled = false;
-				graph.recursiveResize = true;
 
+      recursiveResize = true;
+
+      isPart(cell) {
         // Helper method to mark parts with constituent=1 in the style
-				graph.isPart = function(cell)
+        return this.getCurrentCellStyle(cell).constituent == '1';
-				{
+      }
-					return this.getCurrentCellStyle(cell)['constituent'] == '1';
-				};
 
+      selectCellForEvent(cell, evt) {
         // Redirects selection to parent
-				graph.selectCellForEvent = function(cell)
+        if (this.isPart(cell)) {
-				{
-					if (this.isPart(cell))
-					{
           cell = this.model.getParent(cell);
         }
+        super.selectCellForEvent(cell, evt);
+      }
 
-					mxGraph.prototype.selectCellForEvent.apply(this, arguments);
+      createGraphHandler() {
-				};
+        return new MyCustomGraphHandler(this);
+      }
+    }
+
+    // Creates the graph inside the given container
+    const graph = new MyCustomGraph(this.el);
 
     // 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();
+    const parent = graph.getDefaultParent();
 
     // Adds cells to the model in a single step
     graph.getModel().beginUpdate();
-				try
+    try {
-				{
+      const v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
-					var v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
+      const v2 = graph.insertVertex(
-					var v2 = graph.insertVertex(v1, null, 'Constituent', 20, 20, 80, 30, 'constituent=1;');
+        v1,
-				}
+        null,
-				finally
+        'Constituent',
-				{
+        20,
+        20,
+        80,
+        30,
+        'constituent=1;'
+      );
+    } finally {
       // Updates the display
       graph.getModel().endUpdate();
     }
   }
-		};
+}
-	</script>
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default Constituent;
-<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/ContextIcons.js

@@ -1,16 +1,19 @@
-<!--
+/**
-  Copyright (c) 2006-2013, JGraph Ltd
+ * Copyright (c) 2006-2013, JGraph Ltd
-  
+ *
-  Context icons example for mxGraph. This example demonstrates adding
+ * Context icons example for mxGraph. This example demonstrates adding
-  icons to selected vertices to carry out special operations.
+ * icons to selected vertices to carry out special operations.
--->
+ */
 
 import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxVertexHandler from '../mxgraph/handler/mxVertexHandler';
+import mxUtils from '../mxgraph/util/mxUtils';
+import mxClient from '../mxgraph/mxClient';
 
-class MYNAMEHERE extends React.Component {
+class ContextIcons extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -19,14 +22,17 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1></h1>
+        <h1>Context icons 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',
           }}
         />
       </>
@@ -34,41 +40,18 @@ class MYNAMEHERE extends React.Component {
   };
 
   componentDidMount = () => {
-
-  };
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-	<title>Context icons example for mxGraph</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 a subclass for mxVertexHandler that adds a set of clickable
     // icons to every selected vertex.
-		function mxVertexToolHandler(state)
+    function mxVertexToolHandler(state) {
-		{
       mxVertexHandler.apply(this, arguments);
-		};
+    }
 
     mxVertexToolHandler.prototype = new mxVertexHandler();
     mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
 
     mxVertexToolHandler.prototype.domNode = null;
 
-		mxVertexToolHandler.prototype.init = function()
+    mxVertexToolHandler.prototype.init = function() {
-		{
       mxVertexHandler.prototype.init.apply(this, arguments);
 
       // In this example we force the use of DIVs for images in IE. This
@@ -80,10 +63,9 @@ export default MYNAMEHERE;
       this.domNode.style.whiteSpace = 'nowrap';
 
       // Workaround for event redirection via image tag in quirks and IE8
-			function createImage(src)
+      function createImage(src) {
-			{
         return mxUtils.createImage(src);
-			};
+      }
 
       // Delete
       let img = createImage('images/delete2.png');
@@ -91,16 +73,17 @@ export default MYNAMEHERE;
       img.style.cursor = 'pointer';
       img.style.width = '16px';
       img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
+      mxEvent.addGestureListeners(
-				mxUtils.bind(this, function(evt)
+        img,
-				{
+        mxUtils.bind(this, function(evt) {
           // Disables dragging the image
           mxEvent.consume(evt);
         })
       );
-			mxEvent.addListener(img, 'click',
+      mxEvent.addListener(
-				mxUtils.bind(this, function(evt)
+        img,
-				{
+        'click',
+        mxUtils.bind(this, function(evt) {
           this.graph.removeCells([this.state.cell]);
           mxEvent.consume(evt);
         })
@@ -108,14 +91,14 @@ export default MYNAMEHERE;
       this.domNode.appendChild(img);
 
       // Size
-			let img = createImage('images/fit_to_size.png');
+      img = createImage('images/fit_to_size.png');
       img.setAttribute('title', 'Resize');
       img.style.cursor = 'se-resize';
       img.style.width = '16px';
       img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
+      mxEvent.addGestureListeners(
-				mxUtils.bind(this, function(evt)
+        img,
-				{
+        mxUtils.bind(this, function(evt) {
           this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
           this.graph.isMouseDown = true;
           this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
@@ -125,16 +108,19 @@ export default MYNAMEHERE;
       this.domNode.appendChild(img);
 
       // Move
-			let img = createImage('images/plus.png');
+      img = createImage('images/plus.png');
       img.setAttribute('title', 'Move');
       img.style.cursor = 'move';
       img.style.width = '16px';
       img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
+      mxEvent.addGestureListeners(
-				mxUtils.bind(this, function(evt)
+        img,
-				{
+        mxUtils.bind(this, function(evt) {
-					this.graph.graphHandler.start(this.state.cell,
+          this.graph.graphHandler.start(
-						mxEvent.getClientX(evt), mxEvent.getClientY(evt));
+            this.state.cell,
+            mxEvent.getClientX(evt),
+            mxEvent.getClientY(evt)
+          );
           this.graph.graphHandler.cellWasClicked = true;
           this.graph.isMouseDown = true;
           this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
@@ -144,16 +130,19 @@ export default MYNAMEHERE;
       this.domNode.appendChild(img);
 
       // Connect
-			let img = createImage('images/check.png');
+      img = createImage('images/check.png');
       img.setAttribute('title', 'Connect');
       img.style.cursor = 'pointer';
       img.style.width = '16px';
       img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
+      mxEvent.addGestureListeners(
-				mxUtils.bind(this, function(evt)
+        img,
-				{
+        mxUtils.bind(this, function(evt) {
-					let pt = mxUtils.convertPoint(this.graph.container,
+          const pt = mxUtils.convertPoint(
-							mxEvent.getClientX(evt), mxEvent.getClientY(evt));
+            this.graph.container,
+            mxEvent.getClientX(evt),
+            mxEvent.getClientY(evt)
+          );
           this.graph.connectionHandler.start(this.state, pt.x, pt.y);
           this.graph.isMouseDown = true;
           this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
@@ -166,28 +155,23 @@ export default MYNAMEHERE;
       this.redrawTools();
     };
 
-		mxVertexToolHandler.prototype.redraw = function()
+    mxVertexToolHandler.prototype.redraw = function() {
-		{
       mxVertexHandler.prototype.redraw.apply(this);
       this.redrawTools();
     };
 
-		mxVertexToolHandler.prototype.redrawTools = function()
+    mxVertexToolHandler.prototype.redrawTools = function() {
-		{
+      if (this.state != null && this.domNode != null) {
-			if (this.state != null && this.domNode != null)
+        const dy = 4;
-			{
+        this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;
-				let dy = 4;
+        this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;
-				this.domNode.style.left = (this.state.x + this.state.width - 56) + 'px';
-				this.domNode.style.top = (this.state.y + this.state.height + dy) + 'px';
       }
     };
 
-		mxVertexToolHandler.prototype.destroy = function(sender, me)
+    mxVertexToolHandler.prototype.destroy = function(sender, me) {
-		{
       mxVertexHandler.prototype.destroy.apply(this, arguments);
 
-			if (this.domNode != null)
+      if (this.domNode != null) {
-			{
         this.domNode.parentNode.removeChild(this.domNode);
         this.domNode = null;
       }
@@ -196,26 +180,19 @@ export default MYNAMEHERE;
     // 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)
+    function main(container) {
-		{
       // Checks if the browser is supported
-			if (!mxClient.isBrowserSupported())
+      if (!mxClient.isBrowserSupported()) {
-			{
         // Displays an error message if the browser is not supported.
         mxUtils.error('Browser is not supported!', 200, false);
-			}
+      } else {
-			else
-			{
         // Creates the graph inside the given container
-				let graph = new mxGraph(container);
+        const graph = new mxGraph(container);
         graph.setConnectable(true);
         graph.connectionHandler.createTarget = true;
 
-				graph.createHandler = function(state)
+        graph.createHandler = function(state) {
-				{
+          if (state != null && this.model.isVertex(state.cell)) {
-					if (state != null &&
-						this.model.isVertex(state.cell))
-					{
             return new mxVertexToolHandler(state);
           }
 
@@ -231,32 +208,29 @@ 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(
-					var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+            parent,
-					var e1 = graph.insertEdge(parent, null, '', v1, v2);
+            null,
-				}
+            'World!',
-				finally
+            200,
-				{
+            150,
+            80,
+            30
+          );
+          const e1 = graph.insertEdge(parent, null, '', v1, v2);
+        } finally {
           // Updates the display
           graph.getModel().endUpdate();
         }
       }
+    }
   };
-	</script>
+}
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default ContextIcons;
-<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/Control.js

@@ -1,16 +1,21 @@
-<!--
+/**
-  Copyright (c) 2006-2013, JGraph Ltd
+ * Copyright (c) 2006-2013, JGraph Ltd
-  
+ *
-  Control example for mxGraph. This example demonstrates adding
+ * Control example for mxGraph. This example demonstrates adding
-  controls to specific cells in a graph.
+ * controls to specific cells in a graph.
--->
+ */
 
 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 mxRectangle from '../mxgraph/util/mxRectangle';
+import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
+import mxImageShape from '../mxgraph/shape/mxImageShape';
+import mxImage from '../mxgraph/util/mxImage';
 
-class MYNAMEHERE extends React.Component {
+class Control extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -19,14 +24,22 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1></h1>
+        <h1>Control example for mxGraph</h1>
-
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-
+            overflow: 'hidden',
+            width: '621px',
+            height: '441px',
+            background: "url('editors/images/grid.gif')",
+            cursor: 'default',
+          }}
+        />
+        <div
+          ref={el => {
+            this.el2 = el;
           }}
         />
       </>
@@ -34,114 +47,88 @@ class MYNAMEHERE extends React.Component {
   };
 
   componentDidMount = () => {
-
-  };
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-	<title>Control example for mxGraph</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.setPanning(true);
 
     // Specifies the URL and size of the new control
-				let deleteImage = new mxImage('editors/images/overlays/forbidden.png', 16, 16);
+    const deleteImage = new mxImage(
+      'editors/images/overlays/forbidden.png',
+      16,
+      16
+    );
 
     // Overridden to add an additional control to the state at creation time
-				mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
+    const mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
-				mxCellRenderer.prototype.createControl = function(state)
+    mxCellRenderer.prototype.createControl = function(state) {
-				{
       mxCellRendererCreateControl.apply(this, arguments);
 
-					let graph = state.view.graph;
+      const { graph } = state.view;
 
-					if (graph.getModel().isVertex(state.cell))
+      if (graph.getModel().isVertex(state.cell)) {
-					{
+        if (state.deleteControl == null) {
-						if (state.deleteControl == null)
+          const b = new mxRectangle(
-						{
+            0,
-							let b = new mxRectangle(0, 0, deleteImage.width, deleteImage.height);
+            0,
+            deleteImage.width,
+            deleteImage.height
+          );
           state.deleteControl = new mxImageShape(b, deleteImage.src);
           state.deleteControl.dialect = graph.dialect;
           state.deleteControl.preserveImageAspect = false;
 
-							this.initControl(state, state.deleteControl, false, function (evt)
+          this.initControl(state, state.deleteControl, false, function(evt) {
-							{
+            if (graph.isEnabled()) {
-								if (graph.isEnabled())
-								{
               graph.removeCells([state.cell]);
               mxEvent.consume(evt);
             }
           });
         }
-					}
+      } else if (state.deleteControl != null) {
-					else if (state.deleteControl != null)
-					{
         state.deleteControl.destroy();
         state.deleteControl = null;
       }
     };
 
     // Helper function to compute the bounds of the control
-				let getDeleteControlBounds = function(state)
+    const getDeleteControlBounds = function(state) {
-				{
+      if (state.deleteControl != null) {
-					if (state.deleteControl != null)
+        const oldScale = state.deleteControl.scale;
-					{
+        const w = state.deleteControl.bounds.width / oldScale;
-						let oldScale = state.deleteControl.scale;
+        const h = state.deleteControl.bounds.height / oldScale;
-						let w = state.deleteControl.bounds.width / oldScale;
+        const s = state.view.scale;
-						let h = state.deleteControl.bounds.height / oldScale;
-						let s = state.view.scale;
 
-						return (state.view.graph.getModel().isEdge(state.cell)) ? 
+        return state.view.graph.getModel().isEdge(state.cell)
-							new mxRectangle(state.x + state.width / 2 - w / 2 * s,
+          ? new mxRectangle(
-								state.y + state.height / 2 - h / 2 * s, w * s, h * s)
+              state.x + state.width / 2 - (w / 2) * s,
-							: new mxRectangle(state.x + state.width - w * s,
+              state.y + state.height / 2 - (h / 2) * s,
-								state.y, w * s, h * s);
+              w * s,
+              h * s
+            )
+          : new mxRectangle(
+              state.x + state.width - w * s,
+              state.y,
+              w * s,
+              h * s
+            );
       }
 
       return null;
     };
 
     // Overridden to update the scale and bounds of the control
-				mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
+    const mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
-				mxCellRenderer.prototype.redrawControl = function(state)
+    mxCellRenderer.prototype.redrawControl = function(state) {
-				{
       mxCellRendererRedrawControl.apply(this, arguments);
 
-					if (state.deleteControl != null)
+      if (state.deleteControl != null) {
-					{
+        const bounds = getDeleteControlBounds(state);
-						let bounds = getDeleteControlBounds(state);
+        const s = state.view.scale;
-						let s = state.view.scale;
 
-						if (state.deleteControl.scale != s || !state.deleteControl.bounds.equals(bounds))
+        if (
-						{
+          state.deleteControl.scale !== s ||
+          !state.deleteControl.bounds.equals(bounds)
+        ) {
           state.deleteControl.bounds = bounds;
           state.deleteControl.scale = s;
           state.deleteControl.redraw();
@@ -150,13 +137,11 @@ export default MYNAMEHERE;
     };
 
     // Overridden to remove the control if the state is destroyed
-				mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
+    const mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
-				mxCellRenderer.prototype.destroy = function(state)
+    mxCellRenderer.prototype.destroy = function(state) {
-				{
       mxCellRendererDestroy.apply(this, arguments);
 
-					if (state.deleteControl != null)
+      if (state.deleteControl != null) {
-					{
         state.deleteControl.destroy();
         state.deleteControl = null;
       }
@@ -171,44 +156,33 @@ 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();
     }
 
     graph.centerZoom = false;
 
-				document.body.appendChild(mxUtils.button('Zoom In', function()
+    this.el2.appendChild(
-				{
+      mxUtils.button('Zoom In', function() {
         graph.zoomIn();
-				}));
+      })
+    );
 
-				document.body.appendChild(mxUtils.button('Zoom Out', function()
+    this.el2.appendChild(
-				{
+      mxUtils.button('Zoom Out', function() {
         graph.zoomOut();
-				}));
+      })
-			}
+    );
   };
-	</script>
+}
-</head>
 
-<!-- Page passes the container for the graph to the program -->
+export default Control;
-<body onload="main(document.getElementById('graphContainer'))">
-
-	<!-- Creates a container for the graph with a grid wallpaper -->
-	<div id="graphContainer"
-		style="overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
-	</div>
-</body>
-</html>

src/pages/DragSource.html

@@ -1,232 +0,0 @@
-<!--
-  Copyright (c) 2006-2013, JGraph Ltd
-  
-  Dragsource example for mxGraph. This example demonstrates using
-  one drag source for multiple graphs and changing the drag icon.
--->
-
-import React from 'react';
-import mxEvent from '../mxgraph/util/mxEvent';
-import mxGraph from '../mxgraph/view/mxGraph';
-import mxRubberband from '../mxgraph/handler/mxRubberband';
-
-class MYNAMEHERE extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render = () => {
-    // A container for the graph
-    return (
-      <>
-        <h1></h1>
-
-        <div
-          ref={el => {
-            this.el = el;
-          }}
-          style={{
-
-          }}
-        />
-      </>
-    );
-  };
-
-  componentDidMount = () => {
-
-  };
-}
-
-export default MYNAMEHERE;
-
-
-<html>
-<head>
-	<title>Dragsource example for mxGraph</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()
-		{
-			// 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
-			    mxGuide.prototype.isEnabledForEvent = function(evt)
-			    {
-			    	return !mxEvent.isAltDown(evt);
-			    };
-				
-				// Enables snapping waypoints to terminals
-				mxEdgeHandler.prototype.snapToTerminals = true;
-				
-				let graphs = [];
-				
-				// Creates the graph inside the given container
-				for (let i = 0; i < 2; i++)
-				{
-					let container = document.createElement('div');
-					container.style.overflow = 'hidden';
-					container.style.position = 'relative';
-					container.style.width = '321px';
-					container.style.height = '241px';
-					container.style.background = 'url(\'editors/images/grid.gif\')';
-					container.style.cursor = 'default';
-
-					document.body.appendChild(container);
-					
-					let graph = new mxGraph(container);
-					graph.gridSize = 30;
-					
-					// Uncomment the following if you want the container
-					// to fit the size of the graph
-					//graph.setResizeContainer(true);
-					
-					// 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);
-					}
-					finally
-					{
-						// Updates the display
-						graph.getModel().endUpdate();
-					}
-					
-					graphs.push(graph);
-				}
-				
-				// Returns the graph under the mouse
-				let graphF = function(evt)
-				{
-					let x = mxEvent.getClientX(evt);
-					let y = mxEvent.getClientY(evt);
-					let elt = document.elementFromPoint(x, y);
-					
-					for (let i = 0; i < graphs.length; i++)
-					{
-						if (mxUtils.isAncestorNode(graphs[i].container, elt))
-						{
-							return graphs[i];
-						}
-					}
-					
-					return null;
-				};
-				
-				// Inserts a cell at the given location
-				let funct = function(graph, evt, target, x, y)
-				{
-					let cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
-					cell.vertex = true;
-					let cells = graph.importCells([cell], x, y, target);
-
-					if (cells != null && cells.length > 0)
-					{
-						graph.scrollCellToVisible(cells[0]);
-						graph.setSelectionCells(cells);
-					}
-				};
-				
-				// Creates a DOM node that acts as the drag source
-				let img = mxUtils.createImage('images/icons48/gear.png');
-				img.style.width = '48px';
-				img.style.height = '48px';
-				document.body.appendChild(img);
-				
-				// Creates the element that is being for the actual preview.
-				let dragElt = document.createElement('div');
-				dragElt.style.border = 'dashed black 1px';
-				dragElt.style.width = '120px';
-				dragElt.style.height = '40px';
-				
-				// Drag source is configured to use dragElt for preview and as drag icon
-				// if scalePreview (last) argument is true. Dx and dy are null to force
-				// the use of the defaults. Note that dx and dy are only used for the
-				// drag icon but not for the preview.
-				let ds = mxUtils.makeDraggable(img, graphF, funct, dragElt, null, null, graph.autoscroll, true);
-				
-				// Redirects feature to global switch. Note that this feature should only be used
-				// if the the x and y arguments are used in funct to insert the cell.
-				ds.isGuidesEnabled = function()
-				{
-					return graph.graphHandler.guidesEnabled;
-				};
-				
-				// Restores original drag icon while outside of graph
-				ds.createDragElement = mxDragSource.prototype.createDragElement;
-			}
-		};
-		
-		// NOTE: To enable cross-document DnD (eg. between frames),
-		// the following methods need to be overridden:
-		/*mxDragSourceMouseUp = mxDragSource.prototype.mouseUp;
-		mxDragSource.prototype.mouseUp = function(evt)
-		{
-			let doc = this.element.ownerDocument;
-			
-			if (doc != document)
-			{
-				let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
-				
-				if (this.mouseUpHandler != null)
-				{
-					mxEvent.removeListener(doc, mu, this.mouseUpHandler);
-				}
-			}
-			
-			mxDragSourceMouseUp.apply(this, arguments);
-		};*/
-		
-		/*mxDragSourceMouseDown = mxDragSource.prototype.mouseDown;
-		mxDragSource.prototype.mouseDown = function(evt)
-		{
-			if (this.enabled && !mxEvent.isConsumed(evt))
-			{
-				mxDragSourceMouseDown.apply(this, arguments);
-				let doc = this.element.ownerDocument;
-				
-				if (doc != document)
-				{
-					let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
-					mxEvent.addListener(doc, mu, this.mouseUpHandler);
-				}
-			}
-		};*/
-	</script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main();">
-</body>
-</html>

src/pages/DragSource.js

@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2006-2013, JGraph Ltd
+ *
+ * Dragsource example for mxGraph. This example demonstrates using
+ * one drag source for multiple graphs and changing the drag icon.
+ */
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxCell from '../mxgraph/model/mxCell';
+import mxGeometry from '../mxgraph/model/mxGeometry';
+import mxUtils from '../mxgraph/util/mxUtils';
+import mxDragSource from '../mxgraph/util/mxDragSource';
+import mxGraphHandler from "../mxgraph/handler/mxGraphHandler";
+import mxGuide from "../mxgraph/util/mxGuide";
+import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
+
+class DragSource extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1>Dragsource example for mxGraph</h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{}}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+    // Enables guides
+    mxGraphHandler.prototype.guidesEnabled = true;
+
+    // Alt disables guides
+    mxGuide.prototype.isEnabledForEvent = function(evt) {
+      return !mxEvent.isAltDown(evt);
+    };
+
+    // Enables snapping waypoints to terminals
+    mxEdgeHandler.prototype.snapToTerminals = true;
+
+    const graphs = [];
+
+    // Creates the graph inside the given container
+    for (let i = 0; i < 2; i++) {
+      const container = document.createElement('div');
+      container.style.overflow = 'hidden';
+      container.style.position = 'relative';
+      container.style.width = '321px';
+      container.style.height = '241px';
+      container.style.background = "url('editors/images/grid.gif')";
+      container.style.cursor = 'default';
+
+      this.el.appendChild(container);
+
+      var graph = new mxGraph(container);
+      graph.gridSize = 30;
+
+      // Uncomment the following if you want the container
+      // to fit the size of the graph
+      // graph.setResizeContainer(true);
+
+      // 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();
+      }
+
+      graphs.push(graph);
+    }
+
+    // Returns the graph under the mouse
+    const graphF = function(evt) {
+      const x = mxEvent.getClientX(evt);
+      const y = mxEvent.getClientY(evt);
+      const elt = document.elementFromPoint(x, y);
+
+      for (let i = 0; i < graphs.length; i++) {
+        if (mxUtils.isAncestorNode(graphs[i].container, elt)) {
+          return graphs[i];
+        }
+      }
+
+      return null;
+    };
+
+    // Inserts a cell at the given location
+    const funct = function(graph, evt, target, x, y) {
+      const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
+      cell.vertex = true;
+      const cells = graph.importCells([cell], x, y, target);
+
+      if (cells != null && cells.length > 0) {
+        graph.scrollCellToVisible(cells[0]);
+        graph.setSelectionCells(cells);
+      }
+    };
+
+    // Creates a DOM node that acts as the drag source
+    const img = mxUtils.createImage('images/icons48/gear.png');
+    img.style.width = '48px';
+    img.style.height = '48px';
+    document.body.appendChild(img);
+
+    // Creates the element that is being for the actual preview.
+    const dragElt = document.createElement('div');
+    dragElt.style.border = 'dashed black 1px';
+    dragElt.style.width = '120px';
+    dragElt.style.height = '40px';
+
+    // Drag source is configured to use dragElt for preview and as drag icon
+    // if scalePreview (last) argument is true. Dx and dy are null to force
+    // the use of the defaults. Note that dx and dy are only used for the
+    // drag icon but not for the preview.
+    const ds = mxUtils.makeDraggable(
+      img,
+      graphF,
+      funct,
+      dragElt,
+      null,
+      null,
+      graph.autoscroll,
+      true
+    );
+
+    // Redirects feature to global switch. Note that this feature should only be used
+    // if the the x and y arguments are used in funct to insert the cell.
+    ds.isGuidesEnabled = function() {
+      return graph.graphHandler.guidesEnabled;
+    };
+
+    // Restores original drag icon while outside of graph
+    ds.createDragElement = mxDragSource.prototype.createDragElement;
+  };
+
+  // NOTE: To enable cross-document DnD (eg. between frames),
+  // the following methods need to be overridden:
+  /* mxDragSourceMouseUp = mxDragSource.prototype.mouseUp;
+mxDragSource.prototype.mouseUp = function(evt)
+{
+    let doc = this.element.ownerDocument;
+
+    if (doc != document)
+    {
+        let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
+
+        if (this.mouseUpHandler != null)
+        {
+            mxEvent.removeListener(doc, mu, this.mouseUpHandler);
+        }
+    }
+
+    mxDragSourceMouseUp.apply(this, arguments);
+}; */
+
+  /* mxDragSourceMouseDown = mxDragSource.prototype.mouseDown;
+mxDragSource.prototype.mouseDown = function(evt)
+{
+    if (this.enabled && !mxEvent.isConsumed(evt))
+    {
+        mxDragSourceMouseDown.apply(this, arguments);
+        let doc = this.element.ownerDocument;
+
+        if (doc != document)
+        {
+            let mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup';
+            mxEvent.addListener(doc, mu, this.mouseUpHandler);
+        }
+    }
+}; */
+}
+
+export default DragSource;

src/pages/DynamicLoading.js

@@ -4,6 +4,43 @@
   Dynamic loading example for mxGraph. This example demonstrates loading
   graph model data dynamically to limit the number of cells in the model.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Dynamic loading example for mxGraph</title>

src/pages/DynamicStyle.js

@@ -4,6 +4,43 @@
   Dynamic Style example for mxGraph. This example demonstrates changing
   the style of a cell dynamically by overriding mxGraphModel.getStyle.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Dynamic Style example for mxGraph</title>

src/pages/DynamicToolbar.js

@@ -4,6 +4,43 @@
   Dynamic toolbar example for mxGraph. This example demonstrates changing the
   state of the toolbar at runtime.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Toolbar example for mxGraph</title>

src/pages/EdgeTolerance.js

@@ -4,6 +4,43 @@
   Edge tolerance example for mxGraph. This example demonstrates increasing
   the tolerance for hit detection on edges.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Edge tolerance example for mxGraph</title>

src/pages/Editing.js

@@ -6,6 +6,43 @@
   a specific field of the user object. Wrapping and DOM nodes as labels are
   also demonstrated here.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Editing example for mxGraph</title>

src/pages/Events.js

@@ -9,6 +9,43 @@
   default stylesheet, and handle the doubleclick on the adjustment
   point. See also: overlays.html for click event handling.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Events example for mxGraph</title>

src/pages/ExtendCanvas.js

@@ -4,6 +4,43 @@
   Extend canvas example for mxGraph. This example demonstrates implementing
   an infinite canvas with scrollbars.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
+
 <html>
 <head>
 	<title>Extend canvas example for mxGraph</title>

src/pages/FileIO.js

@@ -5,6 +5,42 @@
   XML file, writing a custom parser, applying an automatic layout and
   defining a 2-way edge.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
 <html>
 <head>
 	<title>File I/O example for mxGraph</title>

src/pages/FixedIcon.js

@@ -4,6 +4,42 @@
   FixedIcon example for mxGraph. This example demonstrates
   customizing the icon position in the mxLabel shape.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
 <html>
 <head>
 	<title>Fixed icon example for mxGraph</title>

src/pages/FixedPoints.js

@@ -4,6 +4,42 @@
   Fixed points example for mxGraph. This example demonstrates using
   fixed connection points for connecting edges to vertices.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
 <html>
 <head>
 	<title>Fixed points example for mxGraph</title>

src/pages/Folding.js

@@ -4,6 +4,42 @@
   Folding example for mxGraph. This example demonstrates
   using a layout to implement a nested group structure.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
 <html>
 <head>
 	<title>Folding example for mxGraph</title>

src/pages/GraphLayout.js

@@ -5,6 +5,42 @@
   automatic graph layouts and listening to changes of the graph size
   to keep the container size in sync.
 -->
+
+import React from 'react';
+import mxEvent from '../mxgraph/util/mxEvent';
+import mxGraph from '../mxgraph/view/mxGraph';
+import mxRubberband from '../mxgraph/handler/mxRubberband';
+
+class MYNAMEHERE extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render = () => {
+    // A container for the graph
+    return (
+      <>
+        <h1></h1>
+
+        <div
+          ref={el => {
+            this.el = el;
+          }}
+          style={{
+
+          }}
+        />
+      </>
+    );
+  };
+
+  componentDidMount = () => {
+
+  };
+}
+
+export default MYNAMEHERE;
+
 <html>
 <head>
 	<title>Graphlayout example for mxGraph</title>

src/pages/index.js

@@ -7,16 +7,30 @@ import AutoLayout from "./AutoLayout";
 import Animation from "./Animation";
 import Boundary from "./Boundary";
 import Clipboard from "./Clipboard";
+import DragSource from "./DragSource";
+import Control from "./Control";
+import ContextIcons from "./ContextIcons";
+import Collapse from "./Collapse";
+import Constituent from "./Constituent";
 
 export default function Home() {
   return (
-    <>
+    <div style={{
+      width: '1000px',
+      margin: '0 auto'
+    }}>
       <HelloWorld />
       <Anchors />
       <AutoLayout />
       <Animation />
       <Boundary />
       <Clipboard />
-    </>
+      <ContextIcons />
+      <Collapse />
+      <Constituent />
+      <ContextIcons />
+      <Control />
+      <DragSource />
+    </div>
   );
 }