From cefe19455b53f7d4407caa8439be607521febed8 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Sat, 20 Mar 2021 22:38:03 +1100 Subject: [PATCH] started removing mxUtils.bind() calls in favor of ()=>{} style functions --- examples/hovericons.html | 13 ++++----- src/css/explorer.css | 18 ------------- src/js/editor/mxDefaultKeyHandler.js | 4 +-- src/js/editor/mxDefaultToolbar.js | 22 +++++++--------- src/js/editor/mxEditor.js | 32 +++++++++++------------ src/js/handler/mxConnectionHandler.js | 29 ++++++++++---------- src/js/handler/mxConstraintHandler.js | 8 +++--- src/js/handler/mxEdgeHandler.js | 12 ++++----- src/js/handler/mxElbowEdgeHandler.js | 4 +-- src/js/handler/mxGraphHandler.js | 20 +++++++------- src/js/handler/mxKeyHandler.js | 4 +-- src/js/handler/mxPanningHandler.js | 8 +++--- src/js/handler/mxPopupMenuHandler.js | 6 ++--- src/js/handler/mxRubberband.js | 12 ++++----- src/js/handler/mxSelectionCellsHandler.js | 4 +-- src/js/handler/mxTooltipHandler.js | 8 +++--- src/js/handler/mxVertexHandler.js | 8 +++--- src/js/layout/mxParallelEdgeLayout.js | 4 +-- src/js/layout/mxStackLayout.js | 4 +-- src/js/shape/mxText.js | 4 +-- src/js/util/mxDivResizer.js | 4 +-- src/js/util/mxEvent.js | 12 ++++----- src/js/util/mxPoint.js | 10 +++++-- src/js/util/mxRectangle.js | 10 ++++--- src/js/util/mxXmlRequest.js | 30 +++++++-------------- src/js/view/mxCellState.js | 8 ++++-- src/js/view/mxGraph.js | 20 +++++++------- src/js/view/mxPrintPreview.js | 12 ++++----- 28 files changed, 155 insertions(+), 175 deletions(-) delete mode 100644 src/css/explorer.css diff --git a/examples/hovericons.html b/examples/hovericons.html index 8160bd406..2c767b962 100644 --- a/examples/hovericons.html +++ b/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); diff --git a/src/css/explorer.css b/src/css/explorer.css deleted file mode 100644 index 50e704fe3..000000000 --- a/src/css/explorer.css +++ /dev/null @@ -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; -} diff --git a/src/js/editor/mxDefaultKeyHandler.js b/src/js/editor/mxDefaultKeyHandler.js index 667c0327b..913a9b890 100644 --- a/src/js/editor/mxDefaultKeyHandler.js +++ b/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 diff --git a/src/js/editor/mxDefaultToolbar.js b/src/js/editor/mxDefaultToolbar.js index 8d207f0a2..57d26224c 100644 --- a/src/js/editor/mxDefaultToolbar.js +++ b/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); diff --git a/src/js/editor/mxEditor.js b/src/js/editor/mxEditor.js index 1c8fb36cc..ce026727a 100644 --- a/src/js/editor/mxEditor.js +++ b/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 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 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); diff --git a/src/js/handler/mxConnectionHandler.js b/src/js/handler/mxConnectionHandler.js index 1acb286d4..ec91034df 100644 --- a/src/js/handler/mxConnectionHandler.js +++ b/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 intersects.apply(marker, arguments); - }); + return super.intersects(state, evt); + }; 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); diff --git a/src/js/handler/mxConstraintHandler.js b/src/js/handler/mxConstraintHandler.js index 4ce7159af..b1a70802b 100644 --- a/src/js/handler/mxConstraintHandler.js +++ b/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); } diff --git a/src/js/handler/mxEdgeHandler.js b/src/js/handler/mxEdgeHandler.js index f166358d2..abcebc4ac 100644 --- a/src/js/handler/mxEdgeHandler.js +++ b/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); } } } diff --git a/src/js/handler/mxElbowEdgeHandler.js b/src/js/handler/mxElbowEdgeHandler.js index fe981cc3d..f36327da9 100644 --- a/src/js/handler/mxElbowEdgeHandler.js +++ b/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)); diff --git a/src/js/handler/mxGraphHandler.js b/src/js/handler/mxGraphHandler.js index 627cdec92..c6cf96e58 100644 --- a/src/js/handler/mxGraphHandler.js +++ b/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(); diff --git a/src/js/handler/mxKeyHandler.js b/src/js/handler/mxKeyHandler.js index 74432cf29..960871b92 100644 --- a/src/js/handler/mxKeyHandler.js +++ b/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); diff --git a/src/js/handler/mxPanningHandler.js b/src/js/handler/mxPanningHandler.js index 3bb144c2f..0d10a9abd 100644 --- a/src/js/handler/mxPanningHandler.js +++ b/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); diff --git a/src/js/handler/mxPopupMenuHandler.js b/src/js/handler/mxPopupMenuHandler.js index 01f6979d7..e76d910cc 100644 --- a/src/js/handler/mxPopupMenuHandler.js +++ b/src/js/handler/mxPopupMenuHandler.js @@ -66,7 +66,7 @@ class mxPopupMenuHandler extends mxPopupMenu { * Constructs an event handler that creates a . */ 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); diff --git a/src/js/handler/mxRubberband.js b/src/js/handler/mxRubberband.js index dd66a853e..ec8ac4a94 100644 --- a/src/js/handler/mxRubberband.js +++ b/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) { diff --git a/src/js/handler/mxSelectionCellsHandler.js b/src/js/handler/mxSelectionCellsHandler.js index 8fb161907..1262f9828 100644 --- a/src/js/handler/mxSelectionCellsHandler.js +++ b/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); diff --git a/src/js/handler/mxTooltipHandler.js b/src/js/handler/mxTooltipHandler.js index 8211d07e2..c40ac76e3 100644 --- a/src/js/handler/mxTooltipHandler.js +++ b/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); } } }; diff --git a/src/js/handler/mxVertexHandler.js b/src/js/handler/mxVertexHandler.js index 823bf3430..f9cb0d577 100644 --- a/src/js/handler/mxVertexHandler.js +++ b/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; diff --git a/src/js/layout/mxParallelEdgeLayout.js b/src/js/layout/mxParallelEdgeLayout.js index 8e29c6c50..e753d81fb 100644 --- a/src/js/layout/mxParallelEdgeLayout.js +++ b/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++) { diff --git a/src/js/layout/mxStackLayout.js b/src/js/layout/mxStackLayout.js index bd85a894b..cd2ef2161 100644 --- a/src/js/layout/mxStackLayout.js +++ b/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; diff --git a/src/js/shape/mxText.js b/src/js/shape/mxText.js index b1dc12a9e..2e39b9748 100644 --- a/src/js/shape/mxText.js +++ b/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); - })); + }); }; /** diff --git a/src/js/util/mxDivResizer.js b/src/js/util/mxDivResizer.js index 0dd98860b..5e4e5bedc 100644 --- a/src/js/util/mxDivResizer.js +++ b/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(); diff --git a/src/js/util/mxEvent.js b/src/js/util/mxEvent.js index 8a411e7a8..10232320c 100644 --- a/src/js/util/mxEvent.js +++ b/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); diff --git a/src/js/util/mxPoint.js b/src/js/util/mxPoint.js index 8561021bc..3dbbd0fd2 100644 --- a/src/js/util/mxPoint.js +++ b/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 and 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 diff --git a/src/js/util/mxRectangle.js b/src/js/util/mxRectangle.js index 1368b6193..717316a6c 100644 --- a/src/js/util/mxRectangle.js +++ b/src/js/util/mxRectangle.js @@ -30,11 +30,15 @@ class mxRectangle extends mxPoint { */ height = null; - constructor(x, y, width, height) { - super(x, y); + constructor(...args) { + 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 diff --git a/src/js/util/mxXmlRequest.js b/src/js/util/mxXmlRequest.js index cacd1aa7d..66bd71c70 100644 --- a/src/js/util/mxXmlRequest.js +++ b/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,26 +261,15 @@ class mxXmlRequest { * Creates and returns the inner object. */ create = () => { - if (window.XMLHttpRequest) { - return () => { - var req = new XMLHttpRequest(); + var req = new XMLHttpRequest(); - // TODO: Check for overrideMimeType required here? - if (this.isBinary() && req.overrideMimeType) { - req.overrideMimeType('text/plain; charset=x-user-defined'); - } - - return req; - }; - } else if (typeof (ActiveXObject) != 'undefined') { - return () => { - // TODO: Implement binary option - return new ActiveXObject('Microsoft.XMLHTTP'); - }; + // TODO: Check for overrideMimeType required here? + if (this.isBinary() && req.overrideMimeType) { + req.overrideMimeType('text/plain; charset=x-user-defined'); } - } -() - ; + + return req; + }; /** * 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; } diff --git a/src/js/view/mxCellState.js b/src/js/view/mxCellState.js index cec415d8a..82c38c545 100644 --- a/src/js/view/mxCellState.js +++ b/src/js/view/mxCellState.js @@ -158,8 +158,12 @@ class mxCellState extends mxRectangle { * cell - that this state represents. * style - Array of key, value pairs that constitute the style. */ - constructor(view, cell, style) { - // no super + constructor(...args) { + super(...args) + } + + _constructor(view, cell, style) { + // replace super of mxPoint/mxRectangle this.view = view; this.cell = cell; this.style = (style != null) ? style : {}; diff --git a/src/js/view/mxGraph.js b/src/js/view/mxGraph.js index eddced6b8..0bc6346e9 100644 --- a/src/js/view/mxGraph.js +++ b/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); diff --git a/src/js/view/mxPrintPreview.js b/src/js/view/mxPrintPreview.js index 5e45251fc..84394590e 100644 --- a/src/js/view/mxPrintPreview.js +++ b/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;