adjusted width, titles and positioning of examples

src/pages/Anchors.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Anchors example for mxGraph. This example demonstrates defining
+ * Anchors. This example demonstrates defining
  * fixed connection points for all shapes.
  */
 
@@ -98,7 +98,7 @@ class Anchors extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Anchors example for mxGraph</h1>
+        <h1>Anchors</h1>
         <div
           ref={el => {
             this.el = el;
@@ -106,7 +106,6 @@ class Anchors extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: 'url("editors/images/grid.gif")',
             cursor: 'default',

src/pages/Animation.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2017, JGraph Ltd
  *
- * Animation example for mxGraph. This example demonstrates using
+ * Animation. This example demonstrates using
  * SVG animations on edges to visualize the flow in a pipe.
  */
 
@@ -18,7 +18,7 @@ class Animation extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Animation example for mxGraph</h1>
+        <h1>Animation</h1>
 
         <div
           ref={el => {
@@ -27,7 +27,6 @@ class Animation extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: 'url("editors/images/grid.gif")',
             cursor: 'default',

src/pages/AutoLayout.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Autolayout example for mxGraph. This example demonstrates running
+ * Autolayout. This example demonstrates running
  * and animating a layout algorithm after every change to a graph.
  */
 
@@ -29,7 +29,7 @@ class AutoLayout extends React.Component {
     // A this.el for the graph
     return (
       <>
-        <h1>Auto layout example for mxGraph</h1>
+        <h1>Auto layout</h1>
         <div
           ref={el => {
             this.el = el;
@@ -37,7 +37,6 @@ class AutoLayout extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '821px',
             height: '641px',
             background: 'url("editors/images/grid.gif")',
             cursor: 'default',

src/pages/Boundary.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Boundary example for mxGraph. This example demonstrates
+ * Boundary. This example demonstrates
  * implementing boundary events in BPMN diagrams.
  */
 
@@ -23,7 +23,7 @@ class Boundary extends React.Component {
     // A this.el for the graph
     return (
       <>
-        <h1>Boundary example for mxGraph</h1>
+        <h1>Boundary</h1>
 
         <div
           ref={el => {
@@ -32,7 +32,6 @@ class Boundary extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: 'url("editors/images/grid.gif")',
             cursor: 'default'

src/pages/Clipboard.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Clipboard example for mxGraph. This example demonstrates using the
+ * Clipboard. This example demonstrates using the
  * clipboard for providing cross-tab and cross-browser copy and paste.
  */
 
@@ -24,7 +24,7 @@ class Clipboard extends React.Component {
     // A this.el for the graph
     return (
       <>
-        <h1>Clipboard example for mxGraph</h1>
+        <h1>Clipboard</h1>
 
         <div
           ref={el => {
@@ -33,7 +33,6 @@ class Clipboard extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Codec.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Codec example for mxGraph. This example demonstrates dynamically
+ * Codec. This example demonstrates dynamically
  * creating a graph from XML and encoding the model into XML, as well
  * as changing the default style for edges in-place.
  */
@@ -23,7 +23,7 @@ class MYNAMEHERE extends React.Component {
     // Contains a graph description which will be converted
     return (
         <>
-          <h1>Codec example for mxGraph</h1>
+          <h1>Codec</h1>
 
           This graph is embedded in the page.
           <div className="mxgraph" style="position:relative;overflow:auto;">&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell

src/pages/Collapse.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Collapse example for mxGraph. This example demonstrates changing
+ * Collapse. This example demonstrates changing
  * the style of a cell based on its collapsed state.
  */
 
@@ -18,7 +18,7 @@ class Collapse extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Collapse example for mxGraph</h1>
+        <h1>Collapse</h1>
 
         <div
           ref={el => {
@@ -27,7 +27,6 @@ class Collapse extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Constituent.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Consistuent example for mxGraph. This example demonstrates using
+ * Consistuent. This example demonstrates using
  * cells as parts of other cells.
  */
 
@@ -21,7 +21,7 @@ class Constituent extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Consistuent example for mxGraph</h1>
+        <h1>Consistuent</h1>
 
         <div
           ref={el => {
@@ -30,7 +30,6 @@ class Constituent extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: 'url("editors/images/grid.gif")',
             cursor: 'default',

src/pages/ContextIcons.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Context icons example for mxGraph. This example demonstrates adding
+ * Context icons. This example demonstrates adding
  * icons to selected vertices to carry out special operations.
  */
 
@@ -22,14 +22,13 @@ class ContextIcons extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Context icons example for mxGraph</h1>
+        <h1>Context icons</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Control.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Control example for mxGraph. This example demonstrates adding
+ * Control. This example demonstrates adding
  * controls to specific cells in a graph.
  */
 
@@ -24,14 +24,13 @@ class Control extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Control example for mxGraph</h1>
+        <h1>Control</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '621px',
             height: '441px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/DragSource.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Dragsource example for mxGraph. This example demonstrates using
+ * Dragsource. This example demonstrates using
  * one drag source for multiple graphs and changing the drag icon.
  */
 
@@ -26,7 +26,7 @@ class DragSource extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Dragsource example for mxGraph</h1>
+        <h1>Dragsource</h1>
 
         <div
           ref={el => {

src/pages/Drop.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Drop example for mxGraph. This example demonstrates handling
+ * Drop. This example demonstrates handling
  * native drag and drop of images (requires modern browser).
  */
 
@@ -21,7 +21,7 @@ class Drop extends React.Component {
     // A this.el for the graph
     return (
       <>
-        <h1>Drop example for mxGraph</h1>
+        <h1>Drop</h1>
 
         <div
           ref={el => {
@@ -30,7 +30,6 @@ class Drop extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '621px',
             height: '441px',
             background: `url('editors/images/grid.gif')`,
             cursor: 'default',

src/pages/DynamicLoading.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Dynamic loading example for mxGraph. This example demonstrates loading
+ * Dynamic loading. This example demonstrates loading
  * graph model data dynamically to limit the number of cells in the model.
  */
 
@@ -24,7 +24,7 @@ class DynamicLoading extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Dynamic loading example for mxGraph</h1>
+        <h1>Dynamic loading</h1>
 
         <div
           ref={el => {
@@ -33,7 +33,6 @@ class DynamicLoading extends React.Component {
           style={{
             overflow: 'visible',
             position: 'absolute',
-            width: '100%',
             height: '100%',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/DynamicStyle.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Dynamic Style example for mxGraph. This example demonstrates changing
+ * Dynamic Style. This example demonstrates changing
  * the style of a cell dynamically by overriding mxGraphModel.getStyle.
  */
 
@@ -20,7 +20,7 @@ class DynamicStyle extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Dynamic Style example for mxGraph</h1>
+        <h1>Dynamic Style</h1>
 
         <div
           ref={el => {
@@ -28,7 +28,6 @@ class DynamicStyle extends React.Component {
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}

src/pages/DynamicToolbar.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Dynamic toolbar example for mxGraph. This example demonstrates changing the
+ * Dynamic toolbar. This example demonstrates changing the
  * state of the toolbar at runtime.
  */
 
@@ -27,7 +27,7 @@ class DynamicToolbar extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Toolbar example for mxGraph</h1>
+        <h1>Toolbar</h1>
 
         <div
           ref={el => {
@@ -35,7 +35,6 @@ class DynamicToolbar extends React.Component {
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             position: "relative"

src/pages/EdgeTolerance.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Edge tolerance example for mxGraph. This example demonstrates increasing
+ * Edge tolerance. This example demonstrates increasing
  * the tolerance for hit detection on edges.
  */
 
@@ -19,14 +19,13 @@ class EdgeTolerance extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Edge tolerance example for mxGraph</h1>
+        <h1>Edge tolerance</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '641px',
             height: '481px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Editing.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Editing example for mxGraph. This example demonstrates using the in-place
+ * Editing. This example demonstrates using the in-place
  * editor trigger to specify the editing value and write the new value into
  * a specific field of the user object. Wrapping and DOM nodes as labels are
  * also demonstrated here.
@@ -22,7 +22,7 @@ class Editing extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Editing example for mxGraph</h1>
+        <h1>Editing</h1>
         Double-click the upper/lower half of the cell to edit different fields
         of the user object.
         <div
@@ -32,7 +32,6 @@ class Editing extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}

src/pages/Events.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Events example for mxGraph. This example demonstrates creating
+ * Events. This example demonstrates creating
  * a graph container and using the mxDivResizer to update the size,
  * interaction on the graph, including marquee selection, custom
  * tooltips, context menu handling and changing the default menu
@@ -33,7 +33,7 @@ class Events extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Events example for mxGraph</h1>
+        <h1>Events</h1>
 
         <div
           ref={el => {

src/pages/ExtendCanvas.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Extend canvas example for mxGraph. This example demonstrates implementing
+ * Extend canvas. This example demonstrates implementing
  * an infinite canvas with scrollbars.
  */
 
@@ -22,7 +22,7 @@ class ExtendCanvas extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Extend canvas example for mxGraph</h1>
+        <h1>Extend canvas</h1>
 
         <div
           ref={el => {
@@ -31,7 +31,6 @@ class ExtendCanvas extends React.Component {
           style={{
             position: 'relative',
             overflow: 'auto',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/FileIO.js

@@ -1,7 +1,7 @@
 /**
  *Copyright (c) 2006-2013, JGraph Ltd
  *
- * File I/O example for mxGraph. This example demonstrates reading an
+ * File I/O. This example demonstrates reading an
  * XML file, writing a custom parser, applying an automatic layout and
  * defining a 2-way edge.
  */
@@ -27,21 +27,23 @@ class FileIO extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>File I/O example for mxGraph</h1>
+        <h1>File I/O</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-            position: 'absolute',
+            position: 'relative',
             overflow: 'auto',
-            top: '36px',
+            height: '80vh',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
             borderTop: 'gray 1px solid',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   };
@@ -98,7 +100,7 @@ class FileIO extends React.Component {
         layout.forceConstant = 140;
 
         // Adds a button to execute the layout
-        document.body.appendChild(
+        this.el2.appendChild(
           mxUtils.button('Arrange', function(evt) {
             const parent = graph.getDefaultParent();
             layout.execute(parent);

src/pages/FixedIcon.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  FixedIcon example for mxGraph. This example demonstrates
+  FixedIcon. This example demonstrates
   customizing the icon position in the mxLabel shape.
  */
 
@@ -23,7 +23,7 @@ class FixedIcon extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Fixed icon example for mxGraph</h1>
+        <h1>Fixed icon</h1>
         <div
           ref={el => {
             this.el = el;
@@ -31,7 +31,6 @@ class FixedIcon extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/FixedPoints.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Fixed points example for mxGraph. This example demonstrates using
+  Fixed points. This example demonstrates using
   fixed connection points for connecting edges to vertices.
  */
 
@@ -25,7 +25,7 @@ class FixedPoints extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Fixed points example for mxGraph</h1>
+        <h1>Fixed points</h1>
 
         <div
           ref={el => {
@@ -34,7 +34,6 @@ class FixedPoints extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Folding.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Folding example for mxGraph. This example demonstrates
+ * Folding. This example demonstrates
  * using a layout to implement a nested group structure.
  */
 
@@ -21,7 +21,7 @@ class Folding extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Folding example for mxGraph</h1>
+        <h1>Folding</h1>
         <div
           ref={el => {
             this.el = el;
@@ -29,7 +29,6 @@ class Folding extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/GraphLayout.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Graphlayout example for mxGraph. This example demonstrates using
+  Graphlayout. This example demonstrates using
   automatic graph layouts and listening to changes of the graph size
   to keep the container size in sync.
  */
@@ -10,6 +10,8 @@ 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 mxCircleLayout from "../mxgraph/layout/mxCircleLayout";
 
 class MYNAMEHERE extends React.Component {
   constructor(props) {
@@ -20,7 +22,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Graphlayout example for mxGraph</h1>
+        <h1>Graphlayout</h1>
 
         <div
           ref={el => {
@@ -94,7 +96,7 @@ export default MYNAMEHERE;
         let animate = document.getElementById('animate');
 
         // Adds a button to execute the layout
-        document.body.insertBefore(mxUtils.button('Circle Layout',
+        this.el2.insertBefore(mxUtils.button('Circle Layout',
           function(evt)
           {
             graph.getModel().beginUpdate();

src/pages/Grid.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Grid example for mxGraph. This example demonstrates drawing
+  Grid. This example demonstrates drawing
   a grid dynamically using HTML 5 canvas.
  */
 
@@ -23,14 +23,13 @@ class Grid extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Grid example for mxGraph</h1>
+        <h1>Grid</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '641px',
             height: '481px',
             cursor: 'default',
           }}
@@ -45,7 +44,7 @@ class Grid extends React.Component {
   }
 
   componentDidMount() {
-    mxEvent.disableContextMenu(document.body);
+    mxEvent.disableContextMenu(this.el);
 
     // Creates the graph inside the given container
     const graph = new mxGraph(this.el);

src/pages/Groups.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Groups example for mxGraph. This example demonstrates using
+  Groups. This example demonstrates using
   cells as parts of other cells.
  */
 
@@ -20,14 +20,13 @@ class Groups extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World! example for mxGraph</h1>
+        <h1>Hello, World!</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Guides.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Guides example for mxGraph. This example demonstrates the guides
+  Guides. This example demonstrates the guides
   feature which aligns the current selection to the existing vertices
   in the graph. This feature is in RFC state. Creating a grid using
   a canvas and installing a key handler for cursor keys is also
@@ -27,14 +27,13 @@ class Guides extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Guides example for mxGraph</h1>
+        <h1>Guides</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '801px',
             height: '601px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Handles.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2014, JGraph Ltd
   
-  Handles example for mxGraph. This example demonstrates using mxHandle to change custom styles interactively.
+  Handles. This example demonstrates using mxHandle to change custom styles interactively.
  */
 
 import React from 'react';
@@ -25,7 +25,7 @@ class Handles extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Handles example for mxGraph</h1>
+        <h1>Handles</h1>
         <div
           ref={el => {
             this.el = el;
@@ -33,12 +33,16 @@ class Handles extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '621px',
             height: '441px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -258,12 +262,12 @@ class Handles extends React.Component {
       graph.getModel().endUpdate();
     }
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('+', function() {
         graph.zoomIn();
       })
     );
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('-', function() {
         graph.zoomOut();
       })

src/pages/HelloPort.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Hello, World! example for mxGraph. This example demonstrates using
+  Hello, World!. This example demonstrates using
   the isPort hook for visually connecting to another cell.
  */
 
@@ -24,14 +24,13 @@ class HelloPort extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World! example for mxGraph</h1>
+        <h1>Hello, World!</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/HelloWorld.js

@@ -2,7 +2,7 @@
  *  Copyright (c) 2006-2018, JGraph Ltd
  *  Converted to ES9 syntax/React by David Morrissey 2021
  *
- *  Hello, World! example for mxGraph. This example demonstrates using
+ *  Hello, World!. This example demonstrates using
  *  a DOM node to create a graph and adding vertices and edges.
  */
 
@@ -20,7 +20,7 @@ class HelloWorld extends React.Component {
     // A container for the graph with a grid wallpaper
     return (
       <>
-        <h1>Hello, World! example for mxGraph</h1>
+        <h1>Hello, World!</h1>
 
         <div
           ref={el => {
@@ -29,7 +29,6 @@ class HelloWorld extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/HierarchicalLayout.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Hierarchical Layout example for mxGraph. This example demonstrates the
+  Hierarchical Layout. This example demonstrates the
   use of the hierarchical and organic layouts. Note that the hierarchical
   layout requires another script tag in the head of the page.
  */
@@ -25,7 +25,7 @@ class HierarchicalLayout extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hierarchical Layout example for mxGraph</h1>
+        <h1>Hierarchical Layout</h1>
         <div
           ref={el => {
             this.el = el;
@@ -40,6 +40,11 @@ class HierarchicalLayout extends React.Component {
             borderTop: 'gray 1px solid',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -76,7 +81,7 @@ class HierarchicalLayout extends React.Component {
     mxEvent.addListener(button, 'click', function(evt) {
       layout.execute(parent);
     });
-    document.body.appendChild(button);
+    this.el2.appendChild(button);
 
     // Adds a button to execute the layout
     button = document.createElement('button');
@@ -86,7 +91,7 @@ class HierarchicalLayout extends React.Component {
       organic.execute(parent);
     });
 
-    document.body.appendChild(button);
+    this.el2.appendChild(button);
 
     // Load cells and layouts the graph
     graph.getModel().beginUpdate();

src/pages/HoverIcons.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
 
-  Hover icons example for mxGraph. This example demonstrates showing
+  Hover icons. This example demonstrates showing
   icons on vertices as mouse hovers over them.
  */
 
@@ -23,7 +23,7 @@ class HoverIcons extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hover icons example for mxGraph</h1>
+        <h1>Hover icons</h1>
 
         <div
           ref={el => {
@@ -31,7 +31,6 @@ class HoverIcons extends React.Component {
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/HoverStyle.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Hoverstyle example for mxGraph. This example shows hot to change
+  Hoverstyle. This example shows hot to change
   the style of a vertex on mouseover.
  */
 
@@ -20,7 +20,7 @@ class HoverStyle extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hoverstyle example for mxGraph</h1>
+        <h1>Hoverstyle</h1>
         <div
           ref={el => {
             this.el = el;
@@ -28,7 +28,6 @@ class HoverStyle extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/HtmlLabel.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  HTML label example for mxGraph. This example demonstrates using
+  HTML label. This example demonstrates using
   HTML labels that are connected to the state of the user object.
  */
 
@@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>HTML label example for mxGraph</h1>
+        <h1>HTML label</h1>
 
         <div
           ref={el => {

src/pages/Images.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Images example for mxGraph. This example demonstrates using
+  Images. This example demonstrates using
   background images and images for for the label- and image-shape.
  */
 
@@ -24,7 +24,7 @@ class Images extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Images example for mxGraph</h1>
+        <h1>Images</h1>
         <div
           ref={el => {
             this.el = el;
@@ -32,7 +32,6 @@ class Images extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '360px',
             height: '200px',
             cursor: 'default',
           }}

src/pages/Indicators.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Indicators example for mxGraph. This example demonstrates the use of
+  Indicators. This example demonstrates the use of
   indicators, which are small subshapes inside a parent shape, typically
   an mxLabel.
  */
@@ -21,7 +21,7 @@ class Indicators extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Indicators example for mxGraph</h1>
+        <h1>Indicators</h1>
         <div
           ref={el => {
             this.el = el;

src/pages/JQuery.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  JQuery example for mxGraph. This example demonstrates using
+  JQuery. This example demonstrates using
   a JQuery plugin to generate labels for vertices on the fly.
  */
 

src/pages/JsonData.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
 
- JSON data example for mxGraph. This example demonstrates using
+ JSON data. This example demonstrates using
  JSON to encode/decode parts of the graph model in mxCodec.
  */
 
@@ -30,7 +30,7 @@ class JsonData extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>JSON data example for mxGraph</h1>
+        <h1>JSON data</h1>
         <div
           ref={el => {
             this.el = el;
@@ -38,7 +38,6 @@ class JsonData extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/LOD.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Level of detail example for mxGraph. This example demonstrates
+  Level of detail. This example demonstrates
   implementing a level of detail per cell.
  */
 
@@ -18,7 +18,7 @@ class LOD extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Level of detail example for mxGraph</h1>
+        <h1>Level of detail</h1>
         <div
           ref={el => {
             this.el = el;
@@ -26,7 +26,6 @@ class LOD extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '621px',
             height: '441px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/LabelPosition.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Label Position example for mxGraph. This example demonstrates the use of the
+  Label Position. This example demonstrates the use of the
   label position styles to set the position of vertex labels.
  */
 
@@ -17,7 +17,7 @@ class LabelPosition extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Label Position example for mxGraph</h1>
+        <h1>Label Position</h1>
         <div
           ref={el => {
             this.el = el;

src/pages/Labels.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Labels example for mxGraph. This example demonstrates the use of wrapping
+  Labels. This example demonstrates the use of wrapping
   and clipping for HTML labels of vertices, truncating labels to fit the
   size of a vertex, and manually placing vertex labels and relative children
   that act as "sublabels".
@@ -23,18 +23,15 @@ class Labels extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World! example for mxGraph</h1>
+        <h1>Hello, World!</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
-            position: 'absolute',
+            position: 'relative',
-            top: '0px',
-            left: '0px',
             overflow: 'hidden',
-            width: '100%',
+            height: '300px',
-            height: '100%',
             background: "url('editors/images/grid.gif')",
           }}
         />

src/pages/Layers.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Layers example for mxGraph. This example demonstrates using
+  Layers. This example demonstrates using
   multiple layers to contain cells.
  */
 
@@ -21,7 +21,7 @@ class Layers extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Layers example for mxGraph</h1>
+        <h1>Layers</h1>
         <div
           ref={el => {
             this.el = el;
@@ -29,11 +29,15 @@ class Layers extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -114,13 +118,13 @@ class Layers extends React.Component {
       model.endUpdate();
     }
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Layer 0', function() {
         model.setVisible(layer0, !model.isVisible(layer0));
       })
     );
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Layer 1', function() {
         model.setVisible(layer1, !model.isVisible(layer1));
       })

src/pages/Map.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Map example for mxGraph. This example demonstrates using
+  Map. This example demonstrates using
   a graph container as a Google Maps overlay.
  */
 
@@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Google maps example for mxGraph</h1>
+        <h1>Google maps</h1>
 
         <div
           ref={el => {

src/pages/Markers.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Markers example for mxGraph. This example demonstrates creating
+  Markers. This example demonstrates creating
   custom markers and customizing the built-in markers.
  */
 
@@ -24,7 +24,7 @@ class Markers extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Markers example for mxGraph</h1>
+        <h1>Markers</h1>
         <div
           ref={el => {
             this.el = el;
@@ -32,7 +32,6 @@ class Markers extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '641px',
             height: '381px',
             border: '1px solid gray',
             cursor: 'default',

src/pages/MenuStyle.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Menustyle example for mxGraph. This example demonstrates using
+  Menustyle. This example demonstrates using
   CSS to style the mxPopupMenu.
  */
 
@@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Menustyle example for mxGraph</h1>
+        <h1>Menustyle</h1>
 
         <div
           ref={el => {

src/pages/Merge.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Merge example for mxGraph. This example demonstrates using
+  Merge. This example demonstrates using
   the mergeChildren function to merge two graphs.
  */
 
@@ -20,7 +20,7 @@ class Merge extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Merge example for mxGraph</h1>
+        <h1>Merge</h1>
         <div
           ref={el => {
             this.el = el;

src/pages/Monitor.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Monitor example for mxGraph. This eample demonstrates using a
+  Monitor. This eample demonstrates using a
   graph to display the current state of a workflow.
  */
 
@@ -32,11 +32,15 @@ class Monitor extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '861px',
             height: '406px',
             cursor: 'default',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -92,7 +96,7 @@ class Monitor extends React.Component {
     codec.decode(doc.documentElement, graph.getModel());
 
     // Creates a button to invoke the refresh function
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Update', function(evt) {
         // XML is normally fetched from URL at server using mxUtils.get - this is a client-side
         // string with randomized states to demonstrate the idea of the workflow monitor

src/pages/Morph.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Morph example for mxGraph. This example demonstrates using
+  Morph. This example demonstrates using
   mxMorphing for simple cell animations.
  */
 
@@ -21,7 +21,7 @@ class Morph extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hello, World! example for mxGraph</h1>
+        <h1>Hello, World!</h1>
         <div
           ref={el => {
             this.el = el;
@@ -29,12 +29,16 @@ class Morph extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -68,7 +72,7 @@ class Morph extends React.Component {
 
     let mult = 1;
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Morph', function() {
         graph.clearSelection();
 

src/pages/OffPage.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Offpage example for mxGraph. This example demonstrates creating
+  Offpage. This example demonstrates creating
   offpage connectors in a graph and loading a new diagram on a
   single click.
  */
@@ -22,7 +22,7 @@ class OffPage extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Offpage connector example for mxGraph</h1>
+        <h1>Offpage connector</h1>
 
         <div
           ref={el => {

src/pages/OrgChart.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
 
-  Orgchart example for mxGraph. This example demonstrates using
+  Orgchart. This example demonstrates using
   automatic layouts, fit to page zoom and poster print (across
   multiple pages).
  */
@@ -34,7 +34,7 @@ class OrgChart extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Orgchart example for mxGraph</h1>
+        <h1>Orgchart</h1>
         <div
           ref={el => {
             this.el = el;

src/pages/Orthogonal.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Orthogonal example for mxGraph. This example demonstrates the use
+  Orthogonal. This example demonstrates the use
   of port constraints and orthogonal edge styles and handlers.
  */
 
@@ -26,7 +26,7 @@ class Orthogonal extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Orthogonal example for mxGraph</h1>
+        <h1>Orthogonal</h1>
         <div
           ref={el => {
             this.el = el;
@@ -34,7 +34,6 @@ class Orthogonal extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Overlays.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Overlays example for mxGraph. This example demonstrates cell
+  Overlays. This example demonstrates cell
   highlighting, overlays and handling click and double click
   events. See also: events.html for more event handling.
  */
@@ -23,7 +23,7 @@ class Overlays extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Overlays example for mxGraph</h1>
+        <h1>Overlays</h1>
         <div
           ref={el => {
             this.el = el;
@@ -31,7 +31,6 @@ class Overlays extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}

src/pages/PageBreaks.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Pagebreaks example for mxGraph. This example demonstrates using the
+  Pagebreaks. This example demonstrates using the
   pageBreaksVisible and preferPageSize switches and adding headers and
   footers to print output.
  */
@@ -23,7 +23,7 @@ class PageBreaks extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Pagebreaks example for mxGraph</h1>
+        <h1>Pagebreaks</h1>
 
         <div
           ref={el => {
@@ -32,12 +32,16 @@ class PageBreaks extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '641px',
             height: '481px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -90,26 +94,26 @@ class PageBreaks extends React.Component {
       graph.getModel().endUpdate();
     }
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Toggle Page Breaks', function(evt) {
         graph.pageBreaksVisible = !graph.pageBreaksVisible;
         graph.sizeDidChange();
       })
     );
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Zoom In', function(evt) {
         graph.zoomIn();
       })
     );
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Zoom Out', function(evt) {
         graph.zoomOut();
       })
     );
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Print', function(evt) {
         // Matches actual printer paper size and avoids blank pages
         const scale = 0.5;
@@ -172,7 +176,7 @@ class PageBreaks extends React.Component {
       })
     );
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Reset View', function(evt) {
         graph.view.scaleAndTranslate(0.15, 0, 0);
       })

src/pages/Perimeter.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Perimeter example for mxGraph. This example demonstrates how to
+  Perimeter. This example demonstrates how to
   avoid edge and label intersections.
  */
 
@@ -21,7 +21,7 @@ class Perimeter extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Perimeter example for mxGraph</h1>
+        <h1>Perimeter</h1>
         <div
           ref={el => {
             this.el = el;
@@ -29,7 +29,6 @@ class Perimeter extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Permissions.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
 
- Hello, World! example for mxGraph. This example demonstrates creating
+ Hello, World!. This example demonstrates creating
  permissions to define the available operations a the graph.
  */
 
@@ -35,13 +35,18 @@ class Permissions extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Permissions example for mxGraph</h1>
+        <h1>Permissions</h1>
 
         <div
           ref={el => {
             this.el = el;
           }}
-          style={{}}
+          style={{
+            position: 'relative',
+            overflow: 'hidden',
+            height: '300px',
+            //background: "url('editors/images/grid.gif')",
+          }}
         />
       </>
     );

src/pages/PortRefs.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Portsrefs example for mxGraph. This example demonstrates referencing
+  Portsrefs. This example demonstrates referencing
   connection points by ID. The main difference to the implementation
   where the connection point is stored in the connecting edge is that
   changes to the original port will be reflected in all existing
@@ -39,7 +39,6 @@ class PortRefs extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Ports.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Ports example for mxGraph. This example demonstrates implementing
+  Ports. This example demonstrates implementing
   ports as child vertices with relative positions and drag and drop
   as well as the use of images and HTML in cells.
  */
@@ -11,7 +11,7 @@ import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
 
-class MYNAMEHERE extends React.Component {
+class Ports extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -39,7 +39,7 @@ class MYNAMEHERE extends React.Component {
   };
 }
 
-export default MYNAMEHERE;
+export default Ports;
 
 
 

src/pages/RadialTreeLayout.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2014, JGraph Ltd
   
-  Hierarchical Layout example for mxGraph. This example demonstrates the
+  Hierarchical Layout. This example demonstrates the
   use of the hierarchical and organic layouts. Note that the hierarchical
   layout requires another script tag in the head of the page.
  */
@@ -22,7 +22,7 @@ class RadialTreeLayout extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Hierarchical Layout example for mxGraph</h1>
+        <h1>Hierarchical Layout</h1>
         <div
           ref={el => {
             this.el = el;
@@ -31,7 +31,6 @@ class RadialTreeLayout extends React.Component {
             position: 'relative',
             overflow: 'auto',
             height: '800px',
-            width: '1000px',
             borderTop: 'gray 1px solid',
           }}
         />

src/pages/Resources.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2018, JGraph Ltd
   
-  Resources example for mxGraph. This example demonstrates disabling the Synchronous
+  Resources. This example demonstrates disabling the Synchronous
   XMLHttpRequest on main thread warning.
  */
 
@@ -20,7 +20,7 @@ class Resources extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Resources example for mxGraph</h1>
+        <h1>Resources</h1>
 
         <div
           ref={el => {
@@ -29,7 +29,6 @@ class Resources extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Schema.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Schema example for mxGraph. This example demonstrates implementing
+  Schema. This example demonstrates implementing
   a SQL schema editor.
  */
 

src/pages/Scrollbars.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2015, JGraph Ltd
   
-  Scrollbars example for mxGraph. This example demonstrates using
+  Scrollbars. This example demonstrates using
   a scrollable table with different sections in a cell label.
  */
 
@@ -19,7 +19,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Scrollbars example for mxGraph</h1>
+        <h1>Scrollbars</h1>
 
         <div
           ref={el => {

src/pages/SecondLabel.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
 
- Second label example for mxGraph. This example demonstrates how to
+ Second label. This example demonstrates how to
  add another string label to vertices.
  */
 
@@ -23,7 +23,7 @@ class SecondLabel extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Second label example for mxGraph</h1>
+        <h1>Second label</h1>
 
         <div
           ref={el => {
@@ -32,11 +32,15 @@ class SecondLabel extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -221,21 +225,19 @@ class SecondLabel extends React.Component {
     }
 
     // Adds a button to execute the layout
-    document.body.insertBefore(
+    this.el2.appendChild(
       mxUtils.button('Toggle Child Vertices', function(evt) {
         relativeChildVerticesVisible = !relativeChildVerticesVisible;
         graph.refresh();
-      }),
+      })
-      document.body.firstChild
     );
 
     // Adds a button to execute the layout
-    document.body.insertBefore(
+    this.el2.appendChild(
       mxUtils.button('Toggle IDs', function(evt) {
         secondLabelVisible = !secondLabelVisible;
         graph.refresh();
-      }),
+      })
-      document.body.firstChild
     );
   }
 }

src/pages/ServerView.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Server-View example for mxGraph. This example demonstrates using
+  Server-View. This example demonstrates using
   a server-side image of the graph as the diagram in the client. This
   may be used to improve drawing-speed in older browser and on devices
   with slower processors.

src/pages/Shape.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Shape example for mxGraph. This example demonstrates how to
+  Shape. This example demonstrates how to
   implement and use a custom shape.
  */
 
@@ -20,7 +20,7 @@ class Shape extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Shape example for mxGraph</h1>
+        <h1>Shape</h1>
 
         <div
           ref={el => {
@@ -28,7 +28,6 @@ class Shape extends React.Component {
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}

src/pages/ShowRegion.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Showregion example for mxGraph. This example demonstrates using a custom
+  Showregion. This example demonstrates using a custom
   rubberband handler to show the selected region in a new window.
  */
 
@@ -9,6 +9,10 @@ import React from 'react';
 import mxEvent from '../mxgraph/util/mxEvent';
 import mxGraph from '../mxgraph/view/mxGraph';
 import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxConstants from "../mxgraph/util/mxConstants";
+import mxPopupMenu from "../mxgraph/util/mxPopupMenu";
+import mxRectangle from "../mxgraph/util/mxRectangle";
+import mxUtils from "../mxgraph/util/mxUtils";
 
 class MYNAMEHERE extends React.Component {
   constructor(props) {
@@ -19,7 +23,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Showregion example for mxGraph</h1>
+        <h1>Showregion</h1>
 
         <div
           ref={el => {
@@ -90,7 +94,7 @@ export default MYNAMEHERE;
       else
       {
         // Disables built-in context menu
-        mxEvent.disableContextMenu(document.body);
+        mxEvent.disableContextMenu(this.el);
 
         // Changes some default colors
         mxConstants.HANDLE_FILLCOLOR = '#99ccff';

src/pages/Stencils.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Stencils example for mxGraph. This example demonstrates using
+  Stencils. This example demonstrates using
   an XML file to define new stencils to be used as shapes. See
   docs/stencils.xsd for the XML schema file.
  */
@@ -31,7 +31,7 @@ class Stencils extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Stencils example for mxGraph</h1>
+        <h1>Stencils</h1>
         <div
           ref={el => {
             this.el = el;
@@ -39,7 +39,6 @@ class Stencils extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '601px',
             height: '401px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Stylesheet.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Stylesheet example for mxGraph. This example demonstrates using
+  Stylesheet. This example demonstrates using
   a custom stylesheet and control points in edges, as well as
   overriding the getLabel and getTooltip function to return
   dynamic information, and making a supercall in JavaScript.
@@ -22,7 +22,7 @@ class Stylesheet extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Stylesheet example for mxGraph</h1>
+        <h1>Stylesheet</h1>
         <div
           ref={el => {
             this.el = el;
@@ -30,7 +30,6 @@ class Stylesheet extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '621px',
             height: '311px',
             cursor: 'default',
           }}

src/pages/SwimLanes.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Swimlanes example for mxGraph. This example demonstrates using
+  Swimlanes. This example demonstrates using
   swimlanes for pools and lanes and adding cells and edges between
   them. This also demonstrates using the stack layout as an
   automatic layout.
@@ -33,8 +33,7 @@ class SwimLanes extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Swimlanes example for mxGraph</h1>
+        <h1>Swimlanes</h1>
-
         <div
           ref={el => {
             this.el = el;
@@ -42,7 +41,6 @@ class SwimLanes extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '600px',
             height: '400px',
             border: 'gray dotted 1px',
             cursor: 'default',

src/pages/Template.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Template example for mxGraph. This is used as a template HTML file by the
+  Template. This is used as a template HTML file by the
   backends to demonstrate the deployment of the client with a graph embedded
   in the page as XML data (see graph variable in the onload-handler).
   
@@ -31,7 +31,6 @@ class Template extends React.Component {
           style={{
             overflow: 'hidden',
             position: 'relative',
-            width: '321px',
             height: '241px',
             background: "url('/mxgraph/javascript/examples/editors/images/grid.gif')",
             cursor: 'default'

src/pages/Thread.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Thread example for mxGraph. This example demonstrates setting
+  Thread. This example demonstrates setting
   overlays in mxGraph from within a timed function.
  */
 
@@ -17,14 +17,13 @@ class Thread extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Thread example for mxGraph</h1>
+        <h1>Thread</h1>
         <div
           ref={el => {
             this.el = el;
           }}
           style={{
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
           }}

src/pages/Toolbar.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Toolbar example for mxGraph. This example demonstrates using
+  Toolbar. This example demonstrates using
   existing cells as templates for creating new cells.
  */
 
@@ -27,7 +27,7 @@ class Toolbar extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Toolbar example for mxGraph</h1>
+        <h1>Toolbar</h1>
 
         <div
           ref={el => {
@@ -36,12 +36,16 @@ class Toolbar extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '600px',
             height: '400px',
             border: 'gray dotted 1px',
             cursor: 'default',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -160,11 +164,7 @@ class Toolbar extends React.Component {
       }
     );
 
-    button.style.position = 'absolute';
+    this.el2.appendChild(button);
-    button.style.left = '2px';
-    button.style.top = '2px';
-
-    document.body.appendChild(button);
   }
 
   addToolbarItem(graph, toolbar, prototype, image) {

src/pages/Touch.js

@@ -2,7 +2,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  Touch example for mxGraph. This example demonstrates handling of touch,
+  Touch. This example demonstrates handling of touch,
   mouse and pointer events.
  */
 
@@ -20,7 +20,7 @@ class MYNAMEHERE extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Touch example for mxGraph</h1>
+        <h1>Touch</h1>
 
         <div
           ref={el => {

src/pages/Tree.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Tree example for mxGraph. This example demonstrates folding
+ * Tree. This example demonstrates folding
  * of subtrees in a acyclic graph (tree).
  */
 
@@ -30,7 +30,7 @@ class Tree extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Tree example for mxGraph</h1>
+        <h1>Tree</h1>
 
         <div
           ref={el => {
@@ -39,7 +39,6 @@ class Tree extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '500px',
             height: '400px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default'

src/pages/UIConfig.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  UIConfig example for mxGraph. This example demonstrates using a config
+  UIConfig. This example demonstrates using a config
   file to configure the toolbar and popup menu in mxEditor.
  */
 

src/pages/UserObject.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
   
-  User object example for mxGraph. This example demonstrates using
+  User object. This example demonstrates using
   XML objects as values for cells.
  */
 
@@ -26,7 +26,7 @@ class UserObject extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>User object example for mxGraph</h1>
+        <h1>User object</h1>
 
         <table style={{
           position: 'relative'
@@ -38,7 +38,6 @@ class UserObject extends React.Component {
                 style={{
                   border: 'solid 1px black',
                   overflow: 'hidden',
-                  width: '321px',
                   height: '241px',
                   cursor: 'default'
                 }}
@@ -55,6 +54,10 @@ class UserObject extends React.Component {
             </td>
           </tr>
         </table>
+
+        <div
+          ref={el => {this.el2 = el;}}
+        />
       </>
     );
   }
@@ -179,7 +182,7 @@ class UserObject extends React.Component {
     new mxRubberband(graph);
 
     // Adds an option to view the XML of the graph
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('View XML', function() {
         const encoder = new mxCodec();
         const node = encoder.encode(graph.getModel());

src/pages/Validation.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Validation example for mxGraph. This example demonstrates using
+ * Validation. This example demonstrates using
  * multiplicities for automatically validating a graph.
  */
 
@@ -23,7 +23,7 @@ class Validation extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Validation example for mxGraph</h1>
+        <h1>Validation</h1>
 
         <div
           ref={el => {
@@ -32,7 +32,6 @@ class Validation extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '281px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',

src/pages/Visibility.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Visible example for mxGraph. This example demonstrates using
+ * Visible. This example demonstrates using
  * various solutions for hiding and showing cells.
  */
 
@@ -19,7 +19,7 @@ class Visibility extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Visibility example for mxGraph</h1>
+        <h1>Visibility</h1>
         <div
           ref={el => {
             this.el = el;
@@ -27,12 +27,16 @@ class Visibility extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '321px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',
           }}
         />
+        <div
+          ref={el => {
+            this.el2 = el;
+          }}
+        />
       </>
     );
   }
@@ -79,19 +83,19 @@ class Visibility extends React.Component {
     }
 
     // Dynamic conditions (requires refresh)
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Cond 1', function() {
         showOne = !showOne;
         graph.refresh();
       })
     );
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Cond 2', function() {
         showTwo = !showTwo;
         graph.refresh();
       })
     );
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Cond 3', function() {
         showThree = !showThree;
         graph.refresh();
@@ -99,7 +103,7 @@ class Visibility extends React.Component {
     );
 
     // Explicit show/hide
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Toggle cell', function() {
         graph.toggleCells(!graph.getModel().isVisible(v1), [v1], true);
       })
@@ -108,7 +112,7 @@ class Visibility extends React.Component {
     // Explicit remove/add
     let removed = null;
 
-    document.body.appendChild(
+    this.el2.appendChild(
       mxUtils.button('Add/remove cell', function() {
         if (removed != null) {
           graph.addCells(removed);

src/pages/Windows.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Windows example for mxGraph. This example demonstrates using
+ * Windows. This example demonstrates using
  * the mxWindow class for displaying windows.
  */
 
@@ -23,7 +23,7 @@ class Windows extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Windows example for mxGraph</h1>
+        <h1>Windows</h1>
         <div
           ref={el => {
             this.el = el;
@@ -31,7 +31,6 @@ class Windows extends React.Component {
           style={{
             overflow: 'auto',
             position: 'relative',
-            width: '500px',
             height: '500px',
             background: 'lightyellow',
             cursor: 'default',

src/pages/Wrapping.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2006-2013, JGraph Ltd
  *
- * Wrapping example for mxGraph. This example demonstrates using HTML markup and
+ * Wrapping. This example demonstrates using HTML markup and
  * word-wrapping in vertex and edge labels.
  */
 
@@ -17,7 +17,7 @@ class Wrapping extends React.Component {
     // A container for the graph
     return (
       <>
-        <h1>Wrapping example for mxGraph</h1>
+        <h1>Wrapping</h1>
 
         <div
           ref={el => {
@@ -26,7 +26,6 @@ class Wrapping extends React.Component {
           style={{
             position: 'relative',
             overflow: 'hidden',
-            width: '341px',
             height: '241px',
             background: "url('editors/images/grid.gif')",
             cursor: 'default',