started removing mxUtils.bind() calls in favor of ()=>{} style functions

examples/hovericons.html

@@ -39,8 +39,7 @@
 			img.style.top = (state.y + state.height) + 'px';
 			
 			mxEvent.addGestureListeners(img,
-				mxUtils.bind(this, function(evt)
+				(evt) => {
-				{
 					var s = graph.gridSize;
 					graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
 					mxEvent.consume(evt);
@@ -62,20 +61,18 @@
 			img.style.top = (state.y - 16) + 'px';
 			
 			mxEvent.addGestureListeners(img,
-				mxUtils.bind(this, function(evt)
+				(evt) => {
-				{
 					// Disables dragging the image
 					mxEvent.consume(evt);
-				})
+				}
 			);
 			
 			mxEvent.addListener(img, 'click',
-				mxUtils.bind(this, function(evt)
+				(evt) => {
-				{
 					graph.removeCells([state.cell]);
 					mxEvent.consume(evt);
 					this.destroy();
-				})
+				}
 			);
 			
 			state.view.graph.container.appendChild(img);

src/css/explorer.css

@@ -1,18 +0,0 @@
-div.mxTooltip {
-	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, 
-        Color='#A2A2A2', Positive='true');
-}
-div.mxPopupMenu {
-	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, 
-        Color='#C0C0C0', Positive='true');
-}
-div.mxWindow {
-	_filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, 
-        Color='#C0C0C0', Positive='true');
-}
-td.mxWindowTitle {
-	_height: 23px;
-}
-.mxDisabled {
-	filter:alpha(opacity=20) !important;
-}

src/js/editor/mxDefaultKeyHandler.js

@@ -95,9 +95,9 @@ class mxDefaultKeyHandler {
    * Default is false.
    */
   bindAction = (code, action, control) => {
-    let keyHandler = mxUtils.bind(this, () => {
+    let keyHandler = () => {
       this.editor.execute(action);
-    });
+    };
 
     if (control) {
       // Binds the function to control-down keycode

src/js/editor/mxDefaultToolbar.js

@@ -109,18 +109,18 @@ class mxDefaultToolbar {
 
       // Installs the insert function in the editor if an item is
       // selected in the toolbar
-      this.toolbar.addListener(mxEvent.SELECT, mxUtils.bind(this, (sender, evt) => {
+      this.toolbar.addListener(mxEvent.SELECT, (sender, evt) => {
         let funct = evt.getProperty('function');
 
         if (funct != null) {
-          this.editor.insertFunction = mxUtils.bind(this, () => {
+          this.editor.insertFunction = () => {
             funct.apply(this, arguments);
             this.toolbar.resetMode();
-          });
+          };
         } else {
           this.editor.insertFunction = null;
         }
-      }));
+      });
 
       // Resets the selected tool after a doubleclick or escape keystroke
       this.resetHandler = mxUtils.bind(this, () => {
@@ -148,12 +148,11 @@ class mxDefaultToolbar {
    * pressed - Optional URL of the icon for the pressed state.
    */
   addItem = (title, icon, action, pressed) => {
-    let clickHandler = mxUtils.bind(this, () => {
+    let clickHandler = () => {
       if (action != null && action.length > 0) {
         this.editor.execute(action);
       }
-    });
+    };
-
     return this.toolbar.addItem(title, icon, clickHandler, pressed);
   };
 
@@ -251,14 +250,13 @@ class mxDefaultToolbar {
    * selected.
    */
   addMode = (title, icon, mode, pressed, funct) => {
-    let clickHandler = mxUtils.bind(this, () => {
+    let clickHandler = () => {
       this.editor.setMode(mode);
 
       if (funct != null) {
         funct(this.editor);
       }
-    });
+    };
-
     return this.toolbar.addSwitchMode(title, icon, clickHandler, pressed);
   };
 
@@ -298,7 +296,7 @@ class mxDefaultToolbar {
 
     // Defines the function for a click event on the graph
     // after this item has been selected in the toolbar
-    let clickHandler = mxUtils.bind(this, (evt, cell) => {
+    let clickHandler = (evt, cell) => {
       if (typeof (insert) == 'function') {
         insert(this.editor, factory(), evt, cell);
       } else {
@@ -307,7 +305,7 @@ class mxDefaultToolbar {
 
       this.toolbar.resetMode();
       mxEvent.consume(evt);
-    });
+    };
 
     let img = this.toolbar.addMode(title, icon, clickHandler, pressed, null, toggle);
 

src/js/editor/mxEditor.js

@@ -1470,16 +1470,16 @@ class mxEditor extends mxEventSource {
     // Redirects the function for creating the
     // popupmenu items
     graph.popupMenuHandler.factoryMethod =
-        mxUtils.bind(this, (menu, cell, evt) => {
+        (menu, cell, evt) => {
           return this.createPopupMenu(menu, cell, evt);
-        });
+        };
 
     // Redirects the function for creating
     // new connections in the diagram
     graph.connectionHandler.factoryMethod =
-        mxUtils.bind(this, (source, target) => {
+        (source, target) => {
           return this.createEdge(source, target);
-        });
+        };
 
     // Maintains swimlanes and installs autolayout
     this.createSwimlaneManager(graph);
@@ -1500,9 +1500,9 @@ class mxEditor extends mxEventSource {
       return this.horizontalFlow;
     });
 
-    swimlaneMgr.isEnabled = mxUtils.bind(this, () => {
+    swimlaneMgr.isEnabled = () => {
       return this.maintainSwimlanes;
-    });
+    };
 
     return swimlaneMgr;
   };
@@ -1604,10 +1604,10 @@ class mxEditor extends mxEventSource {
    * Adds the <undoManager> to the graph model and the view.
    */
   installUndoHandler = (graph) => {
-    var listener = mxUtils.bind(this, (sender, evt) => {
+    var listener = (sender, evt) => {
       var edit = evt.getProperty('edit');
       this.undoManager.undoableEditHappened(edit);
-    });
+    };
 
     graph.getModel().addListener(mxEvent.UNDO, listener);
     graph.getView().addListener(mxEvent.UNDO, listener);
@@ -1644,7 +1644,7 @@ class mxEditor extends mxEventSource {
    * fires a <root> event.
    */
   installChangeHandler = (graph) => {
-    var listener = mxUtils.bind(this, (sender, evt) => {
+    var listener = (sender, evt) => {
       // Updates the modified state
       this.setModified(true);
 
@@ -1669,7 +1669,7 @@ class mxEditor extends mxEventSource {
           break;
         }
       }
-    });
+    };
 
     graph.getModel().addListener(mxEvent.CHANGE, listener);
   };
@@ -1790,10 +1790,10 @@ class mxEditor extends mxEventSource {
 
       // Updates the statusbar to display the filename
       // when new files are opened
-      this.addListener(mxEvent.OPEN, mxUtils.bind(this, () => {
+      this.addListener(mxEvent.OPEN, () => {
         this.setStatus((mxResources.get(this.currentFileResource) ||
             this.currentFileResource) + ': ' + this.filename);
-      }));
+      });
     }
   };
 
@@ -2042,10 +2042,10 @@ class mxEditor extends mxEventSource {
     }
 
     mxUtils.post(url, this.postParameterName + '=' + data,
-        mxUtils.bind(this, (req) => {
+        (req) => {
           this.fireEvent(new mxEventObject(mxEvent.POST,
               'request', req, 'url', url, 'data', data));
-        })
+        }
     );
   };
 
@@ -2297,10 +2297,10 @@ class mxEditor extends mxEventSource {
 
       // Defines the function to be executed when the
       // Cancel button is pressed in the dialog
-      var cancelFunction = mxUtils.bind(this, () => {
+      var cancelFunction = () => {
         // Hides the dialog
         this.hideProperties();
-      });
+      };
 
       form.addButtons(okFunction, cancelFunction);
 

src/js/handler/mxConnectionHandler.js

@@ -374,9 +374,9 @@ class mxConnectionHandler extends mxEventSource {
       this.init();
 
       // Handles escape keystrokes
-      this.escapeHandler = mxUtils.bind(this, (sender, evt) => {
+      this.escapeHandler = (sender, evt) => {
         this.reset();
-      });
+      };
 
       this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
     }
@@ -499,9 +499,9 @@ class mxConnectionHandler extends mxEventSource {
     this.graph.getView().addListener(mxEvent.SCALE_AND_TRANSLATE, this.changeHandler);
 
     // Removes the icon if we step into/up or start editing
-    this.drillHandler = mxUtils.bind(this, (sender) => {
+    this.drillHandler = (sender) => {
       this.reset();
-    });
+    };
 
     this.graph.addListener(mxEvent.START_EDITING, this.drillHandler);
     this.graph.getView().addListener(mxEvent.DOWN, this.drillHandler);
@@ -579,31 +579,30 @@ class mxConnectionHandler extends mxEventSource {
     });
 
     // Sets the highlight color according to validateConnection
-    marker.isValidState = mxUtils.bind(this, (state) => {
+    marker.isValidState = (state) => {
       if (this.isConnecting()) {
         return this.error == null;
       } else {
         return isValidState.apply(marker, arguments);
       }
-    });
+    };
 
     // Overrides to use marker color only in highlight mode or for
     // target selection
     marker.getMarkerColor = mxUtils.bind(this, (evt, state, isValid) => {
       return (this.connectImage == null || this.isConnecting()) ?
-          getMarkerColor.apply(marker, arguments) :
+          super.getMarkerColor(evt, state, isValid) :
           null;
     });
 
     // Overrides to use hotspot only for source selection otherwise
     // intersects always returns true when over a cell
-    marker.intersects = mxUtils.bind(this, (state, evt) => {
+    marker.intersects = (state, evt) => {
       if (this.connectImage != null || this.isConnecting()) {
         return true;
       }
-
+      return super.intersects(state, evt);
-      return intersects.apply(marker, arguments);
+    };
-    });
 
     return marker;
   };
@@ -759,18 +758,18 @@ class mxConnectionHandler extends mxEventSource {
       icon.node.style.cursor = mxConstants.CURSOR_CONNECT;
 
       // Events transparency
-      var getState = mxUtils.bind(this, () => {
+      var getState = () => {
         return (this.currentState != null) ? this.currentState : state;
-      });
+      };
 
       // Updates the local icon before firing the mouse down event.
-      var mouseDown = mxUtils.bind(this, (evt) => {
+      var mouseDown = (evt) => {
         if (!mxEvent.isConsumed(evt)) {
           this.icon = icon;
           this.graph.fireMouseEvent(mxEvent.MOUSE_DOWN,
               new mxMouseEvent(evt, getState()));
         }
-      });
+      };
 
       mxEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown);
 

src/js/handler/mxConstraintHandler.js

@@ -54,13 +54,13 @@ class mxConstraintHandler {
     this.graph = graph;
 
     // Adds a graph model listener to update the current focus on changes
-    this.resetHandler = mxUtils.bind(this, (sender, evt) => {
+    this.resetHandler = (sender, evt) => {
       if (this.currentFocus != null && this.graph.view.getState(this.currentFocus.cell) == null) {
         this.reset();
       } else {
         this.redraw();
       }
-    });
+    };
 
     this.graph.model.addListener(mxEvent.CHANGE, this.resetHandler);
     this.graph.view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.resetHandler);
@@ -292,9 +292,9 @@ class mxConstraintHandler {
               hl.init(this.graph.getView().getOverlayPane());
               this.focusHighlight = hl;
 
-              var getState = mxUtils.bind(this, () => {
+              var getState = () => {
                 return (this.currentFocus != null) ? this.currentFocus : state;
-              });
+              };
 
               mxEvent.redirectMouseEvents(hl.node, this.graph, getState);
             }

src/js/handler/mxEdgeHandler.js

@@ -233,14 +233,14 @@ class mxEdgeHandler {
       this.init();
 
       // Handles escape keystrokes
-      this.escapeHandler = mxUtils.bind(this, (sender, evt) => {
+      this.escapeHandler = (sender, evt) => {
         var dirty = this.index != null;
         this.reset();
 
         if (dirty) {
           this.graph.cellRenderer.redraw(this.state, false, state.view.isRendering());
         }
-      });
+      };
 
       this.state.view.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
     }
@@ -554,13 +554,13 @@ class mxEdgeHandler {
         var terminal = source || target;
 
         if (terminal || this.graph.isCellBendable(cell)) {
-          (mxUtils.bind(this, (index) => {
+          ((index) => {
             var bend = this.createHandleShape(index);
-            this.initBend(bend, mxUtils.bind(this, mxUtils.bind(this, () => {
+            this.initBend(bend, () => {
               if (this.dblClickRemoveEnabled) {
                 this.removePoint(this.state, index);
               }
-            })));
+            });
 
             if (this.isHandleEnabled(i)) {
               bend.setCursor((terminal) ? mxConstants.CURSOR_TERMINAL_HANDLE : mxConstants.CURSOR_BEND_HANDLE);
@@ -572,7 +572,7 @@ class mxEdgeHandler {
               this.points.push(new mxPoint(0, 0));
               bend.node.style.visibility = 'hidden';
             }
-          }))(i);
+          })(i);
         }
       }
     }

src/js/handler/mxElbowEdgeHandler.js

@@ -55,12 +55,12 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
     bends.push(bend);
 
     // Virtual
-    bends.push(this.createVirtualBend(mxUtils.bind(this, (evt) => {
+    bends.push(this.createVirtualBend((evt) => {
       if (!mxEvent.isConsumed(evt) && this.flipEnabled) {
         this.graph.flipEdge(this.state.cell, evt);
         mxEvent.consume(evt);
       }
-    })));
+    }));
 
     this.points.push(new mxPoint(0, 0));
 

src/js/handler/mxGraphHandler.js

@@ -220,12 +220,12 @@ class mxGraphHandler {
     this.graph.addMouseListener(this);
 
     // Repaints the handler after autoscroll
-    this.panHandler = mxUtils.bind(this, () => {
+    this.panHandler = () => {
       if (!this.suspended) {
         this.updatePreview();
         this.updateHint();
       }
-    });
+    };
 
     this.graph.addListener(mxEvent.PAN, this.panHandler);
 
@@ -237,7 +237,7 @@ class mxGraphHandler {
     this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
 
     // Updates the preview box for remote changes
-    this.refreshHandler = mxUtils.bind(this, (sender, evt) => {
+    this.refreshHandler = (sender, evt) => {
       // Merges multiple pending calls
       if (this.refreshThread) {
         window.clearTimeout(this.refreshThread);
@@ -275,12 +275,12 @@ class mxGraphHandler {
           }
         }
       }), 0);
-    });
+    };
 
     this.graph.getModel().addListener(mxEvent.CHANGE, this.refreshHandler);
     this.graph.addListener(mxEvent.REFRESH, this.refreshHandler);
 
-    this.keyHandler = mxUtils.bind(this, (e) => {
+    this.keyHandler = (e) => {
       if (this.graph.container != null && this.graph.container.style.visibility != 'hidden' &&
           this.first != null && !this.suspended) {
         var clone = this.graph.isCloneEvent(e) &&
@@ -293,7 +293,7 @@ class mxGraphHandler {
           this.updatePreview();
         }
       }
-    });
+    };
 
     mxEvent.addListener(document, 'keydown', this.keyHandler);
     mxEvent.addListener(document, 'keyup', this.keyHandler);
@@ -762,7 +762,7 @@ class mxGraphHandler {
         }
       }
 
-      this.guide.isStateIgnored = mxUtils.bind(this, (state) => {
+      this.guide.isStateIgnored = (state) => {
         var p = this.graph.model.getParent(state.cell);
 
         return state.cell != null && ((!this.cloning &&
@@ -771,7 +771,7 @@ class mxGraphHandler {
                 !connected.get(state) &&
                 (this.target == null || this.graph.model.getChildCount(
                     this.target) >= 2) && p != (this.target || parent)));
-      });
+      };
     }
   };
 
@@ -1291,7 +1291,7 @@ class mxGraphHandler {
    */
   resetLivePreview = () => {
     if (this.allCells != null) {
-      this.allCells.visit(mxUtils.bind(this, (key, state) => {
+      this.allCells.visit((key, state) => {
         // Restores event handling
         if (state.shape != null && state.shape.originalPointerEvents != null) {
           state.shape.pointerEvents = state.shape.originalPointerEvents;
@@ -1321,7 +1321,7 @@ class mxGraphHandler {
 
         // Forces repaint of connected edges
         state.view.invalidate(state.cell);
-      }));
+      });
 
       // Repaints all invalid states
       this.graph.view.validate();

src/js/handler/mxKeyHandler.js

@@ -126,9 +126,9 @@ class mxKeyHandler {
       this.controlKeys = [];
       this.controlShiftKeys = [];
 
-      this.keydownHandler = mxUtils.bind(this, (evt) => {
+      this.keydownHandler = (evt) => {
         this.keyDown(evt);
-      });
+      };
 
       // Installs the keystroke listener in the target
       mxEvent.addListener(this.target, 'keydown', this.keydownHandler);

src/js/handler/mxPanningHandler.js

@@ -145,7 +145,7 @@ class mxPanningHandler extends mxEventSource {
       this.graph.addMouseListener(this);
 
       // Handles force panning event
-      this.forcePanningHandler = mxUtils.bind(this, (sender, evt) => {
+      this.forcePanningHandler = (sender, evt) => {
         var evtName = evt.getProperty('eventName');
         var me = evt.getProperty('event');
 
@@ -155,7 +155,7 @@ class mxPanningHandler extends mxEventSource {
           this.fireEvent(new mxEventObject(mxEvent.PAN_START, 'event', me));
           me.consume();
         }
-      });
+      };
 
       this.graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.forcePanningHandler);
 
@@ -184,11 +184,11 @@ class mxPanningHandler extends mxEventSource {
 
       this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
 
-      this.mouseUpListener = mxUtils.bind(this, () => {
+      this.mouseUpListener = () => {
         if (this.active) {
           this.reset();
         }
-      });
+      };
 
       // Stops scrolling on every mouseup anywhere in the document
       mxEvent.addListener(document, 'mouseup', this.mouseUpListener);

src/js/handler/mxPopupMenuHandler.js

@@ -66,7 +66,7 @@ class mxPopupMenuHandler extends mxPopupMenu {
    * Constructs an event handler that creates a <mxPopupMenu>.
    */
   constructor(graph, factoryMethod) {
-    //super();
+    super();
 
     if (graph != null) {
       this.graph = graph;
@@ -74,9 +74,9 @@ class mxPopupMenuHandler extends mxPopupMenu {
       this.graph.addMouseListener(this);
 
       // Does not show menu if any touch gestures take place after the trigger
-      this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
+      this.gestureHandler = (sender, eo) => {
         this.inTolerance = false;
-      });
+      };
 
       this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
 

src/js/handler/mxRubberband.js

@@ -77,7 +77,7 @@ class mxRubberband {
       this.graph.addMouseListener(this);
 
       // Handles force rubberband event
-      this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt) => {
+      this.forceRubberbandHandler = (sender, evt) => {
         var evtName = evt.getProperty('eventName');
         var me = evt.getProperty('event');
 
@@ -89,7 +89,7 @@ class mxRubberband {
           this.start(me.getX() + origin.x, me.getY() + origin.y);
           me.consume(false);
         }
-      });
+      };
 
       this.graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.forceRubberbandHandler);
 
@@ -101,11 +101,11 @@ class mxRubberband {
       this.graph.addListener(mxEvent.PAN, this.panHandler);
 
       // Does not show menu if any touch gestures take place after the trigger
-      this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
+      this.gestureHandler = (sender, eo) => {
         if (this.first != null) {
           this.reset();
         }
-      });
+      };
 
       this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
     }
@@ -190,9 +190,9 @@ class mxRubberband {
       this.mouseMove(this.graph, createMouseEvent(evt));
     });
 
-    this.dropHandler = mxUtils.bind(this, (evt) => {
+    this.dropHandler = (evt) => {
       this.mouseUp(this.graph, createMouseEvent(evt));
-    });
+    };
 
     // Workaround for rubberband stopping if the mouse leaves the container in Firefox
     if (mxClient.IS_FF) {

src/js/handler/mxSelectionCellsHandler.js

@@ -68,11 +68,11 @@ class mxSelectionCellsHandler extends mxEventSource {
     this.handlers = new mxDictionary();
     this.graph.addMouseListener(this);
 
-    this.refreshHandler = mxUtils.bind(this, (sender, evt) => {
+    this.refreshHandler = (sender, evt) => {
       if (this.isEnabled()) {
         this.refresh();
       }
-    });
+    };
 
     this.graph.getSelectionModel().addListener(mxEvent.CHANGE, this.refreshHandler);
     this.graph.getModel().addListener(mxEvent.CHANGE, this.refreshHandler);

src/js/handler/mxTooltipHandler.js

@@ -131,13 +131,13 @@ class mxTooltipHandler {
 
       document.body.appendChild(this.div);
 
-      mxEvent.addGestureListeners(this.div, mxUtils.bind(this, (evt) => {
+      mxEvent.addGestureListeners(this.div, (evt) => {
         var source = mxEvent.getSource(evt);
 
         if (source.nodeName != 'A') {
           this.hideTooltip();
         }
-      }));
+      });
     }
   };
 
@@ -224,7 +224,7 @@ class mxTooltipHandler {
         var y = me.getY();
         var stateSource = me.isSource(state.shape) || me.isSource(state.text);
 
-        this.thread = window.setTimeout(mxUtils.bind(this, () => {
+        this.thread = window.setTimeout(() => {
           if (!this.graph.isEditing() && !this.graph.popupMenuHandler.isMenuShowing() && !this.graph.isMouseDown) {
             // Uses information from inside event cause using the event at
             // this (delayed) point in time is not possible in IE as it no
@@ -235,7 +235,7 @@ class mxTooltipHandler {
             this.node = node;
             this.stateSource = stateSource;
           }
-        }), this.delay);
+        }, this.delay);
       }
     }
   };

src/js/handler/mxVertexHandler.js

@@ -167,7 +167,7 @@ class mxVertexHandler {
       this.init();
 
       // Handles escape keystrokes
-      this.escapeHandler = mxUtils.bind(this, (sender, evt) => {
+      this.escapeHandler = (sender, evt) => {
         if (this.livePreview && this.index != null) {
           // Redraws the live preview
           this.state.view.graph.cellRenderer.redraw(this.state, true);
@@ -179,7 +179,7 @@ class mxVertexHandler {
         }
 
         this.reset();
-      });
+      };
 
       this.state.view.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
     }
@@ -485,7 +485,7 @@ class mxVertexHandler {
     var hit = (this.allowHandleBoundsCheck && tol > 0) ?
         new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol) : null;
 
-    var checkShape = mxUtils.bind(this, (shape) => {
+    var checkShape = (shape) => {
       var st = (shape != null && shape.constructor != mxImageShape &&
           this.allowHandleBoundsCheck) ? shape.strokewidth + shape.svgStrokeTolerance : null;
       var real = (st != null) ? new mxRectangle(me.getGraphX() - Math.floor(st / 2),
@@ -493,7 +493,7 @@ class mxVertexHandler {
 
       return shape != null && (me.isSource(shape) || (real != null && mxUtils.intersects(shape.bounds, real) &&
           shape.node.style.display != 'none' && shape.node.style.visibility != 'hidden'));
-    });
+    };
 
     if (checkShape(this.rotationShape)) {
       return mxEvent.ROTATION_HANDLE;

src/js/layout/mxParallelEdgeLayout.js

@@ -98,7 +98,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
   findParallels = (parent, cells) => {
     var lookup = [];
 
-    var addCell = mxUtils.bind(this, (cell) => {
+    var addCell = (cell) => {
       if (!this.isEdgeIgnored(cell)) {
         var id = this.getEdgeId(cell);
 
@@ -110,7 +110,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
           lookup[id].push(cell);
         }
       }
-    });
+    };
 
     if (cells != null) {
       for (var i = 0; i < cells.length; i++) {

src/js/layout/mxStackLayout.js

@@ -265,14 +265,14 @@ class mxStackLayout extends mxGraphLayout {
     }
 
     if (this.allowGaps) {
-      cells.sort(mxUtils.bind(this, (c1, c2) => {
+      cells.sort((c1, c2) => {
         var geo1 = this.graph.getCellGeometry(c1);
         var geo2 = this.graph.getCellGeometry(c2);
 
         return (this.horizontal) ?
             ((geo1.x == geo2.x) ? 0 : ((geo1.x > geo2.x > 0) ? 1 : -1)) :
             ((geo1.y == geo2.y) ? 0 : ((geo1.y > geo2.y > 0) ? 1 : -1));
-      }));
+      });
     }
 
     return cells;

src/js/shape/mxText.js

@@ -682,7 +682,7 @@ class mxText extends mxShape {
     mxSvgCanvas2D.createCss(w + 2, h, this.align, this.valign, this.wrap, this.overflow, this.clipped,
         (this.background != null) ? mxUtils.htmlEntities(this.background) : null,
         (this.border != null) ? mxUtils.htmlEntities(this.border) : null,
-        flex, block, this.scale, mxUtils.bind(this, (dx, dy, flex, item, block, ofl) => {
+        flex, block, this.scale, (dx, dy, flex, item, block, ofl) => {
           var r = this.getTextRotation();
           var tr = ((this.scale != 1) ? 'scale(' + this.scale + ') ' : '') +
               ((r != 0) ? 'rotate(' + r + 'deg) ' : '') +
@@ -719,7 +719,7 @@ class mxText extends mxShape {
 
           this.node.firstChild.firstChild.setAttribute('style', block);
           this.node.firstChild.setAttribute('style', item);
-        }));
+        });
   };
 
   /**

src/js/util/mxDivResizer.js

@@ -72,13 +72,13 @@ class mxDivResizer {
       }
 
       mxEvent.addListener(container, 'resize',
-          mxUtils.bind(this, (evt) => {
+          (evt) => {
             if (!this.handlingResize) {
               this.handlingResize = true;
               this.resize();
               this.handlingResize = false;
             }
-          })
+          }
       );
 
       this.resize();

src/js/util/mxEvent.js

@@ -370,12 +370,12 @@ var mxEvent =
       var dy0 = 0;
 
       // Adds basic listeners for graph event dispatching
-      mxEvent.addGestureListeners(target, mxUtils.bind(this, (evt) => {
+      mxEvent.addGestureListeners(target, (evt) => {
             if (!mxEvent.isMouseEvent(evt) && evt.pointerId != null) {
               evtCache.push(evt);
             }
-          }),
+          },
-          mxUtils.bind(this, (evt) => {
+          (evt) => {
             if (!mxEvent.isMouseEvent(evt) && evtCache.length == 2) {
               // Find this event in the cache and update its record with this event
               for (var i = 0; i < evtCache.length; i++) {
@@ -402,12 +402,12 @@ var mxEvent =
                 dy0 = dy;
               }
             }
-          }),
+          },
-          mxUtils.bind(this, (evt) => {
+          (evt) => {
             evtCache = [];
             dx0 = 0;
             dy0 = 0;
-          }));
+          });
     }
 
     mxEvent.addListener(target, 'wheel', wheelHandler);

src/js/util/mxPoint.js

@@ -29,10 +29,16 @@ class mxPoint {
    * Constructs a new point for the optional x and y coordinates. If no
    * coordinates are given, then the default values for <x> and <y> are used.
    */
-  constructor(x, y) {
+  constructor(...args) {
+    // forward to this._constructor to allow not calling
+    // the constructor from mxRectangle/mxCellState
+    this._constructor(...args);
+  };
+
+  _constructor(x, y) {
     this.x = (x != null) ? x : 0;
     this.y = (y != null) ? y : 0;
-  };
+  }
 
   /**
    * Function: equals

src/js/util/mxRectangle.js

@@ -30,11 +30,15 @@ class mxRectangle extends mxPoint {
    */
   height = null;
 
-  constructor(x, y, width, height) {
+  constructor(...args) {
-    super(x, y);
+    super(...args);
+  };
+
+  _constructor(x, y, width, height) {
+    // replace super of mxPoint
     this.width = (width != null) ? width : 0;
     this.height = (height != null) ? height : 0;
-  };
+  }
 
   /**
    * Function: fromRectangle

src/js/util/mxXmlRequest.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2006-2020, JGraph Ltd
  * Copyright (c) 2006-2020, draw.io AG
  */
+import mxUtils from "./mxUtils";
 
 class mxXmlRequest {
   /**
@@ -205,7 +206,7 @@ class mxXmlRequest {
    * Returns true if the response is ready.
    */
   isReady = () => {
-    return this.request.readyState == 4;
+    return this.request.readyState === 4;
   };
 
   /**
@@ -260,8 +261,6 @@ class mxXmlRequest {
    * Creates and returns the inner <request> object.
    */
   create = () => {
-    if (window.XMLHttpRequest) {
-      return () => {
     var req = new XMLHttpRequest();
 
     // TODO: Check for overrideMimeType required here?
@@ -271,15 +270,6 @@ class mxXmlRequest {
 
     return req;
   };
-    } else if (typeof (ActiveXObject) != 'undefined') {
-      return () => {
-        // TODO: Implement binary option
-        return new ActiveXObject('Microsoft.XMLHTTP');
-      };
-    }
-  }
-()
-  ;
 
   /**
    * Function: send
@@ -372,7 +362,7 @@ class mxXmlRequest {
     doc = doc || document;
     var old = null;
 
-    if (doc == document) {
+    if (doc === document) {
       old = window.onbeforeunload;
       window.onbeforeunload = null;
     }

src/js/view/mxCellState.js

@@ -158,8 +158,12 @@ class mxCellState extends mxRectangle {
    * cell - <mxCell> that this state represents.
    * style - Array of key, value pairs that constitute the style.
    */
-  constructor(view, cell, style) {
+  constructor(...args) {
-    // no super
+    super(...args)
+  }
+
+  _constructor(view, cell, style) {
+    // replace super of mxPoint/mxRectangle
     this.view = view;
     this.cell = cell;
     this.style = (style != null) ? style : {};

src/js/view/mxGraph.js

@@ -1519,9 +1519,9 @@ class mxGraph extends mxEventSource {
     this.view = this.createGraphView();
 
     // Adds a graph model listener to update the view
-    this.graphModelChangeListener = mxUtils.bind(this, (sender, evt) => {
+    this.graphModelChangeListener = (sender, evt) => {
       this.graphModelChanged(evt.getProperty('edit').changes);
-    });
+    };
 
     this.model.addListener(mxEvent.CHANGE, this.graphModelChangeListener);
 
@@ -1752,7 +1752,7 @@ class mxGraph extends mxEventSource {
     var dict = new mxDictionary();
     var cells = [];
 
-    var addCell = mxUtils.bind(this, (cell) => {
+    var addCell = (cell) => {
       if (!dict.get(cell) && this.model.contains(cell)) {
         if (this.model.isEdge(cell) || this.model.isVertex(cell)) {
           dict.put(cell, true);
@@ -1765,7 +1765,7 @@ class mxGraph extends mxEventSource {
           }
         }
       }
-    });
+    };
 
     for (var i = 0; i < changes.length; i++) {
       var change = changes[i];
@@ -2134,11 +2134,11 @@ class mxGraph extends mxEventSource {
       // Adds a handler for single mouseclicks to select the cell
       if (isSelect) {
         overlay.addListener(mxEvent.CLICK,
-            mxUtils.bind(this, (sender, evt) => {
+            (sender, evt) => {
               if (this.isEnabled()) {
                 this.setSelectionCell(cell);
               }
-            })
+            }
         );
       }
 
@@ -2368,13 +2368,13 @@ class mxGraph extends mxEventSource {
           var active = false;
 
           var tmp = this.getCellAt(me.graphX, me.graphY, null, null, null,
-              mxUtils.bind(this, (state) => {
+              (state) => {
                 var selected = this.isCellSelected(state.cell);
                 active = active || selected;
 
                 return !active || selected || (state.cell != cell &&
                     this.model.isAncestor(state.cell, cell));
-              }));
+              });
 
           if (tmp != null) {
             cell = tmp;
@@ -2916,7 +2916,7 @@ class mxGraph extends mxEventSource {
       this.verticalPageBreaks = [];
     }
 
-    var drawPageBreaks = mxUtils.bind(this, (breaks) => {
+    var drawPageBreaks = (breaks) => {
       if (breaks != null) {
         var count = (breaks == this.horizontalPageBreaks) ? horizontalCount : verticalCount;
 
@@ -2948,7 +2948,7 @@ class mxGraph extends mxEventSource {
 
         breaks.splice(count, breaks.length - count);
       }
-    });
+    };
 
     drawPageBreaks(this.horizontalPageBreaks);
     drawPageBreaks(this.verticalPageBreaks);

src/js/view/mxPrintPreview.js

@@ -473,14 +473,14 @@ class mxPrintPreview {
       var vpages = Math.max(1, Math.ceil((bounds.height + this.y0) / availableHeight));
       this.pageCount = hpages * vpages;
 
-      var writePageSelector = mxUtils.bind(this, () => {
+      var writePageSelector = () => {
         if (this.pageSelector && (vpages > 1 || hpages > 1)) {
           var table = this.createPageSelector(vpages, hpages);
           doc.body.appendChild(table);
         }
-      });
+      };
 
-      var addPage = mxUtils.bind(this, (div, addBreak) => {
+      var addPage =  (div, addBreak) => {
         // Border of the DIV (aka page) inside the document
         if (this.borderColor != null) {
           div.style.borderColor = this.borderColor;
@@ -525,7 +525,7 @@ class mxPrintPreview {
         if (forcePageBreaks || addBreak) {
           this.addPageBreak(doc);
         }
-      });
+      };
 
       var cov = this.getCoverPages(this.pageFormat.width, this.pageFormat.height);
 
@@ -921,9 +921,9 @@ class mxPrintPreview {
       // Creates the temporary cell states in the view and
       // draws them onto the temporary DOM nodes in the view
       var cells = [this.getRoot()];
-      temp = new mxTemporaryCellStates(view, scale, cells, null, mxUtils.bind(this, (state) => {
+      temp = new mxTemporaryCellStates(view, scale, cells, null, (state) => {
         return this.getLinkForCellState(state);
-      }));
+      });
     } finally {
       // Removes everything but the SVG node
       var tmp = div.firstChild;