- Removed mxUtils.bind().

packages/core/src/editor/mxDefaultToolbar.js

@@ -104,11 +104,11 @@ class mxDefaultToolbar {
       });
 
       // Resets the selected tool after a doubleclick or escape keystroke
-      this.resetHandler = mxUtils.bind(this, () => {
+      this.resetHandler = () => {
         if (this.toolbar != null) {
           this.toolbar.resetMode(true);
         }
-      });
+      };
 
       this.editor.graph.addListener(mxEvent.DOUBLE_CLICK, this.resetHandler);
       this.editor.addListener(mxEvent.ESCAPE, this.resetHandler);
@@ -176,9 +176,9 @@ class mxDefaultToolbar {
    */
   // addActionOption(combo: HTMLElement, title: string, action: string): void;
   addActionOption(combo, title, action) {
-    const clickHandler = mxUtils.bind(this, () => {
+    const clickHandler = () => {
       this.editor.execute(action);
-    });
+    };
 
     this.addOption(combo, title, clickHandler);
   }
@@ -241,7 +241,7 @@ class mxDefaultToolbar {
   addPrototype(title, icon, ptype, pressed, insert, toggle) {
     // Creates a wrapper function that is in charge of constructing
     // the new cell instance to be inserted into the graph
-    const factory = mxUtils.bind(this, () => {
+    const factory = () => {
       if (typeof ptype === 'function') {
         return ptype();
       }
@@ -250,7 +250,7 @@ class mxDefaultToolbar {
       }
 
       return null;
-    });
+    };
 
     // Defines the function for a click event on the graph
     // after this item has been selected in the toolbar
@@ -428,7 +428,7 @@ class mxDefaultToolbar {
     sprite.setAttribute('src', img.getAttribute('src'));
 
     // Handles delayed loading of the images
-    const loader = mxUtils.bind(this, evt => {
+    const loader = evt => {
       // Preview uses the image node with double size. Later this can be
       // changed to use a separate preview and guides, but for this the
       // dropHandler must use the additional x- and y-arguments and the
@@ -439,7 +439,7 @@ class mxDefaultToolbar {
 
       makeDraggable(img, this.editor.graph, dropHandler, sprite);
       mxEvent.removeListener(sprite, 'load', loader);
-    });
+    };
   }
 
   /**

packages/core/src/editor/mxEditor.js

@@ -1529,9 +1529,9 @@ class mxEditor extends mxEventSource {
   createSwimlaneManager(graph) {
     const swimlaneMgr = new mxSwimlaneManager(graph, false);
 
-    swimlaneMgr.isHorizontal = mxUtils.bind(this, () => {
+    swimlaneMgr.isHorizontal = () => {
       return this.horizontalFlow;
-    });
+    };
 
     swimlaneMgr.isEnabled = () => {
       return this.maintainSwimlanes;
@@ -1621,15 +1621,15 @@ class mxEditor extends mxEventSource {
     // Installs a listener for double click events
     graph.addListener(
       mxEvent.DOUBLE_CLICK,
-      mxUtils.bind(this, (sender, evt) => {
+      (sender, evt) => {
         const cell = evt.getProperty('cell');
 
         if (cell != null && graph.isEnabled() && this.dblClickAction != null) {
           this.execute(this.dblClickAction, cell);
           evt.consume();
         }
-      })
-    );
+      }
+    )
   }
 
   /**
@@ -1662,9 +1662,9 @@ class mxEditor extends mxEventSource {
    */
   // installDrillHandler(graph: any): void;
   installDrillHandler(graph) {
-    const listener = mxUtils.bind(this, sender => {
+    const listener = sender => {
       this.fireEvent(new mxEventObject(mxEvent.ROOT));
-    });
+    };
 
     graph.getView().addListener(mxEvent.DOWN, listener);
     graph.getView().addListener(mxEvent.UP, listener);
@@ -1819,13 +1819,13 @@ class mxEditor extends mxEventSource {
       // when files are saved
       this.addListener(
         mxEvent.SAVE,
-        mxUtils.bind(this, () => {
+        () => {
           const tstamp = new Date().toLocaleString();
           this.setStatus(
             `${mxResources.get(this.lastSavedResource) ||
               this.lastSavedResource}: ${tstamp}`
           );
-        })
+        }
       );
 
       // Updates the statusbar to display the filename
@@ -1859,9 +1859,9 @@ class mxEditor extends mxEventSource {
   setTitleContainer(container) {
     this.addListener(
       mxEvent.ROOT,
-      mxUtils.bind(this, sender => {
+      sender => {
         container.innerHTML = this.getTitle();
-      })
+      }
     );
   }
 
@@ -2286,7 +2286,7 @@ class mxEditor extends mxEventSource {
 
       // Defines the function to be executed when the
       // OK button is pressed in the dialog
-      const okFunction = mxUtils.bind(this, () => {
+      const okFunction = () => {
         // Hides the dialog
         this.hideProperties();
 
@@ -2335,7 +2335,7 @@ class mxEditor extends mxEventSource {
         } finally {
           model.endUpdate();
         }
-      });
+      };
 
       // Defines the function to be executed when the
       // Cancel button is pressed in the dialog
@@ -2404,11 +2404,11 @@ class mxEditor extends mxEventSource {
       // Installs a function to update the contents
       // of the tasks window on every change of the
       // model, selection or root.
-      const funct = mxUtils.bind(this, sender => {
+      const funct = sender => {
         mxEvent.release(div);
         div.innerHTML = '';
         this.createTasks(div);
-      });
+      };
 
       this.graph.getModel().addListener(mxEvent.CHANGE, funct);
       this.graph.getSelectionModel().addListener(mxEvent.CHANGE, funct);

packages/core/src/handler/mxConnectionHandler.js

@@ -528,7 +528,7 @@ class mxConnectionHandler extends mxEventSource {
     this.constraintHandler = new mxConstraintHandler(this.graph);
 
     // Redraws the icons if the graph changes
-    this.changeHandler = mxUtils.bind(this, sender => {
+    this.changeHandler = sender => {
       if (this.iconState != null) {
         this.iconState = this.graph.getView().getState(this.iconState.cell);
       }
@@ -542,7 +542,7 @@ class mxConnectionHandler extends mxEventSource {
       ) {
         this.reset();
       }
-    });
+    };
 
     this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
     this.graph.getView().addListener(mxEvent.SCALE, this.changeHandler);

packages/core/src/handler/mxConstraintHandler.js

@@ -232,9 +232,9 @@ class mxConstraintHandler {
     if (this.isEnabled() && !this.isEventIgnored(me)) {
       // Lazy installation of mouseleave handler
       if (this.mouseleaveHandler == null && this.graph.container != null) {
-        this.mouseleaveHandler = mxUtils.bind(this, () => {
+        this.mouseleaveHandler = () => {
           this.reset();
-        });
+        };
 
         mxEvent.addListener(
           this.graph.container,
@@ -444,9 +444,9 @@ class mxConstraintHandler {
           );
         }
 
-        const getState = mxUtils.bind(this, () => {
+        const getState = () => {
           return this.currentFocus != null ? this.currentFocus : state;
-        });
+        };
 
         icon.redraw();
 

packages/core/src/handler/mxEdgeHandler.js

@@ -741,7 +741,7 @@ class mxEdgeHandler {
 
     if (this.graph.isCellBendable(cell)) {
       for (let i = 1; i < this.abspoints.length; i += 1) {
-        mxUtils.bind(this, bend => {
+        (bend => {
           this.initBend(bend);
           bend.setCursor(mxConstants.CURSOR_VIRTUAL_BEND_HANDLE);
           bends.push(bend);

packages/core/src/handler/mxGraphHandler.js

@@ -53,9 +53,9 @@ class mxGraphHandler {
     this.graph.addListener(mxEvent.PAN, this.panHandler);
 
     // Handles escape keystrokes
-    this.escapeHandler = mxUtils.bind(this, (sender, evt) => {
+    this.escapeHandler = (sender, evt) => {
       this.reset();
-    });
+    };
 
     this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
 
@@ -68,7 +68,7 @@ class mxGraphHandler {
 
       // Waits for the states and handlers to be updated
       this.refreshThread = window.setTimeout(
-        mxUtils.bind(this, () => {
+        () => {
           this.refreshThread = null;
 
           if (this.first != null && !this.suspended) {
@@ -101,7 +101,7 @@ class mxGraphHandler {
               }
             }
           }
-        }),
+        },
         0
       );
     };
@@ -679,14 +679,14 @@ class mxGraphHandler {
     const parent = this.graph.getDefaultParent();
     const model = this.graph.getModel();
 
-    const filter = mxUtils.bind(this, cell => {
+    const filter = cell => {
       return (
         this.graph.view.getState(cell) != null &&
         cell.isVertex() &&
         cell.getGeometry() != null &&
         !cell.getGeometry().relative
       );
-    });
+    };
 
     return this.graph.view.getCellStates(
       model.filterDescendants(filter, parent)
@@ -1250,7 +1250,7 @@ class mxGraphHandler {
 
       if (this.allCells != null) {
         this.allCells.visit(
-          mxUtils.bind(this, (key, state) => {
+          (key, state) => {
             const realState = this.graph.view.getState(state.cell);
 
             // Checks if cell was removed or replaced
@@ -1324,7 +1324,7 @@ class mxGraphHandler {
                 }
               }
             }
-          })
+          }
         );
       }
 

packages/core/src/handler/mxPanningHandler.js

@@ -66,7 +66,7 @@ class mxPanningHandler extends mxEventSource {
       );
 
       // Handles pinch gestures
-      this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
+      this.gestureHandler = (sender, eo) => {
         if (this.isPinchEnabled()) {
           const evt = eo.getProperty('event');
 
@@ -86,7 +86,7 @@ class mxPanningHandler extends mxEventSource {
             this.zoomGraph(evt);
           }
         }
-      });
+      };
 
       this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
 

packages/core/src/handler/mxPopupMenuHandler.js

@@ -110,9 +110,9 @@ class mxPopupMenuHandler extends mxPopupMenu {
     // the context menu
     mxEvent.addGestureListeners(
       this.div,
-      mxUtils.bind(this, evt => {
+       evt => {
         this.graph.tooltipHandler.hide();
-      })
+      }
     );
   }
 

packages/core/src/handler/mxRubberband.js

@@ -44,9 +44,9 @@ class mxRubberband {
       );
 
       // Repaints the marquee after autoscroll
-      this.panHandler = mxUtils.bind(this, () => {
+      this.panHandler = () => {
         this.repaint();
-      });
+      };
 
       this.graph.addListener(mxEvent.PAN, this.panHandler);
 
@@ -185,9 +185,9 @@ class mxRubberband {
       return me;
     }
 
-    this.dragHandler = mxUtils.bind(this, evt => {
+    this.dragHandler = evt => {
       this.mouseMove(this.graph, createMouseEvent(evt));
-    });
+    };
 
     this.dropHandler = evt => {
       this.mouseUp(this.graph, createMouseEvent(evt));

packages/core/src/handler/mxSelectionCellsHandler.js

@@ -201,12 +201,12 @@ class mxSelectionCellsHandler extends mxEventSource {
 
     // Destroys unused handlers
     oldHandlers.visit(
-      mxUtils.bind(this, (key, handler) => {
+      (key, handler) => {
         this.fireEvent(
           new mxEventObject(mxEvent.REMOVE, 'state', handler.state)
         );
         handler.destroy();
-      })
+      }
     );
 
     // Creates new handlers and updates parent highlight on existing handlers

packages/core/src/util/mxUtils.js

@@ -163,17 +163,6 @@ const mxUtils = {
     );
   },
 
-  /**
-   * Function: bind
-   *
-   * Returns a wrapper function that locks the execution scope of the given
-   * function to the specified scope. Inside funct, the "this" keyword
-   * becomes a reference to that scope.
-   */
-  bind: (scope, funct) => {
-    return funct.bind(scope);
-  },
-
   /**
    * Function: findNode
    *

packages/core/src/view/cell/mxCellEditor.ts

@@ -933,9 +933,9 @@ class mxCellEditor {
           state.style[mxConstants.STYLE_OVERFLOW] !== 'fill')
       ) {
         window.setTimeout(
-          mxUtils.bind(this, () => {
+          () => {
             this.resize();
-          }),
+          },
           0
         );
       }

packages/core/src/view/graph/mxGraph.ts

@@ -4145,7 +4145,7 @@ class mxGraph extends mxEventSource {
           // Disconnects edges which are not being removed
           const edges = this.getAllEdges([cells[i]]);
 
-          const disconnectTerminal = mxUtils.bind(this, (edge: mxCell, source: boolean) => {
+          const disconnectTerminal = (edge: mxCell, source: boolean) => {
             let geo = edge.getGeometry();
 
             if (geo != null) {
@@ -4200,7 +4200,7 @@ class mxGraph extends mxEventSource {
                 this.getModel().setTerminal(edge, null, source);
               }
             }
-          });
+          };
 
           for (let j = 0; j < edges.length; j++) {
             if (!dict.get(edges[j])) {
@@ -11549,7 +11549,7 @@ class mxGraph extends mxEventSource {
         }
 
         this.tapAndHoldThread = window.setTimeout(
-          mxUtils.bind(this, handler),
+          handler,
           this.tapAndHoldDelay
         );
         this.tapAndHoldValid = true;

packages/core/src/view/graph/mxOutline.ts

@@ -82,11 +82,11 @@ class mxOutline {
 
     // Do not repaint when suspended
     const outlineGraphModelChanged = this.outline.graphModelChanged;
-    this.outline.graphModelChanged = mxUtils.bind(this, (changes: any) => {
+    this.outline.graphModelChanged = (changes: any) => {
       if (!this.suspended && this.outline != null) {
         outlineGraphModelChanged.apply(this.outline, [changes]);
       }
-    });
+    };
 
     // Enable faster painting in SVG
     //const node = <SVGElement>this.outline.getView().getCanvas().parentNode;

packages/core/src/view/graph/mxPrintPreview.js

@@ -563,13 +563,13 @@ class mxPrintPreview {
             this.pageFormat.height,
             0,
             0,
-            mxUtils.bind(this, div => {
+            div => {
               this.addGraphFragment(-dx, -dy, this.scale, pageNum, div, clip);
 
               if (this.printBackgroundImage) {
                 this.insertBackgroundImage(div, -dx, -dy);
               }
-            }),
+            },
             pageNum
           );
 

packages/core/src/view/graph/mxSwimlaneManager.ts

@@ -37,17 +37,17 @@ class mxSwimlaneManager extends mxEventSource {
     this.addEnabled = addEnabled;
     this.resizeEnabled = resizeEnabled;
 
-    this.addHandler = mxUtils.bind(this, (sender: any, evt: mxEventObject) => {
+    this.addHandler = (sender: any, evt: mxEventObject) => {
       if (this.isEnabled() && this.isAddEnabled()) {
         this.cellsAdded(evt.getProperty('cells'));
       }
-    });
+    };
 
-    this.resizeHandler = mxUtils.bind(this, (sender: any, evt: mxEventObject) => {
+    this.resizeHandler = (sender: any, evt: mxEventObject) => {
       if (this.isEnabled() && this.isResizeEnabled()) {
         this.cellsResized(evt.getProperty('cells'));
       }
-    });
+    };
 
     this.setGraph(graph);
   }

packages/html/stories/Clipboard.stories.js

@@ -156,7 +156,7 @@ const Template = ({ label, ...args }) => {
   mxEvent.addListener(
     textInput,
     'copy',
-    mxUtils.bind(this, function(evt) {
+    (evt) => {
       if (graph.isEnabled() && !graph.isSelectionEmpty()) {
         copyCells(
           graph,
@@ -167,20 +167,20 @@ const Template = ({ label, ...args }) => {
         dx = 0;
         dy = 0;
       }
-    })
+    }
   );
 
   // Handles cut event by removing cells putting XML into text input
   mxEvent.addListener(
     textInput,
     'cut',
-    mxUtils.bind(this, function(evt) {
+    (evt) => {
       if (graph.isEnabled() && !graph.isSelectionEmpty()) {
         copyCells(graph, graph.removeCells());
         dx = -gs;
         dy = -gs;
       }
-    })
+    }
   );
 
   // Merges XML into existing graph and layers
@@ -315,9 +315,9 @@ const Template = ({ label, ...args }) => {
       } else {
         // Timeout for new value to appear
         window.setTimeout(
-          mxUtils.bind(this, function() {
+          () => {
             pasteText(textInput.value);
-          }),
+          },
           0
         );
       }

packages/html/stories/OrgChart.stories.js

@@ -309,9 +309,9 @@ const Template = ({ label, ...args }) => {
     overlay.align = mxConstants.ALIGN_CENTER;
     overlay.addListener(
       mxEvent.CLICK,
-      mxUtils.bind(this, function(sender, evt) {
+      (sender, evt) => {
         addChild(graph, cell);
-      })
+      }
     );
 
     graph.addCellOverlay(cell, overlay);
@@ -327,9 +327,9 @@ const Template = ({ label, ...args }) => {
       overlay.verticalAlign = mxConstants.ALIGN_TOP;
       overlay.addListener(
         mxEvent.CLICK,
-        mxUtils.bind(this, function(sender, evt) {
+        (sender, evt) => {
           deleteSubtree(graph, cell);
-        })
+        }
       );
 
       graph.addCellOverlay(cell, overlay);