From 7cc56f30e9749cee9e46ad7553b5d34dfe1f8c3e Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Sat, 31 Jul 2021 20:00:28 +1000 Subject: [PATCH] replaced references to `bind` with arrow functions --- docs/stashed/Scrollbars.js | 4 +- docs/stashed/ServerView.js | 14 +- docs/stashed/Touch.js | 4 +- docs/stashed/grapheditor/www/js/Actions.js | 44 +++--- docs/stashed/grapheditor/www/js/Dialogs.js | 30 ++-- docs/stashed/grapheditor/www/js/Editor.js | 30 ++-- docs/stashed/grapheditor/www/js/EditorUi.js | 162 ++++++++++---------- docs/stashed/grapheditor/www/js/Format.js | 144 ++++++++--------- docs/stashed/grapheditor/www/js/Menus.js | 104 ++++++------- docs/stashed/grapheditor/www/js/Sidebar.js | 78 +++++----- docs/stashed/grapheditor/www/js/Toolbar.js | 90 +++++------ 11 files changed, 352 insertions(+), 352 deletions(-) diff --git a/docs/stashed/Scrollbars.js b/docs/stashed/Scrollbars.js index 3ed011f7e..8c619e198 100644 --- a/docs/stashed/Scrollbars.js +++ b/docs/stashed/Scrollbars.js @@ -246,7 +246,7 @@ export default Scrollbars; { div.scrollHandler = true; - let updateEdges = this.bind(function() + let updateEdges = () => { let edgeCount = state.cell.getEdgeCount(); @@ -258,7 +258,7 @@ export default Scrollbars; graph.view.invalidate(edge, true, false); graph.view.validate(edge); } - }); + }; mxEvent.addListener(div, 'scroll', updateEdges); mxEvent.addListener(div, 'mouseup', updateEdges); diff --git a/docs/stashed/ServerView.js b/docs/stashed/ServerView.js index 3ae5a9e9c..b73b9227d 100644 --- a/docs/stashed/ServerView.js +++ b/docs/stashed/ServerView.js @@ -73,7 +73,7 @@ export default MYNAMEHERE; if (container != null) { mxEvent.addGestureListeners(container, - this.bind(function(evt) + (evt) => { let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); @@ -95,7 +95,7 @@ export default MYNAMEHERE; new InternalMouseEvent(evt)); } }), - this.bind(function(evt) + ((evt) => { let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); @@ -113,7 +113,7 @@ export default MYNAMEHERE; new InternalMouseEvent(evt)); } }), - this.bind(function(evt) + ((evt) => { let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); @@ -134,7 +134,7 @@ export default MYNAMEHERE; // Adds listener for double click handling on background mxEvent.addListener(container, 'dblclick', - this.bind(function(evt) + ((evt) => { let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); @@ -147,14 +147,14 @@ export default MYNAMEHERE; // Adds basic listeners for graph event dispatching outside of the // container and finishing the handling of a single gesture mxEvent.addGestureListeners(document, - this.bind(function(evt) + ((evt) => { if (this.isContainerEvent(evt)) { graph.popupMenuHandler.hideMenu(); } }), - this.bind(function(evt) + ((evt) => { // Hides the tooltip if mouse is outside container if (graph.tooltipHandler != null && @@ -171,7 +171,7 @@ export default MYNAMEHERE; new InternalMouseEvent(evt)); } }), - this.bind(function(evt) + ((evt) => { if (this.captureDocumentGesture) { diff --git a/docs/stashed/Touch.js b/docs/stashed/Touch.js index ec6aa6ec3..8d970eb6c 100644 --- a/docs/stashed/Touch.js +++ b/docs/stashed/Touch.js @@ -89,7 +89,7 @@ export default Touch; // mxClient.IS_TOUCH || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 // Disables built-in text selection and context menu while not editing text - let textEditing = this.bind(function(evt) + let textEditing = ((evt) => { return graph.isEditing(); }); @@ -376,7 +376,7 @@ export default Touch; // Starts connecting on touch/mouse down mxEvent.addGestureListeners(this.connectorImg, - this.bind(function(evt) + ((evt) => { this.graph.popupMenuHandler.hideMenu(); this.graph.stopEditing(false); diff --git a/docs/stashed/grapheditor/www/js/Actions.js b/docs/stashed/grapheditor/www/js/Actions.js index 2c6260ca6..303fe3c16 100644 --- a/docs/stashed/grapheditor/www/js/Actions.js +++ b/docs/stashed/grapheditor/www/js/Actions.js @@ -44,7 +44,7 @@ Actions.prototype.init = function() window.openKey = 'import'; // Closes dialog after open - window.openFile = new OpenFile(this.bind(function() + window.openFile = new OpenFile((() => { ui.hideDialog(); })); @@ -529,7 +529,7 @@ Actions.prototype.init = function() }); } })).isEnabled = isGraphEnabled; - this.addAction('link...', this.bind(function() + this.addAction('link...', (() => { if (graph.isEnabled()) { @@ -564,7 +564,7 @@ Actions.prototype.init = function() let selState = graph.cellEditor.saveSelection(); - ui.showLinkDialog(oldValue, Resources.get('apply'), this.bind(function(value) + ui.showLinkDialog(oldValue, Resources.get('apply'), ((value) => { graph.cellEditor.restoreSelection(selState); @@ -784,7 +784,7 @@ Actions.prototype.init = function() graph.fitWindow(bounds); } }, null, null, Editor.ctrlKey + '+Shift+H'); - this.addAction('fitPage', this.bind(function() + this.addAction('fitPage', (() => { if (!graph.pageVisible) { @@ -805,7 +805,7 @@ Actions.prototype.init = function() graph.container.scrollLeft = Math.min(pad.x * graph.view.scale, (graph.container.scrollWidth - graph.container.clientWidth) / 2) - 1; } }), null, null, Editor.ctrlKey + '+J'); - this.addAction('fitTwoPages', this.bind(function() + this.addAction('fitTwoPages', (() => { if (!graph.pageVisible) { @@ -827,7 +827,7 @@ Actions.prototype.init = function() graph.container.scrollLeft = Math.min(pad.x, (graph.container.scrollWidth - graph.container.clientWidth) / 2); } }), null, null, Editor.ctrlKey + '+Shift+J'); - this.addAction('fitPageWidth', this.bind(function() + this.addAction('fitPageWidth', (() => { if (!graph.pageVisible) { @@ -848,9 +848,9 @@ Actions.prototype.init = function() (graph.container.scrollWidth - graph.container.clientWidth) / 2); } })); - this.put('customZoom', new Action(Resources.get('custom') + '...', this.bind(function() + this.put('customZoom', new Action(Resources.get('custom') + '...', (() => { - let dlg = new FilenameDialog(this.editorUi, parseInt(graph.getView().getScale() * 100), Resources.get('apply'), this.bind(function(newValue) + let dlg = new FilenameDialog(this.editorUi, parseInt(graph.getView().getScale() * 100), Resources.get('apply'), ((newValue) => { let val = parseInt(newValue); @@ -862,9 +862,9 @@ Actions.prototype.init = function() this.editorUi.showDialog(dlg.container, 300, 80, true, true); dlg.init(); }), null, null, Editor.ctrlKey + '+0')); - this.addAction('pageScale...', this.bind(function() + this.addAction('pageScale...', (() => { - let dlg = new FilenameDialog(this.editorUi, parseInt(graph.pageScale * 100), Resources.get('apply'), this.bind(function(newValue) + let dlg = new FilenameDialog(this.editorUi, parseInt(graph.pageScale * 100), Resources.get('apply'), ((newValue) => { let val = parseInt(newValue); @@ -927,7 +927,7 @@ Actions.prototype.init = function() }); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.scrollbars; }); - action = this.addAction('pageView', this.bind(function() + action = this.addAction('pageView', (() => { ui.setPageVisible(!graph.pageVisible); })); @@ -993,7 +993,7 @@ Actions.prototype.init = function() })); // Font style actions - let toggleFontStyle = this.bind(function(key, style, fn, shortcut) + let toggleFontStyle = ((key, style, fn, shortcut) => { return this.addAction(key, function() { @@ -1206,7 +1206,7 @@ Actions.prototype.init = function() ui.fireEvent(new EventObject('styleChanged', 'keys', ['collapsible'], 'values', [value], 'cells', graph.getSelectionCells())); }); - this.addAction('editStyle...', this.bind(function() + this.addAction('editStyle...', (() => { let cells = graph.getSelectionCells(); @@ -1319,21 +1319,21 @@ Actions.prototype.init = function() } } }, null, null, 'Alt+Shift+C'); - action = this.addAction('subscript', this.bind(function() + action = this.addAction('subscript', (() => { if (graph.cellEditor.isContentEditing()) { document.execCommand('subscript', false, null); } }), null, null, Editor.ctrlKey + '+,'); - action = this.addAction('superscript', this.bind(function() + action = this.addAction('superscript', (() => { if (graph.cellEditor.isContentEditing()) { document.execCommand('superscript', false, null); } }), null, null, Editor.ctrlKey + '+.'); - action = this.addAction('indent', this.bind(function() + action = this.addAction('indent', (() => { // NOTE: Alt+Tab for outdent implemented via special code in // keyHandler.getFunction in EditorUi.js. Ctrl+Tab is reserved. @@ -1435,7 +1435,7 @@ Actions.prototype.init = function() }, graph.cellEditor.isContentEditing(), !graph.cellEditor.isContentEditing()); } }).isEnabled = isGraphEnabled; - action = this.addAction('layers', this.bind(function() + action = this.addAction('layers', (() => { if (this.layersWindow == null) { @@ -1460,14 +1460,14 @@ Actions.prototype.init = function() } }), null, null, Editor.ctrlKey + '+Shift+L'); action.setToggleAction(true); - action.setSelectedCallback(this.bind(function() { return this.layersWindow != null && this.layersWindow.window.isVisible(); })); - action = this.addAction('formatPanel', this.bind(function() + action.setSelectedCallback((() => { return this.layersWindow != null && this.layersWindow.window.isVisible(); })); + action = this.addAction('formatPanel', (() => { ui.toggleFormatPanel(); }), null, null, Editor.ctrlKey + '+Shift+P'); action.setToggleAction(true); - action.setSelectedCallback(this.bind(function() { return ui.formatWidth > 0; })); - action = this.addAction('outline', this.bind(function() + action.setSelectedCallback((() => { return ui.formatWidth > 0; })); + action = this.addAction('outline', (() => { if (this.outlineWindow == null) { @@ -1491,7 +1491,7 @@ Actions.prototype.init = function() }), null, null, Editor.ctrlKey + '+Shift+O'); action.setToggleAction(true); - action.setSelectedCallback(this.bind(function() { return this.outlineWindow != null && this.outlineWindow.window.isVisible(); })); + action.setSelectedCallback((() => { return this.outlineWindow != null && this.outlineWindow.window.isVisible(); })); }; /** diff --git a/docs/stashed/grapheditor/www/js/Dialogs.js b/docs/stashed/grapheditor/www/js/Dialogs.js index 683164067..27ef97583 100644 --- a/docs/stashed/grapheditor/www/js/Dialogs.js +++ b/docs/stashed/grapheditor/www/js/Dialogs.js @@ -296,7 +296,7 @@ ColorDialog.prototype.defaultColors = ['none', 'FFFFFF', 'E6E6E6', 'CCCCCC', 'B3 */ ColorDialog.prototype.createApplyFunction = function() { - return this.bind(function(color) + return ((color) => { let graph = this.editorUi.editor.graph; @@ -1118,7 +1118,7 @@ let ExportDialog = function(editorUi) td.style.paddingTop = '22px'; td.colSpan = 2; - let saveBtn = button(Resources.get('export'), this.bind(function() + let saveBtn = button(Resources.get('export'), (() => { if (parseInt(zoomInput.value) <= 0) { @@ -1829,7 +1829,7 @@ let OutlineWindow = function(editorUi, x, y, w, h) } }; - let resizeListener = this.bind(function() + let resizeListener = (() => { let x = this.window.getX(); let y = this.window.getY(); @@ -1848,13 +1848,13 @@ let OutlineWindow = function(editorUi, x, y, w, h) outline.destroy(); } - this.window.addListener(mxEvent.RESIZE, this.bind(function() + this.window.addListener(mxEvent.RESIZE, (() => { outline.update(false); outline.outline.sizeDidChange(); })); - this.window.addListener(mxEvent.SHOW, this.bind(function() + this.window.addListener(mxEvent.SHOW, (() => { this.window.fit(); outline.suspended = false; @@ -1862,18 +1862,18 @@ let OutlineWindow = function(editorUi, x, y, w, h) outline.update(); })); - this.window.addListener(mxEvent.HIDE, this.bind(function() + this.window.addListener(mxEvent.HIDE, (() => { outline.suspended = true; })); - this.window.addListener(mxEvent.NORMALIZE, this.bind(function() + this.window.addListener(mxEvent.NORMALIZE, (() => { outline.suspended = false; outline.update(); })); - this.window.addListener(mxEvent.MINIMIZE, this.bind(function() + this.window.addListener(mxEvent.MINIMIZE, (() => { outline.suspended = true; })); @@ -2081,14 +2081,14 @@ let LayersWindow = function(editorUi, x, y, w, h) { let offset = getOffset(insertLink); - editorUi.showPopupMenu(this.bind(function(menu, parent) + editorUi.showPopupMenu(((menu, parent) => { for (let i = layerCount - 1; i >= 0; i--) { - (this.bind(function(child) + (((child) => { let item = menu.addItem(graph.convertValueToString(child) || - Resources.get('background'), null, this.bind(function() + Resources.get('background'), null, (() => { graph.moveCells(graph.getSelectionCells(), 0, 0, false, child); }), parent); @@ -2132,7 +2132,7 @@ let LayersWindow = function(editorUi, x, y, w, h) if (graph.isEnabled() && layer != null) { let label = graph.convertValueToString(layer); - let dlg = new FilenameDialog(editorUi, label || Resources.get('background'), Resources.get('rename'), this.bind(function(newValue) + let dlg = new FilenameDialog(editorUi, label || Resources.get('background'), Resources.get('rename'), ((newValue) => { if (newValue != null) { @@ -2460,7 +2460,7 @@ let LayersWindow = function(editorUi, x, y, w, h) // Cannot be moved or deleted for (let i = layerCount - 1; i >= 0; i--) { - (this.bind(function(child) + (((child) => { addLayer(i, graph.convertValueToString(child) || Resources.get('background'), child, child); @@ -2507,7 +2507,7 @@ let LayersWindow = function(editorUi, x, y, w, h) listDiv.scrollTop = listDiv.scrollHeight - listDiv.clientHeight; }; - this.window.addListener(mxEvent.SHOW, this.bind(function() + this.window.addListener(mxEvent.SHOW, (() => { this.window.fit(); })); @@ -2529,7 +2529,7 @@ let LayersWindow = function(editorUi, x, y, w, h) } }; - let resizeListener = this.bind(function() + let resizeListener = (() => { let x = this.window.getX(); let y = this.window.getY(); diff --git a/docs/stashed/grapheditor/www/js/Editor.js b/docs/stashed/grapheditor/www/js/Editor.js index 32f7a47cd..53c40397b 100644 --- a/docs/stashed/grapheditor/www/js/Editor.js +++ b/docs/stashed/grapheditor/www/js/Editor.js @@ -57,7 +57,7 @@ Editor = function(chromeless, themes, model, graph, editable) } }; - this.graph.getModel().addListener(mxEvent.CHANGE, this.bind(function() + this.graph.getModel().addListener(mxEvent.CHANGE, (() => { this.graphChangeListener.apply(this, arguments); })); @@ -379,7 +379,7 @@ Editor.prototype.editAsNew = function(xml, title) { let wnd = null; - let l = this.bind(function(evt) + let l = ((evt) => { if (evt.data == 'ready' && evt.source == wnd) { @@ -659,7 +659,7 @@ Editor.prototype.createUndoManager = function() }; // Installs the command history - let listener = this.bind(function(sender, evt) + let listener = ((sender, evt) => { this.undoListener.apply(this, arguments); }); @@ -867,7 +867,7 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa img.style.left = (left + w + 38 - dx) + 'px'; img.style.zIndex = this.zIndex; - mxEvent.addListener(img, 'click', this.bind(function() + mxEvent.addListener(img, 'click', (() => { editorUi.hideDialog(true); })); @@ -879,10 +879,10 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa { let mouseDownSeen = false; - mxEvent.addGestureListeners(this.bg, this.bind(function(evt) + mxEvent.addGestureListeners(this.bg, ((evt) => { mouseDownSeen = true; - }), null, this.bind(function(evt) + }), null, ((evt) => { if (mouseDownSeen) { @@ -893,7 +893,7 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa } } - this.resizeListener = this.bind(function() + this.resizeListener = (() => { if (onResize != null) { @@ -2025,7 +2025,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat evt.preventDefault(); }); - mxEvent.addListener(dlg, 'dragover', this.bind(function(evt) + mxEvent.addListener(dlg, 'dragover', ((evt) => { if (dropElt == null) { @@ -2037,7 +2037,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat evt.preventDefault(); })); - mxEvent.addListener(dlg, 'drop', this.bind(function(evt) + mxEvent.addListener(dlg, 'drop', ((evt) => { if (dropElt != null) { @@ -2325,7 +2325,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) // Adds listener for double click handling on background mxEvent.addListener(this.backgroundPageShape.node, 'dblclick', - this.bind(function(evt) + ((evt) => { graph.dblClick(evt); }) @@ -2334,11 +2334,11 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) // Adds basic listeners for graph event dispatching outside of the // container and finishing the handling of a single gesture mxEvent.addGestureListeners(this.backgroundPageShape.node, - this.bind(function(evt) + ((evt) => { graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new InternalMouseEvent(evt)); }), - this.bind(function(evt) + ((evt) => { // Hides the tooltip if mouse is outside container if (graph.tooltipHandler != null && graph.tooltipHandler.isHideOnHover()) @@ -2351,7 +2351,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new InternalMouseEvent(evt)); } }), - this.bind(function(evt) + ((evt) => { graph.fireMouseEvent(mxEvent.MOUSE_UP, new InternalMouseEvent(evt)); }) @@ -2530,7 +2530,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) this.verticalPageBreaks = []; } - let drawPageBreaks = this.bind(function(breaks) + let drawPageBreaks = ((breaks) => { if (breaks != null) { @@ -2605,7 +2605,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) { let marker = mxConnectionHandlerCreateMarker.apply(this, arguments); - marker.intersects = this.bind(function(state, evt) + marker.intersects = ((state, evt) => { if (this.isConnecting()) { diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js index ec2183fe5..fdc6f7cb1 100644 --- a/docs/stashed/grapheditor/www/js/EditorUi.js +++ b/docs/stashed/grapheditor/www/js/EditorUi.js @@ -75,7 +75,7 @@ EditorUi = function(editor, container, lightbox) this.refresh(); // Disables HTML and text selection - let textEditing = this.bind(function(evt) + let textEditing = ((evt) => { if (evt == null) { @@ -177,7 +177,7 @@ EditorUi = function(editor, container, lightbox) } // Adds tooltip when mouse is over scrollbars to show space-drag panning option - mxEvent.addListener(this.diagramContainer, 'mousemove', this.bind(function(evt) + mxEvent.addListener(this.diagramContainer, 'mousemove', ((evt) => { let off = getOffset(this.diagramContainer); @@ -203,7 +203,7 @@ EditorUi = function(editor, container, lightbox) return spaceKeyPressed || hoverIconsIsResetEvent.apply(this, arguments); }; - this.keydownHandler = this.bind(function(evt) + this.keydownHandler = ((evt) => { if (evt.which == 32 /* Space */ && !graph.isEditing()) { @@ -225,7 +225,7 @@ EditorUi = function(editor, container, lightbox) mxEvent.addListener(document, 'keydown', this.keydownHandler); - this.keyupHandler = this.bind(function(evt) + this.keyupHandler = ((evt) => { graph.container.style.cursor = ''; spaceKeyPressed = false; @@ -271,7 +271,7 @@ EditorUi = function(editor, container, lightbox) let sizeMenu = null; let nodes = null; - let updateToolbar = this.bind(function() + let updateToolbar = (() => { if (this.toolbar != null && textMode != graph.cellEditor.isContentEditing()) { @@ -415,14 +415,14 @@ EditorUi = function(editor, container, lightbox) // Installs context menu if (this.menus != null) { - graph.popupMenuHandler.factoryMethod = this.bind(function(menu, cell, evt) + graph.popupMenuHandler.factoryMethod = ((menu, cell, evt) => { this.menus.createPopupMenu(menu, cell, evt); }); } // Hides context menu - mxEvent.addGestureListeners(document, this.bind(function(evt) + mxEvent.addGestureListeners(document, ((evt) => { graph.popupMenuHandler.hideMenu(); })); @@ -672,7 +672,7 @@ EditorUi = function(editor, container, lightbox) insertHandler(cells); }); - this.addListener('styleChanged', this.bind(function(sender, evt) + this.addListener('styleChanged', ((sender, evt) => { // Checks if edges and/or vertices were modified let cells = evt.getProperty('cells'); @@ -851,7 +851,7 @@ EditorUi = function(editor, container, lightbox) // Update font size and font family labels if (this.toolbar != null) { - let update = this.bind(function() + let update = (() => { let ff = graph.currentVertexStyle['fontFamily'] || 'Helvetica'; let fs = String(graph.currentVertexStyle['fontSize'] || '12'); @@ -889,7 +889,7 @@ EditorUi = function(editor, container, lightbox) }); // Global handler to hide the current menu - this.gestureHandler = this.bind(function(evt) + this.gestureHandler = ((evt) => { if (this.currentMenu != null && mxEvent.getSource(evt) != this.currentMenu.div) { @@ -902,9 +902,9 @@ EditorUi = function(editor, container, lightbox) // Updates the editor UI after the window has been resized or the orientation changes // Timeout is workaround for old IE versions which have a delay for DOM client sizes. // Should not use delay > 0 to avoid handle multiple repaints during window resize - this.resizeHandler = this.bind(function() + this.resizeHandler = (() => { - window.setTimeout(this.bind(function() + window.setTimeout((() => { if (this.editor.graph != null) { @@ -915,7 +915,7 @@ EditorUi = function(editor, container, lightbox) mxEvent.addListener(window, 'resize', this.resizeHandler); - this.orientationChangeHandler = this.bind(function() + this.orientationChangeHandler = (() => { this.refresh(); }); @@ -926,7 +926,7 @@ EditorUi = function(editor, container, lightbox) // http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue if (mxClient.IS_IOS && !window.navigator.standalone) { - this.scrollHandler = this.bind(function() + this.scrollHandler = (() => { window.scrollTo(0, 0); }); @@ -937,7 +937,7 @@ EditorUi = function(editor, container, lightbox) /** * Sets the initial scrollbar locations after a file was loaded. */ - this.editor.addListener('resetGraphView', this.bind(function() + this.editor.addListener('resetGraphView', (() => { this.resetScrollbars(); })); @@ -945,12 +945,12 @@ EditorUi = function(editor, container, lightbox) /** * Repaints the grid. */ - this.addListener('gridEnabledChanged', this.bind(function() + this.addListener('gridEnabledChanged', (() => { graph.view.validateBackground(); })); - this.addListener('backgroundColorChanged', this.bind(function() + this.addListener('backgroundColorChanged', (() => { graph.view.validateBackground(); })); @@ -958,7 +958,7 @@ EditorUi = function(editor, container, lightbox) /** * Repaints the grid. */ - graph.addListener('gridSizeChanged', this.bind(function() + graph.addListener('gridSizeChanged', (() => { if (graph.isGridEnabled()) { @@ -1062,7 +1062,7 @@ EditorUi.prototype.init = function() } // Hides tooltips and connection points when scrolling - mxEvent.addListener(graph.container, 'scroll', this.bind(function() + mxEvent.addListener(graph.container, 'scroll', (() => { graph.tooltipHandler.hide(); @@ -1073,7 +1073,7 @@ EditorUi.prototype.init = function() })); // Hides tooltip on escape - graph.addListener(mxEvent.ESCAPE, this.bind(function() + graph.addListener(mxEvent.ESCAPE, (() => { graph.tooltipHandler.hide(); let rb = graph.getRubberband(); @@ -1084,12 +1084,12 @@ EditorUi.prototype.init = function() } })); - mxEvent.addListener(graph.container, 'keydown', this.bind(function(evt) + mxEvent.addListener(graph.container, 'keydown', ((evt) => { this.onKeyDown(evt); })); - mxEvent.addListener(graph.container, 'keypress', this.bind(function(evt) + mxEvent.addListener(graph.container, 'keypress', ((evt) => { this.onKeyPress(evt); })); @@ -1098,12 +1098,12 @@ EditorUi.prototype.init = function() this.addUndoListener(); this.addBeforeUnloadListener(); - graph.getSelectionModel().addListener(mxEvent.CHANGE, this.bind(function() + graph.getSelectionModel().addListener(mxEvent.CHANGE, (() => { this.updateActionStates(); })); - graph.getModel().addListener(mxEvent.CHANGE, this.bind(function() + graph.getModel().addListener(mxEvent.CHANGE, (() => { this.updateActionStates(); })); @@ -1141,7 +1141,7 @@ EditorUi.prototype.installShapePicker = function() let ui = this; // Uses this event to process mouseDown to check the selection state before it is changed - graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.bind(function(sender, evt) + graph.addListener(mxEvent.FIRE_MOUSE_EVENT, ((sender, evt) => { if (evt.getProperty('eventName') == 'mouseDown') { @@ -1149,17 +1149,17 @@ EditorUi.prototype.installShapePicker = function() } })); - graph.addListener(mxEvent.ESCAPE, this.bind(function() + graph.addListener(mxEvent.ESCAPE, (() => { ui.hideShapePicker(true); })); - graph.getSelectionModel().addListener(mxEvent.CHANGE, this.bind(function() + graph.getSelectionModel().addListener(mxEvent.CHANGE, (() => { ui.hideShapePicker(true); })); - graph.getModel().addListener(mxEvent.CHANGE, this.bind(function() + graph.getModel().addListener(mxEvent.CHANGE, (() => { ui.hideShapePicker(true); })); @@ -1185,7 +1185,7 @@ EditorUi.prototype.installShapePicker = function() let pt = convertPoint(this.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); // Asynchronous to avoid direct insert after double tap - window.setTimeout(this.bind(function() + window.setTimeout((() => { ui.showShapePicker(pt.x, pt.y); }), 30); @@ -1215,7 +1215,7 @@ EditorUi.prototype.installShapePicker = function() if (!this.graph.isCloneEvent(evt) && !mxEvent.isShiftDown(evt)) { - this.graph.connectVertex(state.cell, dir, this.graph.defaultEdgeLength, evt, null, null, this.bind(function(x, y, execute) + this.graph.connectVertex(state.cell, dir, this.graph.defaultEdgeLength, evt, null, null, ((x, y, execute) => { let temp = graph.getCompositeParent(state.cell); let geo = temp.getGeometry(); @@ -1229,14 +1229,14 @@ EditorUi.prototype.installShapePicker = function() } // Asynchronous to avoid direct insert after double tap - window.setTimeout(this.bind(function() + window.setTimeout((() => { - ui.showShapePicker(me.getGraphX(), me.getGraphY(), temp, this.bind(function(cell) + ui.showShapePicker(me.getGraphX(), me.getGraphY(), temp, ((cell) => { execute(cell); }), dir); }), 30); - }), this.bind(function(result) + }), ((result) => { this.graph.selectCellsForConnectVertex(result, evt, this); })); @@ -1280,7 +1280,7 @@ EditorUi.prototype.showShapePicker = function(x, y, source, callback, direction) graph.container.appendChild(div); - let addCell = this.bind(function(cell) + let addCell = ((cell) => { // Wrapper needed to catch events let node = document.createElement('a'); @@ -1364,7 +1364,7 @@ EditorUi.prototype.showShapePicker = function(x, y, source, callback, direction) */ EditorUi.prototype.getCellsForShapePicker = function(cell) { - let createVertex = this.bind(function(style, w, h, value) + let createVertex = ((style, w, h, value) => { return this.editor.graph.createVertex(null, null, value || '', 0, 0, w || 120, h || 60, style, false); }); @@ -1781,7 +1781,7 @@ EditorUi.prototype.initCanvas = function() if (this.editor.isChromelessView()) { - resize = this.bind(function(autoscale, maxScale, cx, cy) + resize = ((autoscale, maxScale, cx, cy) => { if (graph.container != null && !graph.isViewer()) { @@ -1835,13 +1835,13 @@ EditorUi.prototype.initCanvas = function() this.chromelessResize = resize; // Hook for subclassers for override - this.chromelessWindowResize = this.bind(function() + this.chromelessWindowResize = (() => { this.chromelessResize(false); }); // Removable resize listener - let autoscaleResize = this.bind(function() + let autoscaleResize = (() => { this.chromelessWindowResize(false); }); @@ -1853,17 +1853,17 @@ EditorUi.prototype.initCanvas = function() mxEvent.removeListener(window, 'resize', autoscaleResize); }); - this.editor.addListener('resetGraphView', this.bind(function() + this.editor.addListener('resetGraphView', (() => { this.chromelessResize(true); })); - this.actions.get('zoomIn').funct = this.bind(function(evt) + this.actions.get('zoomIn').funct = ((evt) => { graph.zoomIn(); this.chromelessResize(false); }); - this.actions.get('zoomOut').funct = this.bind(function(evt) + this.actions.get('zoomOut').funct = ((evt) => { graph.zoomOut(); this.chromelessResize(false); @@ -1887,7 +1887,7 @@ EditorUi.prototype.initCanvas = function() setPrefixedStyle(this.chromelessToolbar.style, 'borderRadius', '20px'); setPrefixedStyle(this.chromelessToolbar.style, 'transition', 'opacity 600ms ease-in-out'); - let updateChromelessToolbarPosition = this.bind(function() + let updateChromelessToolbarPosition = (() => { let css = getCurrentStyle(graph.container); @@ -1907,7 +1907,7 @@ EditorUi.prototype.initCanvas = function() let btnCount = 0; - let addButton = this.bind(function(fn, imgSrc, tip) + let addButton = ((fn, imgSrc, tip) => { btnCount++; @@ -1934,7 +1934,7 @@ EditorUi.prototype.initCanvas = function() if (toolbarConfig.backBtn != null) { - addButton(this.bind(function(evt) + addButton(((evt) => { window.location.href = toolbarConfig.backBtn.url; mxEvent.consume(evt); @@ -1943,7 +1943,7 @@ EditorUi.prototype.initCanvas = function() if (this.isPagesEnabled()) { - let prevButton = addButton(this.bind(function(evt) + let prevButton = addButton(((evt) => { this.actions.get('previousPage').funct(); mxEvent.consume(evt); @@ -1958,13 +1958,13 @@ EditorUi.prototype.initCanvas = function() pageInfo.style.color = '#ffffff'; this.chromelessToolbar.appendChild(pageInfo); - let nextButton = addButton(this.bind(function(evt) + let nextButton = addButton(((evt) => { this.actions.get('nextPage').funct(); mxEvent.consume(evt); }), Editor.nextLargeImage, Resources.get('nextPage')); - let updatePageInfo = this.bind(function() + let updatePageInfo = (() => { if (this.pages != null && this.pages.length > 1 && this.currentPage != null) { @@ -1978,7 +1978,7 @@ EditorUi.prototype.initCanvas = function() nextButton.style.paddingLeft = '4px'; nextButton.style.paddingRight = '0px'; - let updatePageButtons = this.bind(function() + let updatePageButtons = (() => { if (this.pages != null && this.pages.length > 1 && this.currentPage != null) { @@ -2000,19 +2000,19 @@ EditorUi.prototype.initCanvas = function() this.editor.addListener('pageSelected', updatePageInfo); } - addButton(this.bind(function(evt) + addButton(((evt) => { this.actions.get('zoomOut').funct(); mxEvent.consume(evt); }), Editor.zoomOutLargeImage, Resources.get('zoomOut') + ' (Alt+Mousewheel)'); - addButton(this.bind(function(evt) + addButton(((evt) => { this.actions.get('zoomIn').funct(); mxEvent.consume(evt); }), Editor.zoomInLargeImage, Resources.get('zoomIn') + ' (Alt+Mousewheel)'); - addButton(this.bind(function(evt) + addButton(((evt) => { if (graph.isLightboxView()) { @@ -2039,7 +2039,7 @@ EditorUi.prototype.initCanvas = function() let fadeThread = null; var fadeThread2 = null; - let fadeOut = this.bind(function(delay) + let fadeOut = ((delay) => { if (fadeThread != null) { @@ -2053,12 +2053,12 @@ EditorUi.prototype.initCanvas = function() fadeThread2 = null; } - fadeThread = window.setTimeout(this.bind(function() + fadeThread = window.setTimeout((() => { setOpacity(this.chromelessToolbar, 0); fadeThread = null; - fadeThread2 = window.setTimeout(this.bind(function() + fadeThread2 = window.setTimeout((() => { this.chromelessToolbar.style.display = 'none'; fadeThread2 = null; @@ -2066,7 +2066,7 @@ EditorUi.prototype.initCanvas = function() }), delay || 200); }); - let fadeIn = this.bind(function(opacity) + let fadeIn = ((opacity) => { if (fadeThread != null) { @@ -2088,7 +2088,7 @@ EditorUi.prototype.initCanvas = function() { this.layersDialog = null; - let layersButton = addButton(this.bind(function(evt) + let layersButton = addButton(((evt) => { if (this.layersDialog != null) { @@ -2099,7 +2099,7 @@ EditorUi.prototype.initCanvas = function() { this.layersDialog = graph.createLayersDialog(); - mxEvent.addListener(this.layersDialog, 'mouseleave', this.bind(function() + mxEvent.addListener(this.layersDialog, 'mouseleave', (() => { this.layersDialog.parentNode.removeChild(this.layersDialog); this.layersDialog = null; @@ -2145,7 +2145,7 @@ EditorUi.prototype.initCanvas = function() if (this.editor.editButtonLink != null || this.editor.editButtonFunc != null) { - addButton(this.bind(function(evt) + addButton(((evt) => { if (this.editor.editButtonFunc != null) { @@ -2175,7 +2175,7 @@ EditorUi.prototype.initCanvas = function() if (toolbarConfig.refreshBtn != null) { - addButton(this.bind(function(evt) + addButton(((evt) => { if (toolbarConfig.refreshBtn.url) { @@ -2192,7 +2192,7 @@ EditorUi.prototype.initCanvas = function() if (toolbarConfig.fullscreenBtn != null && window.self !== window.top) { - addButton(this.bind(function(evt) + addButton(((evt) => { if (toolbarConfig.fullscreenBtn.url) { @@ -2211,7 +2211,7 @@ EditorUi.prototype.initCanvas = function() (graph.lightbox && (urlParams['close'] == '1' || this.container != document.body))) { - addButton(this.bind(function(evt) + addButton(((evt) => { if (urlParams['close'] == '1' || toolbarConfig.closeBtn) { @@ -2235,7 +2235,7 @@ EditorUi.prototype.initCanvas = function() graph.container.appendChild(this.chromelessToolbar); - mxEvent.addListener(graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', this.bind(function(evt) + mxEvent.addListener(graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', ((evt) => { if (!mxEvent.isTouchEvent(evt)) { @@ -2253,7 +2253,7 @@ EditorUi.prototype.initCanvas = function() mxEvent.consume(evt); }); - mxEvent.addListener(this.chromelessToolbar, 'mouseenter', this.bind(function(evt) + mxEvent.addListener(this.chromelessToolbar, 'mouseenter', ((evt) => { if (!mxEvent.isShiftDown(evt)) { @@ -2443,7 +2443,7 @@ EditorUi.prototype.initCanvas = function() { if (!graph.isMouseDown || forcedZoom) { - updateZoomTimeout = window.setTimeout(this.bind(function() + updateZoomTimeout = window.setTimeout((() => { if (graph.isFastZoomEnabled()) { @@ -2647,7 +2647,7 @@ EditorUi.prototype.initCanvas = function() } }); - mxEvent.addMouseWheelListener(this.bind(function(evt, up, force, cx, cy) + mxEvent.addMouseWheelListener(((evt, up, force, cx, cy) => { if (this.dialogs == null || this.dialogs.length == 0) { @@ -2704,7 +2704,7 @@ EditorUi.prototype.initCanvas = function() */ EditorUi.prototype.addChromelessToolbarItems = function(addButton) { - addButton(this.bind(function(evt) + addButton(((evt) => { this.actions.get('print').funct(); mxEvent.consume(evt); @@ -2832,7 +2832,7 @@ EditorUi.prototype.addBeforeUnloadListener = function() { // Installs dialog if browser window is closed without saving // This must be disabled during save and image export - window.onbeforeunload = this.bind(function() + window.onbeforeunload = (() => { if (!this.editor.isChromelessView()) { @@ -2863,7 +2863,7 @@ EditorUi.prototype.open = function() { if (window.opener != null && window.opener.openFile != null) { - window.opener.openFile.setConsumer(this.bind(function(xml, filename) + window.opener.openFile.setConsumer(((xml, filename) => { try { @@ -2915,7 +2915,7 @@ EditorUi.prototype.showPopupMenu = function(fn, x, y, evt) menu.autoExpand = true; // Disables autoexpand and destroys menu when hidden - menu.hideMenu = this.bind(function() + menu.hideMenu = (() => { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); menu.destroy(); @@ -3438,7 +3438,7 @@ EditorUi.prototype.addUndoListener = function() let undoMgr = this.editor.undoManager; - let undoListener = this.bind(function() + let undoListener = (() => { undo.setEnabled(this.canUndo()); redo.setEnabled(this.canRedo()); @@ -3792,7 +3792,7 @@ EditorUi.prototype.createUi = function() this.statusContainer = this.createStatusContainer(); // Connects the status bar to the editor status - this.editor.addListener('statusChanged', this.bind(function() + this.editor.addListener('statusChanged', (() => { this.setStatusText(this.editor.getStatus()); })); @@ -3855,7 +3855,7 @@ EditorUi.prototype.createUi = function() { this.container.appendChild(this.hsplit); - this.addSplitHandler(this.hsplit, true, 0, this.bind(function(value) + this.addSplitHandler(this.hsplit, true, 0, ((value) => { this.hsplitPosition = value; this.refresh(); @@ -3941,7 +3941,7 @@ EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange) elt.style.touchAction = 'none'; } - let getValue = this.bind(function() + let getValue = (() => { let result = parseInt(((horizontal) ? elt.style.left : elt.style.bottom)); @@ -3985,7 +3985,7 @@ EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange) mxEvent.consume(evt); }); - mxEvent.addListener(elt, 'click', this.bind(function(evt) + mxEvent.addListener(elt, 'click', ((evt) => { if (!ignoreClick && this.hsplitClickEnabled) { @@ -4086,7 +4086,7 @@ EditorUi.prototype.hideDialog = function(cancel, isEsc) if (this.dialog == null && this.editor.graph.container.style.visibility != 'hidden') { - window.setTimeout(this.bind(function() + window.setTimeout((() => { if (this.editor.graph.isEditing() && this.editor.graph.cellEditor.textarea != null) { @@ -4166,7 +4166,7 @@ EditorUi.prototype.pickColor = function(color, apply) EditorUi.prototype.openFile = function() { // Closes dialog after open - window.openFile = new OpenFile(this.bind(function(cancel) + window.openFile = new OpenFile(((cancel) => { this.hideDialog(cancel); })); @@ -4273,10 +4273,10 @@ EditorUi.prototype.saveFile = function(forceDialog) } else { - let dlg = new FilenameDialog(this, this.editor.getOrCreateFilename(), Resources.get('save'), this.bind(function(name) + let dlg = new FilenameDialog(this, this.editor.getOrCreateFilename(), Resources.get('save'), ((name) => { this.save(name); - }), null, this.bind(function(name) + }), null, ((name) => { if (name != null && name.length > 0) { @@ -4373,7 +4373,7 @@ EditorUi.prototype.executeLayout = function(exec, animate, post) { // New API for animating graph layout results asynchronously let morph = new mxMorphing(graph); - morph.addListener(mxEvent.DONE, this.bind(function() + morph.addListener(mxEvent.DONE, (() => { graph.getModel().endUpdate(); @@ -4458,7 +4458,7 @@ EditorUi.prototype.showDataDialog = function(cell) */ EditorUi.prototype.showBackgroundImageDialog = function(apply, img) { - apply = (apply != null) ? apply : this.bind(function(image) + apply = (apply != null) ? apply : ((image) => { let change = new ChangePageSetup(this, null, image); change.ignoreColor = true; @@ -4858,7 +4858,7 @@ EditorUi.prototype.createKeyHandler = function(editor) }; // Binds keystrokes to actions - keyHandler.bindAction = this.bind(function(code, control, key, shift) + keyHandler.bindAction = ((code, control, key, shift) => { let action = this.actions.get(key); diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js index 7744fd6b9..af6c4f143 100644 --- a/docs/stashed/grapheditor/www/js/Format.js +++ b/docs/stashed/grapheditor/www/js/Format.js @@ -62,7 +62,7 @@ Format.prototype.init = function() let editor = ui.editor; let graph = editor.graph; - this.update = this.bind(function(sender, evt) + this.update = ((sender, evt) => { this.clearSelectionState(); this.refresh(); @@ -72,17 +72,17 @@ Format.prototype.init = function() graph.addListener(mxEvent.EDITING_STARTED, this.update); graph.addListener(mxEvent.EDITING_STOPPED, this.update); graph.getModel().addListener(mxEvent.CHANGE, this.update); - graph.addListener(mxEvent.ROOT, this.bind(function() + graph.addListener(mxEvent.ROOT, (() => { this.refresh(); })); - ui.addListener('styleChanged', this.bind(function(sender, evt) + ui.addListener('styleChanged', ((sender, evt) => { this.refresh(); })); - editor.addListener('autosaveChanged', this.bind(function() + editor.addListener('autosaveChanged', (() => { this.refresh(); })); @@ -406,7 +406,7 @@ Format.prototype.refresh = function() // Prevents text selection mxEvent.addListener(label, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - this.bind(function(evt) + ((evt) => { evt.preventDefault(); })); @@ -415,9 +415,9 @@ Format.prototype.refresh = function() let currentLabel = null; let currentPanel = null; - let addClickHandler = this.bind(function(elt, panel, index) + let addClickHandler = ((elt, panel, index) => { - let clickHandler = this.bind(function(evt) + let clickHandler = ((evt) => { if (currentLabel != elt) { @@ -461,7 +461,7 @@ Format.prototype.refresh = function() // Prevents text selection mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - this.bind(function(evt) + ((evt) => { evt.preventDefault(); })); @@ -678,7 +678,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu let selState = null; let updating = false; - let update = this.bind(function(evt) + let update = ((evt) => { let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value); @@ -1167,7 +1167,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol } }; - btn = button('', this.bind(function(evt) + btn = button('', ((evt) => { this.editorUi.pickColor(value, function(color) { @@ -1376,7 +1376,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han write(div, label); div.style.fontWeight = 'bold'; - let update = this.bind(function(evt) + let update = ((evt) => { if (handler != null) { @@ -1411,7 +1411,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han if (key != null) { - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { if (force || input != document.activeElement) { @@ -1474,7 +1474,7 @@ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) */ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) { - mxEvent.addListener(input, 'keydown', this.bind(function(e) + mxEvent.addListener(input, 'keydown', ((e) => { if (e.keyCode == 13) { @@ -1623,7 +1623,7 @@ ArrangePanel.prototype.addTable = function(div) let btns = [ ui.toolbar.addButton('geSprite-insertcolumnbefore', Resources.get('insertColumnBefore'), - this.bind(function() + (() => { try { @@ -1635,7 +1635,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-insertcolumnafter', Resources.get('insertColumnAfter'), - this.bind(function() + (() => { try { @@ -1647,7 +1647,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-deletecolumn', Resources.get('deleteColumn'), - this.bind(function() + (() => { try { @@ -1659,7 +1659,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-insertrowbefore', Resources.get('insertRowBefore'), - this.bind(function() + (() => { try { @@ -1671,7 +1671,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-insertrowafter', Resources.get('insertRowAfter'), - this.bind(function() + (() => { try { @@ -1683,7 +1683,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-deleterow', Resources.get('deleteRow'), - this.bind(function() + (() => { try { @@ -1841,7 +1841,7 @@ ArrangePanel.prototype.addGroupOps = function(div) br(div); } - btn = button(Resources.get('clearWaypoints'), this.bind(function(evt) + btn = button(Resources.get('clearWaypoints'), ((evt) => { this.editorUi.actions.get('clearWaypoints').funct(); })); @@ -1861,7 +1861,7 @@ ArrangePanel.prototype.addGroupOps = function(div) br(div); } - btn = button(Resources.get('editData'), this.bind(function(evt) + btn = button(Resources.get('editData'), ((evt) => { this.editorUi.actions.get('editData').funct(); })); @@ -1872,7 +1872,7 @@ ArrangePanel.prototype.addGroupOps = function(div) div.appendChild(btn); count++; - btn = button(Resources.get('editLink'), this.bind(function(evt) + btn = button(Resources.get('editLink'), ((evt) => { this.editorUi.actions.get('editLink').funct(); })); @@ -2075,7 +2075,7 @@ ArrangePanel.prototype.addAngle = function(div) if (input != null) { - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { if (force || document.activeElement != input) { @@ -2323,7 +2323,7 @@ ArrangePanel.prototype.addGeometry = function(container) this.addLabel(div2, Resources.get('left'), 84); this.addLabel(div2, Resources.get('top'), 20); - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { rect = this.format.getSelectionState(); @@ -2650,7 +2650,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) this.addKeyHandler(xt, listener); this.addKeyHandler(yt, listener); - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { rect = this.format.getSelectionState(); let cell = graph.getSelectionCell(); @@ -3522,7 +3522,7 @@ TextFormatPanel.prototype.addFont = function(container) { document.execCommand('inserthorizontalrule', false); }, insertPanel), - this.editorUi.toolbar.addMenuFunctionInContainer(insertPanel, 'geSprite-table', Resources.get('table'), false, this.bind(function(menu) + this.editorUi.toolbar.addMenuFunctionInContainer(insertPanel, 'geSprite-table', Resources.get('table'), false, ((menu) => { this.editorUi.menus.addInsertTableItem(menu); }))]; @@ -3541,7 +3541,7 @@ TextFormatPanel.prototype.addFont = function(container) let btns = [ this.editorUi.toolbar.addButton('geSprite-insertcolumnbefore', Resources.get('insertColumnBefore'), - this.bind(function() + (() => { try { @@ -3556,7 +3556,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertcolumnafter', Resources.get('insertColumnAfter'), - this.bind(function() + (() => { try { @@ -3571,7 +3571,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-deletecolumn', Resources.get('deleteColumn'), - this.bind(function() + (() => { try { @@ -3586,7 +3586,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertrowbefore', Resources.get('insertRowBefore'), - this.bind(function() + (() => { try { @@ -3601,7 +3601,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertrowafter', Resources.get('insertRowAfter'), - this.bind(function() + (() => { try { @@ -3616,7 +3616,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-deleterow', Resources.get('deleteRow'), - this.bind(function() + (() => { try { @@ -3644,7 +3644,7 @@ TextFormatPanel.prototype.addFont = function(container) let btns = [ this.editorUi.toolbar.addButton('geSprite-strokecolor', Resources.get('borderColor'), - this.bind(function(evt) + ((evt) => { if (currentTable != null) { @@ -3679,7 +3679,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel2), this.editorUi.toolbar.addButton('geSprite-fillcolor', Resources.get('backgroundColor'), - this.bind(function(evt) + ((evt) => { // Converts rgb(r,g,b) values if (currentTable != null) @@ -3716,7 +3716,7 @@ TextFormatPanel.prototype.addFont = function(container) { let value = currentTable.getAttribute('cellPadding') || 0; - let dlg = new FilenameDialog(ui, value, Resources.get('apply'), this.bind(function(newValue) + let dlg = new FilenameDialog(ui, value, Resources.get('apply'), ((newValue) => { if (newValue != null && newValue.length > 0) { @@ -3769,7 +3769,7 @@ TextFormatPanel.prototype.addFont = function(container) elt.style.backgroundImage = (selected) ? 'linear-gradient(#c5ecff 0px,#87d4fb 100%)' : ''; }; - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { ss = this.format.getSelectionState(); let fontStyle = getValue(ss.style, 'fontStyle', 0); @@ -4304,7 +4304,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; }; - let addStyleRule = this.bind(function(rule, key, label) + let addStyleRule = ((rule, key, label) => { let value = trim(rule.style[key]); @@ -4364,7 +4364,7 @@ StyleFormatPanel.prototype.addEditOps = function(div) if (this.editorUi.editor.graph.getSelectionCount() == 1) { - btn = button(Resources.get('editStyle'), this.bind(function(evt) + btn = button(Resources.get('editStyle'), ((evt) => { this.editorUi.actions.get('editStyle').funct(); })); @@ -4378,7 +4378,7 @@ StyleFormatPanel.prototype.addEditOps = function(div) if (ss.image) { - var btn2 = button(Resources.get('editImage'), this.bind(function(evt) + var btn2 = button(Resources.get('editImage'), ((evt) => { this.editorUi.actions.get('image').funct(); })); @@ -4454,7 +4454,7 @@ StyleFormatPanel.prototype.addFill = function(container) let label = (ss.style.shape == 'image') ? Resources.get('background') : Resources.get('fill'); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); - let fillPanel = this.createCellColorOption(label, fillKey, (defs[fillKey] != null) ? defs[fillKey] : '#ffffff', null, this.bind(function(color) + let fillPanel = this.createCellColorOption(label, fillKey, (defs[fillKey] != null) ? defs[fillKey] : '#ffffff', null, ((color) => { graph.updateCellStyles(fillKey, color, graph.getSelectionCells()); })); @@ -4487,7 +4487,7 @@ StyleFormatPanel.prototype.addFill = function(container) fillPanel.appendChild(fillStyleSelect); - let listener = this.bind(function() + let listener = (() => { ss = this.format.getSelectionState(); let value = getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH); @@ -4645,7 +4645,7 @@ StyleFormatPanel.prototype.addStroke = function(container) let label = (ss.style.shape == 'image') ? Resources.get('border') : Resources.get('line'); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); - let lineColor = this.createCellColorOption(label, strokeKey, (defs[strokeKey] != null) ? defs[strokeKey] : '#000000', null, this.bind(function(color) + let lineColor = this.createCellColorOption(label, strokeKey, (defs[strokeKey] != null) ? defs[strokeKey] : '#000000', null, ((color) => { graph.updateCellStyles(strokeKey, color, graph.getSelectionCells()); })); @@ -4663,7 +4663,7 @@ StyleFormatPanel.prototype.addStroke = function(container) stylePanel.style.marginTop = '2px'; stylePanel.className = 'geToolbarContainer'; - let addItem = this.bind(function(menu, width, cssName, keys, values) + let addItem = ((menu, width, cssName, keys, values) => { let item = this.editorUi.menus.styleChange(menu, '', keys, values, 'geIcon', null); @@ -4680,7 +4680,7 @@ StyleFormatPanel.prototype.addStroke = function(container) return item; }); - let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, this.bind(function(menu) + let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, ((menu) => { addItem(menu, 75, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', Resources.get('solid')); addItem(menu, 75, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', Resources.get('dashed')); @@ -4692,7 +4692,7 @@ StyleFormatPanel.prototype.addStroke = function(container) // Used for mixed selection (vertices and edges) let altStylePanel = stylePanel.cloneNode(false); - let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', Resources.get('connection'), false, this.bind(function(menu) + let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', Resources.get('connection'), false, ((menu) => { this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', Resources.get('line')); this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', Resources.get('link')); @@ -4700,7 +4700,7 @@ StyleFormatPanel.prototype.addStroke = function(container) this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', Resources.get('simpleArrow')); })); - let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, this.bind(function(menu) + let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, ((menu) => { addItem(menu, 33, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', Resources.get('solid')); addItem(menu, 33, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', Resources.get('dashed')); @@ -4783,7 +4783,7 @@ StyleFormatPanel.prototype.addStroke = function(container) mxEvent.addListener(altInput, 'blur', altUpdate); mxEvent.addListener(altInput, 'change', altUpdate); - let edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-orthogonal', Resources.get('waypoints'), false, this.bind(function(menu) + let edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-orthogonal', Resources.get('waypoints'), false, ((menu) => { if (ss.style.shape != 'arrow') { @@ -4803,7 +4803,7 @@ StyleFormatPanel.prototype.addStroke = function(container) } })); - let lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-startclassic', Resources.get('linestart'), false, this.bind(function(menu) + let lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-startclassic', Resources.get('linestart'), false, ((menu) => { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge') { @@ -4852,7 +4852,7 @@ StyleFormatPanel.prototype.addStroke = function(container) } })); - let lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-endclassic', Resources.get('lineend'), false, this.bind(function(menu) + let lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-endclassic', Resources.get('lineend'), false, ((menu) => { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge') { @@ -5027,7 +5027,7 @@ StyleFormatPanel.prototype.addStroke = function(container) container.appendChild(perimeterPanel); } - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { ss = this.format.getSelectionState(); let color = getValue(ss.style, strokeKey, null); @@ -5332,7 +5332,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) jumpSizeUpdate = this.installInputHandler(jumpSize, 'jumpSize', Graph.defaultJumpSize, 0, 999, ' pt'); - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { ss = this.format.getSelectionState(); styleSelect.value = getValue(ss.style, 'jumpStyle', 'none'); @@ -5395,7 +5395,7 @@ StyleFormatPanel.prototype.addEffects = function(div) let current = left; let count = 0; - let addOption = this.bind(function(label, key, defaultValue) + let addOption = ((label, key, defaultValue) => { let opt = this.createCellOption(label, key, defaultValue); opt.style.width = '100%'; @@ -5404,7 +5404,7 @@ StyleFormatPanel.prototype.addEffects = function(div) count++; }); - let listener = this.bind(function(sender, evt, force) + let listener = ((sender, evt, force) => { ss = this.format.getSelectionState(); @@ -5450,7 +5450,7 @@ StyleFormatPanel.prototype.addStyleOps = function(div) div.style.paddingTop = '10px'; div.style.paddingBottom = '10px'; - let btn = button(Resources.get('setAsDefaultStyle'), this.bind(function(evt) + let btn = button(Resources.get('setAsDefaultStyle'), ((evt) => { this.editorUi.actions.get('setAsDefaultStyle').funct(); })); @@ -5609,7 +5609,7 @@ DiagramStylePanel.prototype.addView = function(div) let defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor']; - let updateCells = this.bind(function(styles, graphStyle) + let updateCells = ((styles, graphStyle) => { let cells = graph.getVerticesAndEdges(); @@ -5650,7 +5650,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let removeStyles = this.bind(function(style, styles, defaultStyle) + let removeStyles = ((style, styles, defaultStyle) => { if (style != null) { @@ -5667,7 +5667,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let applyStyle = this.bind(function(style, result, cell, graphStyle, theGraph) + let applyStyle = ((style, result, cell, graphStyle, theGraph) => { if (style != null) { @@ -5706,7 +5706,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let btn = button(Resources.get('reset'), this.bind(function(evt) + let btn = button(Resources.get('reset'), ((evt) => { let all = graph.getVerticesAndEdges(true, true); @@ -5735,7 +5735,7 @@ DiagramStylePanel.prototype.addView = function(div) btn.style.maxWidth = '90px'; right.appendChild(btn); - let createPreview = this.bind(function(commonStyle, vertexStyle, edgeStyle, graphStyle, container) + let createPreview = ((commonStyle, vertexStyle, edgeStyle, graphStyle, container) => { // Wrapper needed to catch events let div = document.createElement('div'); @@ -5798,7 +5798,7 @@ DiagramStylePanel.prototype.addView = function(div) this.format.cachedStyleEntries = []; } - let addEntry = this.bind(function(commonStyle, vertexStyle, edgeStyle, graphStyle, index) + let addEntry = ((commonStyle, vertexStyle, edgeStyle, graphStyle, index) => { let panel = this.format.cachedStyleEntries[index]; @@ -5815,10 +5815,10 @@ DiagramStylePanel.prototype.addView = function(div) createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); - mxEvent.addGestureListeners(panel, this.bind(function(evt) + mxEvent.addGestureListeners(panel, ((evt) => { panel.style.opacity = 0.5; - }), null, this.bind(function(evt) + }), null, ((evt) => { panel.style.opacity = 1; graph.defaultVertexStyle = clone(ui.initialDefaultVertexStyle); @@ -5879,7 +5879,7 @@ DiagramStylePanel.prototype.addView = function(div) } })); - mxEvent.addListener(panel, 'mouseenter', this.bind(function(evt) + mxEvent.addListener(panel, 'mouseenter', ((evt) => { let prev = graph.getCellStyle; let prevBg = graph.background; @@ -5915,7 +5915,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.view.gridColor = prevGrid; })); - mxEvent.addListener(panel, 'mouseleave', this.bind(function(evt) + mxEvent.addListener(panel, 'mouseleave', ((evt) => { graph.refresh(); })); @@ -5932,7 +5932,7 @@ DiagramStylePanel.prototype.addView = function(div) this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0; let dots = []; - let addEntries = this.bind(function() + let addEntries = (() => { if (dots.length > 0) { @@ -5948,7 +5948,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let selectPage = this.bind(function(index) + let selectPage = ((index) => { if (index >= 0 && index < pageCount) { @@ -5984,9 +5984,9 @@ DiagramStylePanel.prototype.addView = function(div) dot.style.background = 'transparent'; dot.style.border = '1px solid #b5b6b7'; - (this.bind(function(index, elt) + (((index, elt) => { - mxEvent.addListener(dot, 'click', this.bind(function() + mxEvent.addListener(dot, 'click', (() => { selectPage(index); })); @@ -6005,7 +6005,7 @@ DiagramStylePanel.prototype.addView = function(div) left.style.cssText = 'position:absolute;left:0px;top:4px;bottom:0px;width:20px;margin:0px;opacity:0.5;' + 'background-repeat:no-repeat;background-position:center center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAB2dnZ4eHh3d3d1dXVxcXF2dnZ2dnZ2dnZxcXF2dnYmb3w1AAAACnRSTlMAfCTkhhvb7cQSPH2JPgAAADRJREFUCNdjwACMAmBKaiGYs2oJmLPKAZ3DabU8AMRTXpUKopislqFyVzCAuUZgikkBZjoAcMYLnp53P/UAAAAASUVORK5CYII=);'; - mxEvent.addListener(left, 'click', this.bind(function() + mxEvent.addListener(left, 'click', (() => { selectPage(mod(this.format.currentStylePage - 1, pageCount)); })); @@ -6016,7 +6016,7 @@ DiagramStylePanel.prototype.addView = function(div) switcher.appendChild(left); switcher.appendChild(right); - mxEvent.addListener(right, 'click', this.bind(function() + mxEvent.addListener(right, 'click', (() => { selectPage(mod(this.format.currentStylePage + 1, pageCount)); })); @@ -6497,7 +6497,7 @@ DiagramFormatPanel.prototype.addPaperSize = function(div) */ DiagramFormatPanel.prototype.addStyleOps = function(div) { - let btn = button(Resources.get('editData'), this.bind(function(evt) + let btn = button(Resources.get('editData'), ((evt) => { this.editorUi.actions.get('editData').funct(); })); @@ -6509,7 +6509,7 @@ DiagramFormatPanel.prototype.addStyleOps = function(div) br(div); - btn = button(Resources.get('clearDefaultStyle'), this.bind(function(evt) + btn = button(Resources.get('clearDefaultStyle'), ((evt) => { this.editorUi.actions.get('clearDefaultStyle').funct(); })); diff --git a/docs/stashed/grapheditor/www/js/Menus.js b/docs/stashed/grapheditor/www/js/Menus.js index d58c666bb..d439b797c 100644 --- a/docs/stashed/grapheditor/www/js/Menus.js +++ b/docs/stashed/grapheditor/www/js/Menus.js @@ -52,9 +52,9 @@ Menus.prototype.init = function() this.customFonts = []; this.customFontSizes = []; - this.put('fontFamily', new Menu(this.bind(function(menu, parent) + this.put('fontFamily', new Menu(((menu, parent) => { - let addItem = this.bind(function(fontname) + let addItem = ((fontname) => { let tr = this.styleChange(menu, fontname, .fontFamily, [fontname], null, parent, function() { @@ -91,7 +91,7 @@ Menus.prototype.init = function() menu.addSeparator(parent); - menu.addItem(Resources.get('reset'), null, this.bind(function() + menu.addItem(Resources.get('reset'), null, (() => { this.customFonts = []; this.editorUi.fireEvent(new EventObject('customFontsChanged')); @@ -100,7 +100,7 @@ Menus.prototype.init = function() menu.addSeparator(parent); } - this.promptChange(menu, Resources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, this.bind(function(newValue) + this.promptChange(menu, Resources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, ((newValue) => { if (this.customFonts.indexOf(newValue) === -1) { @@ -109,11 +109,11 @@ Menus.prototype.init = function() } })); }))); - this.put('formatBlock', new Menu(this.bind(function(menu, parent) + this.put('formatBlock', new Menu(((menu, parent) => { function addItem(label, tag) { - return menu.addItem(label, null, this.bind(function() + return menu.addItem(label, null, (() => { // TODO: Check if visible if (graph.cellEditor.textarea != null) @@ -136,11 +136,11 @@ Menus.prototype.init = function() addItem('', 'pre').firstChild.nextSibling.innerHTML = '
' + Resources.get('formatted') + '
'; addItem('', 'blockquote').firstChild.nextSibling.innerHTML = '
' + Resources.get('blockquote') + '
'; }))); - this.put('fontSize', new Menu(this.bind(function(menu, parent) + this.put('fontSize', new Menu(((menu, parent) => { let sizes = [6, 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 72]; - let addItem = this.bind(function(fontsize) + let addItem = ((fontsize) => { this.styleChange(menu, fontsize, .fontSize, [fontsize], null, parent, function() { @@ -184,7 +184,7 @@ Menus.prototype.init = function() menu.addSeparator(parent); - menu.addItem(Resources.get('reset'), null, this.bind(function() + menu.addItem(Resources.get('reset'), null, (() => { this.customFontSizes = []; }), parent); @@ -192,18 +192,18 @@ Menus.prototype.init = function() menu.addSeparator(parent); } - this.promptChange(menu, Resources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, this.bind(function(newValue) + this.promptChange(menu, Resources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, ((newValue) => { this.customFontSizes.push(newValue); })); }))); - this.put('direction', new Menu(this.bind(function(menu, parent) + this.put('direction', new Menu(((menu, parent) => { menu.addItem(Resources.get('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent); menu.addItem(Resources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent); this.addMenuItems(menu, ['-', 'rotation'], parent); }))); - this.put('align', new Menu(this.bind(function(menu, parent) + this.put('align', new Menu(((menu, parent) => { menu.addItem(Resources.get('leftAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_LEFT); }, parent); menu.addItem(Resources.get('center'), null, function() { graph.alignCells(mxConstants.ALIGN_CENTER); }, parent); @@ -213,14 +213,14 @@ Menus.prototype.init = function() menu.addItem(Resources.get('middle'), null, function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, parent); menu.addItem(Resources.get('bottomAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, parent); }))); - this.put('distribute', new Menu(this.bind(function(menu, parent) + this.put('distribute', new Menu(((menu, parent) => { menu.addItem(Resources.get('horizontal'), null, function() { graph.distributeCells(true); }, parent); menu.addItem(Resources.get('vertical'), null, function() { graph.distributeCells(false); }, parent); }))); - this.put('layout', new Menu(this.bind(function(menu, parent) + this.put('layout', new Menu(((menu, parent) => { - let promptSpacing = this.bind(function(defaultValue, fn) + let promptSpacing = ((defaultValue, fn) => { let dlg = new FilenameDialog(this.editorUi, defaultValue, Resources.get('apply'), function(newValue) { @@ -230,7 +230,7 @@ Menus.prototype.init = function() dlg.init(); }); - menu.addItem(Resources.get('horizontalFlow'), null, this.bind(function() + menu.addItem(Resources.get('horizontalFlow'), null, (() => { let layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST); @@ -240,7 +240,7 @@ Menus.prototype.init = function() layout.execute(graph.getDefaultParent(), selectionCells.length == 0 ? null : selectionCells); }, true); }), parent); - menu.addItem(Resources.get('verticalFlow'), null, this.bind(function() + menu.addItem(Resources.get('verticalFlow'), null, (() => { let layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH); @@ -251,7 +251,7 @@ Menus.prototype.init = function() }, true); }), parent); menu.addSeparator(parent); - menu.addItem(Resources.get('horizontalTree'), null, this.bind(function() + menu.addItem(Resources.get('horizontalTree'), null, (() => { let tmp = graph.getSelectionCell(); let roots = null; @@ -279,7 +279,7 @@ Menus.prototype.init = function() layout.edgeRouting = false; layout.levelDistance = 30; - promptSpacing(layout.levelDistance, this.bind(function(newValue) + promptSpacing(layout.levelDistance, ((newValue) => { layout.levelDistance = newValue; @@ -290,7 +290,7 @@ Menus.prototype.init = function() })); } }), parent); - menu.addItem(Resources.get('verticalTree'), null, this.bind(function() + menu.addItem(Resources.get('verticalTree'), null, (() => { let tmp = graph.getSelectionCell(); let roots = null; @@ -318,7 +318,7 @@ Menus.prototype.init = function() layout.edgeRouting = false; layout.levelDistance = 30; - promptSpacing(layout.levelDistance, this.bind(function(newValue) + promptSpacing(layout.levelDistance, ((newValue) => { layout.levelDistance = newValue; @@ -329,7 +329,7 @@ Menus.prototype.init = function() })); } }), parent); - menu.addItem(Resources.get('radialTree'), null, this.bind(function() + menu.addItem(Resources.get('radialTree'), null, (() => { let tmp = graph.getSelectionCell(); let roots = null; @@ -357,7 +357,7 @@ Menus.prototype.init = function() layout.levelDistance = 80; layout.autoRadius = true; - promptSpacing(layout.levelDistance, this.bind(function(newValue) + promptSpacing(layout.levelDistance, ((newValue) => { layout.levelDistance = newValue; @@ -379,11 +379,11 @@ Menus.prototype.init = function() } }), parent); menu.addSeparator(parent); - menu.addItem(Resources.get('organic'), null, this.bind(function() + menu.addItem(Resources.get('organic'), null, (() => { let layout = new MxFastOrganicLayout(graph); - promptSpacing(layout.forceConstant, this.bind(function(newValue) + promptSpacing(layout.forceConstant, ((newValue) => { layout.forceConstant = newValue; @@ -405,7 +405,7 @@ Menus.prototype.init = function() }, true); })); }), parent); - menu.addItem(Resources.get('circle'), null, this.bind(function() + menu.addItem(Resources.get('circle'), null, (() => { let layout = new CircleLayout(graph); @@ -427,11 +427,11 @@ Menus.prototype.init = function() }, true); }), parent); }))); - this.put('navigation', new Menu(this.bind(function(menu, parent) + this.put('navigation', new Menu(((menu, parent) => { this.addMenuItems(menu, ['home', '-', 'exitGroup', 'enterGroup', '-', 'expand', 'collapse', '-', 'collapsible'], parent); }))); - this.put('arrange', new Menu(this.bind(function(menu, parent) + this.put('arrange', new Menu(((menu, parent) => { this.addMenuItems(menu, ['toFront', 'toBack', '-'], parent); this.addSubmenu('direction', menu, parent); @@ -444,11 +444,11 @@ Menus.prototype.init = function() this.addSubmenu('layout', menu, parent); this.addMenuItems(menu, ['-', 'group', 'ungroup', 'removeFromGroup', '-', 'clearWaypoints', 'autosize'], parent); }))).isEnabled = isGraphEnabled; - this.put('insert', new Menu(this.bind(function(menu, parent) + this.put('insert', new Menu(((menu, parent) => { this.addMenuItems(menu, ['insertLink', 'insertImage'], parent); }))); - this.put('view', new Menu(this.bind(function(menu, parent) + this.put('view', new Menu(((menu, parent) => { this.addMenuItems(menu, ((this.editorUi.format != null) ? ['formatPanel'] : []). concat(['outline', 'layers', '-', 'pageView', 'pageScale', '-', 'scrollbars', 'tooltips', '-', @@ -456,7 +456,7 @@ Menus.prototype.init = function() 'resetView', 'zoomIn', 'zoomOut'], parent)); }))); // Two special dropdowns that are only used in the toolbar - this.put('viewPanels', new Menu(this.bind(function(menu, parent) + this.put('viewPanels', new Menu(((menu, parent) => { if (this.editorUi.format != null) { @@ -465,7 +465,7 @@ Menus.prototype.init = function() this.addMenuItems(menu, ['outline', 'layers'], parent); }))); - this.put('viewZoom', new Menu(this.bind(function(menu, parent) + this.put('viewZoom', new Menu(((menu, parent) => { this.addMenuItems(menu, ['resetView', '-'], parent); let scales = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4]; @@ -483,21 +483,21 @@ Menus.prototype.init = function() this.addMenuItems(menu, ['-', 'fitWindow', 'fitPageWidth', 'fitPage', 'fitTwoPages', '-', 'customZoom'], parent); }))); - this.put('file', new Menu(this.bind(function(menu, parent) + this.put('file', new Menu(((menu, parent) => { this.addMenuItems(menu, ['new', 'open', '-', 'save', 'saveAs', '-', 'import', 'export', '-', 'pageSetup', 'print'], parent); }))); - this.put('edit', new Menu(this.bind(function(menu, parent) + this.put('edit', new Menu(((menu, parent) => { this.addMenuItems(menu, ['undo', 'redo', '-', 'cut', 'copy', 'paste', 'delete', '-', 'duplicate', '-', 'editData', 'editTooltip', '-', 'editStyle', '-', 'edit', '-', 'editLink', 'openLink', '-', 'selectVertices', 'selectEdges', 'selectAll', 'selectNone', '-', 'lockUnlock']); }))); - this.put('extras', new Menu(this.bind(function(menu, parent) + this.put('extras', new Menu(((menu, parent) => { this.addMenuItems(menu, ['copyConnect', 'collapseExpand', '-', 'editDiagram']); }))); - this.put('help', new Menu(this.bind(function(menu, parent) + this.put('help', new Menu(((menu, parent) => { this.addMenuItems(menu, ['help', '-', 'about']); }))); @@ -560,7 +560,7 @@ Menus.prototype.addInsertTableCellItem = function(menu, parent) { let graph = this.editorUi.editor.graph; - this.addInsertTableItem(menu, this.bind(function(evt, rows, cols) + this.addInsertTableItem(menu, ((evt, rows, cols) => { let table = (mxEvent.isControlDown(evt) || mxEvent.isMetaDown(evt)) ? graph.createCrossFunctionalSwimlane(rows, cols) : @@ -583,7 +583,7 @@ Menus.prototype.addInsertTableCellItem = function(menu, parent) */ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) { - insertFn = (insertFn != null) ? insertFn : this.bind(function(evt, rows, cols) + insertFn = (insertFn != null) ? insertFn : ((evt, rows, cols) => { let graph = this.editorUi.editor.graph; let td = graph.getParentByName(mxEvent.getSource(evt), 'TD'); @@ -761,7 +761,7 @@ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) insertFn(e, row2.sectionRowIndex + 1, td.cellIndex + 1); // Async required to block event for elements under menu - window.setTimeout(this.bind(function() + window.setTimeout((() => { this.editorUi.hideCurrentMenu(); }), 0); @@ -775,7 +775,7 @@ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) */ Menus.prototype.edgeStyleChange = function(menu, label, keys, values, sprite, parent, reset) { - return menu.addItem(label, null, this.bind(function() + return menu.addItem(label, null, (() => { let graph = this.editorUi.editor.graph; graph.stopEditing(false); @@ -831,7 +831,7 @@ Menus.prototype.styleChange = function(menu, label, keys, values, sprite, parent { let apply = this.createStyleChangeFunction(keys, values); - return menu.addItem(label, null, this.bind(function() + return menu.addItem(label, null, (() => { let graph = this.editorUi.editor.graph; @@ -851,7 +851,7 @@ Menus.prototype.styleChange = function(menu, label, keys, values, sprite, parent */ Menus.prototype.createStyleChangeFunction = function(keys, values) { - return this.bind(function(post) + return ((post) => { let graph = this.editorUi.editor.graph; graph.stopEditing(false); @@ -908,7 +908,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values) */ Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, parent, enabled, fn, sprite) { - return menu.addItem(label, null, this.bind(function() + return menu.addItem(label, null, (() => { let graph = this.editorUi.editor.graph; let value = defaultValue; @@ -919,7 +919,7 @@ Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, pa value = state.style[key] || value; } - let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), this.bind(function(newValue) + let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), ((newValue) => { if (newValue != null && newValue.length > 0) { @@ -959,7 +959,7 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue) // Saves and restores text selection for in-place editor let selState = graph.cellEditor.saveSelection(); - let dlg = new ColorDialog(this.editorUi, defaultValue || '000000', this.bind(function(color) + let dlg = new ColorDialog(this.editorUi, defaultValue || '000000', ((color) => { graph.cellEditor.restoreSelection(selState); document.execCommand(cmd, false, (color != mxConstants.NONE) ? color : 'transparent'); @@ -1236,9 +1236,9 @@ Menus.prototype.createMenubar = function(container) for (let i = 0; i < menus.length; i++) { - (this.bind(function(menu) + (((menu) => { - let elt = menubar.addMenu(Resources.get(menus[i]), this.bind(function() + let elt = menubar.addMenu(Resources.get(menus[i]), (() => { // Allows extensions of menu.funct menu.funct.apply(this, arguments); @@ -1324,7 +1324,7 @@ Menubar.prototype.addMenuHandler = function(elt, funct) { let show = true; - let clickHandler = this.bind(function(evt) + let clickHandler = ((evt) => { if (show && elt.enabled == null || elt.enabled) { @@ -1336,7 +1336,7 @@ Menubar.prototype.addMenuHandler = function(elt, funct) menu.autoExpand = true; // Disables autoexpand and destroys menu when hidden - menu.hideMenu = this.bind(function() + menu.hideMenu = (() => { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); this.editorUi.resetCurrentMenu(); @@ -1352,7 +1352,7 @@ Menubar.prototype.addMenuHandler = function(elt, funct) }); // Shows menu automatically while in expanded state - mxEvent.addListener(elt, 'mousemove', this.bind(function(evt) + mxEvent.addListener(elt, 'mousemove', ((evt) => { if (this.editorUi.currentMenu != null && this.editorUi.currentMenuElt != elt) { @@ -1363,13 +1363,13 @@ Menubar.prototype.addMenuHandler = function(elt, funct) // Hides menu if already showing and prevents focus mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - this.bind(function(evt) + ((evt) => { show = this.currentElt != elt; evt.preventDefault(); })); - mxEvent.addListener(elt, 'click', this.bind(function(evt) + mxEvent.addListener(elt, 'click', ((evt) => { clickHandler(evt); show = true; diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js index 29785b7ca..073a92929 100644 --- a/docs/stashed/grapheditor/www/js/Sidebar.js +++ b/docs/stashed/grapheditor/www/js/Sidebar.js @@ -19,14 +19,14 @@ function Sidebar(editorUi, container) document.body.appendChild(this.graph.container); - this.pointerUpHandler = this.bind(function() + this.pointerUpHandler = (() => { this.showTooltips = true; }); mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerup' : 'mouseup', this.pointerUpHandler); - this.pointerDownHandler = this.bind(function() + this.pointerDownHandler = (() => { this.showTooltips = false; this.hideTooltip(); @@ -34,7 +34,7 @@ function Sidebar(editorUi, container) mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', this.pointerDownHandler); - this.pointerMoveHandler = this.bind(function(evt) + this.pointerMoveHandler = ((evt) => { let src = mxEvent.getSource(evt); @@ -54,7 +54,7 @@ function Sidebar(editorUi, container) mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', this.pointerMoveHandler); // Handles mouse leaving the window - this.pointerOutHandler = this.bind(function(evt) + this.pointerOutHandler = ((evt) => { if (evt.toElement == null && evt.relatedTarget == null) { @@ -65,7 +65,7 @@ function Sidebar(editorUi, container) mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerout' : 'mouseout', this.pointerOutHandler); // Enables tooltips after scroll - mxEvent.addListener(container, 'scroll', this.bind(function() + mxEvent.addListener(container, 'scroll', (() => { this.showTooltips = true; this.hideTooltip(); @@ -265,7 +265,7 @@ Sidebar.prototype.showTooltip = function(elt, cells, w, h, title, showLabel) this.thread = null; } - let show = this.bind(function() + let show = (() => { // Lazy creation of the DOM nodes and graph instance if (this.tooltip == null) @@ -446,7 +446,7 @@ Sidebar.prototype.hideTooltip = function() */ Sidebar.prototype.addDataEntry = function(tags, width, height, title, data) { - return this.addEntry(tags, this.bind(function() + return this.addEntry(tags, (() => { return this.createVertexTemplateFromData(data, width, height, title); })); @@ -459,7 +459,7 @@ Sidebar.prototype.addEntries = function(images) { for (let i = 0; i < images.length; i++) { - (this.bind(function(img) + (((img) => { let data = img.data; let tags = (img.title != null) ? img.title : ''; @@ -471,7 +471,7 @@ Sidebar.prototype.addEntries = function(images) if (data != null && tags.length > 0) { - this.addEntry(tags, this.bind(function() + this.addEntry(tags, (() => { data = this.editorUi.convertDataUri(data); let s = 'shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;'; @@ -487,7 +487,7 @@ Sidebar.prototype.addEntries = function(images) } else if (img.xml != null && tags.length > 0) { - this.addEntry(tags, this.bind(function() + this.addEntry(tags, (() => { let cells = this.editorUi.stringToCells(Graph.decompress(img.xml)); @@ -774,7 +774,7 @@ Sidebar.prototype.addSearchPalette = function(expand) // Count is dynamically updated below let count = 12; - let clearDiv = this.bind(function() + let clearDiv = (() => { active = false; this.currentSearch = null; @@ -808,7 +808,7 @@ Sidebar.prototype.addSearchPalette = function(expand) input.focus(); }); - find = this.bind(function() + find = (() => { // Shows 4 rows (minimum 4 results) count = 4 * Math.max(1, Math.floor(this.container.clientWidth / (this.thumbWidth + 10))); @@ -839,7 +839,7 @@ Sidebar.prototype.addSearchPalette = function(expand) let current = {}; this.currentSearch = current; - this.searchEntries(searchTerm, count, page, this.bind(function(results, len, more, terms) + this.searchEntries(searchTerm, count, page, ((results, len, more, terms) => { if (this.currentSearch == current) { @@ -861,7 +861,7 @@ Sidebar.prototype.addSearchPalette = function(expand) for (let i = 0; i < results.length; i++) { - (this.bind(function(result) + (((result) => { try { @@ -878,7 +878,7 @@ Sidebar.prototype.addSearchPalette = function(expand) hash[elt.innerHTML] = hash[elt.innerHTML].concat(result.parentLibraries); } - mxEvent.addGestureListeners(elt, null, null, this.bind(function(evt) + mxEvent.addGestureListeners(elt, null, null, ((evt) => { let libs = hash[elt.innerHTML]; @@ -913,7 +913,7 @@ Sidebar.prototype.addSearchPalette = function(expand) button.style.cursor = ''; div.appendChild(center); } - }), this.bind(function() + }), (() => { // TODO: Error handling button.style.cursor = ''; @@ -933,7 +933,7 @@ Sidebar.prototype.addSearchPalette = function(expand) } }); - mxEvent.addListener(input, 'keydown', this.bind(function(evt) + mxEvent.addListener(input, 'keydown', ((evt) => { if (evt.keyCode == 13 /* Enter */) { @@ -942,7 +942,7 @@ Sidebar.prototype.addSearchPalette = function(expand) } })); - mxEvent.addListener(input, 'keyup', this.bind(function(evt) + mxEvent.addListener(input, 'keyup', ((evt) => { if (input.value == '') { @@ -1066,7 +1066,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) this.createVertexTemplateEntry('shape=xor;whiteSpace=wrap;html=1;', 60, 80, '', 'Or', null, null, 'logic or'), this.createVertexTemplateEntry('shape=or;whiteSpace=wrap;html=1;', 60, 80, '', 'And', null, null, 'logic and'), this.createVertexTemplateEntry('shape=dataStorage;whiteSpace=wrap;html=1;fixedSize=1;', 100, 80, '', 'Data Storage'), - this.addEntry('curve', this.bind(function() + this.addEntry('curve', (() => { let cell = new Cell('', new Geometry(0, 0, 50, 50), 'curved=1;endArrow=classic;html=1;'); cell.geometry.setTerminalPoint(new Point(0, 50), true); @@ -1085,7 +1085,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) this.createEdgeTemplateEntry('endArrow=classic;startArrow=classic;html=1;', 50, 50, '', 'Bidirectional Connector', null, lineTags + 'bidirectional'), this.createEdgeTemplateEntry('endArrow=classic;html=1;', 50, 50, '', 'Directional Connector', null, lineTags + 'directional directed'), this.createEdgeTemplateEntry('shape=link;html=1;', 100, 0, '', 'Link', null, lineTags + 'link'), - this.addEntry(lineTags + 'edge title', this.bind(function() + this.addEntry(lineTags + 'edge title', (() => { let edge = new Cell('', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1101,7 +1101,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) return this.createEdgeTemplateFromCells([edge], 100, 0, 'Connector with Label'); })), - this.addEntry(lineTags + 'edge title multiplicity', this.bind(function() + this.addEntry(lineTags + 'edge title multiplicity', (() => { let edge = new Cell('', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1123,7 +1123,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) return this.createEdgeTemplateFromCells([edge], 160, 0, 'Connector with 2 Labels'); })), - this.addEntry(lineTags + 'edge title multiplicity', this.bind(function() + this.addEntry(lineTags + 'edge title multiplicity', (() => { let edge = new Cell('Label', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1151,7 +1151,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) return this.createEdgeTemplateFromCells([edge], 160, 0, 'Connector with 3 Labels'); })), - this.addEntry(lineTags + 'edge shape symbol message mail email', this.bind(function() + this.addEntry(lineTags + 'edge shape symbol message mail email', (() => { let edge = new Cell('', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1215,7 +1215,7 @@ Sidebar.prototype.addMiscPalette = function(expand) 'Title' + 'Section 1.1\nSection 1.2\nSection 1.3' + 'Section 2.1\nSection 2.2\nSection 2.3', 'HTML Table 4'), - this.addEntry('link hyperlink', this.bind(function() + this.addEntry('link hyperlink', (() => { let cell = new Cell('Link', new Geometry(0, 0, 60, 40), 'text;html=1;strokeColor=none;fillColor=none;whiteSpace=wrap;align=center;verticalAlign=middle;fontColor=#0000EE;fontStyle=4;'); cell.vertex = true; @@ -1223,7 +1223,7 @@ Sidebar.prototype.addMiscPalette = function(expand) return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Link'); })), - this.addEntry('timestamp date time text label', this.bind(function() + this.addEntry('timestamp date time text label', (() => { let cell = new Cell('%date{ddd mmm dd yyyy HH:MM:ss}%', new Geometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;'); cell.vertex = true; @@ -1231,7 +1231,7 @@ Sidebar.prototype.addMiscPalette = function(expand) return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Timestamp'); })), - this.addEntry('variable placeholder metadata hello world text label', this.bind(function() + this.addEntry('variable placeholder metadata hello world text label', (() => { let cell = new Cell('%name% Text', new Geometry(0, 0, 80, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;'); cell.vertex = true; @@ -2568,7 +2568,7 @@ Sidebar.prototype.createItem = function(cells, title, showLabel, showTitle, widt this.addClickHandler(elt, ds, cells); // Uses guides for vertices only if enabled in graph - ds.isGuidesEnabled = this.bind(function() + ds.isGuidesEnabled = (() => { return this.editorUi.editor.graph.graphHandler.guidesEnabled; }); @@ -2583,7 +2583,7 @@ Sidebar.prototype.createItem = function(cells, title, showLabel, showTitle, widt // Shows a tooltip with the rendered cell if (!mxClient.IS_IOS) { - mxEvent.addGestureListeners(elt, null, this.bind(function(evt) + mxEvent.addGestureListeners(elt, null, ((evt) => { if (mxEvent.isMouseEvent(evt)) { @@ -2675,7 +2675,7 @@ Sidebar.prototype.createDropHandler = function(cells, allowSplit, allowCellsInse { allowCellsInserted = (allowCellsInserted != null) ? allowCellsInserted : true; - return this.bind(function(graph, evt, target, x, y, force) + return ((graph, evt, target, x, y, force) => { let elt = (force) ? null : ((mxEvent.isTouchEvent(evt) || mxEvent.isPenEvent(evt)) ? document.elementFromPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt)) : @@ -3192,7 +3192,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, let dropStyleEnabled = this.isDropStyleEnabled(cells, firstVertex); - let dragSource = makeDraggable(elt, graph, this.bind(function(graph, evt, target, x, y) + let dragSource = makeDraggable(elt, graph, ((graph, evt, target, x, y) => { if (this.updateThread != null) { @@ -3433,7 +3433,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, let sourceCellStyle = this.editorUi.editor.graph.getCellStyle(cells[0]); // Allows drop into cell only if target is a valid root - dragSource.getDropTarget = this.bind(function(graph, x, y, evt) + dragSource.getDropTarget = ((graph, x, y, evt) => { // Alt means no targets at all // LATER: Show preview where result will go @@ -3957,7 +3957,7 @@ Sidebar.prototype.createVertexTemplateEntry = function(style, width, height, val { tags = (tags != null && tags.length > 0) ? tags : ((title != null) ? title.toLowerCase() : ''); - return this.addEntry(tags, this.bind(function() + return this.addEntry(tags, (() => { return this.createVertexTemplate(style, width, height, value, title, showLabel, showTitle); })); @@ -4007,7 +4007,7 @@ Sidebar.prototype.createEdgeTemplateEntry = function(style, width, height, value { tags = (tags != null && tags.length > 0) ? tags : title.toLowerCase(); - return this.addEntry(tags, this.bind(function() + return this.addEntry(tags, (() => { return this.createEdgeTemplate(style, width, height, value, title, showLabel, allowCellsInserted); })); @@ -4040,7 +4040,7 @@ Sidebar.prototype.createEdgeTemplateFromCells = function(cells, width, height, t */ Sidebar.prototype.addPaletteFunctions = function(id, title, expanded, fns) { - this.addPalette(id, title, expanded, this.bind(function(content) + this.addPalette(id, title, expanded, ((content) => { for (let i = 0; i < fns.length; i++) { @@ -4103,7 +4103,7 @@ Sidebar.prototype.addFoldingHandler = function(title, content, funct) title.style.backgroundRepeat = 'no-repeat'; title.style.backgroundPosition = '0% 50%'; - mxEvent.addListener(title, 'click', this.bind(function(evt) + mxEvent.addListener(title, 'click', ((evt) => { if (content.style.display == 'none') { @@ -4191,7 +4191,7 @@ Sidebar.prototype.addImagePalette = function(id, title, prefix, postfix, items, for (let i = 0; i < items.length; i++) { - (this.bind(function(item, title, tmpTags) + (((item, title, tmpTags) => { if (tmpTags == null) { @@ -4250,7 +4250,7 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig } } - StencilShapeRegistry.loadStencilSet(stencilFile, this.bind(function(packageName, stencilName, displayName, w, h) + StencilShapeRegistry.loadStencilSet(stencilFile, ((packageName, stencilName, displayName, w, h) => { if (ignore == null || indexOf(ignore, stencilName) < 0) { @@ -4272,7 +4272,7 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig } else { - this.addPalette(id, title, false, this.bind(function(content) + this.addPalette(id, title, false, ((content) => { if (style == null) { @@ -4292,7 +4292,7 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig } } - StencilShapeRegistry.loadStencilSet(stencilFile, this.bind(function(packageName, stencilName, displayName, w, h) + StencilShapeRegistry.loadStencilSet(stencilFile, ((packageName, stencilName, displayName, w, h) => { if (ignore == null || indexOf(ignore, stencilName) < 0) { diff --git a/docs/stashed/grapheditor/www/js/Toolbar.js b/docs/stashed/grapheditor/www/js/Toolbar.js index cfe377c52..27cfbb691 100644 --- a/docs/stashed/grapheditor/www/js/Toolbar.js +++ b/docs/stashed/grapheditor/www/js/Toolbar.js @@ -16,7 +16,7 @@ function Toolbar(editorUi, container) this.init(); // Global handler to hide the current menu - this.gestureHandler = this.bind(function(evt) + this.gestureHandler = ((evt) => { if (this.editorUi.currentMenu != null && mxEvent.getSource(evt) != this.editorUi.currentMenu.div) { @@ -94,7 +94,7 @@ Toolbar.prototype.init = function() } // Updates the label if the scale changes - this.updateZoom = this.bind(function() + this.updateZoom = (() => { viewMenu.innerHTML = Math.round(this.editorUi.editor.graph.view.scale * 100) + '%' + this.dropdownImageHtml; @@ -145,7 +145,7 @@ Toolbar.prototype.init = function() if (sw >= 440) { - this.edgeShapeMenu = this.addMenuFunction('', Resources.get('connection'), false, this.bind(function(menu) + this.edgeShapeMenu = this.addMenuFunction('', Resources.get('connection'), false, ((menu) => { this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], [null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', Resources.get('line')); this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['link', null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', Resources.get('link')); @@ -156,7 +156,7 @@ Toolbar.prototype.init = function() this.addDropDownArrow(this.edgeShapeMenu, 'geSprite-connection', 44, 50, 0, 0, 22, -4); } - this.edgeStyleMenu = this.addMenuFunction('geSprite-orthogonal', Resources.get('waypoints'), false, this.bind(function(menu) + this.edgeStyleMenu = this.addMenuFunction('geSprite-orthogonal', Resources.get('waypoints'), false, ((menu) => { this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', Resources.get('straight')); this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', Resources.get('orthogonal')); @@ -187,7 +187,7 @@ Toolbar.prototype.addTableDropDown = function() // KNOWN: All table stuff does not work with undo/redo // KNOWN: Lost focus after click on submenu with text (not icon) in quirks and IE8. This is because the TD seems // to catch the focus on click in these browsers. NOTE: Workaround in mxPopupMenu for icon items (without text). - let menuElt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, this.bind(function(menu) + let menuElt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, ((menu) => { let graph = this.editorUi.editor.graph; let cell = graph.getSelectionCell(); @@ -198,7 +198,7 @@ Toolbar.prototype.addTableDropDown = function() } else { - let elt = menu.addItem('', null, this.bind(function() + let elt = menu.addItem('', null, (() => { try { @@ -211,7 +211,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertcolumnbefore'); elt.setAttribute('title', Resources.get('insertColumnBefore')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -224,7 +224,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertcolumnafter'); elt.setAttribute('title', Resources.get('insertColumnAfter')); - elt = menu.addItem('Delete column', null, this.bind(function() + elt = menu.addItem('Delete column', null, (() => { if (cell != null) { @@ -240,7 +240,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-deletecolumn'); elt.setAttribute('title', Resources.get('deleteColumn')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -253,7 +253,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertrowbefore'); elt.setAttribute('title', Resources.get('insertRowBefore')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -266,7 +266,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertrowafter'); elt.setAttribute('title', Resources.get('insertRowAfter')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -421,51 +421,51 @@ Toolbar.prototype.createTextToolbar = function() // KNOWN: Lost focus after click on submenu with text (not icon) in quirks and IE8. This is because the TD seems // to catch the focus on click in these browsers. NOTE: Workaround in mxPopupMenu for icon items (without text). - let alignMenu = this.addMenuFunction('', Resources.get('align'), false, this.bind(function(menu) + let alignMenu = this.addMenuFunction('', Resources.get('align'), false, ((menu) => { - elt = menu.addItem('', null, this.bind(function(evt) + elt = menu.addItem('', null, ((evt) => { graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt); }), null, 'geIcon geSprite geSprite-left'); elt.setAttribute('title', Resources.get('left')); - elt = menu.addItem('', null, this.bind(function(evt) + elt = menu.addItem('', null, ((evt) => { graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt); }), null, 'geIcon geSprite geSprite-center'); elt.setAttribute('title', Resources.get('center')); - elt = menu.addItem('', null, this.bind(function(evt) + elt = menu.addItem('', null, ((evt) => { graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt); }), null, 'geIcon geSprite geSprite-right'); elt.setAttribute('title', Resources.get('right')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { document.execCommand('justifyfull', false, null); }), null, 'geIcon geSprite geSprite-justifyfull'); elt.setAttribute('title', Resources.get('justifyfull')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { document.execCommand('insertorderedlist', false, null); }), null, 'geIcon geSprite geSprite-orderedlist'); elt.setAttribute('title', Resources.get('numberedList')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { document.execCommand('insertunorderedlist', false, null); }), null, 'geIcon geSprite geSprite-unorderedlist'); elt.setAttribute('title', Resources.get('bulletedList')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { document.execCommand('outdent', false, null); }), null, 'geIcon geSprite geSprite-outdent'); elt.setAttribute('title', Resources.get('decreaseIndent')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { document.execCommand('indent', false, null); }), null, 'geIcon geSprite geSprite-indent'); @@ -484,7 +484,7 @@ Toolbar.prototype.createTextToolbar = function() alignMenu.getElementsByTagName('img')[0].style.top = '5px'; } - let formatMenu = this.addMenuFunction('', Resources.get('format'), false, this.bind(function(menu) + let formatMenu = this.addMenuFunction('', Resources.get('format'), false, ((menu) => { elt = menu.addItem('', null, this.editorUi.actions.get('subscript').funct, null, 'geIcon geSprite geSprite-subscript'); @@ -503,7 +503,7 @@ Toolbar.prototype.createTextToolbar = function() null, 'geIcon geSprite geSprite-fontbackground'); elt.setAttribute('title', Resources.get('backgroundColor')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { document.execCommand('removeformat', false, null); }), null, 'geIcon geSprite geSprite-removeformat'); @@ -540,19 +540,19 @@ Toolbar.prototype.createTextToolbar = function() this.addSeparator(); - let insertMenu = this.addMenuFunction('', Resources.get('insert'), true, this.bind(function(menu) + let insertMenu = this.addMenuFunction('', Resources.get('insert'), true, ((menu) => { - menu.addItem(Resources.get('insertLink'), null, this.bind(function() + menu.addItem(Resources.get('insertLink'), null, (() => { this.editorUi.actions.get('link').funct(); })); - menu.addItem(Resources.get('insertImage'), null, this.bind(function() + menu.addItem(Resources.get('insertImage'), null, (() => { this.editorUi.actions.get('image').funct(); })); - menu.addItem(Resources.get('insertHorizontalRule'), null, this.bind(function() + menu.addItem(Resources.get('insertHorizontalRule'), null, (() => { document.execCommand('inserthorizontalrule', false, null); })); @@ -578,7 +578,7 @@ Toolbar.prototype.createTextToolbar = function() // KNOWN: All table stuff does not work with undo/redo // KNOWN: Lost focus after click on submenu with text (not icon) in quirks and IE8. This is because the TD seems // to catch the focus on click in these browsers. NOTE: Workaround in mxPopupMenu for icon items (without text). - let elt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, this.bind(function(menu) + let elt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, ((menu) => { let elt = graph.getSelectedElement(); let cell = graph.getParentByNames(elt, ['TD', 'TH'], graph.cellEditor.text2); @@ -613,7 +613,7 @@ Toolbar.prototype.createTextToolbar = function() { let table = graph.getParentByName(row, 'TABLE', graph.cellEditor.text2); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -626,7 +626,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertcolumnbefore'); elt.setAttribute('title', Resources.get('insertColumnBefore')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -639,7 +639,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertcolumnafter'); elt.setAttribute('title', Resources.get('insertColumnAfter')); - elt = menu.addItem('Delete column', null, this.bind(function() + elt = menu.addItem('Delete column', null, (() => { if (cell != null) { @@ -655,7 +655,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-deletecolumn'); elt.setAttribute('title', Resources.get('deleteColumn')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -668,7 +668,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertrowbefore'); elt.setAttribute('title', Resources.get('insertRowBefore')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -681,7 +681,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertrowafter'); elt.setAttribute('title', Resources.get('insertRowAfter')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { try { @@ -694,7 +694,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-deleterow'); elt.setAttribute('title', Resources.get('deleteRow')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { // Converts rgb(r,g,b) values let color = table.style.borderColor.replace( @@ -720,7 +720,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-strokecolor'); elt.setAttribute('title', Resources.get('borderColor')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { // Converts rgb(r,g,b) values let color = table.style.backgroundColor.replace( @@ -742,11 +742,11 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-fillcolor'); elt.setAttribute('title', Resources.get('backgroundColor')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { let value = table.getAttribute('cellPadding') || 0; - let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), this.bind(function(newValue) + let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), ((newValue) => { if (newValue != null && newValue.length > 0) { @@ -762,19 +762,19 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-fit'); elt.setAttribute('title', Resources.get('spacing')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { table.setAttribute('align', 'left'); }), null, 'geIcon geSprite geSprite-left'); elt.setAttribute('title', Resources.get('left')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { table.setAttribute('align', 'center'); }), null, 'geIcon geSprite geSprite-center'); elt.setAttribute('title', Resources.get('center')); - elt = menu.addItem('', null, this.bind(function() + elt = menu.addItem('', null, (() => { table.setAttribute('align', 'right'); }), null, 'geIcon geSprite geSprite-right'); @@ -993,7 +993,7 @@ Toolbar.prototype.addClickHandler = function(elt, funct) // Prevents focus mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - this.bind(function(evt) + ((evt) => { evt.preventDefault(); })); @@ -1043,7 +1043,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) let menu = null; let show = true; - mxEvent.addListener(elt, 'click', this.bind(function(evt) + mxEvent.addListener(elt, 'click', ((evt) => { if (show && (elt.enabled == null || elt.enabled)) { @@ -1064,7 +1064,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) menu.div.style.width = '40px'; } - menu.hideMenu = this.bind(function() + menu.hideMenu = (() => { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); this.editorUi.resetCurrentMenu(); @@ -1072,7 +1072,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) }); // Extends destroy to reset global state - menu.addListener(mxEvent.EVENT_HIDE, this.bind(function() + menu.addListener(mxEvent.EVENT_HIDE, (() => { this.currentElt = null; })); @@ -1084,7 +1084,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) // Hides menu if already showing and prevents focus mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - this.bind(function(evt) + ((evt) => { show = this.currentElt != elt; evt.preventDefault();