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,77 +38,45 @@ class MYNAMEHERE extends React.Component {
   };
 
   componentDidMount = () => {
+    const graph = new mxGraph(this.el);
+    const parent = graph.getDefaultParent();
 
+    // Extends mxGraphModel.getStyle to show an image when collapsed
+    const modelGetStyle = graph.model.getStyle;
+    graph.model.getStyle = function(cell) {
+      if (cell != null) {
+        let style = modelGetStyle.apply(this, arguments);
+
+        if (this.isCollapsed(cell)) {
+          style =
+            `${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
+            `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
+        }
+
+        return style;
+      }
+
+      return null;
+    };
+
+    graph.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(
+        parent,
+        null,
+        'Container',
+        20,
+        20,
+        200,
+        200,
+        'shape=swimlane;startSize=20;'
+      );
+      v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
+      const v11 = graph.insertVertex(v1, null, 'Hello,', 10, 40, 120, 80);
+    } finally {
+      graph.getModel().endUpdate();
+    }
   };
 }
 
-export default MYNAMEHERE;
+export default Collapse;
-
-
-<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;
-			graph.model.getStyle = function(cell)
-			{
-				if (cell != null)
-				{
-					let style = modelGetStyle.apply(this, arguments);
-					
-					if (this.isCollapsed(cell))
-					{
-						style = style + ';shape=image;image=http://www.jgraph.com/images/mxgraph.gif;' +
-							'noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9';
-					}
-					
-					return style;
-				}
-				
-				return null;
-			};
-			
-			graph.getModel().beginUpdate();
-			try
-			{
-				var v1 = graph.insertVertex(parent, 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);
-			}
-			finally
-			{
-				graph.getModel().endUpdate();
-			}
-		};
-	</script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-	<!-- Creates a container for the graph with a grid wallpaper -->
-	<div id="graphContainer"
-		style="position: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 {
+      /**
+       * Redirects start drag to parent.
+       */
+      getInitialCellForEvent(me) {
+        let cell = super.getInitialCellForEvent(me);
+        if (this.graph.isPart(cell)) {
+          cell = this.graph.getModel().getParent(cell);
+        }
+        return cell;
+      }
+    }
 
-  };
+    // Disables the built-in context menu
+    mxEvent.disableContextMenu(this.el);
+
+    class MyCustomGraph extends mxGraph {
+      foldingEnabled = false;
+
+      recursiveResize = true;
+
+      isPart(cell) {
+        // Helper method to mark parts with constituent=1 in the style
+        return this.getCurrentCellStyle(cell).constituent == '1';
+      }
+
+      selectCellForEvent(cell, evt) {
+        // Redirects selection to parent
+        if (this.isPart(cell)) {
+          cell = this.model.getParent(cell);
+        }
+        super.selectCellForEvent(cell, evt);
+      }
+
+      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).
+    const parent = graph.getDefaultParent();
+
+    // Adds cells to the model in a single step
+    graph.getModel().beginUpdate();
+    try {
+      const v1 = graph.insertVertex(parent, null, '', 20, 20, 120, 70);
+      const v2 = graph.insertVertex(
+        v1,
+        null,
+        'Constituent',
+        20,
+        20,
+        80,
+        30,
+        'constituent=1;'
+      );
+    } finally {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+  }
 }
 
-export default MYNAMEHERE;
+export default Constituent;
-
-
-<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;
-		mxGraphHandler.prototype.getInitialCellForEvent = function(me)
-		{
-			let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
-			
-			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);
-				
-				// Creates the graph inside the given container
-				let graph = new mxGraph(container);
-				graph.foldingEnabled = false;
-				graph.recursiveResize = true;
-				
-				// Helper method to mark parts with constituent=1 in the style
-				graph.isPart = function(cell)
-				{
-					return this.getCurrentCellStyle(cell)['constituent'] == '1';
-				};
-				
-				// Redirects selection to parent
-				graph.selectCellForEvent = function(cell)
-				{
-					if (this.isPart(cell))
-					{
-						cell = this.model.getParent(cell);
-					}
-					
-					mxGraph.prototype.selectCellForEvent.apply(this, arguments);
-				};
-				
-				// 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, '', 20, 20, 120, 70);
-					var v2 = graph.insertVertex(v1, null, '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 -->
-<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,229 +40,197 @@ class MYNAMEHERE extends React.Component {
   };
 
   componentDidMount = () => {
+    // Defines a subclass for mxVertexHandler that adds a set of clickable
+    // icons to every selected vertex.
+    function mxVertexToolHandler(state) {
+      mxVertexHandler.apply(this, arguments);
+    }
 
+    mxVertexToolHandler.prototype = new mxVertexHandler();
+    mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
+
+    mxVertexToolHandler.prototype.domNode = null;
+
+    mxVertexToolHandler.prototype.init = function() {
+      mxVertexHandler.prototype.init.apply(this, arguments);
+
+      // In this example we force the use of DIVs for images in IE. This
+      // handles transparency in PNG images properly in IE and fixes the
+      // problem that IE routes all mouse events for a gesture via the
+      // initial IMG node, which means the target vertices
+      this.domNode = document.createElement('div');
+      this.domNode.style.position = 'absolute';
+      this.domNode.style.whiteSpace = 'nowrap';
+
+      // Workaround for event redirection via image tag in quirks and IE8
+      function createImage(src) {
+        return mxUtils.createImage(src);
+      }
+
+      // Delete
+      let img = createImage('images/delete2.png');
+      img.setAttribute('title', 'Delete');
+      img.style.cursor = 'pointer';
+      img.style.width = '16px';
+      img.style.height = '16px';
+      mxEvent.addGestureListeners(
+        img,
+        mxUtils.bind(this, function(evt) {
+          // Disables dragging the image
+          mxEvent.consume(evt);
+        })
+      );
+      mxEvent.addListener(
+        img,
+        'click',
+        mxUtils.bind(this, function(evt) {
+          this.graph.removeCells([this.state.cell]);
+          mxEvent.consume(evt);
+        })
+      );
+      this.domNode.appendChild(img);
+
+      // Size
+      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,
+        mxUtils.bind(this, function(evt) {
+          this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
+          this.graph.isMouseDown = true;
+          this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
+          mxEvent.consume(evt);
+        })
+      );
+      this.domNode.appendChild(img);
+
+      // Move
+      img = createImage('images/plus.png');
+      img.setAttribute('title', 'Move');
+      img.style.cursor = 'move';
+      img.style.width = '16px';
+      img.style.height = '16px';
+      mxEvent.addGestureListeners(
+        img,
+        mxUtils.bind(this, function(evt) {
+          this.graph.graphHandler.start(
+            this.state.cell,
+            mxEvent.getClientX(evt),
+            mxEvent.getClientY(evt)
+          );
+          this.graph.graphHandler.cellWasClicked = true;
+          this.graph.isMouseDown = true;
+          this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
+          mxEvent.consume(evt);
+        })
+      );
+      this.domNode.appendChild(img);
+
+      // Connect
+      img = createImage('images/check.png');
+      img.setAttribute('title', 'Connect');
+      img.style.cursor = 'pointer';
+      img.style.width = '16px';
+      img.style.height = '16px';
+      mxEvent.addGestureListeners(
+        img,
+        mxUtils.bind(this, function(evt) {
+          const pt = mxUtils.convertPoint(
+            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);
+          mxEvent.consume(evt);
+        })
+      );
+      this.domNode.appendChild(img);
+
+      this.graph.container.appendChild(this.domNode);
+      this.redrawTools();
+    };
+
+    mxVertexToolHandler.prototype.redraw = function() {
+      mxVertexHandler.prototype.redraw.apply(this);
+      this.redrawTools();
+    };
+
+    mxVertexToolHandler.prototype.redrawTools = function() {
+      if (this.state != null && this.domNode != null) {
+        const dy = 4;
+        this.domNode.style.left = `${this.state.x + this.state.width - 56}px`;
+        this.domNode.style.top = `${this.state.y + this.state.height + dy}px`;
+      }
+    };
+
+    mxVertexToolHandler.prototype.destroy = function(sender, me) {
+      mxVertexHandler.prototype.destroy.apply(this, arguments);
+
+      if (this.domNode != null) {
+        this.domNode.parentNode.removeChild(this.domNode);
+        this.domNode = 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
+        const graph = new mxGraph(container);
+        graph.setConnectable(true);
+        graph.connectionHandler.createTarget = true;
+
+        graph.createHandler = function(state) {
+          if (state != null && this.model.isVertex(state.cell)) {
+            return new mxVertexToolHandler(state);
+          }
+
+          return mxGraph.prototype.createHandler.apply(this, arguments);
+        };
+
+        // 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();
+        }
+      }
+    }
   };
 }
 
-export default MYNAMEHERE;
+export default ContextIcons;
-
-
-<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)
-		{
-			mxVertexHandler.apply(this, arguments);
-		};
-
-		mxVertexToolHandler.prototype = new mxVertexHandler();
-		mxVertexToolHandler.prototype.constructor = mxVertexToolHandler;
-
-		mxVertexToolHandler.prototype.domNode = null;
-
-		mxVertexToolHandler.prototype.init = function()
-		{
-			mxVertexHandler.prototype.init.apply(this, arguments);
-
-			// In this example we force the use of DIVs for images in IE. This
-			// handles transparency in PNG images properly in IE and fixes the
-			// problem that IE routes all mouse events for a gesture via the
-			// initial IMG node, which means the target vertices 
-			this.domNode = document.createElement('div');
-			this.domNode.style.position = 'absolute';
-			this.domNode.style.whiteSpace = 'nowrap';
-			
-			// Workaround for event redirection via image tag in quirks and IE8
-			function createImage(src)
-			{
-				return mxUtils.createImage(src);
-			};
-
-			// Delete
-			let img = createImage('images/delete2.png');
-			img.setAttribute('title', 'Delete');
-			img.style.cursor = 'pointer';
-			img.style.width = '16px';
-			img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
-				mxUtils.bind(this, function(evt)
-				{
-					// Disables dragging the image
-					mxEvent.consume(evt);
-				})
-			);
-			mxEvent.addListener(img, 'click',
-				mxUtils.bind(this, function(evt)
-				{
-					this.graph.removeCells([this.state.cell]);
-					mxEvent.consume(evt);
-				})
-			);
-			this.domNode.appendChild(img);
-
-			// Size
-			let 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,
-				mxUtils.bind(this, function(evt)
-				{
-					this.start(mxEvent.getClientX(evt), mxEvent.getClientY(evt), 7);
-					this.graph.isMouseDown = true;
-					this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
-					mxEvent.consume(evt);
-				})
-			);
-			this.domNode.appendChild(img);
-
-			// Move
-			let img = createImage('images/plus.png');
-			img.setAttribute('title', 'Move');
-			img.style.cursor = 'move';
-			img.style.width = '16px';
-			img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
-				mxUtils.bind(this, function(evt)
-				{
-					this.graph.graphHandler.start(this.state.cell,
-						mxEvent.getClientX(evt), mxEvent.getClientY(evt));
-					this.graph.graphHandler.cellWasClicked = true;
-					this.graph.isMouseDown = true;
-					this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
-					mxEvent.consume(evt);
-				})
-			);
-			this.domNode.appendChild(img);
-
-			// Connect
-			let img = createImage('images/check.png');
-			img.setAttribute('title', 'Connect');
-			img.style.cursor = 'pointer';
-			img.style.width = '16px';
-			img.style.height = '16px';
-			mxEvent.addGestureListeners(img,
-				mxUtils.bind(this, function(evt)
-				{
-					let pt = mxUtils.convertPoint(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);
-					mxEvent.consume(evt);
-				})
-			);
-			this.domNode.appendChild(img);
-			
-			this.graph.container.appendChild(this.domNode);
-			this.redrawTools();
-		};
-
-		mxVertexToolHandler.prototype.redraw = function()
-		{
-			mxVertexHandler.prototype.redraw.apply(this);
-			this.redrawTools();
-		};
-
-		mxVertexToolHandler.prototype.redrawTools = function()
-		{
-			if (this.state != null && this.domNode != null)
-			{
-				let dy = 4;
-				this.domNode.style.left = (this.state.x + this.state.width - 56) + 'px';
-				this.domNode.style.top = (this.state.y + this.state.height + dy) + 'px';
-			}
-		};
-		
-		mxVertexToolHandler.prototype.destroy = function(sender, me)
-		{
-			mxVertexHandler.prototype.destroy.apply(this, arguments);
-
-			if (this.domNode != null)
-			{
-				this.domNode.parentNode.removeChild(this.domNode);
-				this.domNode = null;
-			}
-		};
-		
-		// Program starts here. Creates a sample graph in the
-		// DOM node with the specified ID. This function is invoked
-		// from the onLoad event handler of the document (see below).
-		function main(container)
-		{
-			// Checks if the browser is supported
-			if (!mxClient.isBrowserSupported())
-			{
-				// Displays an error message if the browser is not supported.
-				mxUtils.error('Browser is not supported!', 200, false);
-			}
-			else
-			{
-				// Creates the graph inside the given container
-				let graph = new mxGraph(container);
-				graph.setConnectable(true);
-				graph.connectionHandler.createTarget = true;
-
-				graph.createHandler = function(state)
-				{
-					if (state != null &&
-						this.model.isVertex(state.cell))
-					{
-						return new mxVertexToolHandler(state);
-					}
-
-					return mxGraph.prototype.createHandler.apply(this, arguments);
-				};
-
-				// 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();
-				}
-			}
-		};
-	</script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-	<!-- Creates a container for the graph with a grid wallpaper -->
-	<div id="graphContainer"
-		style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
-	</div>
-</body>
-</html>

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,181 +47,142 @@ class MYNAMEHERE extends React.Component {
   };
 
   componentDidMount = () => {
+    // Creates the graph inside the given container
+    const graph = new mxGraph(this.el);
+    graph.setPanning(true);
 
+    // Specifies the URL and size of the new control
+    const deleteImage = new mxImage(
+      'editors/images/overlays/forbidden.png',
+      16,
+      16
+    );
+
+    // Overridden to add an additional control to the state at creation time
+    const mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;
+    mxCellRenderer.prototype.createControl = function(state) {
+      mxCellRendererCreateControl.apply(this, arguments);
+
+      const { graph } = state.view;
+
+      if (graph.getModel().isVertex(state.cell)) {
+        if (state.deleteControl == null) {
+          const b = new mxRectangle(
+            0,
+            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) {
+            if (graph.isEnabled()) {
+              graph.removeCells([state.cell]);
+              mxEvent.consume(evt);
+            }
+          });
+        }
+      } else if (state.deleteControl != null) {
+        state.deleteControl.destroy();
+        state.deleteControl = null;
+      }
+    };
+
+    // Helper function to compute the bounds of the control
+    const getDeleteControlBounds = function(state) {
+      if (state.deleteControl != null) {
+        const oldScale = state.deleteControl.scale;
+        const w = state.deleteControl.bounds.width / oldScale;
+        const h = state.deleteControl.bounds.height / oldScale;
+        const s = state.view.scale;
+
+        return state.view.graph.getModel().isEdge(state.cell)
+          ? new mxRectangle(
+              state.x + state.width / 2 - (w / 2) * s,
+              state.y + state.height / 2 - (h / 2) * 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
+    const mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
+    mxCellRenderer.prototype.redrawControl = function(state) {
+      mxCellRendererRedrawControl.apply(this, arguments);
+
+      if (state.deleteControl != null) {
+        const bounds = getDeleteControlBounds(state);
+        const s = state.view.scale;
+
+        if (
+          state.deleteControl.scale !== s ||
+          !state.deleteControl.bounds.equals(bounds)
+        ) {
+          state.deleteControl.bounds = bounds;
+          state.deleteControl.scale = s;
+          state.deleteControl.redraw();
+        }
+      }
+    };
+
+    // Overridden to remove the control if the state is destroyed
+    const mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
+    mxCellRenderer.prototype.destroy = function(state) {
+      mxCellRendererDestroy.apply(this, arguments);
+
+      if (state.deleteControl != null) {
+        state.deleteControl.destroy();
+        state.deleteControl = null;
+      }
+    };
+
+    // 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();
+    }
+
+    graph.centerZoom = false;
+
+    this.el2.appendChild(
+      mxUtils.button('Zoom In', function() {
+        graph.zoomIn();
+      })
+    );
+
+    this.el2.appendChild(
+      mxUtils.button('Zoom Out', function() {
+        graph.zoomOut();
+      })
+    );
   };
 }
 
-export default MYNAMEHERE;
+export default Control;
-
-
-<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);
-				graph.setPanning(true);
-				
-				// Specifies the URL and size of the new control
-				let 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;
-				mxCellRenderer.prototype.createControl = function(state)
-				{
-					mxCellRendererCreateControl.apply(this, arguments);
-					
-					let graph = state.view.graph;
-					
-					if (graph.getModel().isVertex(state.cell))
-					{
-						if (state.deleteControl == null)
-						{
-							let b = new mxRectangle(0, 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)
-							{
-								if (graph.isEnabled())
-								{
-									graph.removeCells([state.cell]);
-									mxEvent.consume(evt);
-								}
-							});
-						}
-					}
-					else if (state.deleteControl != null)
-					{
-						state.deleteControl.destroy();
-						state.deleteControl = null;
-					}
-				};
-				
-				// Helper function to compute the bounds of the control
-				let getDeleteControlBounds = function(state)
-				{
-					if (state.deleteControl != null)
-					{
-						let oldScale = state.deleteControl.scale;
-						let w = state.deleteControl.bounds.width / oldScale;
-						let h = state.deleteControl.bounds.height / oldScale;
-						let s = state.view.scale;
-
-						return (state.view.graph.getModel().isEdge(state.cell)) ? 
-							new mxRectangle(state.x + state.width / 2 - w / 2 * s,
-								state.y + state.height / 2 - h / 2 * 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;
-				mxCellRenderer.prototype.redrawControl = function(state)
-				{
-					mxCellRendererRedrawControl.apply(this, arguments);
-					
-					if (state.deleteControl != null)
-					{
-						let bounds = getDeleteControlBounds(state);
-						let s = state.view.scale;
-						
-						if (state.deleteControl.scale != s || !state.deleteControl.bounds.equals(bounds))
-						{
-							state.deleteControl.bounds = bounds;
-							state.deleteControl.scale = s;
-							state.deleteControl.redraw();
-						}
-					}
-				};
-				
-				// Overridden to remove the control if the state is destroyed
-				mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
-				mxCellRenderer.prototype.destroy = function(state)
-				{
-					mxCellRendererDestroy.apply(this, arguments);
-
-					if (state.deleteControl != null)
-					{
-						state.deleteControl.destroy();
-						state.deleteControl = null;
-					}
-				};
-
-				// 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();
-				}
-				
-				graph.centerZoom = false;
-				
-				document.body.appendChild(mxUtils.button('Zoom In', function()
-				{
-					graph.zoomIn();
-				}));
-				
-				document.body.appendChild(mxUtils.button('Zoom Out', function()
-				{
-					graph.zoomOut();
-				}));
-			}
-		};
-	</script>
-</head>
-
-<!-- Page passes the container for the graph to the program -->
-<body onload="main(document.getElementById('graphContainer'))">
-
-	<!-- Creates a container for the graph with a grid wallpaper -->
-	<div id="graphContainer"
-		style="overflow:hidden;width: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>
   );
 }