moved example descriptions into example controls

src/pages/Control.js

@@ -22,9 +22,7 @@ class Control extends React.Component {
     return (
       <>
         <h1>Control</h1>
-        This example demonstrates adding
-        controls to specific cells in a graph.
-
+        This example demonstrates adding controls to specific cells in a graph.
         <div
           ref={el => {
             this.el = el;
@@ -46,10 +44,6 @@ class Control 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',
@@ -57,10 +51,9 @@ class Control extends React.Component {
       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);
+    class MyCustomCellRenderer extends mxCellRenderer {
+      createControl(state) {
+        super.createControl(state);
 
         const { graph } = state.view;
 
@@ -87,10 +80,10 @@ class Control extends React.Component {
           state.deleteControl.destroy();
           state.deleteControl = null;
         }
-    };
+      }
 
+      getDeleteControlBounds(state) {
         // 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;
@@ -111,17 +104,15 @@ class Control extends React.Component {
                 h * s
               );
         }
-
         return null;
-    };
+      }
 
+      redrawControl(state) {
         // Overridden to update the scale and bounds of the control
-    const mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;
-    mxCellRenderer.prototype.redrawControl = function(state) {
-      mxCellRendererRedrawControl.apply(this, arguments);
+        super.redrawControl(state);
 
         if (state.deleteControl != null) {
-        const bounds = getDeleteControlBounds(state);
+          const bounds = this.getDeleteControlBounds(state);
           const s = state.view.scale;
 
           if (
@@ -133,18 +124,28 @@ class Control extends React.Component {
             state.deleteControl.redraw();
           }
         }
-    };
+      }
 
+      destroy(state) {
         // Overridden to remove the control if the state is destroyed
-    const mxCellRendererDestroy = mxCellRenderer.prototype.destroy;
-    mxCellRenderer.prototype.destroy = function(state) {
-      mxCellRendererDestroy.apply(this, arguments);
+        super.destroy(state);
 
         if (state.deleteControl != null) {
           state.deleteControl.destroy();
           state.deleteControl = null;
         }
-    };
+      }
+    }
+
+    class MyCustomGraph extends mxGraph {
+      createCellRenderer() {
+        return new MyCustomCellRenderer();
+      }
+    }
+
+    // Creates the graph inside the given container
+    const graph = new MyCustomGraph(this.el);
+    graph.setPanning(true);
 
     // Uncomment the following if you want the container
     // to fit the size of the graph