diff --git a/src/js/editor/mxDefaultKeyHandler.js b/src/js/editor/mxDefaultKeyHandler.js index 81b3d4e26..667c0327b 100644 --- a/src/js/editor/mxDefaultKeyHandler.js +++ b/src/js/editor/mxDefaultKeyHandler.js @@ -72,7 +72,7 @@ class mxDefaultKeyHandler { // the escape event via the editor instance let old = this.handler.escape; - this.handler.escape = (evt)=>{ + this.handler.escape = (evt) => { old.apply(this, arguments); editor.hideProperties(); editor.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt)); @@ -94,8 +94,8 @@ class mxDefaultKeyHandler { * control - Optional boolean that specifies if control must be pressed. * Default is false. */ - bindAction=(code, action, control)=>{ - let keyHandler = mxUtils.bind(this, ()=>{ + bindAction = (code, action, control) => { + let keyHandler = mxUtils.bind(this, () => { this.editor.execute(action); }); @@ -115,7 +115,7 @@ class mxDefaultKeyHandler { * not need to be called, the is destroyed automatically when the * window unloads (in IE) by . */ - destroy=()=>{ + destroy = () => { this.handler.destroy(); this.handler = null; }; diff --git a/src/js/editor/mxDefaultPopupMenu.js b/src/js/editor/mxDefaultPopupMenu.js index 25f1b79cd..db3b7ffd3 100644 --- a/src/js/editor/mxDefaultPopupMenu.js +++ b/src/js/editor/mxDefaultPopupMenu.js @@ -154,7 +154,7 @@ class mxDefaultPopupMenu { * cell - Optional which is under the mousepointer. * evt - Optional mouse event which triggered the menu. */ - createMenu=(editor, menu, cell, evt)=>{ + createMenu = (editor, menu, cell, evt) => { if (this.config != null) { let conditions = this.createConditions(editor, cell, evt); let item = this.config.firstChild; @@ -178,7 +178,7 @@ class mxDefaultPopupMenu { * item - XML node that represents the current menu item. * parent - DOM node that represents the parent menu item. */ - addItems=(editor, menu, cell, evt, conditions, item, parent)=>{ + addItems = (editor, menu, cell, evt, conditions, item, parent) => { let addSeparator = false; while (item != null) { @@ -236,9 +236,9 @@ class mxDefaultPopupMenu { * enabled - Optional boolean that specifies if the menu item is enabled. * Default is true. */ - addAction=(menu, editor, lab, icon, funct, action, cell, parent, iconCls, enabled)=>{ - let clickHandler=(evt)=>{ - if (typeof(funct) == 'function') { + addAction = (menu, editor, lab, icon, funct, action, cell, parent, iconCls, enabled) => { + let clickHandler = (evt) => { + if (typeof (funct) == 'function') { funct.call(editor, editor, cell, evt); } if (action != null) { @@ -253,7 +253,7 @@ class mxDefaultPopupMenu { * * Evaluates the default conditions for the given context. */ - createConditions=(editor, cell, evt)=>{ + createConditions = (editor, cell, evt) => { // Creates array with conditions let model = editor.graph.getModel(); let childCount = model.getChildCount(cell); @@ -276,11 +276,11 @@ class mxDefaultPopupMenu { // Evaluates dynamic conditions from config file let condNodes = this.config.getElementsByTagName('condition'); - for (let i=0; i{ + init = (container) => { if (container != null) { this.toolbar = new mxToolbar(container); // Installs the insert function in the editor if an item is // selected in the toolbar - this.toolbar.addListener(mxEvent.SELECT, mxUtils.bind(this, (sender, evt)=>{ + this.toolbar.addListener(mxEvent.SELECT, mxUtils.bind(this, (sender, evt) => { let funct = evt.getProperty('function'); if (funct != null) { - this.editor.insertFunction = mxUtils.bind(this, ()=>{ + this.editor.insertFunction = mxUtils.bind(this, () => { funct.apply(this, arguments); this.toolbar.resetMode(); }); @@ -123,7 +123,7 @@ class mxDefaultToolbar { })); // Resets the selected tool after a doubleclick or escape keystroke - this.resetHandler = mxUtils.bind(this, ()=>{ + this.resetHandler = mxUtils.bind(this, () => { if (this.toolbar != null) { this.toolbar.resetMode(true); } @@ -147,8 +147,8 @@ class mxDefaultToolbar { * action - Name of the action to execute when the item is clicked. * pressed - Optional URL of the icon for the pressed state. */ - addItem=(title, icon, action, pressed)=>{ - let clickHandler = mxUtils.bind(this, ()=>{ + addItem = (title, icon, action, pressed) => { + let clickHandler = mxUtils.bind(this, () => { if (action != null && action.length > 0) { this.editor.execute(action); } @@ -167,7 +167,7 @@ class mxDefaultToolbar { * icon - Optional URL of the icon that represents the vertical separator. * Default is + '/separator.gif'. */ - addSeparator=(icon)=>{ + addSeparator = (icon) => { icon = icon || mxClient.imageBasePath + '/separator.gif'; this.toolbar.addSeparator(icon); }; @@ -178,7 +178,7 @@ class mxDefaultToolbar { * Helper method to invoke on and return the * resulting DOM node. */ - addCombo=()=>{ + addCombo = () => { return this.toolbar.addCombo(); }; @@ -192,7 +192,7 @@ class mxDefaultToolbar { * * title - String that represents the title of the combo. */ - addActionCombo=(title)=>{ + addActionCombo = (title) => { return this.toolbar.addActionCombo(title); }; @@ -209,8 +209,8 @@ class mxDefaultToolbar { * title - String that represents the title of the combo. * action - Name of the action to execute in . */ - addActionOption=(combo, title, action)=>{ - let clickHandler = mxUtils.bind(this, ()=>{ + addActionOption = (combo, title, action) => { + let clickHandler = mxUtils.bind(this, () => { this.editor.execute(action); }); @@ -229,7 +229,7 @@ class mxDefaultToolbar { * title - String that represents the title of the combo. * value - Object that represents the value of the option. */ - addOption=(combo, title, value)=>{ + addOption = (combo, title, value) => { return this.toolbar.addOption(combo, title, value); }; @@ -250,8 +250,8 @@ class mxDefaultToolbar { * first and only argument that is executed after the mode has been * selected. */ - addMode=(title, icon, mode, pressed, funct)=>{ - let clickHandler = mxUtils.bind(this, ()=>{ + addMode = (title, icon, mode, pressed, funct) => { + let clickHandler = mxUtils.bind(this, () => { this.editor.setMode(mode); if (funct != null) { @@ -283,14 +283,13 @@ class mxDefaultToolbar { * toggle - Optional boolean that specifies if the item can be toggled. * Default is true. */ - addPrototype=(title, icon, ptype, pressed, insert, toggle)=>{ + addPrototype = (title, icon, ptype, pressed, insert, toggle) => { // Creates a wrapper function that is in charge of constructing // the new cell instance to be inserted into the graph - let factory = mxUtils.bind(this, ()=>{ - if (typeof(ptype) == 'function') { + let factory = mxUtils.bind(this, () => { + if (typeof (ptype) == 'function') { return ptype(); - } - else if (ptype != null) { + } else if (ptype != null) { return this.editor.graph.cloneCell(ptype); } @@ -299,8 +298,8 @@ class mxDefaultToolbar { // Defines the function for a click event on the graph // after this item has been selected in the toolbar - let clickHandler = mxUtils.bind(this, (evt, cell)=>{ - if (typeof(insert) == 'function') { + let clickHandler = mxUtils.bind(this, (evt, cell) => { + if (typeof (insert) == 'function') { insert(this.editor, factory(), evt, cell); } else { this.drop(factory(), evt, cell); @@ -314,7 +313,7 @@ class mxDefaultToolbar { // Creates a wrapper function that calls the click handler without // the graph argument - let dropHandler=(graph, evt, cell)=>{ + let dropHandler = (graph, evt, cell) => { clickHandler(evt, cell); }; @@ -336,7 +335,7 @@ class mxDefaultToolbar { * evt - Mouse event that represents the drop. * target - Optional that represents the drop target. */ - drop=(vertex, evt, target)=>{ + drop = (vertex, evt, target) => { let graph = this.editor.graph; let model = graph.getModel(); @@ -346,7 +345,7 @@ class mxDefaultToolbar { !graph.isCellConnectable(target)) { while (target != null && - !graph.isValidDropTarget(target, [vertex], evt)) { + !graph.isValidDropTarget(target, [vertex], evt)) { target = model.getParent(target); } this.insert(vertex, evt, target); @@ -368,7 +367,7 @@ class mxDefaultToolbar { * evt - Mouse event that represents the drop. * parent - Optional that represents the parent. */ - insert=(vertex, evt, target)=>{ + insert = (vertex, evt, target) => { let graph = this.editor.graph; if (graph.canImportCell(vertex)) { @@ -397,7 +396,7 @@ class mxDefaultToolbar { * evt - Mouse event that represents the drop. * source - Optional that represents the source terminal. */ - connect=(vertex, evt, source)=>{ + connect = (vertex, evt, source) => { let graph = this.editor.graph; let model = graph.getModel(); @@ -446,7 +445,7 @@ class mxDefaultToolbar { } graph.addEdge(edge, parent, source, vertex); - + } finally { model.endUpdate(); } @@ -467,12 +466,12 @@ class mxDefaultToolbar { * img - DOM node that represents the image. * dropHandler - Function that handles a drop of the image. */ - installDropHandler=(img, dropHandler)=>{ + installDropHandler = (img, dropHandler) => { let sprite = document.createElement('img'); sprite.setAttribute('src', img.getAttribute('src')); // Handles delayed loading of the images - let loader = mxUtils.bind(this, (evt)=> { + let loader = mxUtils.bind(this, (evt) => { // Preview uses the image node with double size. Later this can be // changed to use a separate preview and guides, but for this the // dropHandler must use the additional x- and y-arguments and the @@ -495,7 +494,7 @@ class mxDefaultToolbar { * is destroyed automatically when the window unloads (in IE) by * . */ - destroy=()=>{ + destroy = () => { if (this.resetHandler != null) { this.editor.graph.removeListener('dblclick', this.resetHandler); this.editor.removeListener('escape', this.resetHandler); diff --git a/src/js/editor/mxEditor.js b/src/js/editor/mxEditor.js index 059094200..1c8fb36cc 100644 --- a/src/js/editor/mxEditor.js +++ b/src/js/editor/mxEditor.js @@ -32,6 +32,460 @@ if (mxLoadResources) { } class mxEditor extends mxEventSource { + /** + * Variable: askZoomResource + * + * Specifies the resource key for the zoom dialog. If the resource for this + * key does not exist then the value is used as the error message. Default + * is 'askZoom'. + */ + askZoomResource = (mxClient.language !== 'none') ? 'askZoom' : ''; + + /** + * Group: Controls and Handlers + */ + /** + * Variable: lastSavedResource + * + * Specifies the resource key for the last saved info. If the resource for + * this key does not exist then the value is used as the error message. + * Default is 'lastSaved'. + */ + lastSavedResource = (mxClient.language !== 'none') ? 'lastSaved' : ''; + /** + * Variable: currentFileResource + * + * Specifies the resource key for the current file info. If the resource for + * this key does not exist then the value is used as the error message. + * Default is 'currentFile'. + */ + currentFileResource = (mxClient.language !== 'none') ? 'currentFile' : ''; + /** + * Variable: propertiesResource + * + * Specifies the resource key for the properties window title. If the + * resource for this key does not exist then the value is used as the + * error message. Default is 'properties'. + */ + propertiesResource = (mxClient.language !== 'none') ? 'properties' : ''; + /** + * Variable: tasksResource + * + * Specifies the resource key for the tasks window title. If the + * resource for this key does not exist then the value is used as the + * error message. Default is 'tasks'. + */ + tasksResource = (mxClient.language !== 'none') ? 'tasks' : ''; + /** + * Variable: helpResource + * + * Specifies the resource key for the help window title. If the + * resource for this key does not exist then the value is used as the + * error message. Default is 'help'. + */ + helpResource = (mxClient.language !== 'none') ? 'help' : ''; + /** + * Variable: outlineResource + * + * Specifies the resource key for the outline window title. If the + * resource for this key does not exist then the value is used as the + * error message. Default is 'outline'. + */ + outlineResource = (mxClient.language !== 'none') ? 'outline' : ''; + /** + * Variable: outline + * + * Reference to the that contains the outline. The + * is stored in outline.outline. + */ + outline = null; + /** + * Variable: graph + * + * Holds a for displaying the diagram. The graph + * is created in . + */ + graph = null; + /** + * Variable: graphRenderHint + * + * Holds the render hint used for creating the + * graph in . See . + * Default is null. + */ + graphRenderHint = null; + /** + * Variable: toolbar + * + * Holds a for displaying the toolbar. The + * toolbar is created in . + */ + toolbar = null; + /** + * Variable: status + * + * DOM container that holds the statusbar. Default is null. + * Use to set this value. + */ + status = null; + /** + * Variable: popupHandler + * + * Holds a for displaying + * popupmenus. + */ + popupHandler = null; + /** + * Variable: undoManager + * + * Holds an for the command history. + */ + undoManager = null; + /** + * Variable: keyHandler + * + * Holds a for handling keyboard events. + * The handler is created in . + */ + keyHandler = null; + /** + * Variable: actions + * + * Maps from actionnames to actions, which are functions taking + * the editor and the cell as arguments. Use + * to add or replace an action and to execute an action + * by name, passing the cell to be operated upon as the second + * argument. + */ + actions = null; + + /** + * Group: Actions and Options + */ + /** + * Variable: dblClickAction + * + * Specifies the name of the action to be executed + * when a cell is double clicked. Default is 'edit'. + * + * To handle a singleclick, use the following code. + * + * (code) + * editor.graph.addListener(mxEvent.CLICK, (sender, evt)=> + * { + * var e = evt.getProperty('event'); + * var cell = evt.getProperty('cell'); + * + * if (cell != null && !e.isConsumed()) + * { + * // Do something useful with cell... + * e.consume(); + * } + * }); + * (end) + */ + dblClickAction = 'edit'; + /** + * Variable: swimlaneRequired + * + * Specifies if new cells must be inserted + * into an existing swimlane. Otherwise, cells + * that are not swimlanes can be inserted as + * top-level cells. Default is false. + */ + swimlaneRequired = false; + /** + * Variable: disableContextMenu + * + * Specifies if the context menu should be disabled in the graph container. + * Default is true. + */ + disableContextMenu = true; + /** + * Variable: insertFunction + * + * Specifies the function to be used for inserting new + * cells into the graph. This is assigned from the + * if a vertex-tool is clicked. + */ + insertFunction = null; + + /** + * Group: Templates + */ + /** + * Variable: forcedInserting + * + * Specifies if a new cell should be inserted on a single + * click even using if there is a cell + * under the mousepointer, otherwise the cell under the + * mousepointer is selected. Default is false. + */ + forcedInserting = false; + /** + * Variable: templates + * + * Maps from names to protoype cells to be used + * in the toolbar for inserting new cells into + * the diagram. + */ + templates = null; + /** + * Variable: defaultEdge + * + * Prototype edge cell that is used for creating + * new edges. + */ + defaultEdge = null; + /** + * Variable: defaultEdgeStyle + * + * Specifies the edge style to be returned in . + * Default is null. + */ + defaultEdgeStyle = null; + /** + * Variable: defaultGroup + * + * Prototype group cell that is used for creating + * new groups. + */ + defaultGroup = null; + /** + * Variable: groupBorderSize + * + * Default size for the border of new groups. If null, + * then then is used. Default is + * null. + */ + groupBorderSize = null; + /** + * Variable: filename + * + * Contains the URL of the last opened file as a string. + * Default is null. + */ + filename = null; + + /** + * Group: Backend Integration + */ + /** + * Variable: lineFeed + * + * Character to be used for encoding linefeeds in . Default is ' '. + */ + linefeed = ' '; + /** + * Variable: postParameterName + * + * Specifies if the name of the post parameter that contains the diagram + * data in a post request to the server. Default is 'xml'. + */ + postParameterName = 'xml'; + /** + * Variable: escapePostData + * + * Specifies if the data in the post request for saving a diagram + * should be converted using encodeURIComponent. Default is true. + */ + escapePostData = true; + /** + * Variable: urlPost + * + * Specifies the URL to be used for posting the diagram + * to a backend in . + */ + urlPost = null; + /** + * Variable: urlImage + * + * Specifies the URL to be used for creating a bitmap of + * the graph in the image action. + */ + urlImage = null; + /** + * Variable: horizontalFlow + * + * Specifies the direction of the flow + * in the diagram. This is used in the + * layout algorithms. Default is false, + * ie. vertical flow. + */ + horizontalFlow = false; + + /** + * Group: Autolayout + */ + /** + * Variable: layoutDiagram + * + * Specifies if the top-level elements in the + * diagram should be layed out using a vertical + * or horizontal stack depending on the setting + * of . The spacing between the + * swimlanes is specified by . + * Default is false. + * + * If the top-level elements are swimlanes, then + * the intra-swimlane layout is activated by + * the switch. + */ + layoutDiagram = false; + /** + * Variable: swimlaneSpacing + * + * Specifies the spacing between swimlanes if + * automatic layout is turned on in + * . Default is 0. + */ + swimlaneSpacing = 0; + /** + * Variable: maintainSwimlanes + * + * Specifies if the swimlanes should be kept at the same + * width or height depending on the setting of + * . Default is false. + * + * For horizontal flows, all swimlanes + * have the same height and for vertical flows, all swimlanes + * have the same width. Furthermore, the swimlanes are + * automatically "stacked" if is true. + */ + maintainSwimlanes = false; + /** + * Variable: layoutSwimlanes + * + * Specifies if the children of swimlanes should + * be layed out, either vertically or horizontally + * depending on . + * Default is false. + */ + layoutSwimlanes = false; + /** + * Variable: cycleAttributeValues + * + * Specifies the attribute values to be cycled when + * inserting new swimlanes. Default is an empty + * array. + */ + cycleAttributeValues = null; + + /** + * Group: Attribute Cycling + */ + /** + * Variable: cycleAttributeIndex + * + * Index of the last consumed attribute index. If a new + * swimlane is inserted, then the + * at this index will be used as the value for + * . Default is 0. + */ + cycleAttributeIndex = 0; + /** + * Variable: cycleAttributeName + * + * Name of the attribute to be assigned a + * when inserting new swimlanes. Default is 'fillColor'. + */ + cycleAttributeName = 'fillColor'; + /** + * Variable: tasks + * + * Holds the created in . + */ + tasks = null; + + /** + * Group: Windows + */ + /** + * Variable: tasksWindowImage + * + * Icon for the tasks window. + */ + tasksWindowImage = null; + /** + * Variable: tasksTop + * + * Specifies the top coordinate of the tasks window in pixels. + * Default is 20. + */ + tasksTop = 20; + /** + * Variable: help + * + * Holds the created in . + */ + help = null; + /** + * Variable: helpWindowImage + * + * Icon for the help window. + */ + helpWindowImage = null; + /** + * Variable: urlHelp + * + * Specifies the URL to be used for the contents of the + * Online Help window. This is usually specified in the + * resources file under urlHelp for language-specific + * online help support. + */ + urlHelp = null; + /** + * Variable: helpWidth + * + * Specifies the width of the help window in pixels. + * Default is 300. + */ + helpWidth = 300; + /** + * Variable: helpHeight + * + * Specifies the height of the help window in pixels. + * Default is 260. + */ + helpHeight = 260; + /** + * Variable: propertiesWidth + * + * Specifies the width of the properties window in pixels. + * Default is 240. + */ + propertiesWidth = 240; + /** + * Variable: propertiesHeight + * + * Specifies the height of the properties window in pixels. + * If no height is specified then the window will be automatically + * sized to fit its contents. Default is null. + */ + propertiesHeight = null; + /** + * Variable: movePropertiesDialog + * + * Specifies if the properties dialog should be automatically + * moved near the cell it is displayed for, otherwise the + * dialog is not moved. This value is only taken into + * account if the dialog is already visible. Default is false. + */ + movePropertiesDialog = false; + /** + * Variable: validating + * + * Specifies if should automatically be invoked after + * each change. Default is false. + */ + validating = false; + /** + * Variable: modified + * + * True if the graph has been modified since it was last saved. + */ + modified = false; + /** * Class: mxEditor * @@ -411,518 +865,12 @@ class mxEditor extends mxEventSource { } }; - /** - * Group: Controls and Handlers - */ - - /** - * Variable: askZoomResource - * - * Specifies the resource key for the zoom dialog. If the resource for this - * key does not exist then the value is used as the error message. Default - * is 'askZoom'. - */ - askZoomResource = (mxClient.language !== 'none') ? 'askZoom' : ''; - - /** - * Variable: lastSavedResource - * - * Specifies the resource key for the last saved info. If the resource for - * this key does not exist then the value is used as the error message. - * Default is 'lastSaved'. - */ - lastSavedResource = (mxClient.language !== 'none') ? 'lastSaved' : ''; - - /** - * Variable: currentFileResource - * - * Specifies the resource key for the current file info. If the resource for - * this key does not exist then the value is used as the error message. - * Default is 'currentFile'. - */ - currentFileResource = (mxClient.language !== 'none') ? 'currentFile' : ''; - - /** - * Variable: propertiesResource - * - * Specifies the resource key for the properties window title. If the - * resource for this key does not exist then the value is used as the - * error message. Default is 'properties'. - */ - propertiesResource = (mxClient.language !== 'none') ? 'properties' : ''; - - /** - * Variable: tasksResource - * - * Specifies the resource key for the tasks window title. If the - * resource for this key does not exist then the value is used as the - * error message. Default is 'tasks'. - */ - tasksResource = (mxClient.language !== 'none') ? 'tasks' : ''; - - /** - * Variable: helpResource - * - * Specifies the resource key for the help window title. If the - * resource for this key does not exist then the value is used as the - * error message. Default is 'help'. - */ - helpResource = (mxClient.language !== 'none') ? 'help' : ''; - - /** - * Variable: outlineResource - * - * Specifies the resource key for the outline window title. If the - * resource for this key does not exist then the value is used as the - * error message. Default is 'outline'. - */ - outlineResource = (mxClient.language !== 'none') ? 'outline' : ''; - - /** - * Variable: outline - * - * Reference to the that contains the outline. The - * is stored in outline.outline. - */ - outline = null; - - /** - * Variable: graph - * - * Holds a for displaying the diagram. The graph - * is created in . - */ - graph = null; - - /** - * Variable: graphRenderHint - * - * Holds the render hint used for creating the - * graph in . See . - * Default is null. - */ - graphRenderHint = null; - - /** - * Variable: toolbar - * - * Holds a for displaying the toolbar. The - * toolbar is created in . - */ - toolbar = null; - - /** - * Variable: status - * - * DOM container that holds the statusbar. Default is null. - * Use to set this value. - */ - status = null; - - /** - * Variable: popupHandler - * - * Holds a for displaying - * popupmenus. - */ - popupHandler = null; - - /** - * Variable: undoManager - * - * Holds an for the command history. - */ - undoManager = null; - - /** - * Variable: keyHandler - * - * Holds a for handling keyboard events. - * The handler is created in . - */ - keyHandler = null; - - /** - * Group: Actions and Options - */ - - /** - * Variable: actions - * - * Maps from actionnames to actions, which are functions taking - * the editor and the cell as arguments. Use - * to add or replace an action and to execute an action - * by name, passing the cell to be operated upon as the second - * argument. - */ - actions = null; - - /** - * Variable: dblClickAction - * - * Specifies the name of the action to be executed - * when a cell is double clicked. Default is 'edit'. - * - * To handle a singleclick, use the following code. - * - * (code) - * editor.graph.addListener(mxEvent.CLICK, (sender, evt)=> - * { - * var e = evt.getProperty('event'); - * var cell = evt.getProperty('cell'); - * - * if (cell != null && !e.isConsumed()) - * { - * // Do something useful with cell... - * e.consume(); - * } - * }); - * (end) - */ - dblClickAction = 'edit'; - - /** - * Variable: swimlaneRequired - * - * Specifies if new cells must be inserted - * into an existing swimlane. Otherwise, cells - * that are not swimlanes can be inserted as - * top-level cells. Default is false. - */ - swimlaneRequired = false; - - /** - * Variable: disableContextMenu - * - * Specifies if the context menu should be disabled in the graph container. - * Default is true. - */ - disableContextMenu = true; - - /** - * Group: Templates - */ - - /** - * Variable: insertFunction - * - * Specifies the function to be used for inserting new - * cells into the graph. This is assigned from the - * if a vertex-tool is clicked. - */ - insertFunction = null; - - /** - * Variable: forcedInserting - * - * Specifies if a new cell should be inserted on a single - * click even using if there is a cell - * under the mousepointer, otherwise the cell under the - * mousepointer is selected. Default is false. - */ - forcedInserting = false; - - /** - * Variable: templates - * - * Maps from names to protoype cells to be used - * in the toolbar for inserting new cells into - * the diagram. - */ - templates = null; - - /** - * Variable: defaultEdge - * - * Prototype edge cell that is used for creating - * new edges. - */ - defaultEdge = null; - - /** - * Variable: defaultEdgeStyle - * - * Specifies the edge style to be returned in . - * Default is null. - */ - defaultEdgeStyle = null; - - /** - * Variable: defaultGroup - * - * Prototype group cell that is used for creating - * new groups. - */ - defaultGroup = null; - - /** - * Variable: groupBorderSize - * - * Default size for the border of new groups. If null, - * then then is used. Default is - * null. - */ - groupBorderSize = null; - - /** - * Group: Backend Integration - */ - - /** - * Variable: filename - * - * Contains the URL of the last opened file as a string. - * Default is null. - */ - filename = null; - - /** - * Variable: lineFeed - * - * Character to be used for encoding linefeeds in . Default is ' '. - */ - linefeed = ' '; - - /** - * Variable: postParameterName - * - * Specifies if the name of the post parameter that contains the diagram - * data in a post request to the server. Default is 'xml'. - */ - postParameterName = 'xml'; - - /** - * Variable: escapePostData - * - * Specifies if the data in the post request for saving a diagram - * should be converted using encodeURIComponent. Default is true. - */ - escapePostData = true; - - /** - * Variable: urlPost - * - * Specifies the URL to be used for posting the diagram - * to a backend in . - */ - urlPost = null; - - /** - * Variable: urlImage - * - * Specifies the URL to be used for creating a bitmap of - * the graph in the image action. - */ - urlImage = null; - - /** - * Group: Autolayout - */ - - /** - * Variable: horizontalFlow - * - * Specifies the direction of the flow - * in the diagram. This is used in the - * layout algorithms. Default is false, - * ie. vertical flow. - */ - horizontalFlow = false; - - /** - * Variable: layoutDiagram - * - * Specifies if the top-level elements in the - * diagram should be layed out using a vertical - * or horizontal stack depending on the setting - * of . The spacing between the - * swimlanes is specified by . - * Default is false. - * - * If the top-level elements are swimlanes, then - * the intra-swimlane layout is activated by - * the switch. - */ - layoutDiagram = false; - - /** - * Variable: swimlaneSpacing - * - * Specifies the spacing between swimlanes if - * automatic layout is turned on in - * . Default is 0. - */ - swimlaneSpacing = 0; - - /** - * Variable: maintainSwimlanes - * - * Specifies if the swimlanes should be kept at the same - * width or height depending on the setting of - * . Default is false. - * - * For horizontal flows, all swimlanes - * have the same height and for vertical flows, all swimlanes - * have the same width. Furthermore, the swimlanes are - * automatically "stacked" if is true. - */ - maintainSwimlanes = false; - - /** - * Variable: layoutSwimlanes - * - * Specifies if the children of swimlanes should - * be layed out, either vertically or horizontally - * depending on . - * Default is false. - */ - layoutSwimlanes = false; - - /** - * Group: Attribute Cycling - */ - - /** - * Variable: cycleAttributeValues - * - * Specifies the attribute values to be cycled when - * inserting new swimlanes. Default is an empty - * array. - */ - cycleAttributeValues = null; - - /** - * Variable: cycleAttributeIndex - * - * Index of the last consumed attribute index. If a new - * swimlane is inserted, then the - * at this index will be used as the value for - * . Default is 0. - */ - cycleAttributeIndex = 0; - - /** - * Variable: cycleAttributeName - * - * Name of the attribute to be assigned a - * when inserting new swimlanes. Default is 'fillColor'. - */ - cycleAttributeName = 'fillColor'; - - /** - * Group: Windows - */ - - /** - * Variable: tasks - * - * Holds the created in . - */ - tasks = null; - - /** - * Variable: tasksWindowImage - * - * Icon for the tasks window. - */ - tasksWindowImage = null; - - /** - * Variable: tasksTop - * - * Specifies the top coordinate of the tasks window in pixels. - * Default is 20. - */ - tasksTop = 20; - - /** - * Variable: help - * - * Holds the created in . - */ - help = null; - - /** - * Variable: helpWindowImage - * - * Icon for the help window. - */ - helpWindowImage = null; - - /** - * Variable: urlHelp - * - * Specifies the URL to be used for the contents of the - * Online Help window. This is usually specified in the - * resources file under urlHelp for language-specific - * online help support. - */ - urlHelp = null; - - /** - * Variable: helpWidth - * - * Specifies the width of the help window in pixels. - * Default is 300. - */ - helpWidth = 300; - - /** - * Variable: helpHeight - * - * Specifies the height of the help window in pixels. - * Default is 260. - */ - helpHeight = 260; - - /** - * Variable: propertiesWidth - * - * Specifies the width of the properties window in pixels. - * Default is 240. - */ - propertiesWidth = 240; - - /** - * Variable: propertiesHeight - * - * Specifies the height of the properties window in pixels. - * If no height is specified then the window will be automatically - * sized to fit its contents. Default is null. - */ - propertiesHeight = null; - - /** - * Variable: movePropertiesDialog - * - * Specifies if the properties dialog should be automatically - * moved near the cell it is displayed for, otherwise the - * dialog is not moved. This value is only taken into - * account if the dialog is already visible. Default is false. - */ - movePropertiesDialog = false; - - /** - * Variable: validating - * - * Specifies if should automatically be invoked after - * each change. Default is false. - */ - validating = false; - - /** - * Variable: modified - * - * True if the graph has been modified since it was last saved. - */ - modified = false; - /** * Function: isModified * * Returns . */ - isModified=()=>{ + isModified = () => { return this.modified; }; @@ -931,7 +879,7 @@ class mxEditor extends mxEventSource { * * Sets to the specified boolean value. */ - setModified=(value)=>{ + setModified = (value) => { this.modified = value; }; @@ -994,21 +942,21 @@ class mxEditor extends mxEventSource { * toggleOutline - Shows or hides the outline window. * toggleConsole - Shows or hides the console window. */ - addActions=()=>{ - this.addAction('save', (editor)=>{ + addActions = () => { + this.addAction('save', (editor) => { editor.save(); }); - this.addAction('print', (editor)=>{ + this.addAction('print', (editor) => { var preview = new mxPrintPreview(editor.graph, 1); preview.open(); }); - this.addAction('show', (editor)=>{ + this.addAction('show', (editor) => { mxUtils.show(editor.graph, null, 10, 10); }); - this.addAction('exportImage', (editor)=>{ + this.addAction('exportImage', (editor) => { var url = editor.getUrlImage(); if (url == null || mxClient.IS_LOCAL) { @@ -1022,190 +970,190 @@ class mxEditor extends mxEventSource { } }); - this.addAction('refresh', (editor)=>{ + this.addAction('refresh', (editor) => { editor.graph.refresh(); }); - this.addAction('cut', (editor)=>{ + this.addAction('cut', (editor) => { if (editor.graph.isEnabled()) { mxClipboard.cut(editor.graph); } }); - this.addAction('copy', (editor)=>{ + this.addAction('copy', (editor) => { if (editor.graph.isEnabled()) { mxClipboard.copy(editor.graph); } }); - this.addAction('paste', (editor)=>{ + this.addAction('paste', (editor) => { if (editor.graph.isEnabled()) { mxClipboard.paste(editor.graph); } }); - this.addAction('delete', (editor)=>{ + this.addAction('delete', (editor) => { if (editor.graph.isEnabled()) { editor.graph.removeCells(); } }); - this.addAction('group', (editor)=>{ + this.addAction('group', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setSelectionCell(editor.groupCells()); } }); - this.addAction('ungroup', (editor)=>{ + this.addAction('ungroup', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setSelectionCells(editor.graph.ungroupCells()); } }); - this.addAction('removeFromParent', (editor)=>{ + this.addAction('removeFromParent', (editor) => { if (editor.graph.isEnabled()) { editor.graph.removeCellsFromParent(); } }); - this.addAction('undo', (editor)=>{ + this.addAction('undo', (editor) => { if (editor.graph.isEnabled()) { editor.undo(); } }); - this.addAction('redo', (editor)=>{ + this.addAction('redo', (editor) => { if (editor.graph.isEnabled()) { editor.redo(); } }); - this.addAction('zoomIn', (editor)=>{ + this.addAction('zoomIn', (editor) => { editor.graph.zoomIn(); }); - this.addAction('zoomOut', (editor)=>{ + this.addAction('zoomOut', (editor) => { editor.graph.zoomOut(); }); - this.addAction('actualSize', (editor)=>{ + this.addAction('actualSize', (editor) => { editor.graph.zoomActual(); }); - this.addAction('fit', (editor)=>{ + this.addAction('fit', (editor) => { editor.graph.fit(); }); - this.addAction('showProperties', (editor, cell)=>{ + this.addAction('showProperties', (editor, cell) => { editor.showProperties(cell); }); - this.addAction('selectAll', (editor)=>{ + this.addAction('selectAll', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectAll(); } }); - this.addAction('selectNone', (editor)=>{ + this.addAction('selectNone', (editor) => { if (editor.graph.isEnabled()) { editor.graph.clearSelection(); } }); - this.addAction('selectVertices', (editor)=>{ + this.addAction('selectVertices', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectVertices(); } }); - this.addAction('selectEdges', (editor)=>{ + this.addAction('selectEdges', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectEdges(); } }); - this.addAction('edit', (editor, cell)=>{ + this.addAction('edit', (editor, cell) => { if (editor.graph.isEnabled() && editor.graph.isCellEditable(cell)) { editor.graph.startEditingAtCell(cell); } }); - this.addAction('toBack', (editor, cell)=>{ + this.addAction('toBack', (editor, cell) => { if (editor.graph.isEnabled()) { editor.graph.orderCells(true); } }); - this.addAction('toFront', (editor, cell)=>{ + this.addAction('toFront', (editor, cell) => { if (editor.graph.isEnabled()) { editor.graph.orderCells(false); } }); - this.addAction('enterGroup', (editor, cell)=>{ + this.addAction('enterGroup', (editor, cell) => { editor.graph.enterGroup(cell); }); - this.addAction('exitGroup', (editor)=>{ + this.addAction('exitGroup', (editor) => { editor.graph.exitGroup(); }); - this.addAction('home', (editor)=>{ + this.addAction('home', (editor) => { editor.graph.home(); }); - this.addAction('selectPrevious', (editor)=>{ + this.addAction('selectPrevious', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectPreviousCell(); } }); - this.addAction('selectNext', (editor)=>{ + this.addAction('selectNext', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectNextCell(); } }); - this.addAction('selectParent', (editor)=>{ + this.addAction('selectParent', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectParentCell(); } }); - this.addAction('selectChild', (editor)=>{ + this.addAction('selectChild', (editor) => { if (editor.graph.isEnabled()) { editor.graph.selectChildCell(); } }); - this.addAction('collapse', (editor)=>{ + this.addAction('collapse', (editor) => { if (editor.graph.isEnabled()) { editor.graph.foldCells(true); } }); - this.addAction('collapseAll', (editor)=>{ + this.addAction('collapseAll', (editor) => { if (editor.graph.isEnabled()) { var cells = editor.graph.getChildVertices(); editor.graph.foldCells(true, false, cells); } }); - this.addAction('expand', (editor)=>{ + this.addAction('expand', (editor) => { if (editor.graph.isEnabled()) { editor.graph.foldCells(false); } }); - this.addAction('expandAll', (editor)=>{ + this.addAction('expandAll', (editor) => { if (editor.graph.isEnabled()) { var cells = editor.graph.getChildVertices(); editor.graph.foldCells(false, false, cells); } }); - this.addAction('bold', (editor)=>{ + this.addAction('bold', (editor) => { if (editor.graph.isEnabled()) { editor.graph.toggleCellStyleFlags( mxConstants.STYLE_FONTSTYLE, @@ -1213,7 +1161,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('italic', (editor)=>{ + this.addAction('italic', (editor) => { if (editor.graph.isEnabled()) { editor.graph.toggleCellStyleFlags( mxConstants.STYLE_FONTSTYLE, @@ -1221,7 +1169,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('underline', (editor)=>{ + this.addAction('underline', (editor) => { if (editor.graph.isEnabled()) { editor.graph.toggleCellStyleFlags( mxConstants.STYLE_FONTSTYLE, @@ -1229,50 +1177,50 @@ class mxEditor extends mxEventSource { } }); - this.addAction('alignCellsLeft', (editor)=>{ + this.addAction('alignCellsLeft', (editor) => { if (editor.graph.isEnabled()) { editor.graph.alignCells(mxConstants.ALIGN_LEFT); } }); - this.addAction('alignCellsCenter', (editor)=>{ + this.addAction('alignCellsCenter', (editor) => { if (editor.graph.isEnabled()) { editor.graph.alignCells(mxConstants.ALIGN_CENTER); } }); - this.addAction('alignCellsRight', (editor)=>{ + this.addAction('alignCellsRight', (editor) => { if (editor.graph.isEnabled()) { editor.graph.alignCells(mxConstants.ALIGN_RIGHT); } }); - this.addAction('alignCellsTop', (editor)=>{ + this.addAction('alignCellsTop', (editor) => { if (editor.graph.isEnabled()) { editor.graph.alignCells(mxConstants.ALIGN_TOP); } }); - this.addAction('alignCellsMiddle', (editor)=>{ + this.addAction('alignCellsMiddle', (editor) => { if (editor.graph.isEnabled()) { editor.graph.alignCells(mxConstants.ALIGN_MIDDLE); } }); - this.addAction('alignCellsBottom', (editor)=>{ + this.addAction('alignCellsBottom', (editor) => { if (editor.graph.isEnabled()) { editor.graph.alignCells(mxConstants.ALIGN_BOTTOM); } }); - this.addAction('alignFontLeft', (editor)=>{ + this.addAction('alignFontLeft', (editor) => { editor.graph.setCellStyles( mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT); }); - this.addAction('alignFontCenter', (editor)=>{ + this.addAction('alignFontCenter', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setCellStyles( mxConstants.STYLE_ALIGN, @@ -1280,7 +1228,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('alignFontRight', (editor)=>{ + this.addAction('alignFontRight', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setCellStyles( mxConstants.STYLE_ALIGN, @@ -1288,7 +1236,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('alignFontTop', (editor)=>{ + this.addAction('alignFontTop', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setCellStyles( mxConstants.STYLE_VERTICAL_ALIGN, @@ -1296,7 +1244,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('alignFontMiddle', (editor)=>{ + this.addAction('alignFontMiddle', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setCellStyles( mxConstants.STYLE_VERTICAL_ALIGN, @@ -1304,7 +1252,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('alignFontBottom', (editor)=>{ + this.addAction('alignFontBottom', (editor) => { if (editor.graph.isEnabled()) { editor.graph.setCellStyles( mxConstants.STYLE_VERTICAL_ALIGN, @@ -1312,7 +1260,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('zoom', (editor)=>{ + this.addAction('zoom', (editor) => { var current = editor.graph.getView().scale * 100; var scale = parseFloat(mxUtils.prompt( mxResources.get(editor.askZoomResource) || @@ -1324,7 +1272,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('toggleTasks', (editor)=>{ + this.addAction('toggleTasks', (editor) => { if (editor.tasks != null) { editor.tasks.setVisible(!editor.tasks.isVisible()); } else { @@ -1332,7 +1280,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('toggleHelp', (editor)=>{ + this.addAction('toggleHelp', (editor) => { if (editor.help != null) { editor.help.setVisible(!editor.help.isVisible()); } else { @@ -1340,7 +1288,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('toggleOutline', (editor)=>{ + this.addAction('toggleOutline', (editor) => { if (editor.outline == null) { editor.showOutline(); } else { @@ -1348,7 +1296,7 @@ class mxEditor extends mxEventSource { } }); - this.addAction('toggleConsole', (editor)=>{ + this.addAction('toggleConsole', (editor) => { mxLog.setVisible(!mxLog.isVisible()); }); }; @@ -1368,7 +1316,7 @@ class mxEditor extends mxEventSource { * * node - XML node that contains the configuration. */ - configure=(node)=>{ + configure = (node) => { if (node != null) { // Creates a decoder for the XML data // and uses it to configure the editor @@ -1387,7 +1335,7 @@ class mxEditor extends mxEventSource { * Resets the cookie that is used to remember if the editor has already * been used. */ - resetFirstTime=()=>{ + resetFirstTime = () => { document.cookie = 'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/'; }; @@ -1397,7 +1345,7 @@ class mxEditor extends mxEventSource { * * Resets the command history, modified state and counters. */ - resetHistory=()=>{ + resetHistory = () => { this.lastSnapshot = new Date().getTime(); this.undoManager.clear(); this.ignoredChanges = 0; @@ -1426,7 +1374,7 @@ class mxEditor extends mxEventSource { * }); * (end) */ - addAction=(actionname, funct)=>{ + addAction = (actionname, funct) => { this.actions[actionname] = funct; }; @@ -1446,7 +1394,7 @@ class mxEditor extends mxEventSource { * editor.execute("showProperties", cell); * (end) */ - execute=(actionname, cell, evt)=>{ + execute = (actionname, cell, evt) => { var action = this.actions[actionname]; if (action != null) { @@ -1474,7 +1422,7 @@ class mxEditor extends mxEventSource { * * Adds the specified template under the given name in . */ - addTemplate=(name, template)=>{ + addTemplate = (name, template) => { this.templates[name] = template; }; @@ -1483,7 +1431,7 @@ class mxEditor extends mxEventSource { * * Returns the template for the given name. */ - getTemplate=(name)=>{ + getTemplate = (name) => { return this.templates[name]; }; @@ -1493,7 +1441,7 @@ class mxEditor extends mxEventSource { * Creates the for the editor. The graph is created with no * container and is initialized from . */ - createGraph=()=>{ + createGraph = () => { var graph = new mxGraph(null, null, this.graphRenderHint); // Enables rubberband, tooltips, panning @@ -1522,14 +1470,14 @@ class mxEditor extends mxEventSource { // Redirects the function for creating the // popupmenu items graph.popupMenuHandler.factoryMethod = - mxUtils.bind(this, (menu, cell, evt)=>{ + mxUtils.bind(this, (menu, cell, evt) => { return this.createPopupMenu(menu, cell, evt); }); // Redirects the function for creating // new connections in the diagram graph.connectionHandler.factoryMethod = - mxUtils.bind(this, (source, target)=>{ + mxUtils.bind(this, (source, target) => { return this.createEdge(source, target); }); @@ -1545,14 +1493,14 @@ class mxEditor extends mxEventSource { * * Sets the graph's container using . */ - createSwimlaneManager=(graph)=>{ + createSwimlaneManager = (graph) => { var swimlaneMgr = new mxSwimlaneManager(graph, false); - swimlaneMgr.isHorizontal = mxUtils.bind(this, ()=>{ + swimlaneMgr.isHorizontal = mxUtils.bind(this, () => { return this.horizontalFlow; }); - swimlaneMgr.isEnabled = mxUtils.bind(this, ()=>{ + swimlaneMgr.isEnabled = mxUtils.bind(this, () => { return this.maintainSwimlanes; }); @@ -1565,11 +1513,11 @@ class mxEditor extends mxEventSource { * Creates a layout manager for the swimlane and diagram layouts, that * is, the locally defined inter- and intraswimlane layouts. */ - createLayoutManager=(graph)=>{ + createLayoutManager = (graph) => { var layoutMgr = new mxLayoutManager(graph); var self = this; // closure - layoutMgr.getLayout=(cell)=>{ + layoutMgr.getLayout = (cell) => { var layout = null; var model = self.graph.getModel(); @@ -1611,7 +1559,7 @@ class mxEditor extends mxEventSource { * * Sets the graph's container using . */ - setGraphContainer=(container)=>{ + setGraphContainer = (container) => { if (this.graph.container == null) { // Creates the graph instance inside the given container and render hint //this.graph = new mxGraph(container, null, this.graphRenderHint); @@ -1634,10 +1582,10 @@ class mxEditor extends mxEventSource { * Overrides to invoke * on a cell and reset the selection tool in the toolbar. */ - installDblClickHandler=(graph)=>{ + installDblClickHandler = (graph) => { // Installs a listener for double click events graph.addListener(mxEvent.DOUBLE_CLICK, - mxUtils.bind(this, (sender, evt)=>{ + mxUtils.bind(this, (sender, evt) => { var cell = evt.getProperty('cell'); if (cell != null && @@ -1655,8 +1603,8 @@ class mxEditor extends mxEventSource { * * Adds the to the graph model and the view. */ - installUndoHandler=(graph)=>{ - var listener = mxUtils.bind(this, (sender, evt)=>{ + installUndoHandler = (graph) => { + var listener = mxUtils.bind(this, (sender, evt) => { var edit = evt.getProperty('edit'); this.undoManager.undoableEditHappened(edit); }); @@ -1665,7 +1613,7 @@ class mxEditor extends mxEventSource { graph.getView().addListener(mxEvent.UNDO, listener); // Keeps the selection state in sync - var undoHandler=(sender, evt)=>{ + var undoHandler = (sender, evt) => { var changes = evt.getProperty('edit').changes; graph.setSelectionCells(graph.getSelectionCellsForChanges(changes)); }; @@ -1679,8 +1627,8 @@ class mxEditor extends mxEventSource { * * Installs listeners for dispatching the event. */ - installDrillHandler=(graph)=>{ - var listener = mxUtils.bind(this, (sender)=>{ + installDrillHandler = (graph) => { + var listener = mxUtils.bind(this, (sender) => { this.fireEvent(new mxEventObject(mxEvent.ROOT)); }); @@ -1695,8 +1643,8 @@ class mxEditor extends mxEventSource { * the graph. On each change of the root, this implementation * fires a event. */ - installChangeHandler=(graph)=>{ - var listener = mxUtils.bind(this, (sender, evt)=>{ + installChangeHandler = (graph) => { + var listener = mxUtils.bind(this, (sender, evt) => { // Updates the modified state this.setModified(true); @@ -1732,11 +1680,11 @@ class mxEditor extends mxEventSource { * Installs the handler for invoking if * one is defined. */ - installInsertHandler=(graph)=>{ + installInsertHandler = (graph) => { var self = this; // closure var insertHandler = { - mouseDown: (sender, me)=>{ + mouseDown: (sender, me) => { if (self.insertFunction != null && !me.isPopupTrigger() && (self.forcedInserting || @@ -1751,13 +1699,13 @@ class mxEditor extends mxEventSource { } }, - mouseMove: (sender, me)=>{ + mouseMove: (sender, me) => { if (this.isActive) { me.consume(); } }, - mouseUp: (sender, me)=>{ + mouseUp: (sender, me) => { if (this.isActive) { this.isActive = false; me.consume(); @@ -1774,13 +1722,13 @@ class mxEditor extends mxEventSource { * Creates the layout instance used to layout the * swimlanes in the diagram. */ - createDiagramLayout=()=>{ + createDiagramLayout = () => { var gs = this.graph.gridSize; var layout = new mxStackLayout(this.graph, !this.horizontalFlow, this.swimlaneSpacing, 2 * gs, 2 * gs); // Overrides isIgnored to only take into account swimlanes - layout.isVertexIgnored=(cell)=>{ + layout.isVertexIgnored = (cell) => { return !layout.graph.isSwimlane(cell); }; @@ -1793,7 +1741,7 @@ class mxEditor extends mxEventSource { * Creates the layout instance used to layout the * children of each swimlane. */ - createSwimlaneLayout=()=>{ + createSwimlaneLayout = () => { return new mxCompactTreeLayout(this.graph, this.horizontalFlow); }; @@ -1802,7 +1750,7 @@ class mxEditor extends mxEventSource { * * Creates the with no container. */ - createToolbar=()=>{ + createToolbar = () => { return new mxDefaultToolbar(null, this); }; @@ -1811,7 +1759,7 @@ class mxEditor extends mxEventSource { * * Initializes the toolbar for the given container. */ - setToolbarContainer=(container)=>{ + setToolbarContainer = (container) => { this.toolbar.init(container); }; @@ -1828,13 +1776,13 @@ class mxEditor extends mxEventSource { * * container - DOM node that will contain the statusbar. */ - setStatusContainer=(container)=>{ + setStatusContainer = (container) => { if (this.status == null) { this.status = container; // Prints the last saved time in the status bar // when files are saved - this.addListener(mxEvent.SAVE, mxUtils.bind(this, ()=>{ + this.addListener(mxEvent.SAVE, mxUtils.bind(this, () => { var tstamp = new Date().toLocaleString(); this.setStatus((mxResources.get(this.lastSavedResource) || this.lastSavedResource) + ': ' + tstamp); @@ -1842,7 +1790,7 @@ class mxEditor extends mxEventSource { // Updates the statusbar to display the filename // when new files are opened - this.addListener(mxEvent.OPEN, mxUtils.bind(this, ()=>{ + this.addListener(mxEvent.OPEN, mxUtils.bind(this, () => { this.setStatus((mxResources.get(this.currentFileResource) || this.currentFileResource) + ': ' + this.filename); })); @@ -1859,7 +1807,7 @@ class mxEditor extends mxEventSource { * message - String the specified the message to * be displayed. */ - setStatus=(message)=>{ + setStatus = (message) => { if (this.status != null && message != null) { this.status.innerHTML = message; } @@ -1875,8 +1823,8 @@ class mxEditor extends mxEventSource { * * container - DOM node that will contain the title. */ - setTitleContainer=(container)=>{ - this.addListener(mxEvent.ROOT, mxUtils.bind(this, (sender)=>{ + setTitleContainer = (container) => { + this.addListener(mxEvent.ROOT, mxUtils.bind(this, (sender) => { container.innerHTML = this.getTitle(); })); }; @@ -1894,7 +1842,7 @@ class mxEditor extends mxEventSource { * horizontal - Optional boolean to specify the tree's * orientation. Default is true. */ - treeLayout=(cell, horizontal)=>{ + treeLayout = (cell, horizontal) => { if (cell != null) { var layout = new mxCompactTreeLayout(this.graph, horizontal); layout.execute(cell); @@ -1907,7 +1855,7 @@ class mxEditor extends mxEventSource { * Returns the string value for the current root of the * diagram. */ - getTitle=()=>{ + getTitle = () => { var title = ''; var graph = this.graph; var cell = graph.getCurrentRoot(); @@ -1935,7 +1883,7 @@ class mxEditor extends mxEventSource { * Returns the string value of the root cell in * . */ - getRootTitle=()=>{ + getRootTitle = () => { var root = this.graph.getModel().getRoot(); return this.graph.convertValueToString(root); }; @@ -1945,7 +1893,7 @@ class mxEditor extends mxEventSource { * * Undo the last change in . */ - undo=()=>{ + undo = () => { this.undoManager.undo(); }; @@ -1954,7 +1902,7 @@ class mxEditor extends mxEventSource { * * Redo the last change in . */ - redo=()=>{ + redo = () => { this.undoManager.redo(); }; @@ -1965,7 +1913,7 @@ class mxEditor extends mxEventSource { * , using the grid size of the graph as the spacing * in the group's content area. */ - groupCells=()=>{ + groupCells = () => { var border = (this.groupBorderSize != null) ? this.groupBorderSize : this.graph.gridSize; @@ -1978,7 +1926,7 @@ class mxEditor extends mxEventSource { * Creates and returns a clone of to be used * as a new group cell in . */ - createGroup=()=>{ + createGroup = () => { var model = this.graph.getModel(); return model.cloneCell(this.defaultGroup); @@ -2007,7 +1955,7 @@ class mxEditor extends mxEventSource { * * filename - URL of the file to be opened. */ - open=(filename)=>{ + open = (filename) => { if (filename != null) { var xml = mxUtils.load(filename).getXml(); this.readGraphModel(xml.documentElement); @@ -2023,7 +1971,7 @@ class mxEditor extends mxEventSource { * Reads the specified XML node into the existing graph model and resets * the command history and modified state. */ - readGraphModel=(node)=>{ + readGraphModel = (node) => { var dec = new mxCodec(node.ownerDocument); dec.decode(node, this.graph.getModel()); this.resetHistory(); @@ -2049,7 +1997,7 @@ class mxEditor extends mxEventSource { * } * (end) */ - save=(url, linefeed)=>{ + save = (url, linefeed) => { // Gets the URL to post the data to url = url || this.getUrlPost(); @@ -2088,13 +2036,13 @@ class mxEditor extends mxEventSource { * }); * (end) */ - postDiagram=(url, data)=>{ + postDiagram = (url, data) => { if (this.escapePostData) { data = encodeURIComponent(data); } mxUtils.post(url, this.postParameterName + '=' + data, - mxUtils.bind(this, (req)=>{ + mxUtils.bind(this, (req) => { this.fireEvent(new mxEventObject(mxEvent.POST, 'request', req, 'url', url, 'data', data)); }) @@ -2119,7 +2067,7 @@ class mxEditor extends mxEventSource { * linefeed - Optional character to be used as the linefeed. Default is * . */ - writeGraphModel=(linefeed)=>{ + writeGraphModel = (linefeed) => { linefeed = (linefeed != null) ? linefeed : this.linefeed; var enc = new mxCodec(); var node = enc.encode(this.graph.getModel()); @@ -2134,7 +2082,7 @@ class mxEditor extends mxEventSource { * in . The default implementation returns , * adding ?draft=true. */ - getUrlPost=()=>{ + getUrlPost = () => { return this.urlPost; }; @@ -2147,7 +2095,7 @@ class mxEditor extends mxEventSource { * in the image action to create an image. This implementation * returns . */ - getUrlImage=()=>{ + getUrlImage = () => { return this.urlImage; }; @@ -2157,7 +2105,7 @@ class mxEditor extends mxEventSource { * Swaps the styles for the given names in the graph's * stylesheet and refreshes the graph. */ - swapStyles=(first, second)=>{ + swapStyles = (first, second) => { var style = this.graph.getStylesheet().styles[second]; this.graph.getView().getStylesheet().putCellStyle( second, this.graph.getStylesheet().styles[first]); @@ -2172,7 +2120,7 @@ class mxEditor extends mxEventSource { * cell. The content area of the dialog is created using * . */ - showProperties=(cell)=>{ + showProperties = (cell) => { cell = cell || this.graph.getSelectionCell(); // Uses the root node for the properties dialog @@ -2232,7 +2180,7 @@ class mxEditor extends mxEventSource { * * Returns true if the properties dialog is currently visible. */ - isPropertiesVisible=()=>{ + isPropertiesVisible = () => { return this.properties != null; }; @@ -2244,7 +2192,7 @@ class mxEditor extends mxEventSource { * works for user objects that are XML nodes and display all the * node attributes in a form. */ - createProperties=(cell)=>{ + createProperties = (cell) => { var model = this.graph.getModel(); var value = model.getValue(cell); @@ -2298,7 +2246,7 @@ class mxEditor extends mxEventSource { // Defines the function to be executed when the // OK button is pressed in the dialog - var okFunction = mxUtils.bind(this, ()=>{ + var okFunction = mxUtils.bind(this, () => { // Hides the dialog this.hideProperties(); @@ -2349,7 +2297,7 @@ class mxEditor extends mxEventSource { // Defines the function to be executed when the // Cancel button is pressed in the dialog - var cancelFunction = mxUtils.bind(this, ()=>{ + var cancelFunction = mxUtils.bind(this, () => { // Hides the dialog this.hideProperties(); }); @@ -2367,7 +2315,7 @@ class mxEditor extends mxEventSource { * * Hides the properties dialog. */ - hideProperties=()=>{ + hideProperties = () => { if (this.properties != null) { this.properties.destroy(); this.properties = null; @@ -2396,7 +2344,7 @@ class mxEditor extends mxEventSource { * }; * (end) */ - showTasks=()=>{ + showTasks = () => { if (this.tasks == null) { var div = document.createElement('div'); div.style.padding = '4px'; @@ -2412,7 +2360,7 @@ class mxEditor extends mxEventSource { // Installs a function to update the contents // of the tasks window on every change of the // model, selection or root. - var funct = mxUtils.bind(this, (sender)=>{ + var funct = mxUtils.bind(this, (sender) => { mxEvent.release(div); div.innerHTML = ''; this.createTasks(div); @@ -2439,7 +2387,7 @@ class mxEditor extends mxEventSource { * * Updates the contents of the tasks window using . */ - refreshTasks=(div)=>{ + refreshTasks = (div) => { if (this.tasks != null) { var div = this.tasks.content; mxEvent.release(div); @@ -2457,7 +2405,7 @@ class mxEditor extends mxEventSource { * is a possible change of state in the editor. * Default implementation is empty. */ - createTasks=(div)=>{ + createTasks = (div) => { // override }; @@ -2469,7 +2417,7 @@ class mxEditor extends mxEventSource { * for the urlHelp key or if the resource * is undefined. */ - showHelp=(tasks)=>{ + showHelp = (tasks) => { if (this.help == null) { var frame = document.createElement('iframe'); frame.setAttribute('src', mxResources.get('urlHelp') || this.urlHelp); @@ -2495,7 +2443,7 @@ class mxEditor extends mxEventSource { // Workaround for ignored iframe height 100% in FF if (mxClient.IS_NS) { - var handler=(sender)=>{ + var handler = (sender) => { var h = wnd.div.offsetHeight; frame.setAttribute('height', (h - 26) + 'px'); }; @@ -2518,7 +2466,7 @@ class mxEditor extends mxEventSource { * Shows the outline window. If the window does not exist, then it is * created using an . */ - showOutline=()=>{ + showOutline = () => { var create = this.outline == null; if (create) { @@ -2543,7 +2491,7 @@ class mxEditor extends mxEventSource { wnd.setResizable(true); wnd.destroyOnClose = false; - wnd.addListener(mxEvent.RESIZE_END, ()=>{ + wnd.addListener(mxEvent.RESIZE_END, () => { outline.update(); }); @@ -2568,7 +2516,7 @@ class mxEditor extends mxEventSource { * connections if mouse over cell hotspot. See . * pan - Pans using the left mouse button, new connections are disabled. */ - setMode=(modename)=>{ + setMode = (modename) => { if (modename === 'select') { this.graph.panningHandler.useLeftButtonForPanning = false; this.graph.setConnectable(false); @@ -2588,7 +2536,7 @@ class mxEditor extends mxEventSource { * panning handler. The redirection is setup in * . */ - createPopupMenu=(menu, cell, evt)=>{ + createPopupMenu = (menu, cell, evt) => { this.popupHandler.createMenu(this, menu, cell, evt); }; @@ -2600,7 +2548,7 @@ class mxEditor extends mxEventSource { * edge will be overridden with the value returned by * . */ - createEdge=(source, target)=>{ + createEdge = (source, target) => { // Clones the defaultedge prototype var e = null; @@ -2633,7 +2581,7 @@ class mxEditor extends mxEventSource { * The function is used in when new edges * are created in the graph. */ - getEdgeStyle=()=>{ + getEdgeStyle = () => { return this.defaultEdgeStyle; }; @@ -2644,7 +2592,7 @@ class mxEditor extends mxEventSource { * or null, if not attribute should be used in the * specified cell. */ - consumeCycleAttribute=(cell)=>{ + consumeCycleAttribute = (cell) => { return (this.cycleAttributeValues != null && this.cycleAttributeValues.length > 0 && this.graph.isSwimlane(cell)) ? @@ -2659,7 +2607,7 @@ class mxEditor extends mxEventSource { * as the value for the key in * the given cell's style. */ - cycleAttribute=(cell)=>{ + cycleAttribute = (cell) => { if (this.cycleAttributeName != null) { var value = this.consumeCycleAttribute(cell); @@ -2676,7 +2624,7 @@ class mxEditor extends mxEventSource { * Adds the given vertex as a child of parent at the specified * x and y coordinate and fires an event. */ - addVertex=(parent, vertex, x, y)=>{ + addVertex = (parent, vertex, x, y) => { var model = this.graph.getModel(); while (parent != null && !this.graph.isValidDropTarget(parent)) { @@ -2769,7 +2717,7 @@ class mxEditor extends mxEventSource { * normally need to be called, it is called automatically when the window * unloads. */ - destroy=()=>{ + destroy = () => { if (!this.destroyed) { this.destroyed = true; diff --git a/src/js/handler/mxEdgeHandler.js b/src/js/handler/mxEdgeHandler.js index 5ac093f6e..f166358d2 100644 --- a/src/js/handler/mxEdgeHandler.js +++ b/src/js/handler/mxEdgeHandler.js @@ -188,6 +188,19 @@ class mxEdgeHandler { * handle. Uses for checking and moving. Default is false. */ manageLabelHandle = false; + /** + * Function: isParentHighlightVisible + * + * Returns true if the parent highlight should be visible. This implementation + * always returns true. + */ + isParentHighlightVisible = isParentHighlightVisible; + /** + * Function: updateParentHighlight + * + * Updates the highlight of the parent if is true. + */ + updateParentHighlight = updateParentHighlight; /** * Class: mxEdgeHandler @@ -305,22 +318,6 @@ class mxEdgeHandler { this.redraw(); }; - - /** - * Function: isParentHighlightVisible - * - * Returns true if the parent highlight should be visible. This implementation - * always returns true. - */ - isParentHighlightVisible = isParentHighlightVisible; - - /** - * Function: updateParentHighlight - * - * Updates the highlight of the parent if is true. - */ - updateParentHighlight = updateParentHighlight; - /** * Function: createCustomHandles * @@ -956,7 +953,7 @@ class mxEdgeHandler { snapToPoint.call(this, new mxPoint(view.getRoutingCenterX(terminal), view.getRoutingCenterY(terminal))); } - }; + } snapToTerminal.call(this, this.state.getVisibleTerminalState(true)); snapToTerminal.call(this, this.state.getVisibleTerminalState(false)); @@ -1125,7 +1122,7 @@ class mxEdgeHandler { points.splice(idx - 1, 1); result = points; } - }; + } // LATER: Check if other points can be removed if a segment is made straight checkRemove(this.index, pt); diff --git a/src/js/handler/mxRubberband.js b/src/js/handler/mxRubberband.js index 1f1d5e1c2..dd66a853e 100644 --- a/src/js/handler/mxRubberband.js +++ b/src/js/handler/mxRubberband.js @@ -184,7 +184,7 @@ class mxRubberband { me.graphY = pt.y; return me; - }; + } this.dragHandler = mxUtils.bind(this, (evt) => { this.mouseMove(this.graph, createMouseEvent(evt)); diff --git a/src/js/handler/mxTooltipHandler.js b/src/js/handler/mxTooltipHandler.js index 30623af24..8211d07e2 100644 --- a/src/js/handler/mxTooltipHandler.js +++ b/src/js/handler/mxTooltipHandler.js @@ -4,6 +4,50 @@ */ class mxTooltipHandler { + /** + * Variable: zIndex + * + * Specifies the zIndex for the tooltip and its shadow. Default is 10005. + */ + zIndex = 10005; + /** + * Variable: graph + * + * Reference to the enclosing . + */ + graph = null; + /** + * Variable: delay + * + * Delay to show the tooltip in milliseconds. Default is 500. + */ + delay = null; + /** + * Variable: ignoreTouchEvents + * + * Specifies if touch and pen events should be ignored. Default is true. + */ + ignoreTouchEvents = true; + /** + * Variable: hideOnHover + * + * Specifies if the tooltip should be hidden if the mouse is moved over the + * current cell. Default is false. + */ + hideOnHover = false; + /** + * Variable: destroyed + * + * True if this handler was destroyed using . + */ + destroyed = false; + /** + * Variable: enabled + * + * Specifies if events are handled. Default is true. + */ + enabled = true; + /** * Class: mxTooltipHandler * @@ -36,56 +80,6 @@ class mxTooltipHandler { } }; - /** - * Variable: zIndex - * - * Specifies the zIndex for the tooltip and its shadow. Default is 10005. - */ - zIndex = 10005; - - /** - * Variable: graph - * - * Reference to the enclosing . - */ - graph = null; - - /** - * Variable: delay - * - * Delay to show the tooltip in milliseconds. Default is 500. - */ - delay = null; - - /** - * Variable: ignoreTouchEvents - * - * Specifies if touch and pen events should be ignored. Default is true. - */ - ignoreTouchEvents = true; - - /** - * Variable: hideOnHover - * - * Specifies if the tooltip should be hidden if the mouse is moved over the - * current cell. Default is false. - */ - hideOnHover = false; - - /** - * Variable: destroyed - * - * True if this handler was destroyed using . - */ - destroyed = false; - - /** - * Variable: enabled - * - * Specifies if events are handled. Default is true. - */ - enabled = true; - /** * Function: isEnabled * diff --git a/src/js/handler/mxVertexHandler.js b/src/js/handler/mxVertexHandler.js index e321c043e..823bf3430 100644 --- a/src/js/handler/mxVertexHandler.js +++ b/src/js/handler/mxVertexHandler.js @@ -162,16 +162,13 @@ class mxVertexHandler { * state - of the cell to be resized. */ constructor(state) { - if (state != null) - { + if (state != null) { this.state = state; this.init(); // Handles escape keystrokes - this.escapeHandler = mxUtils.bind(this, (sender, evt)=> - { - if (this.livePreview && this.index != null) - { + this.escapeHandler = mxUtils.bind(this, (sender, evt) => { + if (this.livePreview && this.index != null) { // Redraws the live preview this.state.view.graph.cellRenderer.redraw(this.state, true); @@ -193,8 +190,7 @@ class mxVertexHandler { * * Initializes the shapes required for this vertex handler. */ - init = ()=> - { + init = () => { this.graph = this.state.view.graph; this.selectionBounds = this.getSelectionBounds(this.state); this.bounds = new mxRectangle(this.selectionBounds.x, this.selectionBounds.y, this.selectionBounds.width, this.selectionBounds.height); @@ -206,26 +202,21 @@ class mxVertexHandler { this.selectionBorder.init(this.graph.getView().getOverlayPane()); mxEvent.redirectMouseEvents(this.selectionBorder.node, this.graph, this.state); - if (this.graph.isCellMovable(this.state.cell)) - { + if (this.graph.isCellMovable(this.state.cell)) { this.selectionBorder.setCursor(mxConstants.CURSOR_MOVABLE_VERTEX); } // Adds the sizer handles - if (maxCells <= 0 || this.graph.getSelectionCount() < maxCells) - { + if (maxCells <= 0 || this.graph.getSelectionCount() < maxCells) { var resizable = this.graph.isCellResizable(this.state.cell); this.sizers = []; if (resizable || (this.graph.isLabelMovable(this.state.cell) && - this.state.width >= 2 && this.state.height >= 2)) - { + this.state.width >= 2 && this.state.height >= 2)) { var i = 0; - if (resizable) - { - if (!this.singleSizer) - { + if (resizable) { + if (!this.singleSizer) { this.sizers.push(this.createSizer('nw-resize', i++)); this.sizers.push(this.createSizer('n-resize', i++)); this.sizers.push(this.createSizer('ne-resize', i++)); @@ -241,36 +232,31 @@ class mxVertexHandler { var geo = this.graph.model.getGeometry(this.state.cell); if (geo != null && !geo.relative && !this.graph.isSwimlane(this.state.cell) && - this.graph.isLabelMovable(this.state.cell)) - { + this.graph.isLabelMovable(this.state.cell)) { // Marks this as the label handle for getHandleForEvent this.labelShape = this.createSizer(mxConstants.CURSOR_LABEL_HANDLE, mxEvent.LABEL_HANDLE, - mxConstants.LABEL_HANDLE_SIZE, mxConstants.LABEL_HANDLE_FILLCOLOR); + mxConstants.LABEL_HANDLE_SIZE, mxConstants.LABEL_HANDLE_FILLCOLOR); this.sizers.push(this.labelShape); } - } - else if (this.graph.isCellMovable(this.state.cell) && !this.graph.isCellResizable(this.state.cell) && - this.state.width < 2 && this.state.height < 2) - { + } else if (this.graph.isCellMovable(this.state.cell) && !this.graph.isCellResizable(this.state.cell) && + this.state.width < 2 && this.state.height < 2) { this.labelShape = this.createSizer(mxConstants.CURSOR_MOVABLE_VERTEX, - mxEvent.LABEL_HANDLE, null, mxConstants.LABEL_HANDLE_FILLCOLOR); + mxEvent.LABEL_HANDLE, null, mxConstants.LABEL_HANDLE_FILLCOLOR); this.sizers.push(this.labelShape); } } // Adds the rotation handler - if (this.isRotationHandleVisible()) - { + if (this.isRotationHandleVisible()) { this.rotationShape = this.createSizer(this.rotationCursor, mxEvent.ROTATION_HANDLE, - mxConstants.HANDLE_SIZE + 3, mxConstants.HANDLE_FILLCOLOR); + mxConstants.HANDLE_SIZE + 3, mxConstants.HANDLE_FILLCOLOR); this.sizers.push(this.rotationShape); } this.customHandles = this.createCustomHandles(); this.redraw(); - if (this.constrainGroupByChildren) - { + if (this.constrainGroupByChildren) { this.updateMinBounds(); } }; @@ -280,10 +266,9 @@ class mxVertexHandler { * * Returns true if the rotation handle should be showing. */ - isRotationHandleVisible = ()=> - { + isRotationHandleVisible = () => { return this.graph.isEnabled() && this.rotationEnabled && this.graph.isCellRotatable(this.state.cell) && - (maxCells <= 0 || this.graph.getSelectionCount() < maxCells); + (maxCells <= 0 || this.graph.getSelectionCount() < maxCells); }; /** @@ -291,8 +276,7 @@ class mxVertexHandler { * * Returns true if the aspect ratio if the cell should be maintained. */ - isConstrainedEvent = (me)=> - { + isConstrainedEvent = (me) => { return mxEvent.isShiftDown(me.getEvent()) || this.state.style[mxConstants.STYLE_ASPECT] == 'fixed'; }; @@ -301,8 +285,7 @@ class mxVertexHandler { * * Returns true if the center of the vertex should be maintained during the resize. */ - isCenteredEvent = (state, me)=> - { + isCenteredEvent = (state, me) => { return false; }; @@ -311,8 +294,7 @@ class mxVertexHandler { * * Returns an array of custom handles. This implementation returns null. */ - createCustomHandles = ()=> - { + createCustomHandles = () => { return null; }; @@ -321,16 +303,13 @@ class mxVertexHandler { * * Initializes the shapes required for this vertex handler. */ - updateMinBounds = ()=> - { + updateMinBounds = () => { var children = this.graph.getChildCells(this.state.cell); - if (children.length > 0) - { + if (children.length > 0) { this.minBounds = this.graph.view.getBounds(children); - if (this.minBounds != null) - { + if (this.minBounds != null) { var s = this.state.view.scale; var t = this.state.view.translate; @@ -352,8 +331,7 @@ class mxVertexHandler { * Returns the mxRectangle that defines the bounds of the selection * border. */ - getSelectionBounds = (state)=> - { + getSelectionBounds = (state) => { return new mxRectangle(Math.round(state.x), Math.round(state.y), Math.round(state.width), Math.round(state.height)); }; @@ -362,8 +340,7 @@ class mxVertexHandler { * * Creates the shape used to draw the selection border. */ - createParentHighlightShape = (bounds)=> - { + createParentHighlightShape = (bounds) => { return this.createSelectionShape(bounds); }; @@ -372,11 +349,10 @@ class mxVertexHandler { * * Creates the shape used to draw the selection border. */ - createSelectionShape = (bounds)=> - { + createSelectionShape = (bounds) => { var shape = new mxRectangleShape( - mxRectangle.fromRectangle(bounds), - null, this.getSelectionColor()); + mxRectangle.fromRectangle(bounds), + null, this.getSelectionColor()); shape.strokewidth = this.getSelectionStrokeWidth(); shape.isDashed = this.isSelectionDashed(); @@ -388,8 +364,7 @@ class mxVertexHandler { * * Returns . */ - getSelectionColor = ()=> - { + getSelectionColor = () => { return mxConstants.VERTEX_SELECTION_COLOR; }; @@ -398,8 +373,7 @@ class mxVertexHandler { * * Returns . */ - getSelectionStrokeWidth = ()=> - { + getSelectionStrokeWidth = () => { return mxConstants.VERTEX_SELECTION_STROKEWIDTH; }; @@ -408,8 +382,7 @@ class mxVertexHandler { * * Returns . */ - isSelectionDashed = ()=> - { + isSelectionDashed = () => { return mxConstants.VERTEX_SELECTION_DASHED; }; @@ -419,22 +392,18 @@ class mxVertexHandler { * Creates a sizer handle for the specified cursor and index and returns * the new that represents the handle. */ - createSizer = (cursor, index, size, fillColor)=> - { + createSizer = (cursor, index, size, fillColor) => { size = size || mxConstants.HANDLE_SIZE; var bounds = new mxRectangle(0, 0, size, size); var sizer = this.createSizerShape(bounds, index, fillColor); - if (sizer.isHtmlAllowed() && this.state.text != null && this.state.text.node.parentNode == this.graph.container) - { + if (sizer.isHtmlAllowed() && this.state.text != null && this.state.text.node.parentNode == this.graph.container) { sizer.bounds.height -= 1; sizer.bounds.width -= 1; sizer.dialect = mxConstants.DIALECT_STRICTHTML; sizer.init(this.graph.container); - } - else - { + } else { sizer.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG; sizer.init(this.graph.getView().getOverlayPane()); @@ -442,13 +411,11 @@ class mxVertexHandler { mxEvent.redirectMouseEvents(sizer.node, this.graph, this.state); - if (this.graph.isEnabled()) - { + if (this.graph.isEnabled()) { sizer.setCursor(cursor); } - if (!this.isSizerVisible(index)) - { + if (!this.isSizerVisible(index)) { sizer.visible = false; } @@ -461,8 +428,7 @@ class mxVertexHandler { * Returns true if the sizer for the given index is visible. * This returns true for all given indices. */ - isSizerVisible = (index)=> - { + isSizerVisible = (index) => { return true; }; @@ -473,10 +439,8 @@ class mxVertexHandler { * index. Only images and rectangles should be returned if support for HTML * labels with not foreign objects is required. */ - createSizerShape = (bounds, index, fillColor)=> - { - if (this.handleImage != null) - { + createSizerShape = (bounds, index, fillColor) => { + if (this.handleImage != null) { bounds = new mxRectangle(bounds.x, bounds.y, this.handleImage.width, this.handleImage.height); var shape = new mxImageShape(bounds, this.handleImage.src); @@ -484,13 +448,9 @@ class mxVertexHandler { shape.preserveImageAspect = false; return shape; - } - else if (index == mxEvent.ROTATION_HANDLE) - { + } else if (index == mxEvent.ROTATION_HANDLE) { return new mxEllipse(bounds, fillColor || mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR); - } - else - { + } else { return new mxRectangleShape(bounds, fillColor || mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR); } }; @@ -501,16 +461,13 @@ class mxVertexHandler { * Helper method to create an around the given centerpoint * with a width and height of 2*s or 6, if no s is given. */ - moveSizerTo = (shape, x, y)=> - { - if (shape != null) - { + moveSizerTo = (shape, x, y) => { + if (shape != null) { shape.bounds.x = Math.floor(x - shape.bounds.width / 2); shape.bounds.y = Math.floor(y - shape.bounds.height / 2); // Fixes visible inactive handles in VML - if (shape.node != null && shape.node.style.display != 'none') - { + if (shape.node != null && shape.node.style.display != 'none') { shape.redraw(); } } @@ -522,51 +479,40 @@ class mxVertexHandler { * Returns the index of the handle for the given event. This returns the index * of the sizer from where the event originated or . */ - getHandleForEvent = (me)=> - { + getHandleForEvent = (me) => { // Connection highlight may consume events before they reach sizer handle var tol = (!mxEvent.isMouseEvent(me.getEvent())) ? this.tolerance : 1; var hit = (this.allowHandleBoundsCheck && tol > 0) ? - new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol) : null; + new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol) : null; - var checkShape = mxUtils.bind(this, (shape)=> - { + var checkShape = mxUtils.bind(this, (shape) => { var st = (shape != null && shape.constructor != mxImageShape && - this.allowHandleBoundsCheck) ? shape.strokewidth + shape.svgStrokeTolerance : null; + this.allowHandleBoundsCheck) ? shape.strokewidth + shape.svgStrokeTolerance : null; var real = (st != null) ? new mxRectangle(me.getGraphX() - Math.floor(st / 2), - me.getGraphY() - Math.floor(st / 2), st, st) : hit; + me.getGraphY() - Math.floor(st / 2), st, st) : hit; return shape != null && (me.isSource(shape) || (real != null && mxUtils.intersects(shape.bounds, real) && - shape.node.style.display != 'none' && shape.node.style.visibility != 'hidden')); + shape.node.style.display != 'none' && shape.node.style.visibility != 'hidden')); }); - if (checkShape(this.rotationShape)) - { + if (checkShape(this.rotationShape)) { return mxEvent.ROTATION_HANDLE; - } - else if (checkShape(this.labelShape)) - { + } else if (checkShape(this.labelShape)) { return mxEvent.LABEL_HANDLE; } - if (this.sizers != null) - { - for (var i = 0; i < this.sizers.length; i++) - { - if (checkShape(this.sizers[i])) - { + if (this.sizers != null) { + for (var i = 0; i < this.sizers.length; i++) { + if (checkShape(this.sizers[i])) { return i; } } } - if (this.customHandles != null && this.isCustomHandleEvent(me)) - { + if (this.customHandles != null && this.isCustomHandleEvent(me)) { // Inverse loop order to match display order - for (var i = this.customHandles.length - 1; i >= 0; i--) - { - if (checkShape(this.customHandles[i].shape)) - { + for (var i = this.customHandles.length - 1; i >= 0; i--) { + if (checkShape(this.customHandles[i].shape)) { // LATER: Return reference to active shape return mxEvent.CUSTOM_HANDLE - i; } @@ -582,8 +528,7 @@ class mxVertexHandler { * Returns true if the given event allows custom handles to be changed. This * implementation returns true. */ - isCustomHandleEvent = (me)=> - { + isCustomHandleEvent = (me) => { return true; }; @@ -594,14 +539,11 @@ class mxVertexHandler { * event all subsequent events of the gesture are redirected to this * handler. */ - mouseDown = (sender, me)=> - { - if (!me.isConsumed() && this.graph.isEnabled()) - { + mouseDown = (sender, me) => { + if (!me.isConsumed() && this.graph.isEnabled()) { var handle = this.getHandleForEvent(me); - if (handle != null) - { + if (handle != null) { this.start(me.getGraphX(), me.getGraphY(), handle); me.consume(); } @@ -614,8 +556,7 @@ class mxVertexHandler { * Called if is enabled to check if a border should be painted. * This implementation returns true if the shape is transparent. */ - isLivePreviewBorder = ()=> - { + isLivePreviewBorder = () => { return this.state.shape != null && this.state.shape.fill == null && this.state.shape.stroke == null; }; @@ -624,10 +565,8 @@ class mxVertexHandler { * * Starts the handling of the mouse gesture. */ - start = (x, y, index)=> - { - if (this.selectionBorder != null) - { + start = (x, y, index) => { + if (this.selectionBorder != null) { this.livePreviewActive = this.livePreview && this.graph.model.getChildCount(this.state.cell) == 0; this.inTolerance = true; this.childOffsetX = 0; @@ -636,18 +575,14 @@ class mxVertexHandler { this.startX = x; this.startY = y; - if (this.index <= mxEvent.CUSTOM_HANDLE && this.isGhostPreview()) - { + if (this.index <= mxEvent.CUSTOM_HANDLE && this.isGhostPreview()) { this.ghostPreview = this.createGhostPreview(); - } - else - { + } else { // Saves reference to parent state var model = this.state.view.graph.model; var parent = model.getParent(this.state.cell); - if (this.state.view.currentRoot != parent && (model.isVertex(parent) || model.isEdge(parent))) - { + if (this.state.view.currentRoot != parent && (model.isVertex(parent) || model.isEdge(parent))) { this.parentState = this.state.view.graph.view.getState(parent); } @@ -655,26 +590,21 @@ class mxVertexHandler { this.selectionBorder.node.style.display = (index == mxEvent.ROTATION_HANDLE) ? 'inline' : 'none'; // Creates the border that represents the new bounds - if (!this.livePreviewActive || this.isLivePreviewBorder()) - { + if (!this.livePreviewActive || this.isLivePreviewBorder()) { this.preview = this.createSelectionShape(this.bounds); if (!(mxClient.IS_SVG && Number(this.state.style[mxConstants.STYLE_ROTATION] || '0') != 0) && - this.state.text != null && this.state.text.node.parentNode == this.graph.container) - { + this.state.text != null && this.state.text.node.parentNode == this.graph.container) { this.preview.dialect = mxConstants.DIALECT_STRICTHTML; this.preview.init(this.graph.container); - } - else - { + } else { this.preview.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG; this.preview.init(this.graph.view.getOverlayPane()); } } - if (index == mxEvent.ROTATION_HANDLE) - { + if (index == mxEvent.ROTATION_HANDLE) { // With the rotation handle in a corner, need the angle and distance var pos = this.getRotationHandlePosition(); @@ -686,24 +616,16 @@ class mxVertexHandler { } // Prepares the handles for live preview - if (this.livePreviewActive) - { + if (this.livePreviewActive) { this.hideSizers(); - if (index == mxEvent.ROTATION_HANDLE) - { + if (index == mxEvent.ROTATION_HANDLE) { this.rotationShape.node.style.display = ''; - } - else if (index == mxEvent.LABEL_HANDLE) - { + } else if (index == mxEvent.LABEL_HANDLE) { this.labelShape.node.style.display = ''; - } - else if (this.sizers != null && this.sizers[index] != null) - { + } else if (this.sizers != null && this.sizers[index] != null) { this.sizers[index].node.style.display = ''; - } - else if (index <= mxEvent.CUSTOM_HANDLE && this.customHandles != null) - { + } else if (index <= mxEvent.CUSTOM_HANDLE && this.customHandles != null) { this.customHandles[mxEvent.CUSTOM_HANDLE - index].setVisible(true); } @@ -711,12 +633,10 @@ class mxVertexHandler { var edges = this.graph.getEdges(this.state.cell); this.edgeHandlers = []; - for (var i = 0; i < edges.length; i++) - { + for (var i = 0; i < edges.length; i++) { var handler = this.graph.selectionCellsHandler.getHandler(edges[i]); - if (handler != null) - { + if (handler != null) { this.edgeHandlers.push(handler); } } @@ -730,8 +650,7 @@ class mxVertexHandler { * * Starts the handling of the mouse gesture. */ - createGhostPreview = ()=> - { + createGhostPreview = () => { var shape = this.graph.cellRenderer.createShape(this.state); shape.init(this.graph.view.getOverlayPane()); shape.scale = this.state.view.scale; @@ -746,22 +665,17 @@ class mxVertexHandler { * * Shortcut to . */ - setHandlesVisible = (visible)=> - { + setHandlesVisible = (visible) => { this.handlesVisible = visible; - if (this.sizers != null) - { - for (var i = 0; i < this.sizers.length; i++) - { + if (this.sizers != null) { + for (var i = 0; i < this.sizers.length; i++) { this.sizers[i].node.style.display = (visible) ? '' : 'none'; } } - if (this.customHandles != null) - { - for (var i = 0; i < this.customHandles.length; i++) - { + if (this.customHandles != null) { + for (var i = 0; i < this.customHandles.length; i++) { this.customHandles[i].setVisible(visible); } } @@ -774,8 +688,7 @@ class mxVertexHandler { * * Starts the handling of the mouse gesture. */ - hideSizers = ()=> - { + hideSizers = () => { this.setHandlesVisible(false); }; @@ -786,14 +699,11 @@ class mxVertexHandler { * . If the event is a mouse event then the tolerance is * ignored. */ - checkTolerance = (me)=> - { - if (this.inTolerance && this.startX != null && this.startY != null) - { + checkTolerance = (me) => { + if (this.inTolerance && this.startX != null && this.startY != null) { if (mxEvent.isMouseEvent(me.getEvent()) || - Math.abs(me.getGraphX() - this.startX) > this.graph.tolerance || - Math.abs(me.getGraphY() - this.startY) > this.graph.tolerance) - { + Math.abs(me.getGraphX() - this.startX) > this.graph.tolerance || + Math.abs(me.getGraphY() - this.startY) > this.graph.tolerance) { this.inTolerance = false; } } @@ -804,22 +714,23 @@ class mxVertexHandler { * * Hook for subclassers do show details while the handler is active. */ - updateHint = (me)=> { }; + updateHint = (me) => { + }; /** * Function: removeHint * * Hooks for subclassers to hide details when the handler gets inactive. */ - removeHint = ()=> { }; + removeHint = () => { + }; /** * Function: roundAngle * * Hook for rounding the angle. This uses Math.round. */ - roundAngle = (angle)=> - { + roundAngle = (angle) => { return Math.round(angle * 10) / 10; }; @@ -828,8 +739,7 @@ class mxVertexHandler { * * Hook for rounding the unscaled width or height. This uses Math.round. */ - roundLength = (length)=> - { + roundLength = (length) => { return Math.round(length * 100) / 100; }; @@ -838,59 +748,42 @@ class mxVertexHandler { * * Handles the event by updating the preview. */ - mouseMove = (sender, me)=> - { - if (!me.isConsumed() && this.index != null) - { + mouseMove = (sender, me) => { + if (!me.isConsumed() && this.index != null) { // Checks tolerance for ignoring single clicks this.checkTolerance(me); - if (!this.inTolerance) - { - if (this.index <= mxEvent.CUSTOM_HANDLE) - { - if (this.customHandles != null) - { + if (!this.inTolerance) { + if (this.index <= mxEvent.CUSTOM_HANDLE) { + if (this.customHandles != null) { this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].processEvent(me); this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].active = true; - if (this.ghostPreview != null) - { + if (this.ghostPreview != null) { this.ghostPreview.apply(this.state); this.ghostPreview.strokewidth = this.getSelectionStrokeWidth() / - this.ghostPreview.scale / this.ghostPreview.scale; + this.ghostPreview.scale / this.ghostPreview.scale; this.ghostPreview.isDashed = this.isSelectionDashed(); this.ghostPreview.stroke = this.getSelectionColor(); this.ghostPreview.redraw(); - if (this.selectionBounds != null) - { + if (this.selectionBounds != null) { this.selectionBorder.node.style.display = 'none'; } - } - else - { - if (this.movePreviewToFront) - { + } else { + if (this.movePreviewToFront) { this.moveToFront(); } this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].positionChanged(); } } - } - else if (this.index == mxEvent.LABEL_HANDLE) - { + } else if (this.index == mxEvent.LABEL_HANDLE) { this.moveLabel(me); - } - else - { - if (this.index == mxEvent.ROTATION_HANDLE) - { + } else { + if (this.index == mxEvent.ROTATION_HANDLE) { this.rotateVertex(me); - } - else - { + } else { this.resizeVertex(me); } @@ -901,8 +794,7 @@ class mxVertexHandler { me.consume(); } // Workaround for disabling the connect highlight when over handle - else if (!this.graph.isMouseDown && this.getHandleForEvent(me) != null) - { + else if (!this.graph.isMouseDown && this.getHandleForEvent(me) != null) { me.consume(false); } }; @@ -912,8 +804,7 @@ class mxVertexHandler { * * Returns true if a ghost preview should be used for custom handles. */ - isGhostPreview = ()=> - { + isGhostPreview = () => { return this.state.view.graph.model.getChildCount(this.state.cell) > 0; }; @@ -922,14 +813,12 @@ class mxVertexHandler { * * Moves the label. */ - moveLabel = (me)=> - { + moveLabel = (me) => { var point = new mxPoint(me.getGraphX(), me.getGraphY()); var tr = this.graph.view.translate; var scale = this.graph.view.scale; - if (this.graph.isGridEnabledEvent(me.getEvent())) - { + if (this.graph.isGridEnabledEvent(me.getEvent())) { point.x = (this.graph.snap(point.x / scale - tr.x) + tr.x) * scale; point.y = (this.graph.snap(point.y / scale - tr.y) + tr.y) * scale; } @@ -943,53 +832,42 @@ class mxVertexHandler { * * Rotates the vertex. */ - rotateVertex = (me)=> - { + rotateVertex = (me) => { var point = new mxPoint(me.getGraphX(), me.getGraphY()); var dx = this.state.x + this.state.width / 2 - point.x; var dy = this.state.y + this.state.height / 2 - point.y; this.currentAlpha = (dx != 0) ? Math.atan(dy / dx) * 180 / Math.PI + 90 : ((dy < 0) ? 180 : 0); - if (dx > 0) - { + if (dx > 0) { this.currentAlpha -= 180; } this.currentAlpha -= this.startAngle; // Rotation raster - if (this.rotationRaster && this.graph.isGridEnabledEvent(me.getEvent())) - { + if (this.rotationRaster && this.graph.isGridEnabledEvent(me.getEvent())) { var raster; var dx = point.x - this.state.getCenterX(); var dy = point.y - this.state.getCenterY(); var dist = Math.sqrt(dx * dx + dy * dy); - if (dist - this.startDist < 2) - { + if (dist - this.startDist < 2) { raster = 15; - } - else if (dist - this.startDist < 25) - { + } else if (dist - this.startDist < 25) { raster = 5; - } - else - { + } else { raster = 1; } this.currentAlpha = Math.round(this.currentAlpha / raster) * raster; - } - else - { + } else { this.currentAlpha = this.roundAngle(this.currentAlpha); } this.selectionBorder.rotation = this.currentAlpha; this.selectionBorder.redraw(); - if (this.livePreviewActive) - { + if (this.livePreviewActive) { this.redrawHandles(); } }; @@ -999,8 +877,7 @@ class mxVertexHandler { * * Risizes the vertex. */ - resizeVertex = (me)=> - { + resizeVertex = (me) => { var ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0'); var point = new mxPoint(me.getGraphX(), me.getGraphY()); @@ -1021,34 +898,29 @@ class mxVertexHandler { var geo = this.graph.getCellGeometry(this.state.cell); this.unscaledBounds = this.union(geo, dx / scale, dy / scale, this.index, - this.graph.isGridEnabledEvent(me.getEvent()), 1, - new mxPoint(0, 0), this.isConstrainedEvent(me), - this.isCenteredEvent(this.state, me)); + this.graph.isGridEnabledEvent(me.getEvent()), 1, + new mxPoint(0, 0), this.isConstrainedEvent(me), + this.isCenteredEvent(this.state, me)); // Keeps vertex within maximum graph or parent bounds - if (!geo.relative) - { + if (!geo.relative) { var max = this.graph.getMaximumGraphBounds(); // Handles child cells - if (max != null && this.parentState != null) - { + if (max != null && this.parentState != null) { max = mxRectangle.fromRectangle(max); max.x -= (this.parentState.x - tr.x * scale) / scale; max.y -= (this.parentState.y - tr.y * scale) / scale; } - if (this.graph.isConstrainChild(this.state.cell)) - { + if (this.graph.isConstrainChild(this.state.cell)) { var tmp = this.graph.getCellContainmentArea(this.state.cell); - if (tmp != null) - { + if (tmp != null) { var overlap = this.graph.getOverlap(this.state.cell); - if (overlap > 0) - { + if (overlap > 0) { tmp = mxRectangle.fromRectangle(tmp); tmp.x -= tmp.width * overlap; @@ -1057,53 +929,44 @@ class mxVertexHandler { tmp.height += 2 * tmp.height * overlap; } - if (max == null) - { + if (max == null) { max = tmp; - } - else - { + } else { max = mxRectangle.fromRectangle(max); max.intersect(tmp); } } } - if (max != null) - { - if (this.unscaledBounds.x < max.x) - { + if (max != null) { + if (this.unscaledBounds.x < max.x) { this.unscaledBounds.width -= max.x - this.unscaledBounds.x; this.unscaledBounds.x = max.x; } - if (this.unscaledBounds.y < max.y) - { + if (this.unscaledBounds.y < max.y) { this.unscaledBounds.height -= max.y - this.unscaledBounds.y; this.unscaledBounds.y = max.y; } - if (this.unscaledBounds.x + this.unscaledBounds.width > max.x + max.width) - { + if (this.unscaledBounds.x + this.unscaledBounds.width > max.x + max.width) { this.unscaledBounds.width -= this.unscaledBounds.x + - this.unscaledBounds.width - max.x - max.width; + this.unscaledBounds.width - max.x - max.width; } - if (this.unscaledBounds.y + this.unscaledBounds.height > max.y + max.height) - { + if (this.unscaledBounds.y + this.unscaledBounds.height > max.y + max.height) { this.unscaledBounds.height -= this.unscaledBounds.y + - this.unscaledBounds.height - max.y - max.height; + this.unscaledBounds.height - max.y - max.height; } } } var old = this.bounds; this.bounds = new mxRectangle(((this.parentState != null) ? this.parentState.x : tr.x * scale) + - (this.unscaledBounds.x) * scale, ((this.parentState != null) ? this.parentState.y : tr.y * scale) + - (this.unscaledBounds.y) * scale, this.unscaledBounds.width * scale, this.unscaledBounds.height * scale); + (this.unscaledBounds.x) * scale, ((this.parentState != null) ? this.parentState.y : tr.y * scale) + + (this.unscaledBounds.y) * scale, this.unscaledBounds.width * scale, this.unscaledBounds.height * scale); - if (geo.relative && this.parentState != null) - { + if (geo.relative && this.parentState != null) { this.bounds.x += this.state.x - this.parentState.x; this.bounds.y += this.state.y - this.parentState.y; } @@ -1138,30 +1001,22 @@ class mxVertexHandler { this.unscaledBounds.height = this.roundLength(this.unscaledBounds.height); // Shifts the children according to parent offset - if (!this.graph.isCellCollapsed(this.state.cell) && (dx3 != 0 || dy3 != 0)) - { + if (!this.graph.isCellCollapsed(this.state.cell) && (dx3 != 0 || dy3 != 0)) { this.childOffsetX = this.state.x - this.bounds.x + dx5; this.childOffsetY = this.state.y - this.bounds.y + dy5; - } - else - { + } else { this.childOffsetX = 0; this.childOffsetY = 0; } - if (!old.equals(this.bounds)) - { - if (this.livePreviewActive) - { + if (!old.equals(this.bounds)) { + if (this.livePreviewActive) { this.updateLivePreview(me); } - if (this.preview != null) - { + if (this.preview != null) { this.drawPreview(); - } - else - { + } else { this.updateParentHighlight(); } } @@ -1172,8 +1027,7 @@ class mxVertexHandler { * * Repaints the live preview. */ - updateLivePreview = (me)=> - { + updateLivePreview = (me) => { // TODO: Apply child offset to children in live preview var scale = this.graph.view.scale; var tr = this.graph.view.translate; @@ -1197,12 +1051,10 @@ class mxVertexHandler { this.state.absoluteOffset.y = 0; var geo = this.graph.getCellGeometry(this.state.cell); - if (geo != null) - { + if (geo != null) { var offset = geo.offset || this.EMPTY_POINT; - if (offset != null && !geo.relative) - { + if (offset != null && !geo.relative) { this.state.absoluteOffset.x = this.state.view.scale * offset.x; this.state.absoluteOffset.y = this.state.view.scale * offset.y; } @@ -1220,14 +1072,12 @@ class mxVertexHandler { this.redrawHandles(); // Moves live preview to front - if (this.movePreviewToFront) - { + if (this.movePreviewToFront) { this.moveToFront(); } // Hides folding icon - if (this.state.control != null && this.state.control.node != null) - { + if (this.state.control != null && this.state.control.node != null) { this.state.control.node.style.visibility = 'hidden'; } @@ -1240,21 +1090,17 @@ class mxVertexHandler { * * Handles the event by applying the changes to the geometry. */ - moveToFront = ()=> - { + moveToFront = () => { if ((this.state.text != null && this.state.text.node != null && - this.state.text.node.nextSibling != null) || - (this.state.shape != null && this.state.shape.node != null && - this.state.shape.node.nextSibling != null && (this.state.text == null || - this.state.shape.node.nextSibling != this.state.text.node))) - { - if (this.state.shape != null && this.state.shape.node != null) - { + this.state.text.node.nextSibling != null) || + (this.state.shape != null && this.state.shape.node != null && + this.state.shape.node.nextSibling != null && (this.state.text == null || + this.state.shape.node.nextSibling != this.state.text.node))) { + if (this.state.shape != null && this.state.shape.node != null) { this.state.shape.node.parentNode.appendChild(this.state.shape.node); } - if (this.state.text != null && this.state.text.node != null) - { + if (this.state.text != null && this.state.text.node != null) { this.state.text.node.parentNode.appendChild(this.state.text.node); } } @@ -1265,28 +1111,22 @@ class mxVertexHandler { * * Handles the event by applying the changes to the geometry. */ - mouseUp = (sender, me)=> - { - if (this.index != null && this.state != null) - { + mouseUp = (sender, me) => { + if (this.index != null && this.state != null) { var point = new mxPoint(me.getGraphX(), me.getGraphY()); var index = this.index; this.index = null; - if (this.ghostPreview == null) - { + if (this.ghostPreview == null) { // Required to restore order in case of no change this.state.view.invalidate(this.state.cell, false, false); this.state.view.validate(); } this.graph.getModel().beginUpdate(); - try - { - if (index <= mxEvent.CUSTOM_HANDLE) - { - if (this.customHandles != null) - { + try { + if (index <= mxEvent.CUSTOM_HANDLE) { + if (this.customHandles != null) { // Creates style before changing cell state var style = this.state.view.graph.getCellStyle(this.state.cell); @@ -1296,31 +1136,22 @@ class mxVertexHandler { // Sets style and apply on shape to force repaint and // check if execute has removed custom handles if (this.customHandles != null && - this.customHandles[mxEvent.CUSTOM_HANDLE - index] != null) - { + this.customHandles[mxEvent.CUSTOM_HANDLE - index] != null) { this.state.style = style; this.customHandles[mxEvent.CUSTOM_HANDLE - index].positionChanged(); } } - } - else if (index == mxEvent.ROTATION_HANDLE) - { - if (this.currentAlpha != null) - { + } else if (index == mxEvent.ROTATION_HANDLE) { + if (this.currentAlpha != null) { var delta = this.currentAlpha - (this.state.style[mxConstants.STYLE_ROTATION] || 0); - if (delta != 0) - { + if (delta != 0) { this.rotateCell(this.state.cell, delta); } - } - else - { + } else { this.rotateClick(); } - } - else - { + } else { var gridEnabled = this.graph.isGridEnabledEvent(me.getEvent()); var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0'); var cos = Math.cos(-alpha); @@ -1339,11 +1170,9 @@ class mxVertexHandler { var s = this.graph.view.scale; var recurse = this.isRecursiveResize(this.state, me); this.resizeCell(this.state.cell, this.roundLength(dx / s), this.roundLength(dy / s), - index, gridEnabled, this.isConstrainedEvent(me), recurse); + index, gridEnabled, this.isConstrainedEvent(me), recurse); } - } - finally - { + } finally { this.graph.getModel().endUpdate(); } @@ -1364,8 +1193,7 @@ class mxVertexHandler { * the value of this state. * me - the mouse event. */ - isRecursiveResize = (state, me)=> - { + isRecursiveResize = (state, me) => { return this.graph.isRecursiveResize(this.state); }; @@ -1376,7 +1204,8 @@ class mxVertexHandler { * This code is executed as part of the model transaction. This implementation * is empty. */ - rotateClick = ()=> { }; + rotateClick = () => { + }; /** * Function: rotateCell @@ -1388,16 +1217,12 @@ class mxVertexHandler { * cell - to be rotated. * angle - Angle in degrees. */ - rotateCell = (cell, angle, parent)=> - { - if (angle != 0) - { + rotateCell = (cell, angle, parent) => { + if (angle != 0) { var model = this.graph.getModel(); - if (model.isVertex(cell) || model.isEdge(cell)) - { - if (!model.isEdge(cell)) - { + if (model.isVertex(cell) || model.isEdge(cell)) { + if (!model.isEdge(cell)) { var style = this.graph.getCurrentCellStyle(cell); var total = (style[mxConstants.STYLE_ROTATION] || 0) + angle; this.graph.setCellStyles(mxConstants.STYLE_ROTATION, total, [cell]); @@ -1405,24 +1230,20 @@ class mxVertexHandler { var geo = this.graph.getCellGeometry(cell); - if (geo != null) - { + if (geo != null) { var pgeo = this.graph.getCellGeometry(parent); - if (pgeo != null && !model.isEdge(parent)) - { + if (pgeo != null && !model.isEdge(parent)) { geo = geo.clone(); geo.rotate(angle, new mxPoint(pgeo.width / 2, pgeo.height / 2)); model.setGeometry(cell, geo); } - if ((model.isVertex(cell) && !geo.relative) || model.isEdge(cell)) - { + if ((model.isVertex(cell) && !geo.relative) || model.isEdge(cell)) { // Recursive rotation var childCount = model.getChildCount(cell); - for (var i = 0; i < childCount; i++) - { + for (var i = 0; i < childCount; i++) { this.rotateCell(model.getChildAt(cell, i), angle, cell); } } @@ -1436,11 +1257,9 @@ class mxVertexHandler { * * Resets the state of this handler. */ - reset = ()=> - { + reset = () => { if (this.sizers != null && this.index != null && this.sizers[this.index] != null && - this.sizers[this.index].node.style.display == 'none') - { + this.sizers[this.index].node.style.display == 'none') { this.sizers[this.index].node.style.display = ''; } @@ -1449,58 +1268,46 @@ class mxVertexHandler { this.index = null; // TODO: Reset and redraw cell states for live preview - if (this.preview != null) - { + if (this.preview != null) { this.preview.destroy(); this.preview = null; } - if (this.ghostPreview != null) - { + if (this.ghostPreview != null) { this.ghostPreview.destroy(); this.ghostPreview = null; } - if (this.livePreviewActive && this.sizers != null) - { - for (var i = 0; i < this.sizers.length; i++) - { - if (this.sizers[i] != null) - { + if (this.livePreviewActive && this.sizers != null) { + for (var i = 0; i < this.sizers.length; i++) { + if (this.sizers[i] != null) { this.sizers[i].node.style.display = ''; } } // Shows folding icon - if (this.state.control != null && this.state.control.node != null) - { + if (this.state.control != null && this.state.control.node != null) { this.state.control.node.style.visibility = ''; } } - if (this.customHandles != null) - { - for (var i = 0; i < this.customHandles.length; i++) - { - if (this.customHandles[i].active) - { + if (this.customHandles != null) { + for (var i = 0; i < this.customHandles.length; i++) { + if (this.customHandles[i].active) { this.customHandles[i].active = false; this.customHandles[i].reset(); - } - else - { + } else { this.customHandles[i].setVisible(true); } } } // Checks if handler has been destroyed - if (this.selectionBorder != null) - { + if (this.selectionBorder != null) { this.selectionBorder.node.style.display = 'inline'; this.selectionBounds = this.getSelectionBounds(this.state); this.bounds = new mxRectangle(this.selectionBounds.x, this.selectionBounds.y, - this.selectionBounds.width, this.selectionBounds.height); + this.selectionBounds.width, this.selectionBounds.height); this.drawPreview(); } @@ -1518,43 +1325,34 @@ class mxVertexHandler { * Uses the given vector to change the bounds of the given cell * in the graph using . */ - resizeCell = (cell, dx, dy, index, gridEnabled, constrained, recurse)=> - { + resizeCell = (cell, dx, dy, index, gridEnabled, constrained, recurse) => { var geo = this.graph.model.getGeometry(cell); - if (geo != null) - { - if (index == mxEvent.LABEL_HANDLE) - { + if (geo != null) { + if (index == mxEvent.LABEL_HANDLE) { var alpha = -mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0'); var cos = Math.cos(alpha); var sin = Math.sin(alpha); var scale = this.graph.view.scale; var pt = mxUtils.getRotatedPoint(new mxPoint( - Math.round((this.labelShape.bounds.getCenterX() - this.startX) / scale), - Math.round((this.labelShape.bounds.getCenterY() - this.startY) / scale)), - cos, sin); + Math.round((this.labelShape.bounds.getCenterX() - this.startX) / scale), + Math.round((this.labelShape.bounds.getCenterY() - this.startY) / scale)), + cos, sin); geo = geo.clone(); - if (geo.offset == null) - { + if (geo.offset == null) { geo.offset = pt; - } - else - { + } else { geo.offset.x += pt.x; geo.offset.y += pt.y; } this.graph.model.setGeometry(cell, geo); - } - else if (this.unscaledBounds != null) - { + } else if (this.unscaledBounds != null) { var scale = this.graph.view.scale; - if (this.childOffsetX != 0 || this.childOffsetY != 0) - { + if (this.childOffsetX != 0 || this.childOffsetY != 0) { this.moveChildren(cell, Math.round(this.childOffsetX / scale), Math.round(this.childOffsetY / scale)); } @@ -1568,18 +1366,15 @@ class mxVertexHandler { * * Moves the children of the given cell by the given vector. */ - moveChildren = (cell, dx, dy)=> - { + moveChildren = (cell, dx, dy) => { var model = this.graph.getModel(); var childCount = model.getChildCount(cell); - for (var i = 0; i < childCount; i++) - { + for (var i = 0; i < childCount; i++) { var child = model.getChildAt(cell, i); var geo = this.graph.getCellGeometry(child); - if (geo != null) - { + if (geo != null) { geo = geo.clone(); geo.translate(dx, dy); model.setGeometry(child, geo); @@ -1638,17 +1433,14 @@ class mxVertexHandler { * }; * (end) */ - union = (bounds, dx, dy, index, gridEnabled, scale, tr, constrained, centered)=> - { + union = (bounds, dx, dy, index, gridEnabled, scale, tr, constrained, centered) => { gridEnabled = (gridEnabled != null) ? gridEnabled && this.graph.gridEnabled : this.graph.gridEnabled; - if (this.singleSizer) - { + if (this.singleSizer) { var x = bounds.x + bounds.width + dx; var y = bounds.y + bounds.height + dy; - if (gridEnabled) - { + if (gridEnabled) { x = this.graph.snap(x / scale) * scale; y = this.graph.snap(y / scale) * scale; } @@ -1657,9 +1449,7 @@ class mxVertexHandler { rect.add(new mxRectangle(x, y, 0, 0)); return rect; - } - else - { + } else { var w0 = bounds.width; var h0 = bounds.height; var left = bounds.x - tr.x * scale; @@ -1670,56 +1460,38 @@ class mxVertexHandler { var cx = left + w0 / 2; var cy = top + h0 / 2; - if (index > 4 /* Bottom Row */) - { + if (index > 4 /* Bottom Row */) { bottom = bottom + dy; - if (gridEnabled) - { + if (gridEnabled) { bottom = this.graph.snap(bottom / scale) * scale; - } - else - { + } else { bottom = Math.round(bottom / scale) * scale; } - } - else if (index < 3 /* Top Row */) - { + } else if (index < 3 /* Top Row */) { top = top + dy; - if (gridEnabled) - { + if (gridEnabled) { top = this.graph.snap(top / scale) * scale; - } - else - { + } else { top = Math.round(top / scale) * scale; } } - if (index == 0 || index == 3 || index == 5 /* Left */) - { + if (index == 0 || index == 3 || index == 5 /* Left */) { left += dx; - if (gridEnabled) - { + if (gridEnabled) { left = this.graph.snap(left / scale) * scale; - } - else - { + } else { left = Math.round(left / scale) * scale; } - } - else if (index == 2 || index == 4 || index == 7 /* Right */) - { + } else if (index == 2 || index == 4 || index == 7 /* Right */) { right += dx; - if (gridEnabled) - { + if (gridEnabled) { right = this.graph.snap(right / scale) * scale; - } - else - { + } else { right = Math.round(right / scale) * scale; } } @@ -1727,33 +1499,26 @@ class mxVertexHandler { var width = right - left; var height = bottom - top; - if (constrained) - { + if (constrained) { var geo = this.graph.getCellGeometry(this.state.cell); - if (geo != null) - { + if (geo != null) { var aspect = geo.width / geo.height; - if (index== 1 || index== 2 || index == 7 || index == 6) - { + if (index == 1 || index == 2 || index == 7 || index == 6) { width = height * aspect; - } - else - { + } else { height = width / aspect; } - if (index == 0) - { + if (index == 0) { left = right - width; top = bottom - height; } } } - if (centered) - { + if (centered) { width += (width - w0); height += (height - h0); @@ -1767,27 +1532,24 @@ class mxVertexHandler { } // Flips over left side - if (width < 0) - { + if (width < 0) { left += width; width = Math.abs(width); } // Flips over top side - if (height < 0) - { + if (height < 0) { top += height; height = Math.abs(height); } var result = new mxRectangle(left + tr.x * scale, top + tr.y * scale, width, height); - if (this.minBounds != null) - { + if (this.minBounds != null) { result.width = Math.max(result.width, this.minBounds.x * scale + this.minBounds.width * scale + - Math.max(0, this.x0 * scale - result.x)); + Math.max(0, this.x0 * scale - result.x)); result.height = Math.max(result.height, this.minBounds.y * scale + this.minBounds.height * scale + - Math.max(0, this.y0 * scale - result.y)); + Math.max(0, this.y0 * scale - result.y)); } return result; @@ -1799,15 +1561,13 @@ class mxVertexHandler { * * Redraws the handles and the preview. */ - redraw = (ignoreHandles)=> - { + redraw = (ignoreHandles) => { this.selectionBounds = this.getSelectionBounds(this.state); this.bounds = new mxRectangle(this.selectionBounds.x, this.selectionBounds.y, - this.selectionBounds.width, this.selectionBounds.height); + this.selectionBounds.width, this.selectionBounds.height); this.drawPreview(); - if (!ignoreHandles) - { + if (!ignoreHandles) { this.redrawHandles(); } }; @@ -1815,16 +1575,14 @@ class mxVertexHandler { /** * Returns the padding to be used for drawing handles for the current . */ - getHandlePadding = ()=> - { + getHandlePadding = () => { // KNOWN: Tolerance depends on event type (eg. 0 for mouse events) var result = new mxPoint(0, 0); var tol = this.tolerance; if (this.sizers != null && this.sizers.length > 0 && this.sizers[0] != null && - (this.bounds.width < 2 * this.sizers[0].bounds.width + 2 * tol || - this.bounds.height < 2 * this.sizers[0].bounds.height + 2 * tol)) - { + (this.bounds.width < 2 * this.sizers[0].bounds.width + 2 * tol || + this.bounds.height < 2 * this.sizers[0].bounds.height + 2 * tol)) { tol /= 2; result.x = this.sizers[0].bounds.width + tol; @@ -1839,8 +1597,7 @@ class mxVertexHandler { * * Returns the bounds used to paint the resize handles. */ - getSizerBounds = ()=> - { + getSizerBounds = () => { return this.bounds; }; @@ -1862,39 +1619,33 @@ class mxVertexHandler { * }; * (end) */ - redrawHandles = ()=> - { + redrawHandles = () => { var s = this.getSizerBounds(); var tol = this.tolerance; this.horizontalOffset = 0; this.verticalOffset = 0; - if (this.customHandles != null) - { - for (var i = 0; i < this.customHandles.length; i++) - { + if (this.customHandles != null) { + for (var i = 0; i < this.customHandles.length; i++) { var temp = this.customHandles[i].shape.node.style.display; this.customHandles[i].redraw(); this.customHandles[i].shape.node.style.display = temp; // Hides custom handles during text editing this.customHandles[i].shape.node.style.visibility = - (this.handlesVisible && this.isCustomHandleVisible( - this.customHandles[i])) ? '' : 'hidden'; + (this.handlesVisible && this.isCustomHandleVisible( + this.customHandles[i])) ? '' : 'hidden'; } } - if (this.sizers != null && this.sizers.length > 0 && this.sizers[0] != null) - { - if (this.index == null && this.manageSizers && this.sizers.length >= 8) - { + if (this.sizers != null && this.sizers.length > 0 && this.sizers[0] != null) { + if (this.index == null && this.manageSizers && this.sizers.length >= 8) { // KNOWN: Tolerance depends on event type (eg. 0 for mouse events) var padding = this.getHandlePadding(); this.horizontalOffset = padding.x; this.verticalOffset = padding.y; - if (this.horizontalOffset != 0 || this.verticalOffset != 0) - { + if (this.horizontalOffset != 0 || this.verticalOffset != 0) { s = new mxRectangle(s.x, s.y, s.width, s.height); s.x -= this.horizontalOffset / 2; @@ -1903,18 +1654,14 @@ class mxVertexHandler { s.height += this.verticalOffset; } - if (this.sizers.length >= 8) - { + if (this.sizers.length >= 8) { if ((s.width < 2 * this.sizers[0].bounds.width + 2 * tol) || - (s.height < 2 * this.sizers[0].bounds.height + 2 * tol)) - { + (s.height < 2 * this.sizers[0].bounds.height + 2 * tol)) { this.sizers[0].node.style.display = 'none'; this.sizers[2].node.style.display = 'none'; this.sizers[5].node.style.display = 'none'; this.sizers[7].node.style.display = 'none'; - } - else if (this.handlesVisible) - { + } else if (this.handlesVisible) { this.sizers[0].node.style.display = ''; this.sizers[2].node.style.display = ''; this.sizers[5].node.style.display = ''; @@ -1926,17 +1673,13 @@ class mxVertexHandler { var r = s.x + s.width; var b = s.y + s.height; - if (this.singleSizer) - { + if (this.singleSizer) { this.moveSizerTo(this.sizers[0], r, b); - } - else - { + } else { var cx = s.x + s.width / 2; var cy = s.y + s.height / 2; - if (this.sizers.length >= 8) - { + if (this.sizers.length >= 8) { var crs = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']; var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0'); @@ -2004,20 +1747,15 @@ class mxVertexHandler { pt.y = cy + this.state.absoluteOffset.y; pt = mxUtils.getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[8], pt.x, pt.y); - } - else if (this.state.width >= 2 && this.state.height >= 2) - { + } else if (this.state.width >= 2 && this.state.height >= 2) { this.moveSizerTo(this.sizers[0], cx + this.state.absoluteOffset.x, cy + this.state.absoluteOffset.y); - } - else - { + } else { this.moveSizerTo(this.sizers[0], this.state.x, this.state.y); } } } - if (this.rotationShape != null) - { + if (this.rotationShape != null) { var alpha = mxUtils.toRadians((this.currentAlpha != null) ? this.currentAlpha : this.state.style[mxConstants.STYLE_ROTATION] || '0'); var cos = Math.cos(alpha); var sin = Math.sin(alpha); @@ -2025,25 +1763,21 @@ class mxVertexHandler { var ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); var pt = mxUtils.getRotatedPoint(this.getRotationHandlePosition(), cos, sin, ct); - if (this.rotationShape.node != null) - { + if (this.rotationShape.node != null) { this.moveSizerTo(this.rotationShape, pt.x, pt.y); // Hides rotation handle during text editing this.rotationShape.node.style.visibility = (this.state.view.graph.isEditing() || - !this.handlesVisible) ? 'hidden' : ''; + !this.handlesVisible) ? 'hidden' : ''; } } - if (this.selectionBorder != null) - { + if (this.selectionBorder != null) { this.selectionBorder.rotation = Number(this.state.style[mxConstants.STYLE_ROTATION] || '0'); } - if (this.edgeHandlers != null) - { - for (var i = 0; i < this.edgeHandlers.length; i++) - { + if (this.edgeHandlers != null) { + for (var i = 0; i < this.edgeHandlers.length; i++) { this.edgeHandlers[i].redraw(); } } @@ -2054,8 +1788,7 @@ class mxVertexHandler { * * Returns true if the given custom handle is visible. */ - isCustomHandleVisible = (handle)=> - { + isCustomHandleVisible = (handle) => { return !this.graph.isEditing() && this.state.view.graph.getSelectionCount() == 1; }; @@ -2064,8 +1797,7 @@ class mxVertexHandler { * * Returns an that defines the rotation handle position. */ - getRotationHandlePosition = ()=> - { + getRotationHandlePosition = () => { return new mxPoint(this.bounds.x + this.bounds.width / 2, this.bounds.y + this.rotationHandleVSpacing) }; @@ -2075,8 +1807,7 @@ class mxVertexHandler { * Returns true if the parent highlight should be visible. This implementation * always returns true. */ - isParentHighlightVisible = ()=> - { + isParentHighlightVisible = () => { return !this.graph.isCellSelected(this.graph.model.getParent(this.state.cell)); }; @@ -2085,43 +1816,32 @@ class mxVertexHandler { * * Updates the highlight of the parent if is true. */ - updateParentHighlight = ()=> - { - if (!this.isDestroyed()) - { + updateParentHighlight = () => { + if (!this.isDestroyed()) { var visible = this.isParentHighlightVisible(); var parent = this.graph.model.getParent(this.state.cell); var pstate = this.graph.view.getState(parent); - if (this.parentHighlight != null) - { - if (this.graph.model.isVertex(parent) && visible) - { + if (this.parentHighlight != null) { + if (this.graph.model.isVertex(parent) && visible) { var b = this.parentHighlight.bounds; if (pstate != null && (b.x != pstate.x || b.y != pstate.y || - b.width != pstate.width || b.height != pstate.height)) - { + b.width != pstate.width || b.height != pstate.height)) { this.parentHighlight.bounds = mxRectangle.fromRectangle(pstate); this.parentHighlight.redraw(); } - } - else - { - if (pstate != null && pstate.parentHighlight == this.parentHighlight) - { + } else { + if (pstate != null && pstate.parentHighlight == this.parentHighlight) { pstate.parentHighlight = null; } this.parentHighlight.destroy(); this.parentHighlight = null; } - } - else if (this.parentHighlightEnabled && visible) - { + } else if (this.parentHighlightEnabled && visible) { if (this.graph.model.isVertex(parent) && pstate != null && - pstate.parentHighlight == null) - { + pstate.parentHighlight == null) { this.parentHighlight = this.createParentHighlightShape(pstate); // VML dialect required here for event transparency in IE this.parentHighlight.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG; @@ -2142,14 +1862,11 @@ class mxVertexHandler { * * Redraws the preview. */ - drawPreview = ()=> - { - if (this.preview != null) - { + drawPreview = () => { + if (this.preview != null) { this.preview.bounds = this.bounds; - if (this.preview.node.parentNode == this.graph.container) - { + if (this.preview.node.parentNode == this.graph.container) { this.preview.bounds.width = Math.max(0, this.preview.bounds.width - 1); this.preview.bounds.height = Math.max(0, this.preview.bounds.height - 1); } @@ -2168,8 +1885,7 @@ class mxVertexHandler { * * Returns the bounds for the selection border. */ - getSelectionBorderBounds = ()=> - { + getSelectionBorderBounds = () => { return this.bounds; }; @@ -2178,8 +1894,7 @@ class mxVertexHandler { * * Returns true if this handler was destroyed or not initialized. */ - isDestroyed = ()=> - { + isDestroyed = () => { return this.selectionBorder == null; }; @@ -2188,27 +1903,22 @@ class mxVertexHandler { * * Destroys the handler and all its resources and DOM nodes. */ - destroy = ()=> - { - if (this.escapeHandler != null) - { + destroy = () => { + if (this.escapeHandler != null) { this.state.view.graph.removeListener(this.escapeHandler); this.escapeHandler = null; } - if (this.preview != null) - { + if (this.preview != null) { this.preview.destroy(); this.preview = null; } - if (this.parentHighlight != null) - { + if (this.parentHighlight != null) { var parent = this.graph.model.getParent(this.state.cell); var pstate = this.graph.view.getState(parent); - if (pstate != null && pstate.parentHighlight == this.parentHighlight) - { + if (pstate != null && pstate.parentHighlight == this.parentHighlight) { pstate.parentHighlight = null; } @@ -2216,14 +1926,12 @@ class mxVertexHandler { this.parentHighlight = null; } - if (this.ghostPreview != null) - { + if (this.ghostPreview != null) { this.ghostPreview.destroy(); this.ghostPreview = null; } - if (this.selectionBorder != null) - { + if (this.selectionBorder != null) { this.selectionBorder.destroy(); this.selectionBorder = null; } @@ -2231,20 +1939,16 @@ class mxVertexHandler { this.labelShape = null; this.removeHint(); - if (this.sizers != null) - { - for (var i = 0; i < this.sizers.length; i++) - { + if (this.sizers != null) { + for (var i = 0; i < this.sizers.length; i++) { this.sizers[i].destroy(); } this.sizers = null; } - if (this.customHandles != null) - { - for (var i = 0; i < this.customHandles.length; i++) - { + if (this.customHandles != null) { + for (var i = 0; i < this.customHandles.length; i++) { this.customHandles[i].destroy(); } diff --git a/src/js/io/mxGenericChangeCodec.js b/src/js/io/mxGenericChangeCodec.js index 34a32e06e..21bf0bfbe 100644 --- a/src/js/io/mxGenericChangeCodec.js +++ b/src/js/io/mxGenericChangeCodec.js @@ -41,7 +41,7 @@ class mxGenericChangeCodec extends mxObjectCodec { * variable - The fieldname for the change data. */ constructor(obj, variable) { - super(obj, ['model', 'previous'], ['cell']); + super(obj, ['model', 'previous'], ['cell']); this.variable = variable; } diff --git a/src/js/io/mxGraphCodec.js b/src/js/io/mxGraphCodec.js index e1f2848d2..cc651a7ea 100644 --- a/src/js/io/mxGraphCodec.js +++ b/src/js/io/mxGraphCodec.js @@ -26,7 +26,7 @@ class mxGraphCodec extends mxObjectCodec { */ constructor() { super(new mxGraph(), ['graphListeners', 'eventListeners', 'view', 'container', - 'cellRenderer', 'editor', 'selection']); + 'cellRenderer', 'editor', 'selection']); } } diff --git a/src/js/layout/hierarchical/mxHierarchicalEdgeStyle.js b/src/js/layout/hierarchical/mxHierarchicalEdgeStyle.js index 50ef42d02..a534d58c7 100644 --- a/src/js/layout/hierarchical/mxHierarchicalEdgeStyle.js +++ b/src/js/layout/hierarchical/mxHierarchicalEdgeStyle.js @@ -1,9 +1,9 @@ const mxHierarchicalEdgeStyle = -{ - ORTHOGONAL: 1, - POLYLINE: 2, - STRAIGHT: 3, - CURVE: 4 -}; + { + ORTHOGONAL: 1, + POLYLINE: 2, + STRAIGHT: 3, + CURVE: 4 + }; export default mxHierarchicalEdgeStyle; diff --git a/src/js/layout/hierarchical/mxHierarchicalLayout.js b/src/js/layout/hierarchical/mxHierarchicalLayout.js index 1fb6f480f..4bb95f168 100644 --- a/src/js/layout/hierarchical/mxHierarchicalLayout.js +++ b/src/js/layout/hierarchical/mxHierarchicalLayout.js @@ -651,7 +651,7 @@ class mxHierarchicalLayout extends mxGraphLayout { for (var j = 0; j < edges.length; j++) { if (j == i) { - continue; + } else { var isSource2 = edgeIsSource[j]; var otherTerm = this.getVisibleTerminal(edges[j], !isSource2); diff --git a/src/js/layout/hierarchical/stage/mxHierarchicalLayoutStage.js b/src/js/layout/hierarchical/stage/mxHierarchicalLayoutStage.js index 35503d67d..eb6abbd08 100644 --- a/src/js/layout/hierarchical/stage/mxHierarchicalLayoutStage.js +++ b/src/js/layout/hierarchical/stage/mxHierarchicalLayoutStage.js @@ -25,7 +25,8 @@ class mxHierarchicalLayoutStage { * and creates the resulting laid out graph within that facade for further * use. */ - execute = (parent)=> { }; + execute = (parent) => { + }; } export default mxHierarchicalLayoutStage; diff --git a/src/js/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js b/src/js/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js index 0b3720e09..2580b23fb 100644 --- a/src/js/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js +++ b/src/js/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js @@ -5,6 +5,68 @@ import mxHierarchicalLayoutStage from "./mxHierarchicalLayoutStage"; class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage { + /** + * Variable: layout + * + * Reference to the enclosing . + */ + layout = null; + /** + * Variable: maxIterations + * + * The maximum number of iterations to perform whilst reducing edge + * crossings. Default is 24. + */ + maxIterations = 24; + /** + * Variable: nestedBestRanks + * + * Stores each rank as a collection of cells in the best order found for + * each layer so far + */ + nestedBestRanks = null; + /** + * Variable: currentBestCrossings + * + * The total number of crossings found in the best configuration so far + */ + currentBestCrossings = 0; + /** + * Variable: iterationsWithoutImprovement + * + * The total number of crossings found in the best configuration so far + */ + iterationsWithoutImprovement = 0; + /** + * Variable: maxNoImprovementIterations + * + * The total number of crossings found in the best configuration so far + */ + maxNoImprovementIterations = 2; + /** + * Class: MedianCellSorter + * + * A utility class used to track cells whilst sorting occurs on the median + * values. Does not violate (x.compareTo(y)==0) == (x.equals(y)) + * + * Constructor: MedianCellSorter + * + * Constructs a new median cell sorter. + */ + function + /** + * Variable: medianValue + * + * The weighted value of the cell stored. + */ + medianValue = 0; + /** + * Variable: cell + * + * The cell whose median value is being calculated + */ + cell = false; + /** * Class: mxMedianHybridCrossingReduction * @@ -29,50 +91,6 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage { this.layout = layout; }; - /** - * Variable: layout - * - * Reference to the enclosing . - */ - layout = null; - - /** - * Variable: maxIterations - * - * The maximum number of iterations to perform whilst reducing edge - * crossings. Default is 24. - */ - maxIterations = 24; - - /** - * Variable: nestedBestRanks - * - * Stores each rank as a collection of cells in the best order found for - * each layer so far - */ - nestedBestRanks = null; - - /** - * Variable: currentBestCrossings - * - * The total number of crossings found in the best configuration so far - */ - currentBestCrossings = 0; - - /** - * Variable: iterationsWithoutImprovement - * - * The total number of crossings found in the best configuration so far - */ - iterationsWithoutImprovement = 0; - - /** - * Variable: maxNoImprovementIterations - * - * The total number of crossings found in the best configuration so far - */ - maxNoImprovementIterations = 2; - /** * Function: execute * @@ -151,7 +169,6 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage { model.ranks = ranks; }; - /** * Function: calculateCrossings * @@ -545,36 +562,10 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage { } }; - /** - * Class: MedianCellSorter - * - * A utility class used to track cells whilst sorting occurs on the median - * values. Does not violate (x.compareTo(y)==0) == (x.equals(y)) - * - * Constructor: MedianCellSorter - * - * Constructs a new median cell sorter. - */ - function - MedianCellSorter() { // empty }; - /** - * Variable: medianValue - * - * The weighted value of the cell stored. - */ - medianValue = 0; - - /** - * Variable: cell - * - * The cell whose median value is being calculated - */ - cell = false; - /** * Function: compare * diff --git a/src/js/layout/mxCompositeLayout.js b/src/js/layout/mxCompositeLayout.js index 12655c288..73081f3e6 100644 --- a/src/js/layout/mxCompositeLayout.js +++ b/src/js/layout/mxCompositeLayout.js @@ -3,7 +3,7 @@ * Copyright (c) 2006-2015, Gaudenz Alder */ -class mxCompositeLayout extends mxGraphLayout{ +class mxCompositeLayout extends mxGraphLayout { /** * Variable: layouts * @@ -59,7 +59,7 @@ class mxCompositeLayout extends mxGraphLayout{ * Implements by calling move on or the first * layout in . */ - moveCell=(cell, x, y)=>{ + moveCell = (cell, x, y) => { if (this.master != null) { this.master.moveCell.apply(this.master, arguments); } else { @@ -73,7 +73,7 @@ class mxCompositeLayout extends mxGraphLayout{ * Implements by executing all in a * single transaction. */ - execute=(parent)=>{ + execute = (parent) => { var model = this.graph.getModel(); model.beginUpdate(); diff --git a/src/js/layout/mxGraphLayout.js b/src/js/layout/mxGraphLayout.js index 7ae6755d4..15a8db435 100644 --- a/src/js/layout/mxGraphLayout.js +++ b/src/js/layout/mxGraphLayout.js @@ -306,7 +306,7 @@ class mxGraphLayout { result.y = result.y + parentGeo.y; parent = model.getParent(parent); - ; + parentGeo = model.getGeometry(parent); } } diff --git a/src/js/layout/mxParallelEdgeLayout.js b/src/js/layout/mxParallelEdgeLayout.js index f78a4d3d3..8e29c6c50 100644 --- a/src/js/layout/mxParallelEdgeLayout.js +++ b/src/js/layout/mxParallelEdgeLayout.js @@ -164,7 +164,7 @@ class mxParallelEdgeLayout extends mxGraphLayout { pts = tmp.join(','); } } - ; + return ((src > trg) ? trg + '-' + src : src + '-' + trg) + pts; } diff --git a/src/js/layout/mxPartitionLayout.js b/src/js/layout/mxPartitionLayout.js index 9702ad04e..aee7d749a 100644 --- a/src/js/layout/mxPartitionLayout.js +++ b/src/js/layout/mxPartitionLayout.js @@ -71,7 +71,7 @@ class mxPartitionLayout extends mxGraphLayout { * * Returns . */ - isHorizontal=()=>{ + isHorizontal = () => { return this.horizontal; }; @@ -80,7 +80,7 @@ class mxPartitionLayout extends mxGraphLayout { * * Implements . */ - moveCell = (cell, x, y)=>{ + moveCell = (cell, x, y) => { var model = this.graph.getModel(); var parent = model.getParent(cell); @@ -92,17 +92,14 @@ class mxPartitionLayout extends mxGraphLayout { // Finds index of the closest swimlane // TODO: Take into account the orientation - for (i = 0; i < childCount; i++) - { + for (i = 0; i < childCount; i++) { var child = model.getChildAt(parent, i); var bounds = this.getVertexBounds(child); - if (bounds != null) - { + if (bounds != null) { var tmp = bounds.x + bounds.width / 2; - if (last < x && tmp > x) - { + if (last < x && tmp > x) { break; } @@ -124,8 +121,7 @@ class mxPartitionLayout extends mxGraphLayout { * Implements . All children where * returns false and returns true are modified. */ - execute = (parent)=> - { + execute = (parent) => { var horizontal = this.isHorizontal(); var model = this.graph.getModel(); var pgeo = model.getGeometry(parent); @@ -134,43 +130,38 @@ class mxPartitionLayout extends mxGraphLayout { // geometry or the current root of the view in which case the size // of the graph's container will be used. if (this.graph.container != null && - ((pgeo == null && - model.isLayer(parent)) || - parent == this.graph.getView().currentRoot)) - { + ((pgeo == null && + model.isLayer(parent)) || + parent == this.graph.getView().currentRoot)) { var width = this.graph.container.offsetWidth - 1; var height = this.graph.container.offsetHeight - 1; pgeo = new mxRectangle(0, 0, width, height); } - if (pgeo != null) - { + if (pgeo != null) { var children = []; var childCount = model.getChildCount(parent); - for (var i = 0; i < childCount; i++) - { + for (var i = 0; i < childCount; i++) { var child = model.getChildAt(parent, i); if (!this.isVertexIgnored(child) && - this.isVertexMovable(child)) - { + this.isVertexMovable(child)) { children.push(child); } } var n = children.length; - if (n > 0) - { + if (n > 0) { var x0 = this.border; var y0 = this.border; var other = (horizontal) ? pgeo.height : pgeo.width; other -= 2 * this.border; var size = (this.graph.isSwimlane(parent)) ? - this.graph.getStartSize(parent) : - new mxRectangle(); + this.graph.getStartSize(parent) : + new mxRectangle(); other -= (horizontal) ? size.height : size.width; x0 = x0 + size.width; @@ -178,41 +169,32 @@ class mxPartitionLayout extends mxGraphLayout { var tmp = this.border + (n - 1) * this.spacing; var value = (horizontal) ? - ((pgeo.width - x0 - tmp) / n) : - ((pgeo.height - y0 - tmp) / n); + ((pgeo.width - x0 - tmp) / n) : + ((pgeo.height - y0 - tmp) / n); // Avoids negative values, that is values where the sum of the // spacing plus the border is larger then the available space - if (value > 0) - { + if (value > 0) { model.beginUpdate(); - try - { - for (var i = 0; i < n; i++) - { + try { + for (var i = 0; i < n; i++) { var child = children[i]; var geo = model.getGeometry(child); - if (geo != null) - { + if (geo != null) { geo = geo.clone(); geo.x = x0; geo.y = y0; - if (horizontal) - { - if (this.resizeVertices) - { + if (horizontal) { + if (this.resizeVertices) { geo.width = value; geo.height = other; } x0 += value + this.spacing; - } - else - { - if (this.resizeVertices) - { + } else { + if (this.resizeVertices) { geo.height = value; geo.width = other; } diff --git a/src/js/model/mxGraphModel.js b/src/js/model/mxGraphModel.js index b754709c5..121ac1d6f 100644 --- a/src/js/model/mxGraphModel.js +++ b/src/js/model/mxGraphModel.js @@ -4,50 +4,50 @@ */ /** * Class: mxGraphModel - * + * * Extends to implement a graph model. The graph model acts as * a wrapper around the cells which are in charge of storing the actual graph * datastructure. The model acts as a transactional wrapper with event * notification for all changes, whereas the cells contain the atomic * operations for updating the actual datastructure. - * + * * Layers: - * + * * The cell hierarchy in the model must have a top-level root cell which * contains the layers (typically one default layer), which in turn contain the * top-level cells of the layers. This means each cell is contained in a layer. * If no layers are required, then all new cells should be added to the default * layer. - * + * * Layers are useful for hiding and showing groups of cells, or for placing * groups of cells on top of other cells in the display. To identify a layer, * the function is used. It returns true if the parent of the given * cell is the root of the model. - * + * * Events: - * + * * See events section for more details. There is a new set of events for * tracking transactional changes as they happen. The events are called * startEdit for the initial beginUpdate, executed for each executed change * and endEdit for the terminal endUpdate. The executed event contains a * property called change which represents the change after execution. - * + * * Encoding the model: - * + * * To encode a graph model, use the following code: - * + * * (code) * var enc = new mxCodec(); * var node = enc.encode(graph.getModel()); * (end) - * + * * This will create an XML node that contains all the model information. - * + * * Encoding and decoding changes: - * + * * For the encoding of changes, a graph model listener is required that encodes * each change from the given array of changes. - * + * * (code) * model.addListener(mxEvent.CHANGE, (sender, evt)=> * { @@ -62,10 +62,10 @@ * // do something with the nodes * }); * (end) - * + * * For the decoding and execution of changes, the codec needs a lookup function * that allows it to resolve cell IDs as follows: - * + * * (code) * var codec = new mxCodec(); * codec.lookup = (id)=> @@ -73,10 +73,10 @@ * return model.getCell(id); * } * (end) - * + * * For each encoded change (represented by a node), the following code can be * used to carry out the decoding and create a change object. - * + * * (code) * var changes = []; * var change = codec.decode(node); @@ -84,13 +84,13 @@ * change.execute(); * changes.push(change); * (end) - * + * * The changes can then be dispatched using the model as follows. - * + * * (code) * var edit = new mxUndoableEdit(model, false); * edit.changes = changes; - * + * * edit.notify = ()=> * { * edit.source.fireEvent(new mxEventObject(mxEvent.CHANGE, @@ -98,7 +98,7 @@ * edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY, * 'edit', edit, 'changes', edit.changes)); * } - * + * * model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit)); * model.fireEvent(new mxEventObject(mxEvent.CHANGE, * 'edit', edit, 'changes', changes)); @@ -112,9 +112,9 @@ * is deprecated, please use edit.changes instead. * * Example: - * + * * For finding newly inserted cells, the following code can be used: - * + * * (code) * graph.model.addListener(mxEvent.CHANGE, (sender, evt)=> * { @@ -133,23 +133,23 @@ * } * }); * (end) - * - * + * + * * Event: mxEvent.NOTIFY * * Same as , this event can be used for classes that need to * implement a sync mechanism between this model and, say, a remote model. In * such a setup, only local changes should trigger a notify event and all * changes should trigger a change event. - * + * * Event: mxEvent.EXECUTE - * + * * Fires between begin- and endUpdate and after an atomic change was executed * in the model. The change property contains the atomic change * that was executed. - * + * * Event: mxEvent.EXECUTED - * + * * Fires between START_EDIT and END_EDIT after an atomic change was executed. * The change property contains the change that was executed. * @@ -157,43 +157,120 @@ * * Fires after the was incremented in . This event * contains no properties. - * + * * Event: mxEvent.START_EDIT * * Fires after the was changed from 0 to 1. This event * contains no properties. - * + * * Event: mxEvent.END_UPDATE - * + * * Fires after the was decreased in but before any * notification or change dispatching. The edit property contains * the . - * + * * Event: mxEvent.END_EDIT * * Fires after the was changed from 1 to 0. This event * contains no properties. - * + * * Event: mxEvent.BEFORE_UNDO - * + * * Fires before the change is dispatched after the update level has reached 0 * in . The edit property contains the . - * + * * Event: mxEvent.UNDO - * + * * Fires after the change was dispatched in . The edit * property contains the . - * + * * Constructor: mxGraphModel - * + * * Constructs a new graph model. If no root is specified then a new root * with a default layer is created. - * + * * Parameters: - * + * * root - that represents the root cell. */ class mxGraphModel extends mxEventSource { + /** + * Variable: root + * + * Holds the root cell, which in turn contains the cells that represent the + * layers of the diagram as child cells. That is, the actual elements of the + * diagram are supposed to live in the third generation of cells and below. + */ + root = null; + /** + * Variable: cells + * + * Maps from Ids to cells. + */ + cells = null; + /** + * Variable: maintainEdgeParent + * + * Specifies if edges should automatically be moved into the nearest common + * ancestor of their terminals. Default is true. + */ + maintainEdgeParent = true; + /** + * Variable: ignoreRelativeEdgeParent + * + * Specifies if relative edge parents should be ignored for finding the nearest + * common ancestors of an edge's terminals. Default is true. + */ + ignoreRelativeEdgeParent = true; + /** + * Variable: createIds + * + * Specifies if the model should automatically create Ids for new cells. + * Default is true. + */ + createIds = true; + /** + * Variable: prefix + * + * Defines the prefix of new Ids. Default is an empty string. + */ + prefix = ''; + /** + * Variable: postfix + * + * Defines the postfix of new Ids. Default is an empty string. + */ + postfix = ''; + /** + * Variable: nextId + * + * Specifies the next Id to be created. Initial value is 0. + */ + nextId = 0; + /** + * Variable: currentEdit + * + * Holds the changes for the current transaction. If the transaction is + * closed then a new object is created for this variable using + * . + */ + currentEdit = null; + /** + * Variable: updateLevel + * + * Counter for the depth of nested transactions. Each call to + * will increment this number and each call to will decrement + * it. When the counter reaches 0, the transaction is closed and the + * respective events are fired. Initial value is 0. + */ + updateLevel = 0; + /** + * Variable: endingUpdate + * + * True if the program flow is currently inside endUpdate. + */ + endingUpdate = false; + constructor(root) { // super not called this.currentEdit = this.createUndoableEdit(); @@ -205,93 +282,6 @@ class mxGraphModel extends mxEventSource { } }; - /** - * Variable: root - * - * Holds the root cell, which in turn contains the cells that represent the - * layers of the diagram as child cells. That is, the actual elements of the - * diagram are supposed to live in the third generation of cells and below. - */ - root = null; - - /** - * Variable: cells - * - * Maps from Ids to cells. - */ - cells = null; - - /** - * Variable: maintainEdgeParent - * - * Specifies if edges should automatically be moved into the nearest common - * ancestor of their terminals. Default is true. - */ - maintainEdgeParent = true; - - /** - * Variable: ignoreRelativeEdgeParent - * - * Specifies if relative edge parents should be ignored for finding the nearest - * common ancestors of an edge's terminals. Default is true. - */ - ignoreRelativeEdgeParent = true; - - /** - * Variable: createIds - * - * Specifies if the model should automatically create Ids for new cells. - * Default is true. - */ - createIds = true; - - /** - * Variable: prefix - * - * Defines the prefix of new Ids. Default is an empty string. - */ - prefix = ''; - - /** - * Variable: postfix - * - * Defines the postfix of new Ids. Default is an empty string. - */ - postfix = ''; - - /** - * Variable: nextId - * - * Specifies the next Id to be created. Initial value is 0. - */ - nextId = 0; - - /** - * Variable: currentEdit - * - * Holds the changes for the current transaction. If the transaction is - * closed then a new object is created for this variable using - * . - */ - currentEdit = null; - - /** - * Variable: updateLevel - * - * Counter for the depth of nested transactions. Each call to - * will increment this number and each call to will decrement - * it. When the counter reaches 0, the transaction is closed and the - * respective events are fired. Initial value is 0. - */ - updateLevel = 0; - - /** - * Variable: endingUpdate - * - * True if the program flow is currently inside endUpdate. - */ - endingUpdate = false; - /** * Function: clear * diff --git a/src/js/mxClient.js b/src/js/mxClient.js index f4b349e5e..67ce9ba5b 100644 --- a/src/js/mxClient.js +++ b/src/js/mxClient.js @@ -247,20 +247,6 @@ var mxClient = { for (var i = 0; i < mxClient.defaultBundles.length; i++) { mxResources.add(mxClient.defaultBundles[i], lan, callback); } - }, - - /** - * Function: include - * - * Dynamically adds a script node to the document header. - * - * In production environments, the includes are resolved in the mxClient.js - * file to reduce the number of requests required for client startup. This - * function should only be used in development environments, but not in - * production systems. - */ - include: (src) => { - document.write(''); } }; @@ -355,13 +341,11 @@ if (typeof(mxLoadStylesheets) == 'undefined') { */ if (typeof(mxBasePath) != 'undefined' && mxBasePath.length > 0) { // Adds a trailing slash if required - if (mxBasePath.substring(mxBasePath.length - 1) == '/') { + if (mxBasePath.substring(mxBasePath.length - 1) === '/') { mxBasePath = mxBasePath.substring(0, mxBasePath.length - 1); } - mxClient.basePath = mxBasePath; -} -else { +} else { mxClient.basePath = '.'; } @@ -384,13 +368,11 @@ else { */ if (typeof(mxImageBasePath) != 'undefined' && mxImageBasePath.length > 0) { // Adds a trailing slash if required - if (mxImageBasePath.substring(mxImageBasePath.length - 1) == '/') { + if (mxImageBasePath.substring(mxImageBasePath.length - 1) === '/') { mxImageBasePath = mxImageBasePath.substring(0, mxImageBasePath.length - 1); } - mxClient.imageBasePath = mxImageBasePath; -} -else { +} else { mxClient.imageBasePath = mxClient.basePath + '/images'; } @@ -451,8 +433,7 @@ else { */ if (typeof(mxDefaultLanguage) != 'undefined' && mxDefaultLanguage != null) { mxClient.defaultLanguage = mxDefaultLanguage; -} -else { +} else { mxClient.defaultLanguage = 'en'; } @@ -481,153 +462,3 @@ if (mxLoadStylesheets) { if (typeof(mxLanguages) != 'undefined' && mxLanguages != null) { mxClient.languages = mxLanguages; } - -// PREPROCESSOR-REMOVE-START -// If script is loaded via CommonJS, do not write