diff --git a/packages/core/src/editor/mxDefaultToolbar.js b/packages/core/src/editor/mxDefaultToolbar.js index d41d77345..05cafbbb7 100644 --- a/packages/core/src/editor/mxDefaultToolbar.js +++ b/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); - }); + }; } /** diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js index 03ad66a93..a8a087d7f 100644 --- a/packages/core/src/editor/mxEditor.js +++ b/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); diff --git a/packages/core/src/handler/mxConnectionHandler.js b/packages/core/src/handler/mxConnectionHandler.js index ddb3b3637..5a22592a6 100644 --- a/packages/core/src/handler/mxConnectionHandler.js +++ b/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); diff --git a/packages/core/src/handler/mxConstraintHandler.js b/packages/core/src/handler/mxConstraintHandler.js index 8a877b791..0294b4f27 100644 --- a/packages/core/src/handler/mxConstraintHandler.js +++ b/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(); diff --git a/packages/core/src/handler/mxEdgeHandler.js b/packages/core/src/handler/mxEdgeHandler.js index 68c8817cd..d312ac7d8 100644 --- a/packages/core/src/handler/mxEdgeHandler.js +++ b/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); diff --git a/packages/core/src/handler/mxGraphHandler.js b/packages/core/src/handler/mxGraphHandler.js index 1337289e7..1749634cf 100644 --- a/packages/core/src/handler/mxGraphHandler.js +++ b/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 { } } } - }) + } ); } diff --git a/packages/core/src/handler/mxPanningHandler.js b/packages/core/src/handler/mxPanningHandler.js index a18e1644d..e13988ae5 100644 --- a/packages/core/src/handler/mxPanningHandler.js +++ b/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); diff --git a/packages/core/src/handler/mxPopupMenuHandler.js b/packages/core/src/handler/mxPopupMenuHandler.js index a306de78f..75baf0639 100644 --- a/packages/core/src/handler/mxPopupMenuHandler.js +++ b/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(); - }) + } ); } diff --git a/packages/core/src/handler/mxRubberband.js b/packages/core/src/handler/mxRubberband.js index fb3db818c..dc19cc3aa 100644 --- a/packages/core/src/handler/mxRubberband.js +++ b/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)); diff --git a/packages/core/src/handler/mxSelectionCellsHandler.js b/packages/core/src/handler/mxSelectionCellsHandler.js index 951702e18..913dc34d0 100644 --- a/packages/core/src/handler/mxSelectionCellsHandler.js +++ b/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 diff --git a/packages/core/src/util/mxUtils.js b/packages/core/src/util/mxUtils.js index 497a16c77..446b28040 100644 --- a/packages/core/src/util/mxUtils.js +++ b/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 * diff --git a/packages/core/src/view/cell/mxCellEditor.ts b/packages/core/src/view/cell/mxCellEditor.ts index 089c55d50..81c646691 100644 --- a/packages/core/src/view/cell/mxCellEditor.ts +++ b/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 ); } diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts index 4e403f5a8..3efe7ea88 100644 --- a/packages/core/src/view/graph/mxGraph.ts +++ b/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; diff --git a/packages/core/src/view/graph/mxOutline.ts b/packages/core/src/view/graph/mxOutline.ts index d0598fb47..c80cb696e 100644 --- a/packages/core/src/view/graph/mxOutline.ts +++ b/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 = this.outline.getView().getCanvas().parentNode; diff --git a/packages/core/src/view/graph/mxPrintPreview.js b/packages/core/src/view/graph/mxPrintPreview.js index 4fa83c89a..8497d9f64 100644 --- a/packages/core/src/view/graph/mxPrintPreview.js +++ b/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 ); diff --git a/packages/core/src/view/graph/mxSwimlaneManager.ts b/packages/core/src/view/graph/mxSwimlaneManager.ts index a172f3284..e630c154e 100644 --- a/packages/core/src/view/graph/mxSwimlaneManager.ts +++ b/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); } diff --git a/packages/html/stories/Clipboard.stories.js b/packages/html/stories/Clipboard.stories.js index 4e16a8fd1..cc10ce345 100644 --- a/packages/html/stories/Clipboard.stories.js +++ b/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 ); } diff --git a/packages/html/stories/OrgChart.stories.js b/packages/html/stories/OrgChart.stories.js index e929f50dc..8887c5cdc 100644 --- a/packages/html/stories/OrgChart.stories.js +++ b/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);