From 62c9dd8e34227920ddf6a9e4421779dc949da5ac Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Sat, 31 Jul 2021 19:55:25 +1000 Subject: [PATCH] fixed utils references --- docs/stashed/Ports.js | 32 +- docs/stashed/Schema.js | 54 +- docs/stashed/Scrollbars.js | 20 +- docs/stashed/ServerView.js | 25 +- docs/stashed/Touch.js | 21 +- docs/stashed/UIConfig.js | 6 +- docs/stashed/grapheditor/www/js/Actions.js | 87 ++- docs/stashed/grapheditor/www/js/Dialogs.js | 205 ++--- docs/stashed/grapheditor/www/js/Editor.js | 133 ++-- docs/stashed/grapheditor/www/js/EditorUi.js | 322 ++++---- docs/stashed/grapheditor/www/js/Format.js | 507 ++++++------ docs/stashed/grapheditor/www/js/Menus.js | 127 +-- docs/stashed/grapheditor/www/js/Shapes.js | 730 +++++++++--------- docs/stashed/grapheditor/www/js/Sidebar.js | 132 ++-- docs/stashed/grapheditor/www/js/Toolbar.js | 102 +-- docs/stashed/grapheditor/www/open.html | 18 +- packages/core/src/editor/mxDefaultToolbar.js | 4 +- packages/core/src/editor/mxEditor.js | 22 +- packages/core/src/util/Resources.js | 9 +- packages/core/src/util/XmlUtils.js | 9 +- packages/core/src/util/animate/mxEffects.js | 12 +- packages/core/src/util/dom/mxDivResizer.js | 4 +- packages/core/src/util/gui/mxLog.js | 2 +- packages/core/src/util/gui/mxPopupMenu.js | 8 +- packages/core/src/util/gui/mxToolbar.js | 4 +- packages/core/src/util/gui/mxWindow.js | 12 +- .../core/src/util/serialization/mxCodec.js | 3 +- .../serialization/mxDefaultToolbarCodec.js | 3 +- .../src/util/serialization/mxObjectCodec.js | 11 +- .../util/serialization/mxStylesheetCodec.js | 7 +- packages/core/src/view/GraphHandler.ts | 16 +- packages/core/src/view/Outline.ts | 6 +- .../core/src/view/cell/edge/EdgeHandler.ts | 47 +- .../src/view/cell/edge/ElbowEdgeHandler.ts | 4 +- .../src/view/cell/vertex/VertexHandler.ts | 52 +- .../src/view/connection/ConstraintHandler.ts | 6 +- .../src/view/connection/GraphConnections.ts | 4 +- .../core/src/view/drag_drop/DragSource.ts | 14 +- packages/core/src/view/editing/CellEditor.ts | 16 +- .../src/view/layout/layout/StackLayout.ts | 6 +- .../hierarchical/model/SwimlaneModel.ts | 5 +- .../hierarchical/stage/mxSwimlaneOrdering.js | 13 +- .../core/src/view/panning/PanningHandler.ts | 4 +- .../core/src/view/panning/PanningManager.ts | 7 +- .../core/src/view/printing/PrintPreview.ts | 8 +- packages/core/src/view/style/EdgeStyle.ts | 73 +- packages/core/src/view/style/Stylesheet.ts | 14 +- packages/html/stories/Drop.stories.js | 5 +- packages/html/stories/Events.stories.js | 6 +- packages/html/stories/FileIO.stories.js | 16 +- packages/html/stories/FixedPoints.stories.js | 3 +- packages/html/stories/HelloPort.stories.js | 4 +- packages/html/stories/PageBreaks.stories.js | 4 +- 53 files changed, 1547 insertions(+), 1417 deletions(-) diff --git a/docs/stashed/Ports.js b/docs/stashed/Ports.js index 05f2ba1aa..f8a120836 100644 --- a/docs/stashed/Ports.js +++ b/docs/stashed/Ports.js @@ -6,6 +6,12 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import { error } from '../../packages/core/src/util/gui/mxWindow'; +import { load } from '../../packages/core/src/util/network/mxXmlRequest'; +import { setOpacity } from '../../packages/core/src/util/Utils'; +import { write, writeln } from '../../packages/core/src/util/DomUtils'; +import { createXmlDocument, getPrettyXml } from '../../packages/core/src/util/XmlUtils'; +import { makeDraggable } from '../../packages/core/src/util/GestureUtils'; class Ports extends React.Component { constructor(props) { @@ -61,7 +67,7 @@ export default Ports; if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is not supported. - utils.error('Browser is not supported!', 200, false); + error('Browser is not supported!', 200, false); } else { @@ -110,7 +116,7 @@ export default Ports; // Sets the graph container and configures the editor editor.setGraphContainer(container); - let config = utils.load( + let config = load( 'editors/config/keyhandler-commons.xml'). getDocumentElement(); editor.configure(config); @@ -275,13 +281,13 @@ export default Ports; hints.style.fontSize = '10px'; hints.style.padding = '4px'; - utils.setOpacity(hints, 50); + setOpacity(hints, 50); - utils.writeln(hints, '- Drag an image from the sidebar to the graph'); - utils.writeln(hints, '- Doubleclick on a vertex or edge to edit'); - utils.writeln(hints, '- Shift- or Rightclick and drag for panning'); - utils.writeln(hints, '- Move the mouse over a cell to see a tooltip'); - utils.writeln(hints, '- Click and drag a vertex to move and connect'); + writeln(hints, '- Drag an image from the sidebar to the graph'); + writeln(hints, '- Doubleclick on a vertex or edge to edit'); + writeln(hints, '- Shift- or Rightclick and drag for panning'); + writeln(hints, '- Move the mouse over a cell to see a tooltip'); + writeln(hints, '- Click and drag a vertex to move and connect'); document.body.appendChild(hints); // Creates a new DIV that is used as a toolbar and adds @@ -332,9 +338,9 @@ export default Ports; let textarea = document.createElement('textarea'); textarea.style.width = '400px'; textarea.style.height = '400px'; - let enc = new mxCodec(utils.createXmlDocument()); + let enc = new mxCodec(createXmlDocument()); let node = enc.encode(editor.graph.getModel()); - textarea.value = utils.getPrettyXml(node); + textarea.value = getPrettyXml(node); showModalWindow(graph, 'XML', textarea, 410, 440); }); @@ -410,7 +416,7 @@ export default Ports; { editor.execute(action); }); - utils.write(button, label); + write(button, label); toolbar.appendChild(button); }; @@ -423,7 +429,7 @@ export default Ports; background.style.right = '0px'; background.style.bottom = '0px'; background.style.background = 'black'; - utils.setOpacity(background, 50); + setOpacity(background, 50); document.body.appendChild(background); let x = Math.max(0, document.body.scrollWidth/2-width/2); @@ -509,7 +515,7 @@ export default Ports; dragElt.style.height = '120px'; // Creates the image which is used as the drag icon (preview) - let ds = utils.makeDraggable(img, graph, funct, dragElt, 0, 0, true, true); + let ds = makeDraggable(img, graph, funct, dragElt, 0, 0, true, true); ds.setGuidesEnabled(true); }; diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js index 6b7fe6d2e..3ef7c9202 100644 --- a/docs/stashed/Schema.js +++ b/docs/stashed/Schema.js @@ -6,6 +6,14 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import { error } from '../../packages/core/src/util/gui/mxWindow'; +import { load } from '../../packages/core/src/util/network/mxXmlRequest'; +import { htmlEntities } from '../../packages/core/src/util/StringUtils'; +import { setOpacity } from '../../packages/core/src/util/Utils'; +import { write, writeln } from '../../packages/core/src/util/DomUtils'; +import { createXmlDocument, getPrettyXml } from '../../packages/core/src/util/XmlUtils'; +import { makeDraggable } from '../../packages/core/src/util/GestureUtils'; +import { clone } from '../../packages/core/src/util/CloneUtils'; class Schema extends React.Component { constructor(props) { @@ -46,7 +54,7 @@ export default MYNAMEHERE; if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is not supported. - utils.error('Browser is not supported!', 200, false); + error('Browser is not supported!', 200, false); } else { @@ -117,7 +125,7 @@ export default MYNAMEHERE; // Sets the graph container and configures the editor editor.setGraphContainer(container); - let config = utils.load( + let config = load( 'editors/config/keyhandler-minimal.xml'). getDocumentElement(); editor.configure(config); @@ -225,8 +233,8 @@ export default MYNAMEHERE; label += ' '; } - return label + utils.htmlEntities(cell.value.name, false) + ': ' + - utils.htmlEntities(cell.value.type, false); + return label + htmlEntities(cell.value.name, false) + ': ' + + htmlEntities(cell.value.type, false); } return mxGraph.prototype.getLabel.apply(this, arguments); // "supercall" @@ -311,7 +319,7 @@ export default MYNAMEHERE; if (primaryKey == null) { - utils.alert('Target table must have a primary key'); + alert('Target table must have a primary key'); return; } @@ -351,14 +359,14 @@ export default MYNAMEHERE; hints.style.fontSize = '10px'; hints.style.padding = '4px'; - utils.setOpacity(hints, 50); + setOpacity(hints, 50); - utils.writeln(hints, '- Drag an image from the sidebar to the graph'); - utils.writeln(hints, '- Doubleclick on a table or column to edit'); - utils.writeln(hints, '- Shift- or Rightclick and drag for panning'); - utils.writeln(hints, '- Move the mouse over a cell to see a tooltip'); - utils.writeln(hints, '- Click and drag a table to move and connect'); - utils.writeln(hints, '- Shift- or Rightclick to show a popup menu'); + writeln(hints, '- Drag an image from the sidebar to the graph'); + writeln(hints, '- Doubleclick on a table or column to edit'); + writeln(hints, '- Shift- or Rightclick and drag for panning'); + writeln(hints, '- Move the mouse over a cell to see a tooltip'); + writeln(hints, '- Click and drag a table to move and connect'); + writeln(hints, '- Shift- or Rightclick to show a popup menu'); document.body.appendChild(hints); // Creates a new DIV that is used as a toolbar and adds @@ -413,7 +421,7 @@ export default MYNAMEHERE; } else { - utils.alert('Schema is empty'); + alert('Schema is empty'); } }); @@ -425,9 +433,9 @@ export default MYNAMEHERE; let textarea = document.createElement('textarea'); textarea.style.width = '400px'; textarea.style.height = '400px'; - let enc = new mxCodec(utils.createXmlDocument()); + let enc = new mxCodec(createXmlDocument()); let node = enc.encode(editor.graph.getModel()); - textarea.value = utils.getPrettyXml(node); + textarea.value = getPrettyXml(node); showModalWindow('XML', textarea, 410, 440); }); @@ -492,7 +500,7 @@ export default MYNAMEHERE; { editor.execute(action); }); - utils.write(button, label); + write(button, label); toolbar.appendChild(button); }; @@ -505,7 +513,7 @@ export default MYNAMEHERE; background.style.right = '0px'; background.style.bottom = '0px'; background.style.background = 'black'; - utils.setOpacity(background, 50); + setOpacity(background, 50); document.body.appendChild(background); let x = Math.max(0, document.body.scrollWidth/2-width/2); @@ -550,7 +558,7 @@ export default MYNAMEHERE; if (parent == null || pstate == null) { - utils.alert('Drop target must be a table'); + alert('Drop target must be a table'); return; } @@ -558,7 +566,7 @@ export default MYNAMEHERE; pt.y -= pstate.y; let columnCount = parent.getChildCount()+1; - name = utils.prompt('Enter name for new column', 'COLUMN'+columnCount); + name = prompt('Enter name for new column', 'COLUMN'+columnCount); } else { @@ -573,7 +581,7 @@ export default MYNAMEHERE; } } - let name = utils.prompt('Enter name for new table', 'TABLE'+(tableCount+1)); + let name = prompt('Enter name for new table', 'TABLE'+(tableCount+1)); } if (name != null) @@ -614,7 +622,7 @@ export default MYNAMEHERE; // Creates the image which is used as the drag icon (preview) let dragImage = img.cloneNode(true); - let ds = utils.makeDraggable(img, graph, funct, dragImage); + let ds = makeDraggable(img, graph, funct, dragImage); // Adds highlight of target tables for columns ds.highlightDropTargets = true; @@ -874,7 +882,7 @@ export default MYNAMEHERE; Column.prototype.clone = function() { - return utils.clone(this); + return clone(this); }; // Defines the table user object @@ -885,7 +893,7 @@ export default MYNAMEHERE; Table.prototype.clone = function() { - return utils.clone(this); + return clone(this); }; diff --git a/docs/stashed/Scrollbars.js b/docs/stashed/Scrollbars.js index 4afa24c16..3ed011f7e 100644 --- a/docs/stashed/Scrollbars.js +++ b/docs/stashed/Scrollbars.js @@ -8,6 +8,10 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import { error } from '../../packages/core/src/util/gui/mxWindow'; +import { createXmlDocument } from '../../packages/core/src/util/XmlUtils'; +import { button } from '../../packages/core/src/util/dom/mxDomHelpers'; +import { isNode } from '../../packages/core/src/util/DomUtils'; class Scrollbars extends React.Component { constructor(props) { @@ -83,7 +87,7 @@ export default Scrollbars; if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is not supported. - utils.error('Browser is not supported!', 200, false); + error('Browser is not supported!', 200, false); } else { @@ -242,7 +246,7 @@ export default Scrollbars; { div.scrollHandler = true; - let updateEdges = utils.bind(this, function() + let updateEdges = this.bind(function() { let edgeCount = state.cell.getEdgeCount(); @@ -402,7 +406,7 @@ export default Scrollbars; }; // User objects (data) for the individual cells - let doc = utils.createXmlDocument(); + let doc = createXmlDocument(); // Same should be used to create the XML node for the table // description and the rows (most probably as child nodes) @@ -440,14 +444,14 @@ export default Scrollbars; graph.getModel().endUpdate(); } - var btn1 = utils.button('+', function() + var btn1 = button('+', function() { graph.zoomIn(); }); btn1.style.marginLeft = '20px'; document.body.appendChild(btn1); - document.body.appendChild(utils.button('-', function() + document.body.appendChild(button('-', function() { graph.zoomOut(); })); @@ -473,7 +477,7 @@ export default Scrollbars; { y = start.getCenterY() - div.scrollTop; - if (utils.isNode(edge.cell.value) && !start.cell.isCollapsed()) + if (isNode(edge.cell.value) && !start.cell.isCollapsed()) { let attr = (source) ? 'sourceRow' : 'targetRow'; let row = parseInt(edge.cell.value.getAttribute(attr)); @@ -507,7 +511,7 @@ export default Scrollbars; // Routes multiple incoming edges along common waypoints if // the edges have a common target row - if (source && utils.isNode(edge.cell.value) && start != null && end != null) + if (source && isNode(edge.cell.value) && start != null && end != null) { let edges = this.graph.getEdgesBetween(start.cell, end.cell, true); let tmp = []; @@ -517,7 +521,7 @@ export default Scrollbars; for (let i = 0; i < edges.length; i++) { - if (utils.isNode(edges[i].value) && + if (isNode(edges[i].value) && edges[i].value.getAttribute('targetRow') == row) { tmp.push(edges[i]); diff --git a/docs/stashed/ServerView.js b/docs/stashed/ServerView.js index 4dd22de3c..3ae5a9e9c 100644 --- a/docs/stashed/ServerView.js +++ b/docs/stashed/ServerView.js @@ -6,6 +6,7 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import { convertPoint, getValue } from '../../packages/core/src/util/Utils'; class MYNAMEHERE extends React.Component { constructor(props) { @@ -52,7 +53,7 @@ export default MYNAMEHERE; if (state != null) { - let color = utils.getValue(state.style, 'fillColor', 'white'); + let color = getValue(state.style, 'fillColor', 'white'); this.textarea.style.background = color; } }; @@ -72,9 +73,9 @@ export default MYNAMEHERE; if (container != null) { mxEvent.addGestureListeners(container, - utils.bind(this, function(evt) + this.bind(function(evt) { - let pt = utils.convertPoint(graph.container, + let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); let cell = graph.getCellAt(pt.x, pt.y); let state = this.getState(cell); @@ -94,9 +95,9 @@ export default MYNAMEHERE; new InternalMouseEvent(evt)); } }), - utils.bind(this, function(evt) + this.bind(function(evt) { - let pt = utils.convertPoint(graph.container, + let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); let cell = graph.getCellAt(pt.x, pt.y); let state = this.getState(cell); @@ -112,9 +113,9 @@ export default MYNAMEHERE; new InternalMouseEvent(evt)); } }), - utils.bind(this, function(evt) + this.bind(function(evt) { - let pt = utils.convertPoint(graph.container, + let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); let cell = graph.getCellAt(pt.x, pt.y); let state = this.getState(cell); @@ -133,9 +134,9 @@ export default MYNAMEHERE; // Adds listener for double click handling on background mxEvent.addListener(container, 'dblclick', - utils.bind(this, function(evt) + this.bind(function(evt) { - let pt = utils.convertPoint(graph.container, + let pt = convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); let cell = graph.getCellAt(pt.x, pt.y); @@ -146,14 +147,14 @@ export default MYNAMEHERE; // Adds basic listeners for graph event dispatching outside of the // container and finishing the handling of a single gesture mxEvent.addGestureListeners(document, - utils.bind(this, function(evt) + this.bind(function(evt) { if (this.isContainerEvent(evt)) { graph.popupMenuHandler.hideMenu(); } }), - utils.bind(this, function(evt) + this.bind(function(evt) { // Hides the tooltip if mouse is outside container if (graph.tooltipHandler != null && @@ -170,7 +171,7 @@ export default MYNAMEHERE; new InternalMouseEvent(evt)); } }), - utils.bind(this, function(evt) + this.bind(function(evt) { if (this.captureDocumentGesture) { diff --git a/docs/stashed/Touch.js b/docs/stashed/Touch.js index 43b282b1e..ec6aa6ec3 100644 --- a/docs/stashed/Touch.js +++ b/docs/stashed/Touch.js @@ -1,3 +1,5 @@ +import { error } from '../../packages/core/src/util/gui/mxWindow'; + /** * Copyright (c) 2006-2013, JGraph Ltd @@ -7,6 +9,7 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import { convertPoint, createImage, getRotatedPoint, getValue, toRadians } from '../../packages/core/src/util/Utils'; class Touch extends React.Component { constructor(props) { @@ -78,7 +81,7 @@ export default Touch; if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is not supported. - utils.error('Browser is not supported!', 200, false); + error('Browser is not supported!', 200, false); } else { @@ -86,7 +89,7 @@ export default Touch; // mxClient.IS_TOUCH || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 // Disables built-in text selection and context menu while not editing text - let textEditing = utils.bind(this, function(evt) + let textEditing = this.bind(function(evt) { return graph.isEditing(); }); @@ -175,7 +178,7 @@ export default Touch; if (cell == null) { - let pt = utils.convertPoint(this.container, + let pt = convertPoint(this.container, mxEvent.getClientX(me), mxEvent.getClientY(me)); rubberband.start(pt.x, pt.y); } @@ -327,7 +330,7 @@ export default Touch; { if (cell == null) { - let pt = utils.convertPoint(this.container, + let pt = convertPoint(this.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); cell = this.getCellAt(pt.x, pt.y); } @@ -359,7 +362,7 @@ export default Touch; this.state.cell.isConnectable() && this.graph.getSelectionCount() == 1) { - this.connectorImg = utils.createImage(connectorSrc); + this.connectorImg = createImage(connectorSrc); this.connectorImg.style.cursor = 'pointer'; this.connectorImg.style.width = '29px'; this.connectorImg.style.height = '29px'; @@ -373,12 +376,12 @@ export default Touch; // Starts connecting on touch/mouse down mxEvent.addGestureListeners(this.connectorImg, - utils.bind(this, function(evt) + this.bind(function(evt) { this.graph.popupMenuHandler.hideMenu(); this.graph.stopEditing(false); - let pt = utils.convertPoint(this.graph.container, + let pt = convertPoint(this.graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); this.graph.connectionHandler.start(this.state, pt.x, pt.y); this.graph.isMouseDown = true; @@ -437,7 +440,7 @@ export default Touch; pt.y = s.y + s.height / 2; } - let alpha = utils.toRadians(utils.getValue(s.style, 'rotation', 0)); + let alpha = toRadians(getValue(s.style, 'rotation', 0)); if (alpha != 0) { @@ -445,7 +448,7 @@ export default Touch; let sin = Math.sin(alpha); let ct = new Point(s.getCenterX(), s.getCenterY()); - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); } this.connectorImg.style.left = (pt.x - this.connectorImg.offsetWidth / 2) + 'px'; diff --git a/docs/stashed/UIConfig.js b/docs/stashed/UIConfig.js index f39734038..138841f23 100644 --- a/docs/stashed/UIConfig.js +++ b/docs/stashed/UIConfig.js @@ -6,6 +6,8 @@ import React from 'react'; import mxEvent from '../mxgraph/util/mxEvent'; import mxGraph from '../mxgraph/view/mxGraph'; import mxRubberband from '../mxgraph/handler/mxRubberband'; +import { error } from '../../packages/core/src/util/gui/mxWindow'; +import { load } from '../../packages/core/src/util/network/mxXmlRequest'; class MYNAMEHERE extends React.Component { constructor(props) { @@ -46,7 +48,7 @@ export default MYNAMEHERE; if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is not supported. - utils.error('Browser is not supported!', 200, false); + error('Browser is not supported!', 200, false); } else { @@ -69,7 +71,7 @@ export default MYNAMEHERE; // and toolbar objects, respectively. // Keep in mind that the as-attributes of the add-items in the // toolbar and popupmenu sections refer to keys in mxResources. - let config = utils.load('uiconfig.xml').getDocumentElement(); + let config = load('uiconfig.xml').getDocumentElement(); mxObjectCodec.allowEval = true; editor.configure(config); mxObjectCodec.allowEval = false; diff --git a/docs/stashed/grapheditor/www/js/Actions.js b/docs/stashed/grapheditor/www/js/Actions.js index 1d3a09ce4..2c6260ca6 100644 --- a/docs/stashed/grapheditor/www/js/Actions.js +++ b/docs/stashed/grapheditor/www/js/Actions.js @@ -4,6 +4,11 @@ * * Constructs the actions object for the given UI. */ +const { hasScrollbars } = require('../../../../../packages/core/src/util/Utils'); +const { htmlEntities } = require('../../../../../packages/core/src/util/StringUtils'); +const { extractTextWithWhitespace } = require('../../../../../packages/core/src/util/DomUtils'); +const { getValue } = require('../../../../../packages/core/src/util/Utils'); + function Actions(editorUi) { this.editorUi = editorUi; @@ -39,21 +44,21 @@ Actions.prototype.init = function() window.openKey = 'import'; // Closes dialog after open - window.openFile = new OpenFile(utils.bind(this, function() + window.openFile = new OpenFile(this.bind(function() { ui.hideDialog(); })); - window.openFile.setConsumer(utils.bind(this, function(xml, filename) + window.openFile.setConsumer(this.bind(this, function(xml, filename) { try { - let doc = utils.parseXml(xml); + let doc = parseXml(xml); editor.graph.setSelectionCells(editor.graph.importGraphModel(doc.documentElement)); } catch (e) { - utils.alert(Resources.get('invalidOrMissingFile') + ': ' + e.message); + alert(Resources.get('invalidOrMissingFile') + ': ' + e.message); } })); @@ -74,7 +79,7 @@ Actions.prototype.init = function() }); this.addAction('pageSetup...', function() { ui.showDialog(new PageSetupDialog(ui).container, 320, 220, true, true); }).isEnabled = isGraphEnabled; this.addAction('print...', function() { ui.showDialog(new PrintDialog(ui).container, 300, 180, true, true); }, null, 'sprite-print', Editor.ctrlKey + '+P'); - this.addAction('preview', function() { utils.show(graph, null, 10, 10); }); + this.addAction('preview', function() { show(graph, null, 10, 10); }); // Edit actions this.addAction('undo', function() { ui.undo(); }, null, 'sprite-undo', Editor.ctrlKey + '+Z'); @@ -311,7 +316,7 @@ Actions.prototype.init = function() { if (graph.isEnabled()) { - let cells = utils.sortCells(graph.getSelectionCells(), true); + let cells = sortCells(graph.getSelectionCells(), true); if (cells.length == 1 && !graph.isTable(cells[0]) && !graph.isTableRow(cells[0])) { @@ -409,7 +414,7 @@ Actions.prototype.init = function() let cell = graph.getSelectionCell(); let tooltip = ''; - if (utils.isNode(cell.value)) + if (isNode(cell.value)) { let tmp = null; @@ -456,7 +461,7 @@ Actions.prototype.init = function() ui.showLinkDialog(value, Resources.get('apply'), function(link) { - link = utils.trim(link); + link = trim(link); graph.setLinkForCell(cell, (link.length > 0) ? link : null); }); } @@ -475,7 +480,7 @@ Actions.prototype.init = function() { ui.showLinkDialog('', Resources.get('insert'), function(link, docs) { - link = utils.trim(link); + link = trim(link); if (link.length > 0) { @@ -524,7 +529,7 @@ Actions.prototype.init = function() }); } })).isEnabled = isGraphEnabled; - this.addAction('link...', utils.bind(this, function() + this.addAction('link...', this.bind(function() { if (graph.isEnabled()) { @@ -559,7 +564,7 @@ Actions.prototype.init = function() let selState = graph.cellEditor.saveSelection(); - ui.showLinkDialog(oldValue, Resources.get('apply'), utils.bind(this, function(value) + ui.showLinkDialog(oldValue, Resources.get('apply'), this.bind(function(value) { graph.cellEditor.restoreSelection(selState); @@ -641,13 +646,13 @@ Actions.prototype.init = function() if (state != null) { - let html = utils.getValue(state.style, 'html', '0'); + let html = getValue(state.style, 'html', '0'); if (html == '1' && value == null) { let label = graph.convertValueToString(state.cell); - if (utils.getValue(state.style, 'nl2Br', '1') != '0') + if (getValue(state.style, 'nl2Br', '1') != '0') { // Removes newlines from HTML and converts breaks to newlines // to match the HTML output in plain text @@ -657,7 +662,7 @@ Actions.prototype.init = function() // Removes HTML tags let temp = document.createElement('div'); temp.innerHTML = graph.sanitizeHtml(label); - label = utils.extractTextWithWhitespace(temp.childNodes); + label = extractTextWithWhitespace(temp.childNodes); graph.cellLabelChanged(state.cell, label); graph.setCellStyles('html', value, [cells[i]]); @@ -665,9 +670,9 @@ Actions.prototype.init = function() else if (html == '0' && value == '1') { // Converts HTML tags to text - let label = utils.htmlEntities(graph.convertValueToString(state.cell), false); + let label = htmlEntities(graph.convertValueToString(state.cell), false); - if (utils.getValue(state.style, 'nl2Br', '1') != '0') + if (getValue(state.style, 'nl2Br', '1') != '0') { // Converts newlines in plain text to breaks in HTML // to match the plain text output @@ -779,7 +784,7 @@ Actions.prototype.init = function() graph.fitWindow(bounds); } }, null, null, Editor.ctrlKey + '+Shift+H'); - this.addAction('fitPage', utils.bind(this, function() + this.addAction('fitPage', this.bind(function() { if (!graph.pageVisible) { @@ -793,14 +798,14 @@ Actions.prototype.init = function() let scale = Math.floor(20 * Math.min(cw / fmt.width / ps, ch / fmt.height / ps)) / 20; graph.zoomTo(scale); - if (utils.hasScrollbars(graph.container)) + if (hasScrollbars(graph.container)) { let pad = graph.getPagePadding(); graph.container.scrollTop = pad.y * graph.view.scale - 1; graph.container.scrollLeft = Math.min(pad.x * graph.view.scale, (graph.container.scrollWidth - graph.container.clientWidth) / 2) - 1; } }), null, null, Editor.ctrlKey + '+J'); - this.addAction('fitTwoPages', utils.bind(this, function() + this.addAction('fitTwoPages', this.bind(function() { if (!graph.pageVisible) { @@ -815,14 +820,14 @@ Actions.prototype.init = function() let scale = Math.floor(20 * Math.min(cw / (2 * fmt.width) / ps, ch / fmt.height / ps)) / 20; graph.zoomTo(scale); - if (utils.hasScrollbars(graph.container)) + if (hasScrollbars(graph.container)) { let pad = graph.getPagePadding(); graph.container.scrollTop = Math.min(pad.y, (graph.container.scrollHeight - graph.container.clientHeight) / 2); graph.container.scrollLeft = Math.min(pad.x, (graph.container.scrollWidth - graph.container.clientWidth) / 2); } }), null, null, Editor.ctrlKey + '+Shift+J'); - this.addAction('fitPageWidth', utils.bind(this, function() + this.addAction('fitPageWidth', this.bind(function() { if (!graph.pageVisible) { @@ -836,16 +841,16 @@ Actions.prototype.init = function() let scale = Math.floor(20 * cw / fmt.width / ps) / 20; graph.zoomTo(scale); - if (utils.hasScrollbars(graph.container)) + if (hasScrollbars(graph.container)) { let pad = graph.getPagePadding(); graph.container.scrollLeft = Math.min(pad.x * graph.view.scale, (graph.container.scrollWidth - graph.container.clientWidth) / 2); } })); - this.put('customZoom', new Action(Resources.get('custom') + '...', utils.bind(this, function() + this.put('customZoom', new Action(Resources.get('custom') + '...', this.bind(function() { - let dlg = new FilenameDialog(this.editorUi, parseInt(graph.getView().getScale() * 100), Resources.get('apply'), utils.bind(this, function(newValue) + let dlg = new FilenameDialog(this.editorUi, parseInt(graph.getView().getScale() * 100), Resources.get('apply'), this.bind(function(newValue) { let val = parseInt(newValue); @@ -857,9 +862,9 @@ Actions.prototype.init = function() this.editorUi.showDialog(dlg.container, 300, 80, true, true); dlg.init(); }), null, null, Editor.ctrlKey + '+0')); - this.addAction('pageScale...', utils.bind(this, function() + this.addAction('pageScale...', this.bind(function() { - let dlg = new FilenameDialog(this.editorUi, parseInt(graph.pageScale * 100), Resources.get('apply'), utils.bind(this, function(newValue) + let dlg = new FilenameDialog(this.editorUi, parseInt(graph.pageScale * 100), Resources.get('apply'), this.bind(function(newValue) { let val = parseInt(newValue); @@ -922,7 +927,7 @@ Actions.prototype.init = function() }); action.setToggleAction(true); action.setSelectedCallback(function() { return graph.scrollbars; }); - action = this.addAction('pageView', utils.bind(this, function() + action = this.addAction('pageView', this.bind(function() { ui.setPageVisible(!graph.pageVisible); })); @@ -988,7 +993,7 @@ Actions.prototype.init = function() })); // Font style actions - let toggleFontStyle = utils.bind(this, function(key, style, fn, shortcut) + let toggleFontStyle = this.bind(function(key, style, fn, shortcut) { return this.addAction(key, function() { @@ -1159,7 +1164,7 @@ Actions.prototype.init = function() { let cells = graph.getSelectionCells(); let style = graph.getCurrentCellStyle(cells[0]); - let value = (utils.getValue(style, 'rounded', '0') == '1') ? '0' : '1'; + let value = (getValue(style, 'rounded', '0') == '1') ? '0' : '1'; graph.setCellStyles('rounded', value); graph.setCellStyles('curved', null); @@ -1201,7 +1206,7 @@ Actions.prototype.init = function() ui.fireEvent(new EventObject('styleChanged', 'keys', ['collapsible'], 'values', [value], 'cells', graph.getSelectionCells())); }); - this.addAction('editStyle...', utils.bind(this, function() + this.addAction('editStyle...', this.bind(function() { let cells = graph.getSelectionCells(); @@ -1214,7 +1219,7 @@ Actions.prototype.init = function() { if (newValue != null) { - graph.setCellStyle(utils.trim(newValue), cells); + graph.setCellStyle(trim(newValue), cells); } }, null, null, 400, 220); this.editorUi.showDialog(dlg.container, 420, 300, true, true); @@ -1314,21 +1319,21 @@ Actions.prototype.init = function() } } }, null, null, 'Alt+Shift+C'); - action = this.addAction('subscript', utils.bind(this, function() + action = this.addAction('subscript', this.bind(function() { if (graph.cellEditor.isContentEditing()) { document.execCommand('subscript', false, null); } }), null, null, Editor.ctrlKey + '+,'); - action = this.addAction('superscript', utils.bind(this, function() + action = this.addAction('superscript', this.bind(function() { if (graph.cellEditor.isContentEditing()) { document.execCommand('superscript', false, null); } }), null, null, Editor.ctrlKey + '+.'); - action = this.addAction('indent', utils.bind(this, function() + action = this.addAction('indent', this.bind(function() { // NOTE: Alt+Tab for outdent implemented via special code in // keyHandler.getFunction in EditorUi.js. Ctrl+Tab is reserved. @@ -1430,7 +1435,7 @@ Actions.prototype.init = function() }, graph.cellEditor.isContentEditing(), !graph.cellEditor.isContentEditing()); } }).isEnabled = isGraphEnabled; - action = this.addAction('layers', utils.bind(this, function() + action = this.addAction('layers', this.bind(function() { if (this.layersWindow == null) { @@ -1455,14 +1460,14 @@ Actions.prototype.init = function() } }), null, null, Editor.ctrlKey + '+Shift+L'); action.setToggleAction(true); - action.setSelectedCallback(utils.bind(this, function() { return this.layersWindow != null && this.layersWindow.window.isVisible(); })); - action = this.addAction('formatPanel', utils.bind(this, function() + action.setSelectedCallback(this.bind(function() { return this.layersWindow != null && this.layersWindow.window.isVisible(); })); + action = this.addAction('formatPanel', this.bind(function() { ui.toggleFormatPanel(); }), null, null, Editor.ctrlKey + '+Shift+P'); action.setToggleAction(true); - action.setSelectedCallback(utils.bind(this, function() { return ui.formatWidth > 0; })); - action = this.addAction('outline', utils.bind(this, function() + action.setSelectedCallback(this.bind(function() { return ui.formatWidth > 0; })); + action = this.addAction('outline', this.bind(function() { if (this.outlineWindow == null) { @@ -1486,7 +1491,7 @@ Actions.prototype.init = function() }), null, null, Editor.ctrlKey + '+Shift+O'); action.setToggleAction(true); - action.setSelectedCallback(utils.bind(this, function() { return this.outlineWindow != null && this.outlineWindow.window.isVisible(); })); + action.setSelectedCallback(this.bind(function() { return this.outlineWindow != null && this.outlineWindow.window.isVisible(); })); }; /** @@ -1542,7 +1547,7 @@ function Action(label, funct, enabled, iconCls, shortcut) }; // Action inherits from mxEventSource -utils.extend(Action, EventSource); +extend(Action, EventSource); /** * Sets the enabled state of the action and fires a stateChanged event. diff --git a/docs/stashed/grapheditor/www/js/Dialogs.js b/docs/stashed/grapheditor/www/js/Dialogs.js index 6b0854582..683164067 100644 --- a/docs/stashed/grapheditor/www/js/Dialogs.js +++ b/docs/stashed/grapheditor/www/js/Dialogs.js @@ -1,6 +1,19 @@ /** * Copyright (c) 2006-2012, JGraph Ltd */ +import { getValue } from '../../../../../packages/core/src/util/Utils'; + +const { setOpacity } = require('../../../../../packages/core/src/util/Utils'); +const { createImage } = require('../../../../../packages/core/src/util/Utils'); +const { createXmlDocument } = require('../../../../../packages/core/src/util/XmlUtils'); +const { isNode } = require('../../../../../packages/core/src/util/DomUtils'); +const { popup } = require('../../../../../packages/core/src/util/gui/mxWindow'); +const { parseXml } = require('../../../../../packages/core/src/util/XmlUtils'); +const { getPrettyXml } = require('../../../../../packages/core/src/util/XmlUtils'); +const { write } = require('../../../../../packages/core/src/util/DomUtils'); +const { remove } = require('../../../../../packages/core/src/util/Utils'); +const { button } = require('../../../../../packages/core/src/util/dom/mxDomHelpers'); +const { br } = require('../../../../../packages/core/src/util/DomUtils'); /** * Constructs a new open dialog. */ @@ -185,7 +198,7 @@ let ColorDialog = function(editorUi, color, apply, cancelFn) }; div.appendChild(input); - utils.br(div); + br(div); // Adds recent colors createRecentColorTable(); @@ -202,7 +215,7 @@ let ColorDialog = function(editorUi, color, apply, cancelFn) buttons.style.textAlign = 'right'; buttons.style.whiteSpace = 'nowrap'; - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); @@ -218,7 +231,7 @@ let ColorDialog = function(editorUi, color, apply, cancelFn) buttons.appendChild(cancelBtn); } - let applyBtn = utils.button(Resources.get('apply'), doApply); + let applyBtn = button(Resources.get('apply'), doApply); applyBtn.className = 'geBtn gePrimaryBtn'; buttons.appendChild(applyBtn); @@ -283,7 +296,7 @@ ColorDialog.prototype.defaultColors = ['none', 'FFFFFF', 'E6E6E6', 'CCCCCC', 'B3 */ ColorDialog.prototype.createApplyFunction = function() { - return utils.bind(this, function(color) + return this.bind(function(color) { let graph = this.editorUi.editor.graph; @@ -313,7 +326,7 @@ ColorDialog.addRecentColor = function(color, max) { if (color != null) { - utils.remove(color, ColorDialog.recentColors); + remove(color, ColorDialog.recentColors); ColorDialog.recentColors.splice(0, 0, color); if (ColorDialog.recentColors.length >= max) @@ -339,7 +352,7 @@ let AboutDialog = function(editorUi) let div = document.createElement('div'); div.setAttribute('align', 'center'); var h3 = document.createElement('h3'); - utils.write(h3, Resources.get('about') + ' GraphEditor'); + write(h3, Resources.get('about') + ' GraphEditor'); div.appendChild(h3); let img = document.createElement('img'); img.style.border = '0px'; @@ -347,17 +360,17 @@ let AboutDialog = function(editorUi) img.setAttribute('width', '151'); img.setAttribute('src', IMAGE_PATH + '/logo.png'); div.appendChild(img); - utils.br(div); - utils.write(div, 'Powered by mxGraph ' + mxClient.VERSION); - utils.br(div); + br(div); + write(div, 'Powered by mxGraph ' + mxClient.VERSION); + br(div); let link = document.createElement('a'); link.setAttribute('href', 'http://www.jgraph.com/'); link.setAttribute('target', '_blank'); - utils.write(link, 'www.jgraph.com'); + write(link, 'www.jgraph.com'); div.appendChild(link); - utils.br(div); - utils.br(div); - let closeBtn = utils.button(Resources.get('close'), function() + br(div); + br(div); + let closeBtn = button(Resources.get('close'), function() { editorUi.hideDialog(); }); @@ -386,7 +399,7 @@ let TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w td = document.createElement('td'); td.style.fontSize = '10pt'; td.style.width = '100px'; - utils.write(td, title); + write(td, title); row.appendChild(td); tbody.appendChild(row); @@ -406,7 +419,7 @@ let TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w nameInput.setAttribute('autocomplete', 'off'); nameInput.setAttribute('autocapitalize', 'off'); - utils.write(nameInput, url || ''); + write(nameInput, url || ''); nameInput.style.resize = 'none'; nameInput.style.width = w + 'px'; nameInput.style.height = h + 'px'; @@ -432,7 +445,7 @@ let TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w if (helpLink != null) { - let helpBtn = utils.button(Resources.get('help'), function() + let helpBtn = button(Resources.get('help'), function() { editorUi.editor.graph.openLink(helpLink); }); @@ -447,7 +460,7 @@ let TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w { (function(label, fn) { - let customBtn = utils.button(label, function(e) + let customBtn = button(label, function(e) { fn(e, nameInput); }); @@ -458,7 +471,7 @@ let TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w } } - let cancelBtn = utils.button(cancelTitle || Resources.get('cancel'), function() + let cancelBtn = button(cancelTitle || Resources.get('cancel'), function() { editorUi.hideDialog(); @@ -481,7 +494,7 @@ let TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w if (fn != null) { - let genericBtn = utils.button(applyTitle || Resources.get('apply'), function() + let genericBtn = button(applyTitle || Resources.get('apply'), function() { if (!noHide) { @@ -525,7 +538,7 @@ let EditDiagramDialog = function(editorUi) textarea.style.height = '360px'; textarea.style.marginBottom = '16px'; - textarea.value = utils.getPrettyXml(editorUi.editor.getGraphXml()); + textarea.value = getPrettyXml(editorUi.editor.getGraphXml()); div.appendChild(textarea); this.init = function() @@ -570,7 +583,7 @@ let EditDiagramDialog = function(editorUi) textarea.addEventListener('drop', handleDrop, false); } - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); }); @@ -589,13 +602,13 @@ let EditDiagramDialog = function(editorUi) { let replaceOption = document.createElement('option'); replaceOption.setAttribute('value', 'replace'); - utils.write(replaceOption, Resources.get('replaceExistingDrawing')); + write(replaceOption, Resources.get('replaceExistingDrawing')); select.appendChild(replaceOption); } let newOption = document.createElement('option'); newOption.setAttribute('value', 'new'); - utils.write(newOption, Resources.get('openInNewWindow')); + write(newOption, Resources.get('openInNewWindow')); if (EditDiagramDialog.showNewWindowOption) { @@ -606,16 +619,16 @@ let EditDiagramDialog = function(editorUi) { let importOption = document.createElement('option'); importOption.setAttribute('value', 'import'); - utils.write(importOption, Resources.get('addToExistingDrawing')); + write(importOption, Resources.get('addToExistingDrawing')); select.appendChild(importOption); } div.appendChild(select); - let okBtn = utils.button(Resources.get('ok'), function() + let okBtn = button(Resources.get('ok'), function() { // Removes all illegal control characters before parsing - let data = Graph.zapGremlins(utils.trim(textarea.value)); + let data = Graph.zapGremlins(trim(textarea.value)); let error = null; if (select.value == 'new') @@ -628,7 +641,7 @@ let EditDiagramDialog = function(editorUi) editorUi.editor.graph.model.beginUpdate(); try { - editorUi.editor.setGraphXml(utils.parseXml(data).documentElement); + editorUi.editor.setGraphXml(parseXml(data).documentElement); // LATER: Why is hideDialog between begin-/endUpdate faster? editorUi.hideDialog(); } @@ -646,7 +659,7 @@ let EditDiagramDialog = function(editorUi) editorUi.editor.graph.model.beginUpdate(); try { - let doc = utils.parseXml(data); + let doc = parseXml(data); let model = new Model(); let codec = new mxCodec(doc); codec.decode(doc.documentElement, model); @@ -669,7 +682,7 @@ let EditDiagramDialog = function(editorUi) if (error != null) { - utils.alert(error.message); + alert(error.message); } }); okBtn.className = 'geBtn gePrimaryBtn'; @@ -711,7 +724,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; td.style.width = '100px'; - utils.write(td, Resources.get('filename') + ':'); + write(td, Resources.get('filename') + ':'); row.appendChild(td); @@ -729,7 +742,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('format') + ':'); + write(td, Resources.get('format') + ':'); row.appendChild(td); @@ -738,7 +751,7 @@ let ExportDialog = function(editorUi) let pngOption = document.createElement('option'); pngOption.setAttribute('value', 'png'); - utils.write(pngOption, Resources.get('formatPng')); + write(pngOption, Resources.get('formatPng')); imageFormatSelect.appendChild(pngOption); let gifOption = document.createElement('option'); @@ -746,30 +759,30 @@ let ExportDialog = function(editorUi) if (ExportDialog.showGifOption) { gifOption.setAttribute('value', 'gif'); - utils.write(gifOption, Resources.get('formatGif')); + write(gifOption, Resources.get('formatGif')); imageFormatSelect.appendChild(gifOption); } let jpgOption = document.createElement('option'); jpgOption.setAttribute('value', 'jpg'); - utils.write(jpgOption, Resources.get('formatJpg')); + write(jpgOption, Resources.get('formatJpg')); imageFormatSelect.appendChild(jpgOption); let pdfOption = document.createElement('option'); pdfOption.setAttribute('value', 'pdf'); - utils.write(pdfOption, Resources.get('formatPdf')); + write(pdfOption, Resources.get('formatPdf')); imageFormatSelect.appendChild(pdfOption); let svgOption = document.createElement('option'); svgOption.setAttribute('value', 'svg'); - utils.write(svgOption, Resources.get('formatSvg')); + write(svgOption, Resources.get('formatSvg')); imageFormatSelect.appendChild(svgOption); if (ExportDialog.showXmlOption) { let xmlOption = document.createElement('option'); xmlOption.setAttribute('value', 'xml'); - utils.write(xmlOption, Resources.get('formatXml')); + write(xmlOption, Resources.get('formatXml')); imageFormatSelect.appendChild(xmlOption); } @@ -783,7 +796,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('zoom') + ' (%):'); + write(td, Resources.get('zoom') + ' (%):'); row.appendChild(td); @@ -802,7 +815,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('width') + ':'); + write(td, Resources.get('width') + ':'); row.appendChild(td); @@ -820,7 +833,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('height') + ':'); + write(td, Resources.get('height') + ':'); row.appendChild(td); @@ -838,7 +851,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('dpi') + ':'); + write(td, Resources.get('dpi') + ':'); row.appendChild(td); @@ -847,27 +860,27 @@ let ExportDialog = function(editorUi) var dpi100Option = document.createElement('option'); dpi100Option.setAttribute('value', '100'); - utils.write(dpi100Option, '100dpi'); + write(dpi100Option, '100dpi'); dpiSelect.appendChild(dpi100Option); var dpi200Option = document.createElement('option'); dpi200Option.setAttribute('value', '200'); - utils.write(dpi200Option, '200dpi'); + write(dpi200Option, '200dpi'); dpiSelect.appendChild(dpi200Option); var dpi300Option = document.createElement('option'); dpi300Option.setAttribute('value', '300'); - utils.write(dpi300Option, '300dpi'); + write(dpi300Option, '300dpi'); dpiSelect.appendChild(dpi300Option); var dpi400Option = document.createElement('option'); dpi400Option.setAttribute('value', '400'); - utils.write(dpi400Option, '400dpi'); + write(dpi400Option, '400dpi'); dpiSelect.appendChild(dpi400Option); let dpiCustOption = document.createElement('option'); dpiCustOption.setAttribute('value', 'custom'); - utils.write(dpiCustOption, Resources.get('custom')); + write(dpiCustOption, Resources.get('custom')); dpiSelect.appendChild(dpiCustOption); let customDpi = document.createElement('input'); @@ -929,7 +942,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('background') + ':'); + write(td, Resources.get('background') + ':'); row.appendChild(td); @@ -939,7 +952,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(transparentCheckbox); - utils.write(td, Resources.get('transparent')); + write(td, Resources.get('transparent')); row.appendChild(td); @@ -949,7 +962,7 @@ let ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; - utils.write(td, Resources.get('borderWidth') + ':'); + write(td, Resources.get('borderWidth') + ':'); row.appendChild(td); @@ -1105,11 +1118,11 @@ let ExportDialog = function(editorUi) td.style.paddingTop = '22px'; td.colSpan = 2; - let saveBtn = utils.button(Resources.get('export'), utils.bind(this, function() + let saveBtn = button(Resources.get('export'), this.bind(function() { if (parseInt(zoomInput.value) <= 0) { - utils.alert(Resources.get('drawingEmpty')); + alert(Resources.get('drawingEmpty')); } else { @@ -1135,7 +1148,7 @@ let ExportDialog = function(editorUi) })); saveBtn.className = 'geBtn gePrimaryBtn'; - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); }); @@ -1185,18 +1198,18 @@ ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi) if (format == 'xml') { - ExportDialog.saveLocalFile(editorUi, utils.getXml(editorUi.editor.getGraphXml()), name, format); + ExportDialog.saveLocalFile(editorUi, getXml(editorUi.editor.getGraphXml()), name, format); } else if (format == 'svg') { - ExportDialog.saveLocalFile(editorUi, utils.getXml(graph.getSvg(bg, s, b)), name, format); + ExportDialog.saveLocalFile(editorUi, getXml(graph.getSvg(bg, s, b)), name, format); } else { let bounds = graph.getGraphBounds(); // New image export - let xmlDoc = utils.createXmlDocument(); + let xmlDoc = createXmlDocument(); let root = xmlDoc.createElement('output'); xmlDoc.appendChild(root); @@ -1210,7 +1223,7 @@ ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi) imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas); // Puts request data together - let param = 'xml=' + encodeURIComponent(utils.getXml(root)); + let param = 'xml=' + encodeURIComponent(getXml(root)); let w = Math.ceil(bounds.width * s / graph.view.scale + 2 * b); let h = Math.ceil(bounds.height * s / graph.view.scale + 2 * b); @@ -1227,7 +1240,7 @@ ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi) } else { - utils.alert(Resources.get('drawingTooLarge')); + alert(Resources.get('drawingTooLarge')); } } }; @@ -1249,8 +1262,8 @@ ExportDialog.saveLocalFile = function(editorUi, data, filename, format) } else { - utils.alert(Resources.get('drawingTooLarge')); - utils.popup(xml); + alert(Resources.get('drawingTooLarge')); + popup(xml); } }; @@ -1265,9 +1278,9 @@ let EditDataDialog = function(ui, cell) let value = cell.getValue(); // Converts the value to an XML node - if (!utils.isNode(value)) + if (!isNode(value)) { - let doc = utils.createXmlDocument(); + let doc = createXmlDocument(); let obj = doc.createElement('object'); obj.setAttribute('label', value || ''); value = obj; @@ -1277,7 +1290,7 @@ let EditDataDialog = function(ui, cell) try { - let temp = utils.getValue(ui.editor.graph.getCurrentCellStyle(cell), 'metaData', null); + let temp = getValue(ui.editor.graph.getCurrentCellStyle(cell), 'metaData', null); if (temp != null) { @@ -1310,7 +1323,7 @@ let EditDataDialog = function(ui, cell) wrapper.style.width = '100%'; let removeAttr = document.createElement('a'); - let img = utils.createImage(Dialog.prototype.closeImage); + let img = createImage(Dialog.prototype.closeImage); img.style.height = '9px'; img.style.fontSize = '9px'; img.style.marginBottom = '5px'; @@ -1411,7 +1424,7 @@ let EditDataDialog = function(ui, cell) text.style.width = '100%'; text.style.fontSize = '11px'; text.style.textAlign = 'center'; - utils.write(text, id); + write(text, id); form.addField(Resources.get('id') + ':', text); } @@ -1445,7 +1458,7 @@ let EditDataDialog = function(ui, cell) top.appendChild(newProp); div.appendChild(top); - let addBtn = utils.button(Resources.get('addProperty'), function() + let addBtn = button(Resources.get('addProperty'), function() { let name = nameInput.value; @@ -1454,7 +1467,7 @@ let EditDataDialog = function(ui, cell) { try { - let idx = utils.indexOf(names, name); + let idx = names.indexOf(name); if (idx >= 0 && texts[idx] != null) { @@ -1486,12 +1499,12 @@ let EditDataDialog = function(ui, cell) } catch (e) { - utils.alert(e); + alert(e); } } else { - utils.alert(Resources.get('invalidName')); + alert(Resources.get('invalidName')); } }); @@ -1517,14 +1530,14 @@ let EditDataDialog = function(ui, cell) addBtn.className = 'geBtn'; newProp.appendChild(addBtn); - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { ui.hideDialog.apply(ui, arguments); }); cancelBtn.className = 'geBtn'; - let applyBtn = utils.button(Resources.get('apply'), function() + let applyBtn = button(Resources.get('apply'), function() { try { @@ -1559,7 +1572,7 @@ let EditDataDialog = function(ui, cell) } catch (e) { - utils.alert(e); + alert(e); } }); applyBtn.className = 'geBtn gePrimaryBtn'; @@ -1611,7 +1624,7 @@ let EditDataDialog = function(ui, cell) }); replace.appendChild(input); - utils.write(replace, Resources.get('placeholders')); + write(replace, Resources.get('placeholders')); if (EditDataDialog.placeholderHelpLink != null) { @@ -1623,7 +1636,7 @@ let EditDataDialog = function(ui, cell) link.style.cursor = 'help'; let icon = document.createElement('img'); - utils.setOpacity(icon, 50); + setOpacity(icon, 50); icon.style.height = '16px'; icon.style.width = '16px'; icon.setAttribute('border', '0'); @@ -1679,7 +1692,7 @@ EditDataDialog.placeholderHelpLink = null; let LinkDialog = function(editorUi, initialValue, btnLabel, fn) { let div = document.createElement('div'); - utils.write(div, Resources.get('editLink') + ':'); + write(div, Resources.get('editLink') + ':'); let inner = document.createElement('div'); inner.className = 'geTitle'; @@ -1751,7 +1764,7 @@ let LinkDialog = function(editorUi, initialValue, btnLabel, fn) } }); - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); }); @@ -1762,7 +1775,7 @@ let LinkDialog = function(editorUi, initialValue, btnLabel, fn) btns.appendChild(cancelBtn); } - let mainBtn = utils.button(btnLabel, function() + let mainBtn = button(btnLabel, function() { editorUi.hideDialog(); fn(linkInput.value); @@ -1816,7 +1829,7 @@ let OutlineWindow = function(editorUi, x, y, w, h) } }; - let resizeListener = utils.bind(this, function() + let resizeListener = this.bind(function() { let x = this.window.getX(); let y = this.window.getY(); @@ -1835,13 +1848,13 @@ let OutlineWindow = function(editorUi, x, y, w, h) outline.destroy(); } - this.window.addListener(mxEvent.RESIZE, utils.bind(this, function() + this.window.addListener(mxEvent.RESIZE, this.bind(function() { outline.update(false); outline.outline.sizeDidChange(); })); - this.window.addListener(mxEvent.SHOW, utils.bind(this, function() + this.window.addListener(mxEvent.SHOW, this.bind(function() { this.window.fit(); outline.suspended = false; @@ -1849,18 +1862,18 @@ let OutlineWindow = function(editorUi, x, y, w, h) outline.update(); })); - this.window.addListener(mxEvent.HIDE, utils.bind(this, function() + this.window.addListener(mxEvent.HIDE, this.bind(function() { outline.suspended = true; })); - this.window.addListener(mxEvent.NORMALIZE, utils.bind(this, function() + this.window.addListener(mxEvent.NORMALIZE, this.bind(function() { outline.suspended = false; outline.update(); })); - this.window.addListener(mxEvent.MINIMIZE, utils.bind(this, function() + this.window.addListener(mxEvent.MINIMIZE, this.bind(function() { outline.suspended = true; })); @@ -1875,7 +1888,7 @@ let OutlineWindow = function(editorUi, x, y, w, h) g.background = (graph.background == null || graph.background == mxConstants.NONE) ? graph.defaultPageBackgroundColor : graph.background; g.pageVisible = graph.pageVisible; - let current = utils.getCurrentStyle(graph.container); + let current = getCurrentStyle(graph.container); div.style.backgroundColor = current.backgroundColor; return g; @@ -1888,7 +1901,7 @@ let OutlineWindow = function(editorUi, x, y, w, h) outline.outline.pageVisible = graph.pageVisible; outline.outline.background = (graph.background == null || graph.background == mxConstants.NONE) ? graph.defaultPageBackgroundColor : graph.background;; - let current = utils.getCurrentStyle(graph.container); + let current = getCurrentStyle(graph.container); div.style.backgroundColor = current.backgroundColor; if (graph.view.backgroundPageShape != null && outline.outline.view.backgroundPageShape != null) @@ -2059,23 +2072,23 @@ let LayersWindow = function(editorUi, x, y, w, h) ldiv.appendChild(removeLink); let insertLink = link.cloneNode(); - insertLink.setAttribute('title', utils.trim(Resources.get('moveSelectionTo', ['...']))); + insertLink.setAttribute('title', trim(Resources.get('moveSelectionTo', ['...']))); insertLink.innerHTML = '
'; mxEvent.addListener(insertLink, 'click', function(evt) { if (graph.isEnabled() && !graph.isSelectionEmpty()) { - let offset = utils.getOffset(insertLink); + let offset = getOffset(insertLink); - editorUi.showPopupMenu(utils.bind(this, function(menu, parent) + editorUi.showPopupMenu(this.bind(function(menu, parent) { for (let i = layerCount - 1; i >= 0; i--) { - (utils.bind(this, function(child) + (this.bind(function(child) { let item = menu.addItem(graph.convertValueToString(child) || - Resources.get('background'), null, utils.bind(this, function() + Resources.get('background'), null, this.bind(function() { graph.moveCells(graph.getSelectionCells(), 0, 0, false, child); }), parent); @@ -2119,7 +2132,7 @@ let LayersWindow = function(editorUi, x, y, w, h) if (graph.isEnabled() && layer != null) { let label = graph.convertValueToString(layer); - let dlg = new FilenameDialog(editorUi, label || Resources.get('background'), Resources.get('rename'), utils.bind(this, function(newValue) + let dlg = new FilenameDialog(editorUi, label || Resources.get('background'), Resources.get('rename'), this.bind(function(newValue) { if (newValue != null) { @@ -2269,7 +2282,7 @@ let LayersWindow = function(editorUi, x, y, w, h) let style = graph.getCurrentCellStyle(child); - if (utils.getValue(style, 'locked', '0') == '1') + if (getValue(style, 'locked', '0') == '1') { btn.setAttribute('src', Dialog.prototype.lockedImage); } @@ -2292,7 +2305,7 @@ let LayersWindow = function(editorUi, x, y, w, h) graph.getModel().beginUpdate(); try { - value = (utils.getValue(style, 'locked', '0') == '1') ? null : '1'; + value = (getValue(style, 'locked', '0') == '1') ? null : '1'; graph.setCellStyles('locked', value, [child]); } finally @@ -2331,7 +2344,7 @@ let LayersWindow = function(editorUi, x, y, w, h) mxEvent.consume(evt); }); - utils.write(left, label); + write(left, label); ldiv.appendChild(left); if (graph.isEnabled()) @@ -2447,7 +2460,7 @@ let LayersWindow = function(editorUi, x, y, w, h) // Cannot be moved or deleted for (let i = layerCount - 1; i >= 0; i--) { - (utils.bind(this, function(child) + (this.bind(function(child) { addLayer(i, graph.convertValueToString(child) || Resources.get('background'), child, child); @@ -2494,7 +2507,7 @@ let LayersWindow = function(editorUi, x, y, w, h) listDiv.scrollTop = listDiv.scrollHeight - listDiv.clientHeight; }; - this.window.addListener(mxEvent.SHOW, utils.bind(this, function() + this.window.addListener(mxEvent.SHOW, this.bind(function() { this.window.fit(); })); @@ -2516,7 +2529,7 @@ let LayersWindow = function(editorUi, x, y, w, h) } }; - let resizeListener = utils.bind(this, function() + let resizeListener = this.bind(function() { let x = this.window.getX(); let y = this.window.getY(); diff --git a/docs/stashed/grapheditor/www/js/Editor.js b/docs/stashed/grapheditor/www/js/Editor.js index 1d5d0c34d..32f7a47cd 100644 --- a/docs/stashed/grapheditor/www/js/Editor.js +++ b/docs/stashed/grapheditor/www/js/Editor.js @@ -1,6 +1,15 @@ /** * Copyright (c) 2006-2012, JGraph Ltd */ +const { mod } = require('../../../../../packages/core/src/util/Utils'); +const { br } = require('../../../../../packages/core/src/util/DomUtils'); +const { htmlEntities } = require('../../../../../packages/core/src/util/StringUtils'); +const { getScaleForPageCount } = require('../../../../../packages/core/src/util/Utils'); +const { button } = require('../../../../../packages/core/src/util/dom/mxDomHelpers'); +const { write } = require('../../../../../packages/core/src/util/DomUtils'); +const { getDocumentScrollOrigin } = require('../../../../../packages/core/src/util/Utils'); +const { setOpacity } = require('../../../../../packages/core/src/util/Utils'); +const { getDocumentSize } = require('../../../../../packages/core/src/util/Utils'); /** * Editor constructor executed on page load. */ @@ -48,7 +57,7 @@ Editor = function(chromeless, themes, model, graph, editable) } }; - this.graph.getModel().addListener(mxEvent.CHANGE, utils.bind(this, function() + this.graph.getModel().addListener(mxEvent.CHANGE, this.bind(function() { this.graphChangeListener.apply(this, arguments); })); @@ -252,7 +261,7 @@ Editor.popupsAllowed = true; /** * Editor inherits from mxEventSource */ -utils.extend(Editor, EventSource); +extend(Editor, EventSource); /** * Stores initial state of mxClient.NO_FO. @@ -370,7 +379,7 @@ Editor.prototype.editAsNew = function(xml, title) { let wnd = null; - let l = utils.bind(this, function(evt) + let l = this.bind(function(evt) { if (evt.data == 'ready' && evt.source == wnd) { @@ -569,12 +578,12 @@ Editor.prototype.getGraphXml = function(ignoreSelection) if (ignoreSelection) { - let enc = new mxCodec(utils.createXmlDocument()); + let enc = new mxCodec(createXmlDocument()); node = enc.encode(this.graph.getModel()); } else { - node = this.graph.encodeCells(utils.sortCells(this.graph.model.getTopmostCells( + node = this.graph.encodeCells(sortCells(this.graph.model.getTopmostCells( this.graph.getSelectionCells()))); } @@ -650,7 +659,7 @@ Editor.prototype.createUndoManager = function() }; // Installs the command history - let listener = utils.bind(this, function(sender, evt) + let listener = this.bind(function(sender, evt) { this.undoListener.apply(this, arguments); }); @@ -743,7 +752,7 @@ OpenFile.prototype.setData = function() OpenFile.prototype.error = function(msg) { this.cancel(true); - utils.alert(msg); + alert(msg); }; /** @@ -782,7 +791,7 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa var w0 = w; var h0 = h; - let ds = utils.getDocumentSize(); + let ds = getDocumentSize(); // Workaround for print dialog offset in viewer lightbox if (window.innerHeight != null) @@ -813,10 +822,10 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa this.bg.style.right = '0px'; this.bg.style.zIndex = this.zIndex - 2; - utils.setOpacity(this.bg, this.bgOpacity); + setOpacity(this.bg, this.bgOpacity); } - let origin = utils.getDocumentScrollOrigin(document); + let origin = getDocumentScrollOrigin(document); this.bg.style.left = origin.x + 'px'; this.bg.style.top = origin.y + 'px'; left += origin.x; @@ -858,7 +867,7 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa img.style.left = (left + w + 38 - dx) + 'px'; img.style.zIndex = this.zIndex; - mxEvent.addListener(img, 'click', utils.bind(this, function() + mxEvent.addListener(img, 'click', this.bind(function() { editorUi.hideDialog(true); })); @@ -870,10 +879,10 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa { let mouseDownSeen = false; - mxEvent.addGestureListeners(this.bg, utils.bind(this, function(evt) + mxEvent.addGestureListeners(this.bg, this.bind(function(evt) { mouseDownSeen = true; - }), null, utils.bind(this, function(evt) + }), null, this.bind(function(evt) { if (mouseDownSeen) { @@ -884,7 +893,7 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa } } - this.resizeListener = utils.bind(this, function() + this.resizeListener = this.bind(function() { if (onResize != null) { @@ -897,7 +906,7 @@ function Dialog(editorUi, elt, w, h, modal, closable, onClose, noScroll, transpa } } - let ds = utils.getDocumentSize(); + let ds = getDocumentSize(); dh = ds.height; this.bg.style.height = dh + 'px'; @@ -1037,7 +1046,7 @@ let ErrorDialog = function(editorUi, title, message, buttonText, fn, retry, butt hd.style.whiteSpace = 'nowrap'; hd.style.textOverflow = 'ellipsis'; hd.style.overflow = 'hidden'; - utils.write(hd, title); + write(hd, title); hd.setAttribute('title', title); div.appendChild(hd); } @@ -1054,7 +1063,7 @@ let ErrorDialog = function(editorUi, title, message, buttonText, fn, retry, butt if (retry != null) { - let retryBtn = utils.button(Resources.get('tryAgain'), function() + let retryBtn = button(Resources.get('tryAgain'), function() { editorUi.hideDialog(); retry(); @@ -1067,7 +1076,7 @@ let ErrorDialog = function(editorUi, title, message, buttonText, fn, retry, butt if (buttonText3 != null) { - var btn3 = utils.button(buttonText3, function() + var btn3 = button(buttonText3, function() { if (fn3 != null) { @@ -1079,7 +1088,7 @@ let ErrorDialog = function(editorUi, title, message, buttonText, fn, retry, butt btns.appendChild(btn3); } - let btn = utils.button(buttonText, function() + let btn = button(buttonText, function() { if (hide) { @@ -1097,7 +1106,7 @@ let ErrorDialog = function(editorUi, title, message, buttonText, fn, retry, butt if (buttonText2 != null) { - let mainBtn = utils.button(buttonText2, function() + let mainBtn = button(buttonText2, function() { if (hide) { @@ -1155,7 +1164,7 @@ PrintDialog.prototype.create = function(editorUi) td.appendChild(onePageCheckBox); let span = document.createElement('span'); - utils.write(span, ' ' + Resources.get('fitPage')); + write(span, ' ' + Resources.get('fitPage')); td.appendChild(span); mxEvent.addListener(span, 'click', function(evt) @@ -1182,7 +1191,7 @@ PrintDialog.prototype.create = function(editorUi) td.appendChild(pageCountCheckBox); let span = document.createElement('span'); - utils.write(span, ' ' + Resources.get('posterPrint') + ':'); + write(span, ' ' + Resources.get('posterPrint') + ':'); td.appendChild(span); mxEvent.addListener(span, 'click', function(evt) @@ -1205,7 +1214,7 @@ PrintDialog.prototype.create = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; td.appendChild(pageCountInput); - utils.write(td, ' ' + Resources.get('pages') + ' (max)'); + write(td, ' ' + Resources.get('pages') + ' (max)'); row.appendChild(td); tbody.appendChild(row); @@ -1226,7 +1235,7 @@ PrintDialog.prototype.create = function(editorUi) row = row.cloneNode(false); td = document.createElement('td'); - utils.write(td, Resources.get('pageScale') + ':'); + write(td, Resources.get('pageScale') + ':'); row.appendChild(td); td = document.createElement('td'); @@ -1269,7 +1278,7 @@ PrintDialog.prototype.create = function(editorUi) if (!isNaN(pageCount)) { - scale = utils.getScaleForPageCount(pageCount, graph, pf); + scale = getScaleForPageCount(pageCount, graph, pf); } } @@ -1306,7 +1315,7 @@ PrintDialog.prototype.create = function(editorUi) } }; - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); }); @@ -1319,7 +1328,7 @@ PrintDialog.prototype.create = function(editorUi) if (PrintDialog.previewEnabled) { - let previewBtn = utils.button(Resources.get('preview'), function() + let previewBtn = button(Resources.get('preview'), function() { editorUi.hideDialog(); preview(false); @@ -1328,7 +1337,7 @@ PrintDialog.prototype.create = function(editorUi) td.appendChild(previewBtn); } - let printBtn = utils.button(Resources.get((!PrintDialog.previewEnabled) ? 'ok' : 'print'), function() + let printBtn = button(Resources.get((!PrintDialog.previewEnabled) ? 'ok' : 'print'), function() { editorUi.hideDialog(); preview(true); @@ -1441,7 +1450,7 @@ let PageSetupDialog = function(editorUi) td = document.createElement('td'); td.style.verticalAlign = 'top'; td.style.fontSize = '10pt'; - utils.write(td, Resources.get('paperSize') + ':'); + write(td, Resources.get('paperSize') + ':'); row.appendChild(td); @@ -1457,7 +1466,7 @@ let PageSetupDialog = function(editorUi) row = document.createElement('tr'); td = document.createElement('td'); - utils.write(td, Resources.get('background') + ':'); + write(td, Resources.get('background') + ':'); row.appendChild(td); @@ -1504,7 +1513,7 @@ let PageSetupDialog = function(editorUi) td.appendChild(backgroundButton); - utils.write(td, Resources.get('gridSize') + ':'); + write(td, Resources.get('gridSize') + ':'); let gridSizeInput = document.createElement('input'); gridSizeInput.setAttribute('type', 'number'); @@ -1527,7 +1536,7 @@ let PageSetupDialog = function(editorUi) row = document.createElement('tr'); td = document.createElement('td'); - utils.write(td, Resources.get('image') + ':'); + write(td, Resources.get('image') + ':'); row.appendChild(td); td = document.createElement('td'); @@ -1545,13 +1554,13 @@ let PageSetupDialog = function(editorUi) { changeImageLink.removeAttribute('title'); changeImageLink.style.fontSize = ''; - changeImageLink.innerHTML = utils.htmlEntities(Resources.get('change')) + '...'; + changeImageLink.innerHTML = htmlEntities(Resources.get('change')) + '...'; } else { changeImageLink.setAttribute('title', newBackgroundImage.src); changeImageLink.style.fontSize = '11px'; - changeImageLink.innerHTML = utils.htmlEntities(newBackgroundImage.src.substring(0, 42)) + '...'; + changeImageLink.innerHTML = htmlEntities(newBackgroundImage.src.substring(0, 42)) + '...'; } }; @@ -1582,7 +1591,7 @@ let PageSetupDialog = function(editorUi) td.style.paddingTop = '16px'; td.setAttribute('align', 'right'); - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); }); @@ -1593,7 +1602,7 @@ let PageSetupDialog = function(editorUi) td.appendChild(cancelBtn); } - let applyBtn = utils.button(Resources.get('apply'), function() + let applyBtn = button(Resources.get('apply'), function() { editorUi.hideDialog(); let gridSize = parseInt(gridSizeInput.value); @@ -1665,7 +1674,7 @@ PageSetupDialog.addPageFormatPanel = function(div, namePostfix, pageFormat, page let portraitSpan = document.createElement('span'); portraitSpan.style.maxWidth = '100px'; - utils.write(portraitSpan, Resources.get('portrait')); + write(portraitSpan, Resources.get('portrait')); formatDiv.appendChild(portraitSpan); landscapeCheckBox.style.marginLeft = '10px'; @@ -1674,7 +1683,7 @@ PageSetupDialog.addPageFormatPanel = function(div, namePostfix, pageFormat, page let landscapeSpan = document.createElement('span'); landscapeSpan.style.width = '100px'; - utils.write(landscapeSpan, Resources.get('landscape')); + write(landscapeSpan, Resources.get('landscape')); formatDiv.appendChild(landscapeSpan) let customDiv = document.createElement('div'); @@ -1686,13 +1695,13 @@ PageSetupDialog.addPageFormatPanel = function(div, namePostfix, pageFormat, page widthInput.setAttribute('size', '7'); widthInput.style.textAlign = 'right'; customDiv.appendChild(widthInput); - utils.write(customDiv, ' in x '); + write(customDiv, ' in x '); let heightInput = document.createElement('input'); heightInput.setAttribute('size', '7'); heightInput.style.textAlign = 'right'; customDiv.appendChild(heightInput); - utils.write(customDiv, ' in'); + write(customDiv, ' in'); formatDiv.style.display = 'none'; customDiv.style.display = 'none'; @@ -1707,7 +1716,7 @@ PageSetupDialog.addPageFormatPanel = function(div, namePostfix, pageFormat, page let paperSizeOption = document.createElement('option'); paperSizeOption.setAttribute('value', f.key); - utils.write(paperSizeOption, f.title); + write(paperSizeOption, f.title); paperSizeSelect.appendChild(paperSizeOption); } @@ -1808,7 +1817,7 @@ PageSetupDialog.addPageFormatPanel = function(div, namePostfix, pageFormat, page listener(); div.appendChild(paperSizeSelect); - utils.br(div); + br(div); div.appendChild(formatDiv); div.appendChild(customDiv); @@ -1952,7 +1961,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat td.style.whiteSpace = 'nowrap'; td.style.fontSize = '10pt'; td.style.width = (hints) ? '80px' : '120px'; - utils.write(td, (label || Resources.get('filename')) + ':'); + write(td, (label || Resources.get('filename')) + ':'); row.appendChild(td); @@ -1961,7 +1970,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat nameInput.style.marginLeft = '4px'; nameInput.style.width = (w != null) ? w + 'px' : '180px'; - let genericBtn = utils.button(buttonText, function() + let genericBtn = button(buttonText, function() { if (validateFn == null || validateFn(nameInput.value)) { @@ -2016,7 +2025,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat evt.preventDefault(); }); - mxEvent.addListener(dlg, 'dragover', utils.bind(this, function(evt) + mxEvent.addListener(dlg, 'dragover', this.bind(function(evt) { if (dropElt == null) { @@ -2028,7 +2037,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat evt.preventDefault(); })); - mxEvent.addListener(dlg, 'drop', utils.bind(this, function(evt) + mxEvent.addListener(dlg, 'drop', this.bind(function(evt) { if (dropElt != null) { @@ -2036,7 +2045,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat dropElt = null; } - if (utils.indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0) + if (indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0) { nameInput.value = decodeURIComponent(evt.dataTransfer.getData('text/uri-list')); genericBtn.click(); @@ -2091,7 +2100,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat td.style.whiteSpace = 'nowrap'; td.setAttribute('align', 'right'); - let cancelBtn = utils.button(Resources.get('cancel'), function() + let cancelBtn = button(Resources.get('cancel'), function() { editorUi.hideDialog(); @@ -2109,7 +2118,7 @@ let FilenameDialog = function(editorUi, filename, buttonText, fn, label, validat if (helpLink != null) { - let helpBtn = utils.button(Resources.get('help'), function() + let helpBtn = button(Resources.get('help'), function() { editorUi.editor.graph.openLink(helpLink); }); @@ -2152,7 +2161,7 @@ FilenameDialog.createTypeHint = function(ui, nameInput, hints) { let hint = document.createElement('img'); hint.style.cssText = 'vertical-align:top;height:16px;width:16px;margin-left:4px;background-repeat:no-repeat;background-position:center bottom;cursor:pointer;'; - utils.setOpacity(hint, 70); + setOpacity(hint, 70); let nameChanged = function() { @@ -2208,7 +2217,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) { let typeOption = document.createElement('option'); typeOption.setAttribute('value', i); - utils.write(typeOption, Resources.get(types[i].description) + + write(typeOption, Resources.get(types[i].description) + ' (.' + types[i].extension + ')'); typeSelect.appendChild(typeOption); } @@ -2316,7 +2325,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) // Adds listener for double click handling on background mxEvent.addListener(this.backgroundPageShape.node, 'dblclick', - utils.bind(this, function(evt) + this.bind(function(evt) { graph.dblClick(evt); }) @@ -2325,11 +2334,11 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) // Adds basic listeners for graph event dispatching outside of the // container and finishing the handling of a single gesture mxEvent.addGestureListeners(this.backgroundPageShape.node, - utils.bind(this, function(evt) + this.bind(function(evt) { graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new InternalMouseEvent(evt)); }), - utils.bind(this, function(evt) + this.bind(function(evt) { // Hides the tooltip if mouse is outside container if (graph.tooltipHandler != null && graph.tooltipHandler.isHideOnHover()) @@ -2342,7 +2351,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new InternalMouseEvent(evt)); } }), - utils.bind(this, function(evt) + this.bind(function(evt) { graph.fireMouseEvent(mxEvent.MOUSE_UP, new InternalMouseEvent(evt)); }) @@ -2405,8 +2414,8 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) } // Computes the offset to maintain origin for grid - position = -Math.round(phase - utils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' + - -Math.round(phase - utils.mod(this.translate.y * this.scale - y0, phase)) + 'px'; + position = -Math.round(phase - mod(this.translate.x * this.scale - x0, phase)) + 'px ' + + -Math.round(phase - mod(this.translate.y * this.scale - y0, phase)) + 'px'; } let canvas = graph.view.canvas; @@ -2483,8 +2492,8 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) } let phase = this.gridSize * this.view.scale * this.view.gridSteps; - let position = -Math.round(phase - utils.mod(this.view.translate.x * this.view.scale + dx, phase)) + 'px ' + - -Math.round(phase - utils.mod(this.view.translate.y * this.view.scale + dy, phase)) + 'px'; + let position = -Math.round(phase - mod(this.view.translate.x * this.view.scale + dx, phase)) + 'px ' + + -Math.round(phase - mod(this.view.translate.y * this.view.scale + dy, phase)) + 'px'; canvas.style.backgroundPosition = position; } }; @@ -2521,7 +2530,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) this.verticalPageBreaks = []; } - let drawPageBreaks = utils.bind(this, function(breaks) + let drawPageBreaks = this.bind(function(breaks) { if (breaks != null) { @@ -2596,7 +2605,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) { let marker = mxConnectionHandlerCreateMarker.apply(this, arguments); - marker.intersects = utils.bind(this, function(state, evt) + marker.intersects = this.bind(function(state, evt) { if (this.isConnecting()) { @@ -2653,7 +2662,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types) graphPanGraph.apply(this, arguments); if ((this.dialect != mxConstants.DIALECT_SVG && this.view.backgroundPageShape != null) && - (!this.useScrollbarsForPanning || !utils.hasScrollbars(this.container))) + (!this.useScrollbarsForPanning || !hasScrollbars(this.container))) { this.view.backgroundPageShape.node.style.marginLeft = dx + 'px'; this.view.backgroundPageShape.node.style.marginTop = dy + 'px'; diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js index 12892a50c..ec2183fe5 100644 --- a/docs/stashed/grapheditor/www/js/EditorUi.js +++ b/docs/stashed/grapheditor/www/js/EditorUi.js @@ -1,6 +1,20 @@ /** * Copyright (c) 2006-2012, JGraph Ltd */ +const { popup } = require('../../../../../packages/core/src/util/gui/mxWindow'); +const { clearSelection } = require('../../../../../packages/core/src/util/DomUtils'); +const { htmlEntities } = require('../../../../../packages/core/src/util/StringUtils'); +const { getXml } = require('../../../../../packages/core/src/util/XmlUtils'); +const { parseXml } = require('../../../../../packages/core/src/util/XmlUtils'); +const { setOpacity } = require('../../../../../packages/core/src/util/Utils'); +const { hasScrollbars } = require('../../../../../packages/core/src/util/Utils'); +const { setPrefixedStyle } = require('../../../../../packages/core/src/util/Utils'); +const { convertPoint } = require('../../../../../packages/core/src/util/Utils'); +const { getValue } = require('../../../../../packages/core/src/util/Utils'); +const { setStyle } = require('../../../../../packages/core/src/util/Utils'); +const { getCurrentStyle } = require('../../../../../packages/core/src/util/Utils'); +const { getOffset } = require('../../../../../packages/core/src/util/Utils'); +const { clone } = require('../../../../../packages/core/src/util/CloneUtils'); /** * Constructs a new graph editor */ @@ -14,8 +28,8 @@ EditorUi = function(editor, container, lightbox) let graph = this.editor.graph; graph.lightbox = lightbox; - this.initialDefaultVertexStyle = utils.clone(graph.defaultVertexStyle); - this.initialDefaultEdgeStyle = utils.clone(graph.defaultEdgeStyle); + this.initialDefaultVertexStyle = clone(graph.defaultVertexStyle); + this.initialDefaultEdgeStyle = clone(graph.defaultEdgeStyle); // Faster scrollwheel zoom is possible with CSS transforms if (graph.useCssTransforms) @@ -61,7 +75,7 @@ EditorUi = function(editor, container, lightbox) this.refresh(); // Disables HTML and text selection - let textEditing = utils.bind(this, function(evt) + let textEditing = this.bind(function(evt) { if (evt == null) { @@ -163,9 +177,9 @@ EditorUi = function(editor, container, lightbox) } // Adds tooltip when mouse is over scrollbars to show space-drag panning option - mxEvent.addListener(this.diagramContainer, 'mousemove', utils.bind(this, function(evt) + mxEvent.addListener(this.diagramContainer, 'mousemove', this.bind(function(evt) { - let off = utils.getOffset(this.diagramContainer); + let off = getOffset(this.diagramContainer); if (mxEvent.getClientX(evt) - off.x - this.diagramContainer.clientWidth > 0 || mxEvent.getClientY(evt) - off.y - this.diagramContainer.clientHeight > 0) @@ -189,7 +203,7 @@ EditorUi = function(editor, container, lightbox) return spaceKeyPressed || hoverIconsIsResetEvent.apply(this, arguments); }; - this.keydownHandler = utils.bind(this, function(evt) + this.keydownHandler = this.bind(function(evt) { if (evt.which == 32 /* Space */ && !graph.isEditing()) { @@ -211,7 +225,7 @@ EditorUi = function(editor, container, lightbox) mxEvent.addListener(document, 'keydown', this.keydownHandler); - this.keyupHandler = utils.bind(this, function(evt) + this.keyupHandler = this.bind(function(evt) { graph.container.style.cursor = ''; spaceKeyPressed = false; @@ -257,7 +271,7 @@ EditorUi = function(editor, container, lightbox) let sizeMenu = null; let nodes = null; - let updateToolbar = utils.bind(this, function() + let updateToolbar = this.bind(function() { if (this.toolbar != null && textMode != graph.cellEditor.isContentEditing()) { @@ -268,7 +282,7 @@ EditorUi = function(editor, container, lightbox) { let tmp = node.nextSibling; - if (utils.indexOf(this.toolbar.staticElements, node) < 0) + if (this.toolbar.staticElements.indexOf(node) < 0) { node.parentNode.removeChild(node); newNodes.push(node); @@ -329,7 +343,7 @@ EditorUi = function(editor, container, lightbox) if (node != null) { - let css = utils.getCurrentStyle(node); + let css = getCurrentStyle(node); if (css != null && ui.toolbar != null) { @@ -401,14 +415,14 @@ EditorUi = function(editor, container, lightbox) // Installs context menu if (this.menus != null) { - graph.popupMenuHandler.factoryMethod = utils.bind(this, function(menu, cell, evt) + graph.popupMenuHandler.factoryMethod = this.bind(function(menu, cell, evt) { this.menus.createPopupMenu(menu, cell, evt); }); } // Hides context menu - mxEvent.addGestureListeners(document, utils.bind(this, function(evt) + mxEvent.addGestureListeners(document, this.bind(function(evt) { graph.popupMenuHandler.hideMenu(); })); @@ -500,8 +514,8 @@ EditorUi = function(editor, container, lightbox) this.clearDefaultStyle = function() { - graph.currentEdgeStyle = utils.clone(graph.defaultEdgeStyle); - graph.currentVertexStyle = utils.clone(graph.defaultVertexStyle); + graph.currentEdgeStyle = clone(graph.defaultEdgeStyle); + graph.currentVertexStyle = clone(graph.defaultVertexStyle); // Updates UI this.fireEvent(new EventObject('styleChanged', 'keys', [], 'values', [], 'cells', [])); @@ -536,7 +550,7 @@ EditorUi = function(editor, container, lightbox) for (let i = 0; i < connectStyles.length; i++) { - if (utils.indexOf(styles, connectStyles[i]) < 0) + if (styles.indexOf(connectStyles[i]) < 0) { styles.push(connectStyles[i]); } @@ -576,7 +590,7 @@ EditorUi = function(editor, container, lightbox) if (pos >= 0) { let key = tmp.substring(0, pos); - let index = utils.indexOf(appliedStyles, key); + let index = indexOf(appliedStyles, key); if (index >= 0) { @@ -588,11 +602,11 @@ EditorUi = function(editor, container, lightbox) { let group = keyGroups[k]; - if (utils.indexOf(group, key) >= 0) + if (group.indexOf(key) >= 0) { for (let l = 0; l < group.length; l++) { - var index2 = utils.indexOf(appliedStyles, group[l]); + var index2 = appliedStyles.indexOf(group[l]); if (index2 >= 0) { @@ -618,9 +632,9 @@ EditorUi = function(editor, container, lightbox) if (styleValue != null && (key != 'shape' || edge)) { // Special case: Connect styles are not applied here but in the connection handler - if (!edge || utils.indexOf(connectStyles, key) < 0) + if (!edge || connectStyles.indexOf(key) < 0) { - newStyle = utils.setStyle(newStyle, key, styleValue); + newStyle = setStyle(newStyle, key, styleValue); } } } @@ -658,7 +672,7 @@ EditorUi = function(editor, container, lightbox) insertHandler(cells); }); - this.addListener('styleChanged', utils.bind(this, function(sender, evt) + this.addListener('styleChanged', this.bind(function(sender, evt) { // Checks if edges and/or vertices were modified let cells = evt.getProperty('cells'); @@ -689,15 +703,15 @@ EditorUi = function(editor, container, lightbox) for (let i = 0; i < keys.length; i++) { - let common = utils.indexOf(valueStyles, keys[i]) >= 0; + let common = valueStyles.indexOf(keys[i]) >= 0; // Ignores transparent stroke colors if (keys[i] != 'strokeColor' || (values[i] != null && values[i] != 'none')) { // Special case: Edge style and shape - if (utils.indexOf(connectStyles, keys[i]) >= 0) + if (connectStyles.indexOf(keys[i]) >= 0) { - if (edge || utils.indexOf(alwaysEdgeStyles, keys[i]) >= 0) + if (edge || alwaysEdgeStyles.indexOf(keys[i]) >= 0) { if (values[i] == null) { @@ -709,7 +723,7 @@ EditorUi = function(editor, container, lightbox) } } // Uses style for vertex if defined in styles - else if (vertex && utils.indexOf(styles, keys[i]) >= 0) + else if (vertex && styles.indexOf(keys[i]) >= 0) { if (values[i] == null) { @@ -721,7 +735,7 @@ EditorUi = function(editor, container, lightbox) } } } - else if (utils.indexOf(styles, keys[i]) >= 0) + else if (styles.indexOf(keys[i]) >= 0) { if (vertex || common) { @@ -735,7 +749,7 @@ EditorUi = function(editor, container, lightbox) } } - if (edge || common || utils.indexOf(alwaysEdgeStyles, keys[i]) >= 0) + if (edge || common || alwaysEdgeStyles.indexOf(keys[i]) >= 0) { if (values[i] == null) { @@ -819,7 +833,7 @@ EditorUi = function(editor, container, lightbox) lineStartDiv.className = this.getCssClassForMarker('start', graph.currentEdgeStyle['shape'], graph.currentEdgeStyle.startArrow, - utils.getValue(graph.currentEdgeStyle, 'startFill', '1')); + getValue(graph.currentEdgeStyle, 'startFill', '1')); } // Updates icon for optinal line end shape @@ -829,7 +843,7 @@ EditorUi = function(editor, container, lightbox) lineEndDiv.className = this.getCssClassForMarker('end', graph.currentEdgeStyle['shape'], graph.currentEdgeStyle.endArrow, - utils.getValue(graph.currentEdgeStyle, 'endFill', '1')); + getValue(graph.currentEdgeStyle, 'endFill', '1')); } } })); @@ -837,7 +851,7 @@ EditorUi = function(editor, container, lightbox) // Update font size and font family labels if (this.toolbar != null) { - let update = utils.bind(this, function() + let update = this.bind(function() { let ff = graph.currentVertexStyle['fontFamily'] || 'Helvetica'; let fs = String(graph.currentVertexStyle['fontSize'] || '12'); @@ -875,7 +889,7 @@ EditorUi = function(editor, container, lightbox) }); // Global handler to hide the current menu - this.gestureHandler = utils.bind(this, function(evt) + this.gestureHandler = this.bind(function(evt) { if (this.currentMenu != null && mxEvent.getSource(evt) != this.currentMenu.div) { @@ -888,9 +902,9 @@ EditorUi = function(editor, container, lightbox) // Updates the editor UI after the window has been resized or the orientation changes // Timeout is workaround for old IE versions which have a delay for DOM client sizes. // Should not use delay > 0 to avoid handle multiple repaints during window resize - this.resizeHandler = utils.bind(this, function() + this.resizeHandler = this.bind(function() { - window.setTimeout(utils.bind(this, function() + window.setTimeout(this.bind(function() { if (this.editor.graph != null) { @@ -901,7 +915,7 @@ EditorUi = function(editor, container, lightbox) mxEvent.addListener(window, 'resize', this.resizeHandler); - this.orientationChangeHandler = utils.bind(this, function() + this.orientationChangeHandler = this.bind(function() { this.refresh(); }); @@ -912,7 +926,7 @@ EditorUi = function(editor, container, lightbox) // http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue if (mxClient.IS_IOS && !window.navigator.standalone) { - this.scrollHandler = utils.bind(this, function() + this.scrollHandler = this.bind(function() { window.scrollTo(0, 0); }); @@ -923,7 +937,7 @@ EditorUi = function(editor, container, lightbox) /** * Sets the initial scrollbar locations after a file was loaded. */ - this.editor.addListener('resetGraphView', utils.bind(this, function() + this.editor.addListener('resetGraphView', this.bind(function() { this.resetScrollbars(); })); @@ -931,12 +945,12 @@ EditorUi = function(editor, container, lightbox) /** * Repaints the grid. */ - this.addListener('gridEnabledChanged', utils.bind(this, function() + this.addListener('gridEnabledChanged', this.bind(function() { graph.view.validateBackground(); })); - this.addListener('backgroundColorChanged', utils.bind(this, function() + this.addListener('backgroundColorChanged', this.bind(function() { graph.view.validateBackground(); })); @@ -944,7 +958,7 @@ EditorUi = function(editor, container, lightbox) /** * Repaints the grid. */ - graph.addListener('gridSizeChanged', utils.bind(this, function() + graph.addListener('gridSizeChanged', this.bind(function() { if (graph.isGridEnabled()) { @@ -965,7 +979,7 @@ EditorUi = function(editor, container, lightbox) }; // Extends mxEventSource -utils.extend(EditorUi, EventSource); +extend(EditorUi, EventSource); /** * Global config that specifies if the compact UI elements should be used. @@ -1048,7 +1062,7 @@ EditorUi.prototype.init = function() } // Hides tooltips and connection points when scrolling - mxEvent.addListener(graph.container, 'scroll', utils.bind(this, function() + mxEvent.addListener(graph.container, 'scroll', this.bind(function() { graph.tooltipHandler.hide(); @@ -1059,7 +1073,7 @@ EditorUi.prototype.init = function() })); // Hides tooltip on escape - graph.addListener(mxEvent.ESCAPE, utils.bind(this, function() + graph.addListener(mxEvent.ESCAPE, this.bind(function() { graph.tooltipHandler.hide(); let rb = graph.getRubberband(); @@ -1070,12 +1084,12 @@ EditorUi.prototype.init = function() } })); - mxEvent.addListener(graph.container, 'keydown', utils.bind(this, function(evt) + mxEvent.addListener(graph.container, 'keydown', this.bind(function(evt) { this.onKeyDown(evt); })); - mxEvent.addListener(graph.container, 'keypress', utils.bind(this, function(evt) + mxEvent.addListener(graph.container, 'keypress', this.bind(function(evt) { this.onKeyPress(evt); })); @@ -1084,12 +1098,12 @@ EditorUi.prototype.init = function() this.addUndoListener(); this.addBeforeUnloadListener(); - graph.getSelectionModel().addListener(mxEvent.CHANGE, utils.bind(this, function() + graph.getSelectionModel().addListener(mxEvent.CHANGE, this.bind(function() { this.updateActionStates(); })); - graph.getModel().addListener(mxEvent.CHANGE, utils.bind(this, function() + graph.getModel().addListener(mxEvent.CHANGE, this.bind(function() { this.updateActionStates(); })); @@ -1127,7 +1141,7 @@ EditorUi.prototype.installShapePicker = function() let ui = this; // Uses this event to process mouseDown to check the selection state before it is changed - graph.addListener(mxEvent.FIRE_MOUSE_EVENT, utils.bind(this, function(sender, evt) + graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.bind(function(sender, evt) { if (evt.getProperty('eventName') == 'mouseDown') { @@ -1135,17 +1149,17 @@ EditorUi.prototype.installShapePicker = function() } })); - graph.addListener(mxEvent.ESCAPE, utils.bind(this, function() + graph.addListener(mxEvent.ESCAPE, this.bind(function() { ui.hideShapePicker(true); })); - graph.getSelectionModel().addListener(mxEvent.CHANGE, utils.bind(this, function() + graph.getSelectionModel().addListener(mxEvent.CHANGE, this.bind(function() { ui.hideShapePicker(true); })); - graph.getModel().addListener(mxEvent.CHANGE, utils.bind(this, function() + graph.getModel().addListener(mxEvent.CHANGE, this.bind(function() { ui.hideShapePicker(true); })); @@ -1168,10 +1182,10 @@ EditorUi.prototype.installShapePicker = function() if (cell == null && ui.sidebar != null && !mxEvent.isShiftDown(evt)) { mxEvent.consume(evt); - let pt = utils.convertPoint(this.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); + let pt = convertPoint(this.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt)); // Asynchronous to avoid direct insert after double tap - window.setTimeout(utils.bind(this, function() + window.setTimeout(this.bind(function() { ui.showShapePicker(pt.x, pt.y); }), 30); @@ -1201,7 +1215,7 @@ EditorUi.prototype.installShapePicker = function() if (!this.graph.isCloneEvent(evt) && !mxEvent.isShiftDown(evt)) { - this.graph.connectVertex(state.cell, dir, this.graph.defaultEdgeLength, evt, null, null, utils.bind(this, function(x, y, execute) + this.graph.connectVertex(state.cell, dir, this.graph.defaultEdgeLength, evt, null, null, this.bind(function(x, y, execute) { let temp = graph.getCompositeParent(state.cell); let geo = temp.getGeometry(); @@ -1215,14 +1229,14 @@ EditorUi.prototype.installShapePicker = function() } // Asynchronous to avoid direct insert after double tap - window.setTimeout(utils.bind(this, function() + window.setTimeout(this.bind(function() { - ui.showShapePicker(me.getGraphX(), me.getGraphY(), temp, utils.bind(this, function(cell) + ui.showShapePicker(me.getGraphX(), me.getGraphY(), temp, this.bind(function(cell) { execute(cell); }), dir); }), 30); - }), utils.bind(this, function(result) + }), this.bind(function(result) { this.graph.selectCellsForConnectVertex(result, evt, this); })); @@ -1257,7 +1271,7 @@ EditorUi.prototype.showShapePicker = function(x, y, source, callback, direction) div.style.cssText = 'position:absolute;left:' + x + 'px;top:' + y + 'px;width:140px;border-radius:10px;padding:4px;text-align:center;' + 'box-shadow:0px 0px 3px 1px #d1d1d1;padding: 6px 0 8px 0;'; - utils.setPrefixedStyle(div.style, 'transform', 'translate(-22px,-22px)'); + setPrefixedStyle(div.style, 'transform', 'translate(-22px,-22px)'); if (graph.background != null && graph.background != mxConstants.NONE) { @@ -1266,7 +1280,7 @@ EditorUi.prototype.showShapePicker = function(x, y, source, callback, direction) graph.container.appendChild(div); - let addCell = utils.bind(this, function(cell) + let addCell = this.bind(function(cell) { // Wrapper needed to catch events let node = document.createElement('a'); @@ -1350,7 +1364,7 @@ EditorUi.prototype.showShapePicker = function(x, y, source, callback, direction) */ EditorUi.prototype.getCellsForShapePicker = function(cell) { - let createVertex = utils.bind(this, function(style, w, h, value) + let createVertex = this.bind(function(style, w, h, value) { return this.editor.graph.createVertex(null, null, value || '', 0, 0, w || 120, h || 60, style, false); }); @@ -1767,7 +1781,7 @@ EditorUi.prototype.initCanvas = function() if (this.editor.isChromelessView()) { - resize = utils.bind(this, function(autoscale, maxScale, cx, cy) + resize = this.bind(function(autoscale, maxScale, cx, cy) { if (graph.container != null && !graph.isViewer()) { @@ -1775,7 +1789,7 @@ EditorUi.prototype.initCanvas = function() cy = (cy != null) ? cy : 0; let bds = (graph.pageVisible) ? graph.view.getBackgroundPageBounds() : graph.getGraphBounds(); - let scroll = utils.hasScrollbars(graph.container); + let scroll = hasScrollbars(graph.container); let tr = graph.view.translate; let s = graph.view.scale; @@ -1821,13 +1835,13 @@ EditorUi.prototype.initCanvas = function() this.chromelessResize = resize; // Hook for subclassers for override - this.chromelessWindowResize = utils.bind(this, function() + this.chromelessWindowResize = this.bind(function() { this.chromelessResize(false); }); // Removable resize listener - let autoscaleResize = utils.bind(this, function() + let autoscaleResize = this.bind(function() { this.chromelessWindowResize(false); }); @@ -1839,17 +1853,17 @@ EditorUi.prototype.initCanvas = function() mxEvent.removeListener(window, 'resize', autoscaleResize); }); - this.editor.addListener('resetGraphView', utils.bind(this, function() + this.editor.addListener('resetGraphView', this.bind(function() { this.chromelessResize(true); })); - this.actions.get('zoomIn').funct = utils.bind(this, function(evt) + this.actions.get('zoomIn').funct = this.bind(function(evt) { graph.zoomIn(); this.chromelessResize(false); }); - this.actions.get('zoomOut').funct = utils.bind(this, function(evt) + this.actions.get('zoomOut').funct = this.bind(function(evt) { graph.zoomOut(); this.chromelessResize(false); @@ -1870,12 +1884,12 @@ EditorUi.prototype.initCanvas = function() this.chromelessToolbar.style.padding = '10px 10px 8px 10px'; this.chromelessToolbar.style.left = (graph.isViewer()) ? '0' : '50%'; - utils.setPrefixedStyle(this.chromelessToolbar.style, 'borderRadius', '20px'); - utils.setPrefixedStyle(this.chromelessToolbar.style, 'transition', 'opacity 600ms ease-in-out'); + setPrefixedStyle(this.chromelessToolbar.style, 'borderRadius', '20px'); + setPrefixedStyle(this.chromelessToolbar.style, 'transition', 'opacity 600ms ease-in-out'); - let updateChromelessToolbarPosition = utils.bind(this, function() + let updateChromelessToolbarPosition = this.bind(function() { - let css = utils.getCurrentStyle(graph.container); + let css = getCurrentStyle(graph.container); if (graph.isViewer()) { @@ -1893,7 +1907,7 @@ EditorUi.prototype.initCanvas = function() let btnCount = 0; - let addButton = utils.bind(this, function(fn, imgSrc, tip) + let addButton = this.bind(function(fn, imgSrc, tip) { btnCount++; @@ -1920,7 +1934,7 @@ EditorUi.prototype.initCanvas = function() if (toolbarConfig.backBtn != null) { - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { window.location.href = toolbarConfig.backBtn.url; mxEvent.consume(evt); @@ -1929,7 +1943,7 @@ EditorUi.prototype.initCanvas = function() if (this.isPagesEnabled()) { - let prevButton = addButton(utils.bind(this, function(evt) + let prevButton = addButton(this.bind(function(evt) { this.actions.get('previousPage').funct(); mxEvent.consume(evt); @@ -1944,18 +1958,18 @@ EditorUi.prototype.initCanvas = function() pageInfo.style.color = '#ffffff'; this.chromelessToolbar.appendChild(pageInfo); - let nextButton = addButton(utils.bind(this, function(evt) + let nextButton = addButton(this.bind(function(evt) { this.actions.get('nextPage').funct(); mxEvent.consume(evt); }), Editor.nextLargeImage, Resources.get('nextPage')); - let updatePageInfo = utils.bind(this, function() + let updatePageInfo = this.bind(function() { if (this.pages != null && this.pages.length > 1 && this.currentPage != null) { pageInfo.innerHTML = ''; - utils.write(pageInfo, (utils.indexOf(this.pages, this.currentPage) + 1) + ' / ' + this.pages.length); + write(pageInfo, (indexOf(this.pages, this.currentPage) + 1) + ' / ' + this.pages.length); } }); @@ -1964,7 +1978,7 @@ EditorUi.prototype.initCanvas = function() nextButton.style.paddingLeft = '4px'; nextButton.style.paddingRight = '0px'; - let updatePageButtons = utils.bind(this, function() + let updatePageButtons = this.bind(function() { if (this.pages != null && this.pages.length > 1 && this.currentPage != null) { @@ -1986,19 +2000,19 @@ EditorUi.prototype.initCanvas = function() this.editor.addListener('pageSelected', updatePageInfo); } - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { this.actions.get('zoomOut').funct(); mxEvent.consume(evt); }), Editor.zoomOutLargeImage, Resources.get('zoomOut') + ' (Alt+Mousewheel)'); - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { this.actions.get('zoomIn').funct(); mxEvent.consume(evt); }), Editor.zoomInLargeImage, Resources.get('zoomIn') + ' (Alt+Mousewheel)'); - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { if (graph.isLightboxView()) { @@ -2025,7 +2039,7 @@ EditorUi.prototype.initCanvas = function() let fadeThread = null; var fadeThread2 = null; - let fadeOut = utils.bind(this, function(delay) + let fadeOut = this.bind(function(delay) { if (fadeThread != null) { @@ -2039,12 +2053,12 @@ EditorUi.prototype.initCanvas = function() fadeThread2 = null; } - fadeThread = window.setTimeout(utils.bind(this, function() + fadeThread = window.setTimeout(this.bind(function() { - utils.setOpacity(this.chromelessToolbar, 0); + setOpacity(this.chromelessToolbar, 0); fadeThread = null; - fadeThread2 = window.setTimeout(utils.bind(this, function() + fadeThread2 = window.setTimeout(this.bind(function() { this.chromelessToolbar.style.display = 'none'; fadeThread2 = null; @@ -2052,7 +2066,7 @@ EditorUi.prototype.initCanvas = function() }), delay || 200); }); - let fadeIn = utils.bind(this, function(opacity) + let fadeIn = this.bind(function(opacity) { if (fadeThread != null) { @@ -2067,14 +2081,14 @@ EditorUi.prototype.initCanvas = function() } this.chromelessToolbar.style.display = ''; - utils.setOpacity(this.chromelessToolbar, opacity || 30); + setOpacity(this.chromelessToolbar, opacity || 30); }); if (urlParams['layers'] == '1') { this.layersDialog = null; - let layersButton = addButton(utils.bind(this, function(evt) + let layersButton = addButton(this.bind(function(evt) { if (this.layersDialog != null) { @@ -2085,7 +2099,7 @@ EditorUi.prototype.initCanvas = function() { this.layersDialog = graph.createLayersDialog(); - mxEvent.addListener(this.layersDialog, 'mouseleave', utils.bind(this, function() + mxEvent.addListener(this.layersDialog, 'mouseleave', this.bind(function() { this.layersDialog.parentNode.removeChild(this.layersDialog); this.layersDialog = null; @@ -2093,20 +2107,20 @@ EditorUi.prototype.initCanvas = function() let r = layersButton.getBoundingClientRect(); - utils.setPrefixedStyle(this.layersDialog.style, 'borderRadius', '5px'); + setPrefixedStyle(this.layersDialog.style, 'borderRadius', '5px'); this.layersDialog.style.position = 'fixed'; this.layersDialog.style.fontFamily = 'Helvetica,Arial'; this.layersDialog.style.backgroundColor = '#000000'; this.layersDialog.style.width = '160px'; this.layersDialog.style.padding = '4px 2px 4px 2px'; this.layersDialog.style.color = '#ffffff'; - utils.setOpacity(this.layersDialog, 70); + setOpacity(this.layersDialog, 70); this.layersDialog.style.left = r.left + 'px'; this.layersDialog.style.bottom = parseInt(this.chromelessToolbar.style.bottom) + this.chromelessToolbar.offsetHeight + 4 + 'px'; // Puts the dialog on top of the container z-index - let style = utils.getCurrentStyle(this.editor.graph.container); + let style = getCurrentStyle(this.editor.graph.container); this.layersDialog.style.zIndex = style.zIndex; document.body.appendChild(this.layersDialog); @@ -2131,7 +2145,7 @@ EditorUi.prototype.initCanvas = function() if (this.editor.editButtonLink != null || this.editor.editButtonFunc != null) { - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { if (this.editor.editButtonFunc != null) { @@ -2161,7 +2175,7 @@ EditorUi.prototype.initCanvas = function() if (toolbarConfig.refreshBtn != null) { - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { if (toolbarConfig.refreshBtn.url) { @@ -2178,7 +2192,7 @@ EditorUi.prototype.initCanvas = function() if (toolbarConfig.fullscreenBtn != null && window.self !== window.top) { - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { if (toolbarConfig.fullscreenBtn.url) { @@ -2197,7 +2211,7 @@ EditorUi.prototype.initCanvas = function() (graph.lightbox && (urlParams['close'] == '1' || this.container != document.body))) { - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { if (urlParams['close'] == '1' || toolbarConfig.closeBtn) { @@ -2216,12 +2230,12 @@ EditorUi.prototype.initCanvas = function() if (!graph.isViewer()) { - utils.setPrefixedStyle(this.chromelessToolbar.style, 'transform', 'translate(-50%,0)'); + setPrefixedStyle(this.chromelessToolbar.style, 'transform', 'translate(-50%,0)'); } graph.container.appendChild(this.chromelessToolbar); - mxEvent.addListener(graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', utils.bind(this, function(evt) + mxEvent.addListener(graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', this.bind(function(evt) { if (!mxEvent.isTouchEvent(evt)) { @@ -2239,7 +2253,7 @@ EditorUi.prototype.initCanvas = function() mxEvent.consume(evt); }); - mxEvent.addListener(this.chromelessToolbar, 'mouseenter', utils.bind(this, function(evt) + mxEvent.addListener(this.chromelessToolbar, 'mouseenter', this.bind(function(evt) { if (!mxEvent.isShiftDown(evt)) { @@ -2251,7 +2265,7 @@ EditorUi.prototype.initCanvas = function() } })); - mxEvent.addListener(this.chromelessToolbar, 'mousemove', utils.bind(this, function(evt) + mxEvent.addListener(this.chromelessToolbar, 'mousemove', bind(this, function(evt) { if (!mxEvent.isShiftDown(evt)) { @@ -2265,7 +2279,7 @@ EditorUi.prototype.initCanvas = function() mxEvent.consume(evt); })); - mxEvent.addListener(this.chromelessToolbar, 'mouseleave', utils.bind(this, function(evt) + mxEvent.addListener(this.chromelessToolbar, 'mouseleave', bind(this, function(evt) { if (!mxEvent.isTouchEvent(evt)) { @@ -2329,7 +2343,7 @@ EditorUi.prototype.initCanvas = function() let graphViewValidate = graph.view.validate; graph.view.validate = function() { - if (this.graph.container != null && utils.hasScrollbars(this.graph.container)) + if (this.graph.container != null && hasScrollbars(this.graph.container)) { let pad = this.graph.getPagePadding(); let size = this.graph.getPageSize(); @@ -2351,7 +2365,7 @@ EditorUi.prototype.initCanvas = function() graph.sizeDidChange = function() { - if (this.container != null && utils.hasScrollbars(this.container)) + if (this.container != null && hasScrollbars(this.container)) { let pages = this.getPageLayout(); let pad = this.getPagePadding(); @@ -2429,15 +2443,15 @@ EditorUi.prototype.initCanvas = function() { if (!graph.isMouseDown || forcedZoom) { - updateZoomTimeout = window.setTimeout(utils.bind(this, function() + updateZoomTimeout = window.setTimeout(this.bind(function() { if (graph.isFastZoomEnabled()) { // Transforms background page if (graph.view.backgroundPageShape != null && graph.view.backgroundPageShape.node != null) { - utils.setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform-origin', null); - utils.setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform', null); + setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform-origin', null); + setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform', null); } // Transforms graph and background image @@ -2468,7 +2482,7 @@ EditorUi.prototype.initCanvas = function() } let sp = new Point(graph.container.scrollLeft, graph.container.scrollTop); - let offset = utils.getOffset(graph.container); + let offset = getOffset(graph.container); let prev = graph.view.scale; let dx = 0; let dy = 0; @@ -2496,7 +2510,7 @@ EditorUi.prototype.initCanvas = function() dy * (graph.cumulativeZoomFactor - 1)); } - if (utils.hasScrollbars(graph.container) && (dx != 0 || dy != 0)) + if (hasScrollbars(graph.container) && (dx != 0 || dy != 0)) { graph.container.scrollLeft -= dx * (graph.cumulativeZoomFactor - 1); graph.container.scrollTop -= dy * (graph.cumulativeZoomFactor - 1); @@ -2586,14 +2600,14 @@ EditorUi.prototype.initCanvas = function() { let page = graph.view.backgroundPageShape.node; - utils.setPrefixedStyle(page.style, 'transform-origin', + setPrefixedStyle(page.style, 'transform-origin', ((ignoreCursorPosition) ? ((graph.container.clientWidth / 2 + graph.container.scrollLeft - page.offsetLeft) + 'px') : ((cursorPosition.x + graph.container.scrollLeft - page.offsetLeft - graph.container.offsetLeft) + 'px')) + ' ' + ((ignoreCursorPosition) ? ((graph.container.clientHeight / 2 + graph.container.scrollTop - page.offsetTop) + 'px') : ((cursorPosition.y + graph.container.scrollTop - page.offsetTop - graph.container.offsetTop) + 'px'))); - utils.setPrefixedStyle(page.style, 'transform', + setPrefixedStyle(page.style, 'transform', 'scale(' + this.cumulativeZoomFactor + ')'); } @@ -2633,7 +2647,7 @@ EditorUi.prototype.initCanvas = function() } }); - mxEvent.addMouseWheelListener(utils.bind(this, function(evt, up, force, cx, cy) + mxEvent.addMouseWheelListener(this.bind(function(evt, up, force, cx, cy) { if (this.dialogs == null || this.dialogs.length == 0) { @@ -2690,7 +2704,7 @@ EditorUi.prototype.initCanvas = function() */ EditorUi.prototype.addChromelessToolbarItems = function(addButton) { - addButton(utils.bind(this, function(evt) + addButton(this.bind(function(evt) { this.actions.get('print').funct(); mxEvent.consume(evt); @@ -2711,7 +2725,7 @@ EditorUi.prototype.isPagesEnabled = function() EditorUi.prototype.createTemporaryGraph = function(stylesheet) { let graph = new Graph(document.createElement('div')); - graph.stylesheet.styles = utils.clone(stylesheet.styles); + graph.stylesheet.styles = clone(stylesheet.styles); graph.resetViewOnRootChange = false; graph.setConnectable(false); graph.gridEnabled = false; @@ -2807,7 +2821,7 @@ EditorUi.prototype.isDiagramEmpty = function() EditorUi.prototype.isSelectionAllowed = function(evt) { return mxEvent.getSource(evt).nodeName == 'SELECT' || (mxEvent.getSource(evt).nodeName == 'INPUT' && - utils.isAncestorNode(this.formatContainer, mxEvent.getSource(evt))); + isAncestorNode(this.formatContainer, mxEvent.getSource(evt))); }; /** @@ -2818,7 +2832,7 @@ EditorUi.prototype.addBeforeUnloadListener = function() { // Installs dialog if browser window is closed without saving // This must be disabled during save and image export - window.onbeforeunload = utils.bind(this, function() + window.onbeforeunload = this.bind(function() { if (!this.editor.isChromelessView()) { @@ -2849,11 +2863,11 @@ EditorUi.prototype.open = function() { if (window.opener != null && window.opener.openFile != null) { - window.opener.openFile.setConsumer(utils.bind(this, function(xml, filename) + window.opener.openFile.setConsumer(this.bind(function(xml, filename) { try { - let doc = utils.parseXml(xml); + let doc = parseXml(xml); this.editor.setGraphXml(doc.documentElement); this.editor.setModified(false); this.editor.undoManager.clear(); @@ -2868,7 +2882,7 @@ EditorUi.prototype.open = function() } catch (e) { - utils.alert(Resources.get('invalidOrMissingFile') + ': ' + e.message); + alert(Resources.get('invalidOrMissingFile') + ': ' + e.message); } })); } @@ -2901,7 +2915,7 @@ EditorUi.prototype.showPopupMenu = function(fn, x, y, evt) menu.autoExpand = true; // Disables autoexpand and destroys menu when hidden - menu.hideMenu = utils.bind(this, function() + menu.hideMenu = this.bind(function() { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); menu.destroy(); @@ -3044,7 +3058,7 @@ EditorUi.prototype.canUndo = function() */ EditorUi.prototype.getEditBlankXml = function() { - return utils.getXml(this.editor.getGraphXml()); + return getXml(this.editor.getGraphXml()); }; /** @@ -3115,14 +3129,14 @@ EditorUi.prototype.resetScrollbars = function() graph.container.scrollTop = 0; graph.container.scrollLeft = 0; - if (!utils.hasScrollbars(graph.container)) + if (!hasScrollbars(graph.container)) { graph.view.setTranslate(0, 0); } } else if (!this.editor.isChromelessView()) { - if (utils.hasScrollbars(graph.container)) + if (hasScrollbars(graph.container)) { if (graph.pageVisible) { @@ -3181,7 +3195,7 @@ EditorUi.prototype.resetScrollbars = function() EditorUi.prototype.setPageVisible = function(value) { let graph = this.editor.graph; - let hasScrollbars = utils.hasScrollbars(graph.container); + let hasScrollbars = hasScrollbars(graph.container); let tx = 0; let ty = 0; @@ -3424,7 +3438,7 @@ EditorUi.prototype.addUndoListener = function() let undoMgr = this.editor.undoManager; - let undoListener = utils.bind(this, function() + let undoListener = this.bind(function() { undo.setEnabled(this.canUndo()); redo.setEnabled(this.canRedo()); @@ -3778,7 +3792,7 @@ EditorUi.prototype.createUi = function() this.statusContainer = this.createStatusContainer(); // Connects the status bar to the editor status - this.editor.addListener('statusChanged', utils.bind(this, function() + this.editor.addListener('statusChanged', this.bind(function() { this.setStatusText(this.editor.getStatus()); })); @@ -3841,7 +3855,7 @@ EditorUi.prototype.createUi = function() { this.container.appendChild(this.hsplit); - this.addSplitHandler(this.hsplit, true, 0, utils.bind(this, function(value) + this.addSplitHandler(this.hsplit, true, 0, this.bind(function(value) { this.hsplitPosition = value; this.refresh(); @@ -3927,7 +3941,7 @@ EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange) elt.style.touchAction = 'none'; } - let getValue = utils.bind(this, function() + let getValue = this.bind(function() { let result = parseInt(((horizontal) ? elt.style.left : elt.style.bottom)); @@ -3971,7 +3985,7 @@ EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange) mxEvent.consume(evt); }); - mxEvent.addListener(elt, 'click', utils.bind(this, function(evt) + mxEvent.addListener(elt, 'click', this.bind(function(evt) { if (!ignoreClick && this.hsplitClickEnabled) { @@ -4002,13 +4016,13 @@ EditorUi.prototype.handleError = function(resp, title, fn, invokeFnOnClose, notF if (e != null || title != null) { - let msg = utils.htmlEntities(Resources.get('unknownError')); + let msg = htmlEntities(Resources.get('unknownError')); let btn = Resources.get('ok'); title = (title != null) ? title : Resources.get('error'); if (e != null && e.message != null) { - msg = utils.htmlEntities(e.message); + msg = htmlEntities(e.message); } this.showError(title, msg, btn, fn, null, null, null, null, null, @@ -4072,7 +4086,7 @@ EditorUi.prototype.hideDialog = function(cancel, isEsc) if (this.dialog == null && this.editor.graph.container.style.visibility != 'hidden') { - window.setTimeout(utils.bind(this, function() + window.setTimeout(this.bind(function() { if (this.editor.graph.isEditing() && this.editor.graph.cellEditor.textarea != null) { @@ -4080,7 +4094,7 @@ EditorUi.prototype.hideDialog = function(cancel, isEsc) } else { - utils.clearSelection(); + clearSelection(); this.editor.graph.container.focus(); } }), 0); @@ -4152,7 +4166,7 @@ EditorUi.prototype.pickColor = function(color, apply) EditorUi.prototype.openFile = function() { // Closes dialog after open - window.openFile = new OpenFile(utils.bind(this, function(cancel) + window.openFile = new OpenFile(this.bind(function(cancel) { this.hideDialog(cancel); })); @@ -4209,16 +4223,16 @@ EditorUi.prototype.extractGraphModelFromEvent = function(evt) if (provider != null) { - data = (utils.indexOf(provider.types, 'text/html') >= 0) ? provider.getData('text/html') : null; + data = (provider.types.indexOf('text/html') >= 0) ? provider.getData('text/html') : null; - if (utils.indexOf(provider.types, 'text/plain' && (data == null || data.length == 0))) + if (provider.types.indexOf('text/plain') >= 0 && (data == null || data.length == 0))) { data = provider.getData('text/plain'); } if (data != null) { - data = Graph.zapGremlins(utils.trim(data)); + data = Graph.zapGremlins(trim(data)); // Tries parsing as HTML document with embedded XML let xml = this.extractGraphModelFromHtml(data); @@ -4259,17 +4273,17 @@ EditorUi.prototype.saveFile = function(forceDialog) } else { - let dlg = new FilenameDialog(this, this.editor.getOrCreateFilename(), Resources.get('save'), utils.bind(this, function(name) + let dlg = new FilenameDialog(this, this.editor.getOrCreateFilename(), Resources.get('save'), this.bind(function(name) { this.save(name); - }), null, utils.bind(this, function(name) + }), null, this.bind(function(name) { if (name != null && name.length > 0) { return true; } - utils.confirm(Resources.get('invalidName')); + confirm(Resources.get('invalidName')); return false; })); @@ -4290,20 +4304,20 @@ EditorUi.prototype.save = function(name) this.editor.graph.stopEditing(); } - let xml = utils.getXml(this.editor.getGraphXml()); + let xml = getXml(this.editor.getGraphXml()); try { if (Editor.useLocalStorage) { if (localStorage.getItem(name) != null && - !utils.confirm(Resources.get('replaceIt', [name]))) + !confirm(Resources.get('replaceIt', [name]))) { return; } localStorage.setItem(name, xml); - this.editor.setStatus(utils.htmlEntities(Resources.get('saved')) + ' ' + new Date()); + this.editor.setStatus(htmlEntities(Resources.get('saved')) + ' ' + new Date()); } else { @@ -4314,8 +4328,8 @@ EditorUi.prototype.save = function(name) } else { - utils.alert(Resources.get('drawingTooLarge')); - utils.popup(xml); + alert(Resources.get('drawingTooLarge')); + popup(xml); return; } @@ -4327,7 +4341,7 @@ EditorUi.prototype.save = function(name) } catch (e) { - this.editor.setStatus(utils.htmlEntities(Resources.get('errorSavingFile'))); + this.editor.setStatus(htmlEntities(Resources.get('errorSavingFile'))); } } }; @@ -4359,7 +4373,7 @@ EditorUi.prototype.executeLayout = function(exec, animate, post) { // New API for animating graph layout results asynchronously let morph = new mxMorphing(graph); - morph.addListener(mxEvent.DONE, utils.bind(this, function() + morph.addListener(mxEvent.DONE, this.bind(function() { graph.getModel().endUpdate(); @@ -4391,7 +4405,7 @@ EditorUi.prototype.showImageDialog = function(title, value, fn, ignoreExisting) { let cellEditor = this.editor.graph.cellEditor; let selState = cellEditor.saveSelection(); - let newValue = utils.prompt(title, value); + let newValue = prompt(title, value); cellEditor.restoreSelection(selState); if (newValue != null && newValue.length > 0) @@ -4405,7 +4419,7 @@ EditorUi.prototype.showImageDialog = function(title, value, fn, ignoreExisting) img.onerror = function() { fn(null); - utils.alert(Resources.get('fileNotFound')); + alert(Resources.get('fileNotFound')); }; img.src = newValue; @@ -4444,7 +4458,7 @@ EditorUi.prototype.showDataDialog = function(cell) */ EditorUi.prototype.showBackgroundImageDialog = function(apply, img) { - apply = (apply != null) ? apply : utils.bind(this, function(image) + apply = (apply != null) ? apply : this.bind(function(image) { let change = new ChangePageSetup(this, null, image); change.ignoreColor = true; @@ -4452,7 +4466,7 @@ EditorUi.prototype.showBackgroundImageDialog = function(apply, img) this.editor.graph.model.execute(change); }); - let newValue = utils.prompt(Resources.get('backgroundImage'), (img != null) ? img.src : ''); + let newValue = prompt(Resources.get('backgroundImage'), (img != null) ? img.src : ''); if (newValue != null && newValue.length > 0) { @@ -4465,7 +4479,7 @@ EditorUi.prototype.showBackgroundImageDialog = function(apply, img) img.onerror = function() { apply(null, true); - utils.alert(Resources.get('fileNotFound')); + alert(Resources.get('fileNotFound')); }; img.src = newValue; @@ -4492,7 +4506,7 @@ EditorUi.prototype.setBackgroundImage = function(image) */ EditorUi.prototype.confirm = function(msg, okFn, cancelFn) { - if (utils.confirm(msg)) + if (confirm(msg)) { if (okFn != null) { @@ -4664,11 +4678,11 @@ EditorUi.prototype.createKeyHandler = function(editor) // TODO: Use getCompositeParent let style = graph.getCurrentCellStyle(cells[i]); - if (utils.getValue(style, 'part', '0') == '1') + if (getValue(style, 'part', '0') == '1') { let parent = cells[i].getParent(); - if (parent.isVertex() && utils.indexOf(cells, parent) < 0) + if (parent.isVertex() && cells.indexOf(parent) < 0) { realCells.push(parent); } @@ -4844,7 +4858,7 @@ EditorUi.prototype.createKeyHandler = function(editor) }; // Binds keystrokes to actions - keyHandler.bindAction = utils.bind(this, function(code, control, key, shift) + keyHandler.bindAction = this.bind(function(code, control, key, shift) { let action = this.actions.get(key); diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js index 66b3fc9c7..7744fd6b9 100644 --- a/docs/stashed/grapheditor/www/js/Format.js +++ b/docs/stashed/grapheditor/www/js/Format.js @@ -1,6 +1,19 @@ /** * Copyright (c) 2006-2012, JGraph Ltd */ +import { getCurrentStyle, setStyle } from '../../../../../packages/core/src/util/Utils'; +import { getTextContent, setTextContent } from '../../../../../packages/core/src/util/DomUtils'; +import { getXml, parseXml } from '../../../../../packages/core/src/util/XmlUtils'; +import { clone } from '../../../../../packages/core/src/util/CloneUtils'; + +const { br } = require('../../../../../packages/core/src/util/DomUtils'); +const { setOpacity } = require('../../../../../packages/core/src/util/Utils'); +const { button } = require('../../../../../packages/core/src/util/dom/mxDomHelpers'); +const { htmlEntities } = require('../../../../../packages/core/src/util/StringUtils'); +const { setPrefixedStyle } = require('../../../../../packages/core/src/util/Utils'); +const { mod } = require('../../../../../packages/core/src/util/Utils'); +const { write } = require('../../../../../packages/core/src/util/DomUtils'); +const { getValue } = require('../../../../../packages/core/src/util/Utils'); Format = function(editorUi, container) { this.editorUi = editorUi; @@ -49,7 +62,7 @@ Format.prototype.init = function() let editor = ui.editor; let graph = editor.graph; - this.update = utils.bind(this, function(sender, evt) + this.update = this.bind(function(sender, evt) { this.clearSelectionState(); this.refresh(); @@ -59,17 +72,17 @@ Format.prototype.init = function() graph.addListener(mxEvent.EDITING_STARTED, this.update); graph.addListener(mxEvent.EDITING_STOPPED, this.update); graph.getModel().addListener(mxEvent.CHANGE, this.update); - graph.addListener(mxEvent.ROOT, utils.bind(this, function() + graph.addListener(mxEvent.ROOT, this.bind(function() { this.refresh(); })); - ui.addListener('styleChanged', utils.bind(this, function(sender, evt) + ui.addListener('styleChanged', this.bind(function(sender, evt) { this.refresh(); })); - editor.addListener('autosaveChanged', utils.bind(this, function() + editor.addListener('autosaveChanged', this.bind(function() { this.refresh(); })); @@ -224,7 +237,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells) result.fill = result.fill && this.isFillState(state); result.stroke = result.stroke && this.isStrokeState(state); - let shape = utils.getValue(state.style, 'shape', null); + let shape = getValue(state.style, 'shape', null); result.containsImage = result.containsImage || shape == 'image'; for (var key in state.style) @@ -253,9 +266,9 @@ Format.prototype.isFillState = function(state) { return !this.isSpecialColor(state.style.fillColor) && (state.cell.isVertex() || - utils.getValue(state.style, 'shape', null) == 'arrow' || - utils.getValue(state.style, 'shape', null) == 'filledEdge' || - utils.getValue(state.style, 'shape', null) == 'flexArrow'); + getValue(state.style, 'shape', null) == 'arrow' || + getValue(state.style, 'shape', null) == 'filledEdge' || + getValue(state.style, 'shape', null) == 'flexArrow'); }; /** @@ -271,7 +284,7 @@ Format.prototype.isStrokeState = function(state) */ Format.prototype.isSpecialColor = function(color) { - return utils.indexOf(['strokeColor', + return indexOf(['strokeColor', 'fillColor', 'inherit', 'swimlane', 'indicated'], color) >= 0; }; @@ -281,7 +294,7 @@ Format.prototype.isSpecialColor = function(color) */ Format.prototype.isGlassState = function(state) { - let shape = utils.getValue(state.style, 'shape', null); + let shape = getValue(state.style, 'shape', null); return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' || shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' || @@ -294,7 +307,7 @@ Format.prototype.isGlassState = function(state) Format.prototype.isRoundedState = function(state) { return (state.shape != null) ? state.shape.isRoundable() : - utils.indexOf(this.roundableShapes, utils.getValue(state.style, + indexOf(this.roundableShapes, getValue(state.style, 'shape', null)) >= 0; }; @@ -303,8 +316,8 @@ Format.prototype.isRoundedState = function(state) */ Format.prototype.isLineJumpState = function(state) { - let shape = utils.getValue(state.style, 'shape', null); - let curved = utils.getValue(state.style, 'curved', false); + let shape = getValue(state.style, 'shape', null); + let curved = getValue(state.style, 'curved', false); return !curved && (shape == 'connector' || shape == 'filledEdge'); }; @@ -314,7 +327,7 @@ Format.prototype.isLineJumpState = function(state) */ Format.prototype.isAutoSizeState = function(state) { - return utils.getValue(state.style, 'autoSize', null) == '1'; + return getValue(state.style, 'autoSize', null) == '1'; }; /** @@ -322,7 +335,7 @@ Format.prototype.isAutoSizeState = function(state) */ Format.prototype.isImageState = function(state) { - let shape = utils.getValue(state.style, 'shape', null); + let shape = getValue(state.style, 'shape', null); return (shape == 'label' || shape == 'image'); }; @@ -332,7 +345,7 @@ Format.prototype.isImageState = function(state) */ Format.prototype.isShadowState = function(state) { - let shape = utils.getValue(state.style, 'shape', null); + let shape = getValue(state.style, 'shape', null); return (shape != 'image'); }; @@ -393,7 +406,7 @@ Format.prototype.refresh = function() // Prevents text selection mxEvent.addListener(label, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - utils.bind(this, function(evt) + this.bind(function(evt) { evt.preventDefault(); })); @@ -402,9 +415,9 @@ Format.prototype.refresh = function() let currentLabel = null; let currentPanel = null; - let addClickHandler = utils.bind(this, function(elt, panel, index) + let addClickHandler = this.bind(function(elt, panel, index) { - let clickHandler = utils.bind(this, function(evt) + let clickHandler = this.bind(function(evt) { if (currentLabel != elt) { @@ -448,7 +461,7 @@ Format.prototype.refresh = function() // Prevents text selection mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - utils.bind(this, function(evt) + this.bind(function(evt) { evt.preventDefault(); })); @@ -465,7 +478,7 @@ Format.prototype.refresh = function() if (graph.isSelectionEmpty()) { - utils.write(label, Resources.get('diagram')); + write(label, Resources.get('diagram')); label.style.borderLeftWidth = '0px'; div.appendChild(label); @@ -489,7 +502,7 @@ Format.prototype.refresh = function() let stylePanel = div.cloneNode(false); stylePanel.style.display = 'none'; - utils.write(label2, Resources.get('style')); + write(label2, Resources.get('style')); div.appendChild(label2); this.panels.push(new DiagramStylePanel(this, ui, stylePanel)); this.container.appendChild(stylePanel); @@ -538,7 +551,7 @@ Format.prototype.refresh = function() } else if (graph.isEditing()) { - utils.write(label, Resources.get('text')); + write(label, Resources.get('text')); div.appendChild(label); this.panels.push(new TextFormatPanel(this, ui, div)); } @@ -563,7 +576,7 @@ Format.prototype.refresh = function() else { label.style.borderLeftWidth = '0px'; - utils.write(label, Resources.get('style')); + write(label, Resources.get('style')); div.appendChild(label); let stylePanel = div.cloneNode(false); @@ -575,7 +588,7 @@ Format.prototype.refresh = function() } // Text - utils.write(label2, Resources.get('text')); + write(label2, Resources.get('text')); div.appendChild(label2); let textPanel = div.cloneNode(false); @@ -584,7 +597,7 @@ Format.prototype.refresh = function() this.container.appendChild(textPanel); // Arrange - utils.write(label3, Resources.get('arrange')); + write(label3, Resources.get('arrange')); div.appendChild(label3); let arrangePanel = div.cloneNode(false); @@ -628,7 +641,7 @@ BaseFormatPanel.prototype.getSelectionState = function() if (state != null) { - let tmp = utils.getValue(state.style, 'shape', null); + let tmp = getValue(state.style, 'shape', null); if (tmp != null) { @@ -665,7 +678,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu let selState = null; let updating = false; - let update = utils.bind(this, function(evt) + let update = this.bind(function(evt) { let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value); @@ -674,7 +687,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu { // Workaround for decimal rounding errors in floats is to // use integer and round all numbers to two decimal point - value = utils.mod(Math.round(value * 100), 36000) / 100; + value = mod(Math.round(value * 100), 36000) / 100; } value = Math.min(max, Math.max(min, (isNaN(value)) ? defaultValue : value)); @@ -698,7 +711,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu updating = false; } } - else if (value != utils.getValue(this.format.getSelectionState().style, key, defaultValue)) + else if (value != getValue(this.format.getSelectionState().style, key, defaultValue)) { if (graph.isEditing()) { @@ -792,7 +805,7 @@ BaseFormatPanel.prototype.createTitle = function(title) div.style.overflow = 'hidden'; div.style.width = '200px'; div.style.fontWeight = 'bold'; - utils.write(div, title); + write(div, title); return div; }; @@ -811,7 +824,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, } let stepper = document.createElement('div'); - utils.setPrefixedStyle(stepper.style, 'borderRadius', '3px'); + setPrefixedStyle(stepper.style, 'borderRadius', '3px'); stepper.style.border = '1px solid rgb(192, 192, 192)'; stepper.style.position = 'absolute'; @@ -928,7 +941,7 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked div.appendChild(cb); let span = document.createElement('span'); - utils.write(span, label); + write(span, label); div.appendChild(span); let applying = false; @@ -1019,7 +1032,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, if (state != null) { - return utils.getValue(state.style, key, defaultValue) != disabledValue; + return getValue(state.style, key, defaultValue) != disabledValue; } return null; @@ -1066,7 +1079,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, if (state != null) { - apply(utils.getValue(state.style, key, defaultValue) != disabledValue); + apply(getValue(state.style, key, defaultValue) != disabledValue); } }; @@ -1101,7 +1114,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol } let span = document.createElement('span'); - utils.write(span, label); + write(span, label); div.appendChild(span); let value = getColorFn(); @@ -1116,7 +1129,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol color = (/(^#?[a-zA-Z0-9]*$)/.test(color)) ? color : defaultColor; btn.innerHTML = '
'; if (color != null && color != mxConstants.NONE) @@ -1154,7 +1167,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol } }; - btn = utils.button('', utils.bind(this, function(evt) + btn = button('', this.bind(function(evt) { this.editorUi.pickColor(value, function(color) { @@ -1222,7 +1235,7 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa if (state != null) { - return utils.getValue(state.style, colorKey, null); + return getValue(state.style, colorKey, null); } return null; @@ -1256,7 +1269,7 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa if (state != null) { - apply(utils.getValue(state.style, colorKey, null)); + apply(getValue(state.style, colorKey, null)); } }; @@ -1300,7 +1313,7 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) arrow.style.borderLeft = '1px solid #a0a0a0'; arrow.innerHTML = ''; - utils.setOpacity(arrow, 70); + setOpacity(arrow, 70); let symbol = elt.getElementsByTagName('div')[0]; @@ -1310,16 +1323,16 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) symbol.style.marginLeft = '4px'; symbol.style.marginTop = '-1px'; symbol.style.display = 'inline-block'; - utils.setOpacity(symbol, 60); + setOpacity(symbol, 60); } - utils.setOpacity(elt, 100); + setOpacity(elt, 100); elt.style.border = '1px solid #a0a0a0'; elt.style.backgroundColor = this.buttonBackgroundColor; elt.style.backgroundImage = 'none'; elt.style.width = 'auto'; elt.className += ' geColorBtn'; - utils.setPrefixedStyle(elt.style, 'borderRadius', '3px'); + setPrefixedStyle(elt.style, 'borderRadius', '3px'); elt.appendChild(arrow); @@ -1360,10 +1373,10 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han let div = this.createPanel(); div.style.paddingTop = '10px'; div.style.paddingBottom = '10px'; - utils.write(div, label); + write(div, label); div.style.fontWeight = 'bold'; - let update = utils.bind(this, function(evt) + let update = this.bind(function(evt) { if (handler != null) { @@ -1375,7 +1388,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han value = Math.min(100, Math.max(0, (isNaN(value)) ? 100 : value)); let state = graph.view.getState(graph.getSelectionCell()); - if (state != null && value != utils.getValue(state.style, key, 100)) + if (state != null && value != getValue(state.style, key, 100)) { // Removes entry in style (assumes 100 is default for relative values) if (value == 100) @@ -1398,12 +1411,12 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han if (key != null) { - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { if (force || input != document.activeElement) { let ss = this.format.getSelectionState(); - let tmp = parseInt(utils.getValue(ss.style, key, 100)); + let tmp = parseInt(getValue(ss.style, key, 100)); input.value = (isNaN(tmp)) ? '' : tmp + ' %'; } }); @@ -1447,7 +1460,7 @@ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) width = (width != null) ? width : 61; let label = document.createElement('div'); - utils.write(label, title); + write(label, title); label.style.position = 'absolute'; label.style.right = right + 'px'; label.style.width = width + 'px'; @@ -1461,7 +1474,7 @@ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) */ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) { - mxEvent.addListener(input, 'keydown', utils.bind(this, function(e) + mxEvent.addListener(input, 'keydown', this.bind(function(e) { if (e.keyCode == 13) { @@ -1488,8 +1501,8 @@ BaseFormatPanel.prototype.styleButtons = function(elts) { for (let i = 0; i < elts.length; i++) { - utils.setPrefixedStyle(elts[i].style, 'borderRadius', '3px'); - utils.setOpacity(elts[i], 100); + setPrefixedStyle(elts[i].style, 'borderRadius', '3px'); + setOpacity(elts[i], 100); elts[i].style.border = '1px solid #a0a0a0'; elts[i].style.padding = '4px'; elts[i].style.paddingTop = '3px'; @@ -1526,7 +1539,7 @@ ArrangePanel = function(format, editorUi, container) this.init(); }; -utils.extend(ArrangePanel, BaseFormatPanel); +extend(ArrangePanel, BaseFormatPanel); /** * Adds the label menu items to the given menu and parent. @@ -1576,7 +1589,7 @@ ArrangePanel.prototype.init = function() span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; span.style.padding = '10px 0 0 18px'; - utils.write(span, Resources.get('style')); + write(span, Resources.get('style')); this.container.appendChild(span); new StyleFormatPanel(this.format, this.editorUi, this.container); @@ -1599,7 +1612,7 @@ ArrangePanel.prototype.addTable = function(div) span.style.marginTop = '2px'; span.style.marginBottom = '8px'; span.style.fontWeight = 'bold'; - utils.write(span, Resources.get('table')); + write(span, Resources.get('table')); div.appendChild(span); let panel = document.createElement('div'); @@ -1610,7 +1623,7 @@ ArrangePanel.prototype.addTable = function(div) let btns = [ ui.toolbar.addButton('geSprite-insertcolumnbefore', Resources.get('insertColumnBefore'), - utils.bind(this, function() + this.bind(function() { try { @@ -1622,7 +1635,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-insertcolumnafter', Resources.get('insertColumnAfter'), - utils.bind(this, function() + this.bind(function() { try { @@ -1634,7 +1647,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-deletecolumn', Resources.get('deleteColumn'), - utils.bind(this, function() + this.bind(function() { try { @@ -1646,7 +1659,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-insertrowbefore', Resources.get('insertRowBefore'), - utils.bind(this, function() + this.bind(function() { try { @@ -1658,7 +1671,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-insertrowafter', Resources.get('insertRowAfter'), - utils.bind(this, function() + this.bind(function() { try { @@ -1670,7 +1683,7 @@ ArrangePanel.prototype.addTable = function(div) } }), panel), ui.toolbar.addButton('geSprite-deleterow', Resources.get('deleteRow'), - utils.bind(this, function() + this.bind(function() { try { @@ -1695,7 +1708,7 @@ ArrangePanel.prototype.addLayerOps = function(div) { let ui = this.editorUi; - let btn = utils.button(Resources.get('toFront'), function(evt) + let btn = button(Resources.get('toFront'), function(evt) { ui.actions.get('toFront').funct(); }) @@ -1705,7 +1718,7 @@ ArrangePanel.prototype.addLayerOps = function(div) btn.style.marginRight = '2px'; div.appendChild(btn); - let btn = utils.button(Resources.get('toBack'), function(evt) + let btn = button(Resources.get('toBack'), function(evt) { ui.actions.get('toBack').funct(); }) @@ -1734,7 +1747,7 @@ ArrangePanel.prototype.addGroupOps = function(div) if (graph.getSelectionCount() > 1) { - btn = utils.button(Resources.get('group'), function(evt) + btn = button(Resources.get('group'), function(evt) { ui.actions.get('group').funct(); }) @@ -1748,7 +1761,7 @@ ArrangePanel.prototype.addGroupOps = function(div) else if (graph.getSelectionCount() == 1 && !cell.isEdge() && !graph.isSwimlane(cell) && !graph.isTable(cell) && !ss.row && !ss.cell && cell.getChildCount() > 0) { - btn = utils.button(Resources.get('ungroup'), function(evt) + btn = button(Resources.get('ungroup'), function(evt) { ui.actions.get('ungroup').funct(); }) @@ -1765,11 +1778,11 @@ ArrangePanel.prototype.addGroupOps = function(div) { if (count > 0) { - utils.br(div); + br(div); count = 0; } - let btn = utils.button(Resources.get('copySize'), function(evt) + let btn = button(Resources.get('copySize'), function(evt) { ui.actions.get('copySize').funct(); }); @@ -1784,7 +1797,7 @@ ArrangePanel.prototype.addGroupOps = function(div) if (ui.copiedSize != null) { - var btn2 = utils.button(Resources.get('pasteSize'), function(evt) + var btn2 = button(Resources.get('pasteSize'), function(evt) { ui.actions.get('pasteSize').funct(); }); @@ -1807,10 +1820,10 @@ ArrangePanel.prototype.addGroupOps = function(div) { if (count > 0) { - utils.br(div); + br(div); } - btn = utils.button(Resources.get('removeFromGroup'), function(evt) + btn = button(Resources.get('removeFromGroup'), function(evt) { ui.actions.get('removeFromGroup').funct(); }) @@ -1825,10 +1838,10 @@ ArrangePanel.prototype.addGroupOps = function(div) { if (count > 0) { - utils.br(div); + br(div); } - btn = utils.button(Resources.get('clearWaypoints'), utils.bind(this, function(evt) + btn = button(Resources.get('clearWaypoints'), this.bind(function(evt) { this.editorUi.actions.get('clearWaypoints').funct(); })); @@ -1845,10 +1858,10 @@ ArrangePanel.prototype.addGroupOps = function(div) { if (count > 0) { - utils.br(div); + br(div); } - btn = utils.button(Resources.get('editData'), utils.bind(this, function(evt) + btn = button(Resources.get('editData'), this.bind(function(evt) { this.editorUi.actions.get('editData').funct(); })); @@ -1859,7 +1872,7 @@ ArrangePanel.prototype.addGroupOps = function(div) div.appendChild(btn); count++; - btn = utils.button(Resources.get('editLink'), utils.bind(this, function(evt) + btn = button(Resources.get('editLink'), this.bind(function(evt) { this.editorUi.actions.get('editLink').funct(); })); @@ -1932,10 +1945,10 @@ ArrangePanel.prototype.addFlip = function(div) span.style.marginTop = '2px'; span.style.marginBottom = '8px'; span.style.fontWeight = 'bold'; - utils.write(span, Resources.get('flip')); + write(span, Resources.get('flip')); div.appendChild(span); - let btn = utils.button(Resources.get('horizontal'), function(evt) + let btn = button(Resources.get('horizontal'), function(evt) { graph.toggleCellStyles('flipH', false); }) @@ -1945,7 +1958,7 @@ ArrangePanel.prototype.addFlip = function(div) btn.style.marginRight = '2px'; div.appendChild(btn); - let btn = utils.button(Resources.get('vertical'), function(evt) + let btn = button(Resources.get('vertical'), function(evt) { graph.toggleCellStyles('flipV', false); }) @@ -1970,7 +1983,7 @@ ArrangePanel.prototype.addDistribute = function(div) div.appendChild(this.createTitle(Resources.get('distribute'))); - let btn = utils.button(Resources.get('horizontal'), function(evt) + let btn = button(Resources.get('horizontal'), function(evt) { graph.distributeCells(true); }) @@ -1980,7 +1993,7 @@ ArrangePanel.prototype.addDistribute = function(div) btn.style.marginRight = '2px'; div.appendChild(btn); - let btn = utils.button(Resources.get('vertical'), function(evt) + let btn = button(Resources.get('vertical'), function(evt) { graph.distributeCells(false); }) @@ -2016,7 +2029,7 @@ ArrangePanel.prototype.addAngle = function(div) if (ss.rotatable && !ss.table && !ss.row && !ss.cell) { - utils.write(span, Resources.get('angle')); + write(span, Resources.get('angle')); div.appendChild(span); input = this.addUnitInput(div, '°', 20, 44, function() @@ -2024,7 +2037,7 @@ ArrangePanel.prototype.addAngle = function(div) update.apply(this, arguments); }); - utils.br(div); + br(div); div.style.paddingTop = '10px'; } else @@ -2045,7 +2058,7 @@ ArrangePanel.prototype.addAngle = function(div) label = Resources.get('turn'); } - btn = utils.button(label, function(evt) + btn = button(label, function(evt) { ui.actions.get('turn').funct(evt); }) @@ -2062,12 +2075,12 @@ ArrangePanel.prototype.addAngle = function(div) if (input != null) { - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { if (force || document.activeElement != input) { ss = this.format.getSelectionState(); - let tmp = parseFloat(utils.getValue(ss.style, 'rotation', 0)); + let tmp = parseFloat(getValue(ss.style, 'rotation', 0)); input.value = (isNaN(tmp)) ? '' : tmp + '°'; } }); @@ -2156,7 +2169,7 @@ ArrangePanel.prototype.addGeometry = function(container) span.style.width = '50px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - utils.write(span, Resources.get('size')); + write(span, Resources.get('size')); div.appendChild(span); var widthUpdate, heightUpdate, leftUpdate, topUpdate; @@ -2177,16 +2190,16 @@ ArrangePanel.prototype.addGeometry = function(container) autosizeBtn.style.marginTop = '-3px'; autosizeBtn.style.border = '0px'; autosizeBtn.style.left = '42px'; - utils.setOpacity(autosizeBtn, 50); + setOpacity(autosizeBtn, 50); mxEvent.addListener(autosizeBtn, 'mouseenter', function() { - utils.setOpacity(autosizeBtn, 100); + setOpacity(autosizeBtn, 100); }); mxEvent.addListener(autosizeBtn, 'mouseleave', function() { - utils.setOpacity(autosizeBtn, 50); + setOpacity(autosizeBtn, 50); }); mxEvent.addListener(autosizeBtn, 'click', function() @@ -2207,7 +2220,7 @@ ArrangePanel.prototype.addGeometry = function(container) } this.addLabel(div, Resources.get('height'), 20); - utils.br(div); + br(div); let wrapper = document.createElement('div'); wrapper.style.paddingTop = '8px'; @@ -2293,7 +2306,7 @@ ArrangePanel.prototype.addGeometry = function(container) span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - utils.write(span, Resources.get('position')); + write(span, Resources.get('position')); div2.appendChild(span); let left = this.addUnitInput(div2, this.getUnit(), 84, 44, function() @@ -2305,12 +2318,12 @@ ArrangePanel.prototype.addGeometry = function(container) topUpdate.apply(this, arguments); }, this.getUnitStep(), null, null, this.isFloatUnit()); - utils.br(div2); + br(div2); this.addLabel(div2, Resources.get('left'), 84); this.addLabel(div2, Resources.get('top'), 20); - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { rect = this.format.getSelectionState(); @@ -2549,7 +2562,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - utils.write(span, Resources.get('width')); + write(span, Resources.get('width')); div.appendChild(span); var widthUpdate, xtUpdate, ytUpdate, xsUpdate, ysUpdate; @@ -2558,7 +2571,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) widthUpdate.apply(this, arguments); }); - utils.br(div); + br(div); this.addKeyHandler(width, listener); function widthUpdate(evt) @@ -2567,7 +2580,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) let value = parseInt(width.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - if (value != utils.getValue(rect.style, 'width', mxCellRenderer.defaultShapes['flexArrow'].prototype.defaultWidth)) + if (value != getValue(rect.style, 'width', mxCellRenderer.defaultShapes['flexArrow'].prototype.defaultWidth)) { graph.setCellStyles('width', value, graph.getSelectionCells()); ui.fireEvent(new EventObject('styleChanged', 'keys', ['width'], @@ -2591,7 +2604,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - utils.write(span, 'Start'); + write(span, 'Start'); divs.appendChild(span); let xs = this.addUnitInput(divs, 'pt', 84, 44, function() @@ -2603,7 +2616,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) ysUpdate.apply(this, arguments); }); - utils.br(divs); + br(divs); this.addLabel(divs, Resources.get('left'), 84); this.addLabel(divs, Resources.get('top'), 20); container.appendChild(divs); @@ -2618,7 +2631,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - utils.write(span, 'End'); + write(span, 'End'); divt.appendChild(span); let xt = this.addUnitInput(divt, 'pt', 84, 44, function() @@ -2630,14 +2643,14 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) ytUpdate.apply(this, arguments); }); - utils.br(divt); + br(divt); this.addLabel(divt, Resources.get('left'), 84); this.addLabel(divt, Resources.get('top'), 20); container.appendChild(divt); this.addKeyHandler(xt, listener); this.addKeyHandler(yt, listener); - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { rect = this.format.getSelectionState(); let cell = graph.getSelectionCell(); @@ -2648,7 +2661,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) if (force || document.activeElement != width) { - let value = utils.getValue(rect.style, 'width', + let value = getValue(rect.style, 'width', mxCellRenderer.defaultShapes['flexArrow'].prototype.defaultWidth); width.value = value + ' pt'; } @@ -2723,7 +2736,7 @@ TextFormatPanel = function(format, editorUi, container) this.init(); }; -utils.extend(TextFormatPanel, BaseFormatPanel); +extend(TextFormatPanel, BaseFormatPanel); /** * Adds the label menu items to the given menu and parent. @@ -2959,7 +2972,7 @@ TextFormatPanel.prototype.addFont = function(container) stylePanel4.style.paddingBottom = '4px'; stylePanel4.style.fontWeight = 'normal'; - utils.write(stylePanel4, Resources.get('position')); + write(stylePanel4, Resources.get('position')); // Adds label position options let positionSelect = document.createElement('select'); @@ -2983,7 +2996,7 @@ TextFormatPanel.prototype.addFont = function(container) { let positionOption = document.createElement('option'); positionOption.setAttribute('value', directions[i]); - utils.write(positionOption, Resources.get(directions[i])); + write(positionOption, Resources.get(directions[i])); positionSelect.appendChild(positionOption); } @@ -2996,7 +3009,7 @@ TextFormatPanel.prototype.addFont = function(container) stylePanel5.style.paddingBottom = '4px'; stylePanel5.style.fontWeight = 'normal'; - utils.write(stylePanel5, Resources.get('writingDirection')); + write(stylePanel5, Resources.get('writingDirection')); // Adds writing direction options // LATER: Handle reselect of same option in all selects (change event @@ -3019,7 +3032,7 @@ TextFormatPanel.prototype.addFont = function(container) { let dirOption = document.createElement('option'); dirOption.setAttribute('value', dirs[i]); - utils.write(dirOption, Resources.get(dirs[i])); + write(dirOption, Resources.get(dirs[i])); dirSelect.appendChild(dirOption); } @@ -3101,11 +3114,11 @@ TextFormatPanel.prototype.addFont = function(container) } else { - let css = utils.getCurrentStyle(elt); + let css = getCurrentStyle(elt); if (css.fontSize != fontSize + 'px') { - if (utils.getCurrentStyle(elt.parentNode).fontSize != fontSize + 'px') + if (getCurrentStyle(elt.parentNode).fontSize != fontSize + 'px') { elt.style.fontSize = fontSize + 'px'; } @@ -3389,7 +3402,7 @@ TextFormatPanel.prototype.addFont = function(container) span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - utils.write(span, Resources.get('spacing')); + write(span, Resources.get('spacing')); spacingPanel.appendChild(span); var topUpdate, globalUpdate, leftUpdate, bottomUpdate, rightUpdate; @@ -3402,11 +3415,11 @@ TextFormatPanel.prototype.addFont = function(container) globalUpdate.apply(this, arguments); }); - utils.br(spacingPanel); + br(spacingPanel); this.addLabel(spacingPanel, Resources.get('top'), 91); this.addLabel(spacingPanel, Resources.get('global'), 20); - utils.br(spacingPanel); - utils.br(spacingPanel); + br(spacingPanel); + br(spacingPanel); let leftSpacing = this.addUnitInput(spacingPanel, 'pt', 162, 44, function() { @@ -3421,7 +3434,7 @@ TextFormatPanel.prototype.addFont = function(container) rightUpdate.apply(this, arguments); }); - utils.br(spacingPanel); + br(spacingPanel); this.addLabel(spacingPanel, Resources.get('left'), 162); this.addLabel(spacingPanel, Resources.get('bottom'), 91); this.addLabel(spacingPanel, Resources.get('right'), 20); @@ -3509,7 +3522,7 @@ TextFormatPanel.prototype.addFont = function(container) { document.execCommand('inserthorizontalrule', false); }, insertPanel), - this.editorUi.toolbar.addMenuFunctionInContainer(insertPanel, 'geSprite-table', Resources.get('table'), false, utils.bind(this, function(menu) + this.editorUi.toolbar.addMenuFunctionInContainer(insertPanel, 'geSprite-table', Resources.get('table'), false, this.bind(function(menu) { this.editorUi.menus.addInsertTableItem(menu); }))]; @@ -3528,7 +3541,7 @@ TextFormatPanel.prototype.addFont = function(container) let btns = [ this.editorUi.toolbar.addButton('geSprite-insertcolumnbefore', Resources.get('insertColumnBefore'), - utils.bind(this, function() + this.bind(function() { try { @@ -3543,7 +3556,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertcolumnafter', Resources.get('insertColumnAfter'), - utils.bind(this, function() + this.bind(function() { try { @@ -3558,7 +3571,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-deletecolumn', Resources.get('deleteColumn'), - utils.bind(this, function() + this.bind(function() { try { @@ -3573,7 +3586,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertrowbefore', Resources.get('insertRowBefore'), - utils.bind(this, function() + this.bind(function() { try { @@ -3588,7 +3601,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertrowafter', Resources.get('insertRowAfter'), - utils.bind(this, function() + this.bind(function() { try { @@ -3603,7 +3616,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-deleterow', Resources.get('deleteRow'), - utils.bind(this, function() + this.bind(function() { try { @@ -3631,7 +3644,7 @@ TextFormatPanel.prototype.addFont = function(container) let btns = [ this.editorUi.toolbar.addButton('geSprite-strokecolor', Resources.get('borderColor'), - utils.bind(this, function(evt) + this.bind(function(evt) { if (currentTable != null) { @@ -3666,7 +3679,7 @@ TextFormatPanel.prototype.addFont = function(container) } }), tablePanel2), this.editorUi.toolbar.addButton('geSprite-fillcolor', Resources.get('backgroundColor'), - utils.bind(this, function(evt) + this.bind(function(evt) { // Converts rgb(r,g,b) values if (currentTable != null) @@ -3703,7 +3716,7 @@ TextFormatPanel.prototype.addFont = function(container) { let value = currentTable.getAttribute('cellPadding') || 0; - let dlg = new FilenameDialog(ui, value, Resources.get('apply'), utils.bind(this, function(newValue) + let dlg = new FilenameDialog(ui, value, Resources.get('apply'), this.bind(function(newValue) { if (newValue != null && newValue.length > 0) { @@ -3756,35 +3769,35 @@ TextFormatPanel.prototype.addFont = function(container) elt.style.backgroundImage = (selected) ? 'linear-gradient(#c5ecff 0px,#87d4fb 100%)' : ''; }; - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { ss = this.format.getSelectionState(); - let fontStyle = utils.getValue(ss.style, 'fontStyle', 0); + let fontStyle = getValue(ss.style, 'fontStyle', 0); setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD); setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC); setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE); - fontMenu.firstChild.nodeValue = utils.getValue(ss.style, 'fontFamily', Menus.prototype.defaultFont); + fontMenu.firstChild.nodeValue = getValue(ss.style, 'fontFamily', Menus.prototype.defaultFont); - setSelected(verticalItem, utils.getValue(ss.style, 'horizontal', '1') == '0'); + setSelected(verticalItem, getValue(ss.style, 'horizontal', '1') == '0'); if (force || document.activeElement != input) { - let tmp = parseFloat(utils.getValue(ss.style, 'fontSize', Menus.prototype.defaultFontSize)); + let tmp = parseFloat(getValue(ss.style, 'fontSize', Menus.prototype.defaultFontSize)); input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } - let align = utils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER); + let align = getValue(ss.style, 'align', mxConstants.ALIGN_CENTER); setSelected(left, align == mxConstants.ALIGN_LEFT); setSelected(center, align == mxConstants.ALIGN_CENTER); setSelected(right, align == mxConstants.ALIGN_RIGHT); - let valign = utils.getValue(ss.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE); + let valign = getValue(ss.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE); setSelected(top, valign == mxConstants.ALIGN_TOP); setSelected(middle, valign == mxConstants.ALIGN_MIDDLE); setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM); - let pos = utils.getValue(ss.style, 'labelPosition', mxConstants.ALIGN_CENTER); - let vpos = utils.getValue(ss.style, 'verticalLabelPosition', mxConstants.ALIGN_MIDDLE); + let pos = getValue(ss.style, 'labelPosition', mxConstants.ALIGN_CENTER); + let vpos = getValue(ss.style, 'verticalLabelPosition', mxConstants.ALIGN_MIDDLE); if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP) { @@ -3823,7 +3836,7 @@ TextFormatPanel.prototype.addFont = function(container) positionSelect.value = 'center'; } - let dir = utils.getValue(ss.style, 'textDirection', mxConstants.DEFAULT_TEXT_DIRECTION); + let dir = getValue(ss.style, 'textDirection', mxConstants.DEFAULT_TEXT_DIRECTION); if (dir == mxConstants.TEXT_DIRECTION_RTL) { @@ -3840,31 +3853,31 @@ TextFormatPanel.prototype.addFont = function(container) if (force || document.activeElement != globalSpacing) { - let tmp = parseFloat(utils.getValue(ss.style, 'spacing', 2)); + let tmp = parseFloat(getValue(ss.style, 'spacing', 2)); globalSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != topSpacing) { - let tmp = parseFloat(utils.getValue(ss.style, 'spacingTop', 0)); + let tmp = parseFloat(getValue(ss.style, 'spacingTop', 0)); topSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != rightSpacing) { - let tmp = parseFloat(utils.getValue(ss.style, 'spacingRight', 0)); + let tmp = parseFloat(getValue(ss.style, 'spacingRight', 0)); rightSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != bottomSpacing) { - let tmp = parseFloat(utils.getValue(ss.style, 'spacingBottom', 0)); + let tmp = parseFloat(getValue(ss.style, 'spacingBottom', 0)); bottomSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != leftSpacing) { - let tmp = parseFloat(utils.getValue(ss.style, 'spacingLeft', 0)); + let tmp = parseFloat(getValue(ss.style, 'spacingLeft', 0)); leftSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); @@ -3938,7 +3951,7 @@ TextFormatPanel.prototype.addFont = function(container) } }; - let css = utils.getCurrentStyle(node); + let css = getCurrentStyle(node); let fontSize = getAbsoluteFontSize(css); let lineHeight = getRelativeLineHeight(fontSize, css, node); @@ -3954,7 +3967,7 @@ TextFormatPanel.prototype.addFont = function(container) { if (selection.containsNode(elts[i], true)) { - temp = utils.getCurrentStyle(elts[i]); + temp = getCurrentStyle(elts[i]); fontSize = Math.max(getAbsoluteFontSize(temp), fontSize); let lh = getRelativeLineHeight(fontSize, temp, elts[i]); @@ -4020,7 +4033,7 @@ TextFormatPanel.prototype.addFont = function(container) if (!graph.cellEditor.isTableSelected()) { - let align = graph.cellEditor.align || utils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER); + let align = graph.cellEditor.align || getValue(ss.style, 'align', mxConstants.ALIGN_CENTER); if (isEqualOrPrefixed(css.textAlign, 'justify')) { @@ -4159,7 +4172,7 @@ StyleFormatPanel = function(format, editorUi, container) this.init(); }; -utils.extend(StyleFormatPanel, BaseFormatPanel); +extend(StyleFormatPanel, BaseFormatPanel); /** * @@ -4202,7 +4215,7 @@ StyleFormatPanel.prototype.init = function() if (opsPanel.firstChild != null) { - utils.br(opsPanel); + br(opsPanel); } this.container.appendChild(this.addStyleOps(opsPanel)); @@ -4216,7 +4229,7 @@ StyleFormatPanel.prototype.getCssRules = function(css) let doc = document.implementation.createHTMLDocument(''); let styleElement = document.createElement('style'); - utils.setTextContent(styleElement, css); + setTextContent(styleElement, css); doc.body.appendChild(styleElement); return styleElement.sheet.cssRules; @@ -4245,7 +4258,7 @@ StyleFormatPanel.prototype.addSvgStyles = function(container) let data = ss.style.image.substring(ss.style.image.indexOf(',') + 1); let xml = (window.atob) ? atob(data) : Base64.decode(data, true); - let svg = utils.parseXml(xml); + let svg = parseXml(xml); if (svg != null) { @@ -4253,7 +4266,7 @@ StyleFormatPanel.prototype.addSvgStyles = function(container) for (let i = 0; i < styles.length; i++) { - let rules = this.getCssRules(utils.getTextContent(styles[i])); + let rules = this.getCssRules(getTextContent(styles[i])); for (let j = 0; j < rules.length; j++) { @@ -4291,9 +4304,9 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; }; - let addStyleRule = utils.bind(this, function(rule, key, label) + let addStyleRule = this.bind(function(rule, key, label) { - let value = utils.trim(rule.style[key]); + let value = trim(rule.style[key]); if (value != '' && value.substring(0, 4) != 'url(') { @@ -4311,7 +4324,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem } styleElem.textContent = cssTxt; - let xml = utils.getXml(svg.documentElement); + let xml = getXml(svg.documentElement); graph.setCellStyles('image', 'data:image/svg+xml,' + ((window.btoa) ? btoa(xml) : Base64.encode(xml, true)), @@ -4351,7 +4364,7 @@ StyleFormatPanel.prototype.addEditOps = function(div) if (this.editorUi.editor.graph.getSelectionCount() == 1) { - btn = utils.button(Resources.get('editStyle'), utils.bind(this, function(evt) + btn = button(Resources.get('editStyle'), this.bind(function(evt) { this.editorUi.actions.get('editStyle').funct(); })); @@ -4365,7 +4378,7 @@ StyleFormatPanel.prototype.addEditOps = function(div) if (ss.image) { - var btn2 = utils.button(Resources.get('editImage'), utils.bind(this, function(evt) + var btn2 = button(Resources.get('editImage'), this.bind(function(evt) { this.editorUi.actions.get('image').funct(); })); @@ -4441,13 +4454,13 @@ StyleFormatPanel.prototype.addFill = function(container) let label = (ss.style.shape == 'image') ? Resources.get('background') : Resources.get('fill'); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); - let fillPanel = this.createCellColorOption(label, fillKey, (defs[fillKey] != null) ? defs[fillKey] : '#ffffff', null, utils.bind(this, function(color) + let fillPanel = this.createCellColorOption(label, fillKey, (defs[fillKey] != null) ? defs[fillKey] : '#ffffff', null, this.bind(function(color) { graph.updateCellStyles(fillKey, color, graph.getSelectionCells()); })); fillPanel.style.fontWeight = 'bold'; - let tmpColor = utils.getValue(ss.style, fillKey, null); + let tmpColor = getValue(ss.style, fillKey, null); gradientPanel.style.display = (tmpColor != null && tmpColor != mxConstants.NONE && ss.fill && ss.style.shape != 'image') ? '' : 'none'; @@ -4458,7 +4471,7 @@ StyleFormatPanel.prototype.addFill = function(container) { let gradientOption = document.createElement('option'); gradientOption.setAttribute('value', directions[i]); - utils.write(gradientOption, Resources.get(directions[i])); + write(gradientOption, Resources.get(directions[i])); gradientSelect.appendChild(gradientOption); } @@ -4468,17 +4481,17 @@ StyleFormatPanel.prototype.addFill = function(container) { let fillStyleOption = document.createElement('option'); fillStyleOption.setAttribute('value', Editor.roughFillStyles[i].val); - utils.write(fillStyleOption, Editor.roughFillStyles[i].dispName); + write(fillStyleOption, Editor.roughFillStyles[i].dispName); fillStyleSelect.appendChild(fillStyleOption); } fillPanel.appendChild(fillStyleSelect); - let listener = utils.bind(this, function() + let listener = this.bind(function() { ss = this.format.getSelectionState(); - let value = utils.getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH); - let fillStyle = utils.getValue(ss.style, 'fillStyle', 'auto'); + let value = getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH); + let fillStyle = getValue(ss.style, 'fillStyle', 'auto'); // Handles empty string which is not allowed as a value if (value == '') @@ -4490,7 +4503,7 @@ StyleFormatPanel.prototype.addFill = function(container) fillStyleSelect.value = fillStyle; container.style.display = (ss.fill) ? '' : 'none'; - let fillColor = utils.getValue(ss.style, 'fillColor', null); + let fillColor = getValue(ss.style, 'fillColor', null); if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge') { @@ -4584,7 +4597,7 @@ StyleFormatPanel.prototype.addStroke = function(container) { let styleOption = document.createElement('option'); styleOption.setAttribute('value', styles[i]); - utils.write(styleOption, Resources.get(styles[i])); + write(styleOption, Resources.get(styles[i])); styleSelect.appendChild(styleOption); } @@ -4632,7 +4645,7 @@ StyleFormatPanel.prototype.addStroke = function(container) let label = (ss.style.shape == 'image') ? Resources.get('border') : Resources.get('line'); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); - let lineColor = this.createCellColorOption(label, strokeKey, (defs[strokeKey] != null) ? defs[strokeKey] : '#000000', null, utils.bind(this, function(color) + let lineColor = this.createCellColorOption(label, strokeKey, (defs[strokeKey] != null) ? defs[strokeKey] : '#000000', null, this.bind(function(color) { graph.updateCellStyles(strokeKey, color, graph.getSelectionCells()); })); @@ -4650,7 +4663,7 @@ StyleFormatPanel.prototype.addStroke = function(container) stylePanel.style.marginTop = '2px'; stylePanel.className = 'geToolbarContainer'; - let addItem = utils.bind(this, function(menu, width, cssName, keys, values) + let addItem = this.bind(function(menu, width, cssName, keys, values) { let item = this.editorUi.menus.styleChange(menu, '', keys, values, 'geIcon', null); @@ -4667,7 +4680,7 @@ StyleFormatPanel.prototype.addStroke = function(container) return item; }); - let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, utils.bind(this, function(menu) + let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, this.bind(function(menu) { addItem(menu, 75, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', Resources.get('solid')); addItem(menu, 75, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', Resources.get('dashed')); @@ -4679,7 +4692,7 @@ StyleFormatPanel.prototype.addStroke = function(container) // Used for mixed selection (vertices and edges) let altStylePanel = stylePanel.cloneNode(false); - let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', Resources.get('connection'), false, utils.bind(this, function(menu) + let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', Resources.get('connection'), false, this.bind(function(menu) { this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', Resources.get('line')); this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', Resources.get('link')); @@ -4687,7 +4700,7 @@ StyleFormatPanel.prototype.addStroke = function(container) this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', Resources.get('simpleArrow')); })); - let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, utils.bind(this, function(menu) + let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', Resources.get('pattern'), false, this.bind(function(menu) { addItem(menu, 33, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', Resources.get('solid')); addItem(menu, 33, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', Resources.get('dashed')); @@ -4716,7 +4729,7 @@ StyleFormatPanel.prototype.addStroke = function(container) let value = parseInt(input.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - if (value != utils.getValue(ss.style, 'strokeWidth', 1)) + if (value != getValue(ss.style, 'strokeWidth', 1)) { graph.setCellStyles('strokeWidth', value, graph.getSelectionCells()); ui.fireEvent(new EventObject('styleChanged', 'keys', .strokeWidth, @@ -4733,7 +4746,7 @@ StyleFormatPanel.prototype.addStroke = function(container) let value = parseInt(altInput.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - if (value != utils.getValue(ss.style, 'strokeWidth', 1)) + if (value != getValue(ss.style, 'strokeWidth', 1)) { graph.setCellStyles('strokeWidth', value, graph.getSelectionCells()); ui.fireEvent(new EventObject('styleChanged', 'keys', .strokeWidth, @@ -4770,7 +4783,7 @@ StyleFormatPanel.prototype.addStroke = function(container) mxEvent.addListener(altInput, 'blur', altUpdate); mxEvent.addListener(altInput, 'change', altUpdate); - let edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-orthogonal', Resources.get('waypoints'), false, utils.bind(this, function(menu) + let edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-orthogonal', Resources.get('waypoints'), false, this.bind(function(menu) { if (ss.style.shape != 'arrow') { @@ -4790,13 +4803,13 @@ StyleFormatPanel.prototype.addStroke = function(container) } })); - let lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-startclassic', Resources.get('linestart'), false, utils.bind(this, function(menu) + let lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-startclassic', Resources.get('linestart'), false, this.bind(function(menu) { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge') { let item = this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false); item.setAttribute('title', Resources.get('none')); - item.firstChild.firstChild.innerHTML = '' + utils.htmlEntities(Resources.get('none')) + ''; + item.firstChild.firstChild.innerHTML = '' + htmlEntities(Resources.get('none')) + ''; if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') { @@ -4839,13 +4852,13 @@ StyleFormatPanel.prototype.addStroke = function(container) } })); - let lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-endclassic', Resources.get('lineend'), false, utils.bind(this, function(menu) + let lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-endclassic', Resources.get('lineend'), false, this.bind(function(menu) { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge') { let item = this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false); item.setAttribute('title', Resources.get('none')); - item.firstChild.firstChild.innerHTML = '' + utils.htmlEntities(Resources.get('none')) + ''; + item.firstChild.firstChild.innerHTML = '' + htmlEntities(Resources.get('none')) + ''; if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') { @@ -4941,7 +4954,7 @@ StyleFormatPanel.prototype.addStroke = function(container) span.style.fontWeight = 'normal'; span.style.width = '76px'; - utils.write(span, Resources.get('lineend')); + write(span, Resources.get('lineend')); arrowPanel.appendChild(span); var endSpacingUpdate, endSizeUpdate; @@ -4954,14 +4967,14 @@ StyleFormatPanel.prototype.addStroke = function(container) endSizeUpdate.apply(this, arguments); }); - utils.br(arrowPanel); + br(arrowPanel); let spacer = document.createElement('div'); spacer.style.height = '8px'; arrowPanel.appendChild(spacer); span = span.cloneNode(false); - utils.write(span, Resources.get('linestart')); + write(span, Resources.get('linestart')); arrowPanel.appendChild(span); var startSpacingUpdate, startSizeUpdate; @@ -4974,10 +4987,10 @@ StyleFormatPanel.prototype.addStroke = function(container) startSizeUpdate.apply(this, arguments); }); - utils.br(arrowPanel); + br(arrowPanel); this.addLabel(arrowPanel, Resources.get('spacing'), 74, 50); this.addLabel(arrowPanel, Resources.get('size'), 20, 50); - utils.br(arrowPanel); + br(arrowPanel); let perimeterPanel = colorPanel.cloneNode(false); perimeterPanel.style.fontWeight = 'normal'; @@ -4995,7 +5008,7 @@ StyleFormatPanel.prototype.addStroke = function(container) span.style.marginTop = '1px'; span.style.fontWeight = 'normal'; span.style.width = '120px'; - utils.write(span, Resources.get('perimeter')); + write(span, Resources.get('perimeter')); perimeterPanel.appendChild(span); var perimeterUpdate; @@ -5014,37 +5027,37 @@ StyleFormatPanel.prototype.addStroke = function(container) container.appendChild(perimeterPanel); } - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { ss = this.format.getSelectionState(); - let color = utils.getValue(ss.style, strokeKey, null); + let color = getValue(ss.style, strokeKey, null); if (force || document.activeElement != input) { - let tmp = parseInt(utils.getValue(ss.style, 'strokeWidth', 1)); + let tmp = parseInt(getValue(ss.style, 'strokeWidth', 1)); input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != altInput) { - let tmp = parseInt(utils.getValue(ss.style, 'strokeWidth', 1)); + let tmp = parseInt(getValue(ss.style, 'strokeWidth', 1)); altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') ? '' : 'hidden'; - if (utils.getValue(ss.style, 'curved', null) == '1') + if (getValue(ss.style, 'curved', null) == '1') { styleSelect.value = 'curved'; } - else if (utils.getValue(ss.style, 'rounded', null) == '1') + else if (getValue(ss.style, 'rounded', null) == '1') { styleSelect.value = 'rounded'; } - if (utils.getValue(ss.style, 'dashed', null) == '1') + if (getValue(ss.style, 'dashed', null) == '1') { - if (utils.getValue(ss.style, 'dashPattern', null) == null) + if (getValue(ss.style, 'dashPattern', null) == null) { solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor; } @@ -5065,14 +5078,14 @@ StyleFormatPanel.prototype.addStroke = function(container) if (edgeStyleDiv != null) { - let es = utils.getValue(ss.style, 'edge', null); + let es = getValue(ss.style, 'edge', null); - if (utils.getValue(ss.style, 'noEdgeStyle', null) == '1') + if (getValue(ss.style, 'noEdgeStyle', null) == '1') { es = null; } - if (es == 'orthogonalEdgeStyle' && utils.getValue(ss.style, 'curved', null) == '1') + if (es == 'orthogonalEdgeStyle' && getValue(ss.style, 'curved', null) == '1') { edgeStyleDiv.className = 'geSprite geSprite-curved'; } @@ -5086,13 +5099,13 @@ StyleFormatPanel.prototype.addStroke = function(container) } else if (es == 'elbowEdgeStyle') { - edgeStyleDiv.className = 'geSprite ' + ((utils.getValue(ss.style, + edgeStyleDiv.className = 'geSprite ' + ((getValue(ss.style, 'elbow', null) == 'vertical') ? 'geSprite-verticalelbow' : 'geSprite-horizontalelbow'); } else if (es == 'isometricEdgeStyle') { - edgeStyleDiv.className = 'geSprite ' + ((utils.getValue(ss.style, + edgeStyleDiv.className = 'geSprite ' + ((getValue(ss.style, 'elbow', null) == 'vertical') ? 'geSprite-verticalisometric' : 'geSprite-horizontalisometric'); } @@ -5146,7 +5159,7 @@ StyleFormatPanel.prototype.addStroke = function(container) if (markerDiv.className == 'geSprite geSprite-noarrow') { - markerDiv.innerHTML = utils.htmlEntities(Resources.get('none')); + markerDiv.innerHTML = htmlEntities(Resources.get('none')); markerDiv.style.backgroundImage = 'none'; markerDiv.style.verticalAlign = 'top'; markerDiv.style.marginTop = '5px'; @@ -5160,10 +5173,10 @@ StyleFormatPanel.prototype.addStroke = function(container) return markerDiv; }; - let sourceDiv = updateArrow(utils.getValue(ss.style, 'startArrow', null), - utils.getValue(ss.style, 'startFill', '1'), lineStart, 'start'); - let targetDiv = updateArrow(utils.getValue(ss.style, 'endArrow', null), - utils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end'); + let sourceDiv = updateArrow(getValue(ss.style, 'startArrow', null), + getValue(ss.style, 'startFill', '1'), lineStart, 'start'); + let targetDiv = updateArrow(getValue(ss.style, 'endArrow', null), + getValue(ss.style, 'endFill', '1'), lineEnd, 'end'); // Special cases for markers if (sourceDiv != null && targetDiv != null) @@ -5180,46 +5193,46 @@ StyleFormatPanel.prototype.addStroke = function(container) } } - utils.setOpacity(edgeStyle, (ss.style.shape == 'arrow') ? 30 : 100); + setOpacity(edgeStyle, (ss.style.shape == 'arrow') ? 30 : 100); if (ss.style.shape != 'connector' && ss.style.shape != 'flexArrow' && ss.style.shape != 'filledEdge') { - utils.setOpacity(lineStart, 30); - utils.setOpacity(lineEnd, 30); + setOpacity(lineStart, 30); + setOpacity(lineEnd, 30); } else { - utils.setOpacity(lineStart, 100); - utils.setOpacity(lineEnd, 100); + setOpacity(lineStart, 100); + setOpacity(lineEnd, 100); } if (force || document.activeElement != startSize) { - let tmp = parseInt(utils.getValue(ss.style, 'startSize', mxConstants.DEFAULT_MARKERSIZE)); + let tmp = parseInt(getValue(ss.style, 'startSize', mxConstants.DEFAULT_MARKERSIZE)); startSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != startSpacing) { - let tmp = parseInt(utils.getValue(ss.style, 'sourcePerimeterSpacing', 0)); + let tmp = parseInt(getValue(ss.style, 'sourcePerimeterSpacing', 0)); startSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != endSize) { - let tmp = parseInt(utils.getValue(ss.style, 'endSize', mxConstants.DEFAULT_MARKERSIZE)); + let tmp = parseInt(getValue(ss.style, 'endSize', mxConstants.DEFAULT_MARKERSIZE)); endSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != startSpacing) { - let tmp = parseInt(utils.getValue(ss.style, 'targetPerimeterSpacing', 0)); + let tmp = parseInt(getValue(ss.style, 'targetPerimeterSpacing', 0)); endSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != perimeterSpacing) { - let tmp = parseInt(utils.getValue(ss.style, 'perimeterSpacing', 0)); + let tmp = parseInt(getValue(ss.style, 'perimeterSpacing', 0)); perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); @@ -5265,7 +5278,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) span.style.fontWeight = 'bold'; span.style.width = '80px'; - utils.write(span, Resources.get('lineJumps')); + write(span, Resources.get('lineJumps')); container.appendChild(span); let styleSelect = document.createElement('select'); @@ -5280,7 +5293,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) { let styleOption = document.createElement('option'); styleOption.setAttribute('value', styles[i]); - utils.write(styleOption, Resources.get(styles[i])); + write(styleOption, Resources.get(styles[i])); styleSelect.appendChild(styleOption); } @@ -5319,14 +5332,14 @@ StyleFormatPanel.prototype.addLineJumps = function(container) jumpSizeUpdate = this.installInputHandler(jumpSize, 'jumpSize', Graph.defaultJumpSize, 0, 999, ' pt'); - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { ss = this.format.getSelectionState(); - styleSelect.value = utils.getValue(ss.style, 'jumpStyle', 'none'); + styleSelect.value = getValue(ss.style, 'jumpStyle', 'none'); if (force || document.activeElement != jumpSize) { - let tmp = parseInt(utils.getValue(ss.style, 'jumpSize', Graph.defaultJumpSize)); + let tmp = parseInt(getValue(ss.style, 'jumpSize', Graph.defaultJumpSize)); jumpSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); @@ -5382,7 +5395,7 @@ StyleFormatPanel.prototype.addEffects = function(div) let current = left; let count = 0; - let addOption = utils.bind(this, function(label, key, defaultValue) + let addOption = this.bind(function(label, key, defaultValue) { let opt = this.createCellOption(label, key, defaultValue); opt.style.width = '100%'; @@ -5391,7 +5404,7 @@ StyleFormatPanel.prototype.addEffects = function(div) count++; }); - let listener = utils.bind(this, function(sender, evt, force) + let listener = this.bind(function(sender, evt, force) { ss = this.format.getSelectionState(); @@ -5437,7 +5450,7 @@ StyleFormatPanel.prototype.addStyleOps = function(div) div.style.paddingTop = '10px'; div.style.paddingBottom = '10px'; - let btn = utils.button(Resources.get('setAsDefaultStyle'), utils.bind(this, function(evt) + let btn = button(Resources.get('setAsDefaultStyle'), this.bind(function(evt) { this.editorUi.actions.get('setAsDefaultStyle').funct(); })); @@ -5458,7 +5471,7 @@ DiagramStylePanel = function(format, editorUi, container) this.init(); }; -utils.extend(DiagramStylePanel, BaseFormatPanel); +extend(DiagramStylePanel, BaseFormatPanel); /** * Adds the label menu items to the given menu and parent. @@ -5596,7 +5609,7 @@ DiagramStylePanel.prototype.addView = function(div) let defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor']; - let updateCells = utils.bind(this, function(styles, graphStyle) + let updateCells = this.bind(function(styles, graphStyle) { let cells = graph.getVerticesAndEdges(); @@ -5624,7 +5637,7 @@ DiagramStylePanel.prototype.addView = function(div) (styles[j] != 'fillColor' && styles[j] != 'strokeColor')) { - newStyle = utils.setStyle(newStyle, styles[j], current[styles[j]]); + newStyle = setStyle(newStyle, styles[j], current[styles[j]]); } } @@ -5637,7 +5650,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let removeStyles = utils.bind(this, function(style, styles, defaultStyle) + let removeStyles = this.bind(function(style, styles, defaultStyle) { if (style != null) { @@ -5654,7 +5667,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let applyStyle = utils.bind(this, function(style, result, cell, graphStyle, theGraph) + let applyStyle = this.bind(function(style, result, cell, graphStyle, theGraph) { if (style != null) { @@ -5693,7 +5706,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let btn = utils.button(Resources.get('reset'), utils.bind(this, function(evt) + let btn = button(Resources.get('reset'), this.bind(function(evt) { let all = graph.getVerticesAndEdges(true, true); @@ -5712,8 +5725,8 @@ DiagramStylePanel.prototype.addView = function(div) } } - graph.defaultVertexStyle = utils.clone(ui.initialDefaultVertexStyle); - graph.defaultEdgeStyle = utils.clone(ui.initialDefaultEdgeStyle); + graph.defaultVertexStyle = clone(ui.initialDefaultVertexStyle); + graph.defaultEdgeStyle = clone(ui.initialDefaultEdgeStyle); ui.clearDefaultStyle(); })); @@ -5722,7 +5735,7 @@ DiagramStylePanel.prototype.addView = function(div) btn.style.maxWidth = '90px'; right.appendChild(btn); - let createPreview = utils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, container) + let createPreview = this.bind(function(commonStyle, vertexStyle, edgeStyle, graphStyle, container) { // Wrapper needed to catch events let div = document.createElement('div'); @@ -5741,7 +5754,7 @@ DiagramStylePanel.prototype.addView = function(div) graph2.getCellStyle = function(cell) { - let result = utils.clone(Graph.prototype.getCellStyle.apply(this, arguments)); + let result = clone(Graph.prototype.getCellStyle.apply(this, arguments)); let defaultStyle = graph.stylesheet.getDefaultVertexStyle(); let appliedStyle = vertexStyle; @@ -5785,7 +5798,7 @@ DiagramStylePanel.prototype.addView = function(div) this.format.cachedStyleEntries = []; } - let addEntry = utils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, index) + let addEntry = this.bind(function(commonStyle, vertexStyle, edgeStyle, graphStyle, index) { let panel = this.format.cachedStyleEntries[index]; @@ -5802,14 +5815,14 @@ DiagramStylePanel.prototype.addView = function(div) createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); - mxEvent.addGestureListeners(panel, utils.bind(this, function(evt) + mxEvent.addGestureListeners(panel, this.bind(function(evt) { panel.style.opacity = 0.5; - }), null, utils.bind(this, function(evt) + }), null, this.bind(function(evt) { panel.style.opacity = 1; - graph.defaultVertexStyle = utils.clone(ui.initialDefaultVertexStyle); - graph.defaultEdgeStyle = utils.clone(ui.initialDefaultEdgeStyle); + graph.defaultVertexStyle = clone(ui.initialDefaultVertexStyle); + graph.defaultEdgeStyle = clone(ui.initialDefaultEdgeStyle); applyStyle(commonStyle, graph.defaultVertexStyle); applyStyle(commonStyle, graph.defaultEdgeStyle); @@ -5866,7 +5879,7 @@ DiagramStylePanel.prototype.addView = function(div) } })); - mxEvent.addListener(panel, 'mouseenter', utils.bind(this, function(evt) + mxEvent.addListener(panel, 'mouseenter', this.bind(function(evt) { let prev = graph.getCellStyle; let prevBg = graph.background; @@ -5878,7 +5891,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.getCellStyle = function(cell) { - let result = utils.clone(prev.apply(this, arguments)); + let result = clone(prev.apply(this, arguments)); let defaultStyle = graph.stylesheet.getDefaultVertexStyle(); let appliedStyle = vertexStyle; @@ -5902,7 +5915,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.view.gridColor = prevGrid; })); - mxEvent.addListener(panel, 'mouseleave', utils.bind(this, function(evt) + mxEvent.addListener(panel, 'mouseleave', this.bind(function(evt) { graph.refresh(); })); @@ -5919,7 +5932,7 @@ DiagramStylePanel.prototype.addView = function(div) this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0; let dots = []; - let addEntries = utils.bind(this, function() + let addEntries = this.bind(function() { if (dots.length > 0) { @@ -5935,7 +5948,7 @@ DiagramStylePanel.prototype.addView = function(div) } }); - let selectPage = utils.bind(this, function(index) + let selectPage = this.bind(function(index) { if (index >= 0 && index < pageCount) { @@ -5971,9 +5984,9 @@ DiagramStylePanel.prototype.addView = function(div) dot.style.background = 'transparent'; dot.style.border = '1px solid #b5b6b7'; - (utils.bind(this, function(index, elt) + (this.bind(function(index, elt) { - mxEvent.addListener(dot, 'click', utils.bind(this, function() + mxEvent.addListener(dot, 'click', this.bind(function() { selectPage(index); })); @@ -5992,9 +6005,9 @@ DiagramStylePanel.prototype.addView = function(div) left.style.cssText = 'position:absolute;left:0px;top:4px;bottom:0px;width:20px;margin:0px;opacity:0.5;' + 'background-repeat:no-repeat;background-position:center center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAB2dnZ4eHh3d3d1dXVxcXF2dnZ2dnZ2dnZxcXF2dnYmb3w1AAAACnRSTlMAfCTkhhvb7cQSPH2JPgAAADRJREFUCNdjwACMAmBKaiGYs2oJmLPKAZ3DabU8AMRTXpUKopislqFyVzCAuUZgikkBZjoAcMYLnp53P/UAAAAASUVORK5CYII=);'; - mxEvent.addListener(left, 'click', utils.bind(this, function() + mxEvent.addListener(left, 'click', this.bind(function() { - selectPage(utils.mod(this.format.currentStylePage - 1, pageCount)); + selectPage(mod(this.format.currentStylePage - 1, pageCount)); })); let right = document.createElement('div'); @@ -6003,9 +6016,9 @@ DiagramStylePanel.prototype.addView = function(div) switcher.appendChild(left); switcher.appendChild(right); - mxEvent.addListener(right, 'click', utils.bind(this, function() + mxEvent.addListener(right, 'click', this.bind(function() { - selectPage(utils.mod(this.format.currentStylePage + 1, pageCount)); + selectPage(mod(this.format.currentStylePage + 1, pageCount)); })); // Hover state @@ -6042,7 +6055,7 @@ DiagramFormatPanel = function(format, editorUi, container) this.init(); }; -utils.extend(DiagramFormatPanel, BaseFormatPanel); +extend(DiagramFormatPanel, BaseFormatPanel); /** * Switch to disable page view. @@ -6145,7 +6158,7 @@ DiagramFormatPanel.prototype.addView = function(div) if (this.showBackgroundImageOption) { - let btn = utils.button(Resources.get('image'), function(evt) + let btn = button(Resources.get('image'), function(evt) { ui.showBackgroundImageDialog(null, ui.editor.graph.backgroundImage); mxEvent.consume(evt); @@ -6484,7 +6497,7 @@ DiagramFormatPanel.prototype.addPaperSize = function(div) */ DiagramFormatPanel.prototype.addStyleOps = function(div) { - let btn = utils.button(Resources.get('editData'), utils.bind(this, function(evt) + let btn = button(Resources.get('editData'), this.bind(function(evt) { this.editorUi.actions.get('editData').funct(); })); @@ -6494,9 +6507,9 @@ DiagramFormatPanel.prototype.addStyleOps = function(div) btn.style.marginBottom = '2px'; div.appendChild(btn); - utils.br(div); + br(div); - btn = utils.button(Resources.get('clearDefaultStyle'), utils.bind(this, function(evt) + btn = button(Resources.get('clearDefaultStyle'), this.bind(function(evt) { this.editorUi.actions.get('clearDefaultStyle').funct(); })); diff --git a/docs/stashed/grapheditor/www/js/Menus.js b/docs/stashed/grapheditor/www/js/Menus.js index 8fd60c029..d58c666bb 100644 --- a/docs/stashed/grapheditor/www/js/Menus.js +++ b/docs/stashed/grapheditor/www/js/Menus.js @@ -1,6 +1,9 @@ /** * Copyright (c) 2006-2012, JGraph Ltd */ +const { getOffset } = require('../../../../../packages/core/src/util/Utils'); +const { getValue } = require('../../../../../packages/core/src/util/Utils'); +const { write } = require('../../../../../packages/core/src/util/DomUtils'); /** * Constructs a new graph editor */ @@ -44,14 +47,14 @@ Menus.prototype.defaultFonts = ['Helvetica', 'Verdana', 'Times New Roman', 'Gara Menus.prototype.init = function() { let graph = this.editorUi.editor.graph; - let isGraphEnabled = utils.bind(graph, graph.isEnabled); + let isGraphEnabled = bind(graph, graph.isEnabled); this.customFonts = []; this.customFontSizes = []; - this.put('fontFamily', new Menu(utils.bind(this, function(menu, parent) + this.put('fontFamily', new Menu(this.bind(function(menu, parent) { - let addItem = utils.bind(this, function(fontname) + let addItem = this.bind(function(fontname) { let tr = this.styleChange(menu, fontname, .fontFamily, [fontname], null, parent, function() { @@ -88,7 +91,7 @@ Menus.prototype.init = function() menu.addSeparator(parent); - menu.addItem(Resources.get('reset'), null, utils.bind(this, function() + menu.addItem(Resources.get('reset'), null, this.bind(function() { this.customFonts = []; this.editorUi.fireEvent(new EventObject('customFontsChanged')); @@ -97,20 +100,20 @@ Menus.prototype.init = function() menu.addSeparator(parent); } - this.promptChange(menu, Resources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, utils.bind(this, function(newValue) + this.promptChange(menu, Resources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, this.bind(function(newValue) { - if (utils.indexOf(this.customFonts, newValue) < 0) + if (this.customFonts.indexOf(newValue) === -1) { this.customFonts.push(newValue); this.editorUi.fireEvent(new EventObject('customFontsChanged')); } })); }))); - this.put('formatBlock', new Menu(utils.bind(this, function(menu, parent) + this.put('formatBlock', new Menu(this.bind(function(menu, parent) { function addItem(label, tag) { - return menu.addItem(label, null, utils.bind(this, function() + return menu.addItem(label, null, this.bind(function() { // TODO: Check if visible if (graph.cellEditor.textarea != null) @@ -133,11 +136,11 @@ Menus.prototype.init = function() addItem('', 'pre').firstChild.nextSibling.innerHTML = '
' + Resources.get('formatted') + '
'; addItem('', 'blockquote').firstChild.nextSibling.innerHTML = '
' + Resources.get('blockquote') + '
'; }))); - this.put('fontSize', new Menu(utils.bind(this, function(menu, parent) + this.put('fontSize', new Menu(this.bind(function(menu, parent) { let sizes = [6, 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 72]; - let addItem = utils.bind(this, function(fontsize) + let addItem = this.bind(function(fontsize) { this.styleChange(menu, fontsize, .fontSize, [fontsize], null, parent, function() { @@ -181,7 +184,7 @@ Menus.prototype.init = function() menu.addSeparator(parent); - menu.addItem(Resources.get('reset'), null, utils.bind(this, function() + menu.addItem(Resources.get('reset'), null, this.bind(function() { this.customFontSizes = []; }), parent); @@ -189,18 +192,18 @@ Menus.prototype.init = function() menu.addSeparator(parent); } - this.promptChange(menu, Resources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, utils.bind(this, function(newValue) + this.promptChange(menu, Resources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, this.bind(function(newValue) { this.customFontSizes.push(newValue); })); }))); - this.put('direction', new Menu(utils.bind(this, function(menu, parent) + this.put('direction', new Menu(this.bind(function(menu, parent) { menu.addItem(Resources.get('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent); menu.addItem(Resources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent); this.addMenuItems(menu, ['-', 'rotation'], parent); }))); - this.put('align', new Menu(utils.bind(this, function(menu, parent) + this.put('align', new Menu(this.bind(function(menu, parent) { menu.addItem(Resources.get('leftAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_LEFT); }, parent); menu.addItem(Resources.get('center'), null, function() { graph.alignCells(mxConstants.ALIGN_CENTER); }, parent); @@ -210,14 +213,14 @@ Menus.prototype.init = function() menu.addItem(Resources.get('middle'), null, function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, parent); menu.addItem(Resources.get('bottomAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, parent); }))); - this.put('distribute', new Menu(utils.bind(this, function(menu, parent) + this.put('distribute', new Menu(this.bind(function(menu, parent) { menu.addItem(Resources.get('horizontal'), null, function() { graph.distributeCells(true); }, parent); menu.addItem(Resources.get('vertical'), null, function() { graph.distributeCells(false); }, parent); }))); - this.put('layout', new Menu(utils.bind(this, function(menu, parent) + this.put('layout', new Menu(this.bind(function(menu, parent) { - let promptSpacing = utils.bind(this, function(defaultValue, fn) + let promptSpacing = this.bind(function(defaultValue, fn) { let dlg = new FilenameDialog(this.editorUi, defaultValue, Resources.get('apply'), function(newValue) { @@ -227,7 +230,7 @@ Menus.prototype.init = function() dlg.init(); }); - menu.addItem(Resources.get('horizontalFlow'), null, utils.bind(this, function() + menu.addItem(Resources.get('horizontalFlow'), null, this.bind(function() { let layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST); @@ -237,7 +240,7 @@ Menus.prototype.init = function() layout.execute(graph.getDefaultParent(), selectionCells.length == 0 ? null : selectionCells); }, true); }), parent); - menu.addItem(Resources.get('verticalFlow'), null, utils.bind(this, function() + menu.addItem(Resources.get('verticalFlow'), null, this.bind(function() { let layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH); @@ -248,7 +251,7 @@ Menus.prototype.init = function() }, true); }), parent); menu.addSeparator(parent); - menu.addItem(Resources.get('horizontalTree'), null, utils.bind(this, function() + menu.addItem(Resources.get('horizontalTree'), null, this.bind(function() { let tmp = graph.getSelectionCell(); let roots = null; @@ -276,7 +279,7 @@ Menus.prototype.init = function() layout.edgeRouting = false; layout.levelDistance = 30; - promptSpacing(layout.levelDistance, utils.bind(this, function(newValue) + promptSpacing(layout.levelDistance, this.bind(function(newValue) { layout.levelDistance = newValue; @@ -287,7 +290,7 @@ Menus.prototype.init = function() })); } }), parent); - menu.addItem(Resources.get('verticalTree'), null, utils.bind(this, function() + menu.addItem(Resources.get('verticalTree'), null, this.bind(function() { let tmp = graph.getSelectionCell(); let roots = null; @@ -315,7 +318,7 @@ Menus.prototype.init = function() layout.edgeRouting = false; layout.levelDistance = 30; - promptSpacing(layout.levelDistance, utils.bind(this, function(newValue) + promptSpacing(layout.levelDistance, this.bind(function(newValue) { layout.levelDistance = newValue; @@ -326,7 +329,7 @@ Menus.prototype.init = function() })); } }), parent); - menu.addItem(Resources.get('radialTree'), null, utils.bind(this, function() + menu.addItem(Resources.get('radialTree'), null, this.bind(function() { let tmp = graph.getSelectionCell(); let roots = null; @@ -354,7 +357,7 @@ Menus.prototype.init = function() layout.levelDistance = 80; layout.autoRadius = true; - promptSpacing(layout.levelDistance, utils.bind(this, function(newValue) + promptSpacing(layout.levelDistance, this.bind(function(newValue) { layout.levelDistance = newValue; @@ -376,11 +379,11 @@ Menus.prototype.init = function() } }), parent); menu.addSeparator(parent); - menu.addItem(Resources.get('organic'), null, utils.bind(this, function() + menu.addItem(Resources.get('organic'), null, this.bind(function() { let layout = new MxFastOrganicLayout(graph); - promptSpacing(layout.forceConstant, utils.bind(this, function(newValue) + promptSpacing(layout.forceConstant, this.bind(function(newValue) { layout.forceConstant = newValue; @@ -402,7 +405,7 @@ Menus.prototype.init = function() }, true); })); }), parent); - menu.addItem(Resources.get('circle'), null, utils.bind(this, function() + menu.addItem(Resources.get('circle'), null, this.bind(function() { let layout = new CircleLayout(graph); @@ -424,11 +427,11 @@ Menus.prototype.init = function() }, true); }), parent); }))); - this.put('navigation', new Menu(utils.bind(this, function(menu, parent) + this.put('navigation', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['home', '-', 'exitGroup', 'enterGroup', '-', 'expand', 'collapse', '-', 'collapsible'], parent); }))); - this.put('arrange', new Menu(utils.bind(this, function(menu, parent) + this.put('arrange', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['toFront', 'toBack', '-'], parent); this.addSubmenu('direction', menu, parent); @@ -441,11 +444,11 @@ Menus.prototype.init = function() this.addSubmenu('layout', menu, parent); this.addMenuItems(menu, ['-', 'group', 'ungroup', 'removeFromGroup', '-', 'clearWaypoints', 'autosize'], parent); }))).isEnabled = isGraphEnabled; - this.put('insert', new Menu(utils.bind(this, function(menu, parent) + this.put('insert', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['insertLink', 'insertImage'], parent); }))); - this.put('view', new Menu(utils.bind(this, function(menu, parent) + this.put('view', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ((this.editorUi.format != null) ? ['formatPanel'] : []). concat(['outline', 'layers', '-', 'pageView', 'pageScale', '-', 'scrollbars', 'tooltips', '-', @@ -453,7 +456,7 @@ Menus.prototype.init = function() 'resetView', 'zoomIn', 'zoomOut'], parent)); }))); // Two special dropdowns that are only used in the toolbar - this.put('viewPanels', new Menu(utils.bind(this, function(menu, parent) + this.put('viewPanels', new Menu(this.bind(function(menu, parent) { if (this.editorUi.format != null) { @@ -462,7 +465,7 @@ Menus.prototype.init = function() this.addMenuItems(menu, ['outline', 'layers'], parent); }))); - this.put('viewZoom', new Menu(utils.bind(this, function(menu, parent) + this.put('viewZoom', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['resetView', '-'], parent); let scales = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4]; @@ -480,21 +483,21 @@ Menus.prototype.init = function() this.addMenuItems(menu, ['-', 'fitWindow', 'fitPageWidth', 'fitPage', 'fitTwoPages', '-', 'customZoom'], parent); }))); - this.put('file', new Menu(utils.bind(this, function(menu, parent) + this.put('file', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['new', 'open', '-', 'save', 'saveAs', '-', 'import', 'export', '-', 'pageSetup', 'print'], parent); }))); - this.put('edit', new Menu(utils.bind(this, function(menu, parent) + this.put('edit', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['undo', 'redo', '-', 'cut', 'copy', 'paste', 'delete', '-', 'duplicate', '-', 'editData', 'editTooltip', '-', 'editStyle', '-', 'edit', '-', 'editLink', 'openLink', '-', 'selectVertices', 'selectEdges', 'selectAll', 'selectNone', '-', 'lockUnlock']); }))); - this.put('extras', new Menu(utils.bind(this, function(menu, parent) + this.put('extras', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['copyConnect', 'collapseExpand', '-', 'editDiagram']); }))); - this.put('help', new Menu(utils.bind(this, function(menu, parent) + this.put('help', new Menu(this.bind(function(menu, parent) { this.addMenuItems(menu, ['help', '-', 'about']); }))); @@ -557,7 +560,7 @@ Menus.prototype.addInsertTableCellItem = function(menu, parent) { let graph = this.editorUi.editor.graph; - this.addInsertTableItem(menu, utils.bind(this, function(evt, rows, cols) + this.addInsertTableItem(menu, this.bind(function(evt, rows, cols) { let table = (mxEvent.isControlDown(evt) || mxEvent.isMetaDown(evt)) ? graph.createCrossFunctionalSwimlane(rows, cols) : @@ -580,7 +583,7 @@ Menus.prototype.addInsertTableCellItem = function(menu, parent) */ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) { - insertFn = (insertFn != null) ? insertFn : utils.bind(this, function(evt, rows, cols) + insertFn = (insertFn != null) ? insertFn : this.bind(function(evt, rows, cols) { let graph = this.editorUi.editor.graph; let td = graph.getParentByName(mxEvent.getSource(evt), 'TD'); @@ -749,7 +752,7 @@ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) return selected; }; - mxEvent.addGestureListeners(picker, null, null, utils.bind(this, function (e) + mxEvent.addGestureListeners(picker, null, null, this.bind(function (e) { let selected = mouseover(e); @@ -758,7 +761,7 @@ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) insertFn(e, row2.sectionRowIndex + 1, td.cellIndex + 1); // Async required to block event for elements under menu - window.setTimeout(utils.bind(this, function() + window.setTimeout(this.bind(function() { this.editorUi.hideCurrentMenu(); }), 0); @@ -772,7 +775,7 @@ Menus.prototype.addInsertTableItem = function(menu, insertFn, parent) */ Menus.prototype.edgeStyleChange = function(menu, label, keys, values, sprite, parent, reset) { - return menu.addItem(label, null, utils.bind(this, function() + return menu.addItem(label, null, this.bind(function() { let graph = this.editorUi.editor.graph; graph.stopEditing(false); @@ -828,7 +831,7 @@ Menus.prototype.styleChange = function(menu, label, keys, values, sprite, parent { let apply = this.createStyleChangeFunction(keys, values); - return menu.addItem(label, null, utils.bind(this, function() + return menu.addItem(label, null, this.bind(function() { let graph = this.editorUi.editor.graph; @@ -848,7 +851,7 @@ Menus.prototype.styleChange = function(menu, label, keys, values, sprite, parent */ Menus.prototype.createStyleChangeFunction = function(keys, values) { - return utils.bind(this, function(post) + return this.bind(function(post) { let graph = this.editorUi.editor.graph; graph.stopEditing(false); @@ -905,7 +908,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values) */ Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, parent, enabled, fn, sprite) { - return menu.addItem(label, null, utils.bind(this, function() + return menu.addItem(label, null, this.bind(function() { let graph = this.editorUi.editor.graph; let value = defaultValue; @@ -916,7 +919,7 @@ Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, pa value = state.style[key] || value; } - let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), utils.bind(this, function(newValue) + let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), this.bind(function(newValue) { if (newValue != null && newValue.length > 0) { @@ -956,7 +959,7 @@ Menus.prototype.pickColor = function(key, cmd, defaultValue) // Saves and restores text selection for in-place editor let selState = graph.cellEditor.saveSelection(); - let dlg = new ColorDialog(this.editorUi, defaultValue || '000000', utils.bind(this, function(color) + let dlg = new ColorDialog(this.editorUi, defaultValue || '000000', this.bind(function(color) { graph.cellEditor.restoreSelection(selState); document.execCommand(cmd, false, (color != mxConstants.NONE) ? color : 'transparent'); @@ -1048,7 +1051,7 @@ Menus.prototype.addShortcut = function(item, action) let td = item.firstChild.nextSibling.nextSibling; let span = document.createElement('span'); span.style.color = 'gray'; - utils.write(span, action.shortcut); + write(span, action.shortcut); td.appendChild(span); } }; @@ -1164,8 +1167,8 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) { let hasWaypoints = false; - if (cell.isEdge() && utils.getValue(state.style, 'edge', null) != 'entityRelationEdgeStyle' && - utils.getValue(state.style, 'shape', null) != 'arrow') + if (cell.isEdge() && getValue(state.style, 'edge', null) != 'entityRelationEdgeStyle' && + getValue(state.style, 'shape', null) != 'arrow') { let handler = graph.selectionCellsHandler.getHandler(cell); let isWaypoint = false; @@ -1203,7 +1206,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt); // Shows edit image action if there is an image in the style - if (cell.isVertex() && utils.getValue(state.style, 'image', null) != null) + if (cell.isVertex() && getValue(state.style, 'image', null) != null) { menu.addSeparator(); this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = Resources.get('editImage') + '...'; @@ -1233,9 +1236,9 @@ Menus.prototype.createMenubar = function(container) for (let i = 0; i < menus.length; i++) { - (utils.bind(this, function(menu) + (this.bind(function(menu) { - let elt = menubar.addMenu(Resources.get(menus[i]), utils.bind(this, function() + let elt = menubar.addMenu(Resources.get(menus[i]), this.bind(function() { // Allows extensions of menu.funct menu.funct.apply(this, arguments); @@ -1297,7 +1300,7 @@ Menubar.prototype.addMenu = function(label, funct, before) { let elt = document.createElement('a'); elt.className = 'geItem'; - utils.write(elt, label); + write(elt, label); this.addMenuHandler(elt, funct); if (before != null) @@ -1321,7 +1324,7 @@ Menubar.prototype.addMenuHandler = function(elt, funct) { let show = true; - let clickHandler = utils.bind(this, function(evt) + let clickHandler = this.bind(function(evt) { if (show && elt.enabled == null || elt.enabled) { @@ -1333,14 +1336,14 @@ Menubar.prototype.addMenuHandler = function(elt, funct) menu.autoExpand = true; // Disables autoexpand and destroys menu when hidden - menu.hideMenu = utils.bind(this, function() + menu.hideMenu = this.bind(function() { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); this.editorUi.resetCurrentMenu(); menu.destroy(); }); - let offset = utils.getOffset(elt); + let offset = getOffset(elt); menu.popup(offset.x, offset.y + elt.offsetHeight, null, evt); this.editorUi.setCurrentMenu(menu, elt); } @@ -1349,7 +1352,7 @@ Menubar.prototype.addMenuHandler = function(elt, funct) }); // Shows menu automatically while in expanded state - mxEvent.addListener(elt, 'mousemove', utils.bind(this, function(evt) + mxEvent.addListener(elt, 'mousemove', this.bind(function(evt) { if (this.editorUi.currentMenu != null && this.editorUi.currentMenuElt != elt) { @@ -1360,13 +1363,13 @@ Menubar.prototype.addMenuHandler = function(elt, funct) // Hides menu if already showing and prevents focus mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - utils.bind(this, function(evt) + this.bind(function(evt) { show = this.currentElt != elt; evt.preventDefault(); })); - mxEvent.addListener(elt, 'click', utils.bind(this, function(evt) + mxEvent.addListener(elt, 'click', this.bind(function(evt) { clickHandler(evt); show = true; @@ -1393,7 +1396,7 @@ function Menu(funct, enabled) }; // Menu inherits from mxEventSource -utils.extend(Menu, EventSource); +extend(Menu, EventSource); /** * Sets the enabled state of the action and fires a stateChanged event. diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js index 25906c8e2..ad397efa4 100644 --- a/docs/stashed/grapheditor/www/js/Shapes.js +++ b/docs/stashed/grapheditor/www/js/Shapes.js @@ -2,6 +2,16 @@ * Copyright (c) 2006-2015, JGraph Ltd */ +import { + getNumber, + getPerimeterPoint, getRotatedPoint, + getValue, + mod, ptLineDist, + ptSegDistSq, + toRadians, +} from '../../../../../packages/core/src/util/Utils'; +import { clone } from '../../../../../packages/core/src/util/CloneUtils'; + /** * Registers shapes. */ @@ -22,7 +32,7 @@ if (this.style != null) { - events = utils.getValue(this.style, 'pointerEvents', '1') == '1'; + events = getValue(this.style, 'pointerEvents', '1') == '1'; } if (!events) @@ -30,20 +40,20 @@ c.pointerEvents = false; } - let evenRowColor = utils.getValue(state.style, + let evenRowColor = getValue(state.style, 'evenRowColor', mxConstants.NONE); - let oddRowColor = utils.getValue(state.style, + let oddRowColor = getValue(state.style, 'oddRowColor', mxConstants.NONE); - let evenColColor = utils.getValue(state.style, + let evenColColor = getValue(state.style, 'evenColumnColor', mxConstants.NONE); - let oddColColor = utils.getValue(state.style, + let oddColColor = getValue(state.style, 'oddColumnColor', mxConstants.NONE); let cols = graph.model.getChildCells(rows[0], true); // Paints column backgrounds for (let i = 0; i < cols.length; i++) { - let clr = (utils.mod(i, 2) == 1) ? evenColColor : oddColColor; + let clr = (mod(i, 2) == 1) ? evenColColor : oddColColor; let geo = cols[i].getGeometry(); if (geo != null && clr != mxConstants.NONE) @@ -74,7 +84,7 @@ // Paints row backgrounds for (let i = 0; i < rows.length; i++) { - let clr = (utils.mod(i, 2) == 1) ? evenRowColor : oddRowColor; + let clr = (mod(i, 2) == 1) ? evenRowColor : oddRowColor; let geo = rows[i].getGeometry(); if (geo != null && clr != mxConstants.NONE) @@ -113,7 +123,7 @@ SwimlaneShape.call(this); }; - utils.extend(TableShape, SwimlaneShape); + extend(TableShape, SwimlaneShape); TableShape.prototype.getLabelBounds = function(rect) { @@ -183,9 +193,9 @@ if (rows.length > 0) { - let rowLines = utils.getValue(this.state.style, + let rowLines = getValue(this.state.style, 'rowLines', '1') != '0'; - let columnLines = utils.getValue(this.state.style, + let columnLines = getValue(this.state.style, 'columnLines', '1') != '0'; // Paints row lines @@ -235,16 +245,16 @@ { mxCylinder.call(this); }; - utils.extend(CubeShape, mxCylinder); + extend(CubeShape, mxCylinder); CubeShape.prototype.size = 20; CubeShape.prototype.darkOpacity = 0; CubeShape.prototype.darkOpacity2 = 0; CubeShape.prototype.paintVertexShape = function(c, x, y, w, h) { - let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))))); - let op = Math.max(-1, Math.min(1, parseFloat(utils.getValue(this.style, 'darkOpacity', this.darkOpacity)))); - var op2 = Math.max(-1, Math.min(1, parseFloat(utils.getValue(this.style, 'darkOpacity2', this.darkOpacity2)))); + let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(getValue(this.style, 'size', this.size))))); + let op = Math.max(-1, Math.min(1, parseFloat(getValue(this.style, 'darkOpacity', this.darkOpacity)))); + var op2 = Math.max(-1, Math.min(1, parseFloat(getValue(this.style, 'darkOpacity2', this.darkOpacity2)))); c.translate(x, y); c.begin(); @@ -301,9 +311,9 @@ }; CubeShape.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let s = parseFloat(utils.getValue(this.style, 'size', this.size)) * this.scale; + let s = parseFloat(getValue(this.style, 'size', this.size)) * this.scale; return new Rectangle(s, s, 0, 0); } @@ -313,7 +323,7 @@ mxCellRenderer.registerShape('cube', CubeShape); - var tan30 = Math.tan(utils.toRadians(30)); + var tan30 = Math.tan(toRadians(30)); var tan30Dx = (0.5 - tan30) / 2; // Cube Shape, supports size style @@ -321,7 +331,7 @@ { Actor.call(this); }; - utils.extend(IsoRectangleShape, Actor); + extend(IsoRectangleShape, Actor); IsoRectangleShape.prototype.size = 20; IsoRectangleShape.prototype.redrawPath = function(path, x, y, w, h) { @@ -344,7 +354,7 @@ { mxCylinder.call(this); }; - utils.extend(IsoCubeShape, mxCylinder); + extend(IsoCubeShape, mxCylinder); IsoCubeShape.prototype.size = 20; IsoCubeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) { @@ -381,7 +391,7 @@ { mxCylinder.call(this); }; - utils.extend(DataStoreShape, mxCylinder); + extend(DataStoreShape, mxCylinder); DataStoreShape.prototype.redrawPath = function(c, x, y, w, h, isForeground) { @@ -446,14 +456,14 @@ { mxCylinder.call(this); }; - utils.extend(NoteShape, mxCylinder); + extend(NoteShape, mxCylinder); NoteShape.prototype.size = 30; NoteShape.prototype.darkOpacity = 0; NoteShape.prototype.paintVertexShape = function(c, x, y, w, h) { - let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))))); - let op = Math.max(-1, Math.min(1, parseFloat(utils.getValue(this.style, 'darkOpacity', this.darkOpacity)))); + let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(getValue(this.style, 'size', this.size))))); + let op = Math.max(-1, Math.min(1, parseFloat(getValue(this.style, 'darkOpacity', this.darkOpacity)))); c.translate(x, y); c.begin(); @@ -499,7 +509,7 @@ { NoteShape.call(this); }; - utils.extend(NoteShape2, NoteShape); + extend(NoteShape2, NoteShape); mxCellRenderer.registerShape('note2', NoteShape2); @@ -508,12 +518,12 @@ { Shape.call(this); }; - utils.extend(IsoCubeShape2, Shape); + extend(IsoCubeShape2, Shape); IsoCubeShape2.prototype.isoAngle = 15; IsoCubeShape2.prototype.paintVertexShape = function(c, x, y, w, h) { - let isoAngle = Math.max(0.01, Math.min(94, parseFloat(utils.getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ; + let isoAngle = Math.max(0.01, Math.min(94, parseFloat(getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ; let isoH = Math.min(w * Math.tan(isoAngle), h * 0.5); c.translate(x,y); @@ -547,13 +557,13 @@ Shape.call(this); }; - utils.extend(CylinderShape, Shape); + extend(CylinderShape, Shape); CylinderShape.prototype.size = 15; CylinderShape.prototype.paintVertexShape = function(c, x, y, w, h) { - let size = Math.max(0, Math.min(h * 0.5, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let size = Math.max(0, Math.min(h * 0.5, parseFloat(getValue(this.style, 'size', this.size)))); c.translate(x,y); @@ -596,14 +606,14 @@ this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; - utils.extend(CylinderShape3, mxCylinder); + extend(CylinderShape3, mxCylinder); CylinderShape3.prototype.size = 15; CylinderShape3.prototype.paintVertexShape = function(c, x, y, w, h) { - let size = Math.max(0, Math.min(h * 0.5, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let lid = utils.getValue(this.style, 'lid', true); + let size = Math.max(0, Math.min(h * 0.5, parseFloat(getValue(this.style, 'size', this.size)))); + let lid = getValue(this.style, 'lid', true); c.translate(x,y); @@ -655,7 +665,7 @@ { Actor.call(this); }; - utils.extend(SwitchShape, Actor); + extend(SwitchShape, Actor); SwitchShape.prototype.redrawPath = function(c, x, y, w, h) { let curve = 0.5; @@ -674,7 +684,7 @@ { mxCylinder.call(this); }; - utils.extend(FolderShape, mxCylinder); + extend(FolderShape, mxCylinder); FolderShape.prototype.tabWidth = 60; FolderShape.prototype.tabHeight = 20; FolderShape.prototype.tabPosition = 'right'; @@ -684,12 +694,12 @@ { c.translate(x, y); - let dx = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'tabWidth', this.tabWidth)))); - let dy = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'tabHeight', this.tabHeight)))); - let tp = utils.getValue(this.style, 'tabPosition', this.tabPosition); - let rounded = utils.getValue(this.style, 'rounded', false); - let absArcSize = utils.getValue(this.style, 'absoluteArcSize', false); - let arcSize = parseFloat(utils.getValue(this.style, 'arcSize', this.arcSize)); + let dx = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'tabWidth', this.tabWidth)))); + let dy = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'tabHeight', this.tabHeight)))); + let tp = getValue(this.style, 'tabPosition', this.tabPosition); + let rounded = getValue(this.style, 'rounded', false); + let absArcSize = getValue(this.style, 'absoluteArcSize', false); + let arcSize = parseFloat(getValue(this.style, 'arcSize', this.arcSize)); if (!absArcSize) { @@ -748,7 +758,7 @@ c.setShadow(false); - let sym = utils.getValue(this.style, 'folderSymbol', null); + let sym = getValue(this.style, 'folderSymbol', null); if (sym == 'triangle') { @@ -768,7 +778,7 @@ { mxCylinder.call(this); }; - utils.extend(UMLStateShape, mxCylinder); + extend(UMLStateShape, mxCylinder); UMLStateShape.prototype.arcSize = 0.1; UMLStateShape.prototype.paintVertexShape = function(c, x, y, w, h) @@ -778,10 +788,10 @@ // let dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'tabWidth', this.tabWidth)))); // let dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'tabHeight', this.tabHeight)))); // let tp = mxUtils.getValue(this.style, 'tabPosition', this.tabPosition); - let rounded = utils.getValue(this.style, 'rounded', false); - let absArcSize = utils.getValue(this.style, 'absoluteArcSize', false); - let arcSize = parseFloat(utils.getValue(this.style, 'arcSize', this.arcSize)); - let connPoint = utils.getValue(this.style, 'umlStateConnection', null); + let rounded = getValue(this.style, 'rounded', false); + let absArcSize = getValue(this.style, 'absoluteArcSize', false); + let arcSize = parseFloat(getValue(this.style, 'arcSize', this.arcSize)); + let connPoint = getValue(this.style, 'umlStateConnection', null); if (!absArcSize) @@ -817,7 +827,7 @@ c.setShadow(false); - let sym = utils.getValue(this.style, 'umlStateSymbol', null); + let sym = getValue(this.style, 'umlStateSymbol', null); if (sym == 'collapseState') { @@ -857,7 +867,7 @@ { Actor.call(this); }; - utils.extend(CardShape, Actor); + extend(CardShape, Actor); CardShape.prototype.size = 30; CardShape.prototype.isRoundable = function() { @@ -865,8 +875,8 @@ }; CardShape.prototype.redrawPath = function(c, x, y, w, h) { - let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(getValue(this.style, 'size', this.size))))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(s, 0), new Point(w, 0), new Point(w, h), new Point(0, h), new Point(0, s)], this.isRounded, arcSize, true); c.end(); @@ -879,11 +889,11 @@ { Actor.call(this); }; - utils.extend(TapeShape, Actor); + extend(TapeShape, Actor); TapeShape.prototype.size = 0.4; TapeShape.prototype.redrawPath = function(c, x, y, w, h) { - let dy = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let dy = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); let fy = 1.4; c.moveTo(0, dy / 2); @@ -899,9 +909,9 @@ TapeShape.prototype.getLabelBounds = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let size = utils.getValue(this.style, 'size', this.size); + let size = getValue(this.style, 'size', this.size); let w = rect.width; let h = rect.height; @@ -931,13 +941,13 @@ { Actor.call(this); }; - utils.extend(DocumentShape, Actor); + extend(DocumentShape, Actor); DocumentShape.prototype.size = 0.3; DocumentShape.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - return new Rectangle(0, 0, 0, parseFloat(utils.getValue( + return new Rectangle(0, 0, 0, parseFloat(getValue( this.style, 'size', this.size)) * rect.height); } @@ -945,7 +955,7 @@ }; DocumentShape.prototype.redrawPath = function(c, x, y, w, h) { - let dy = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let dy = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); let fy = 1.4; c.moveTo(0, 0); @@ -964,7 +974,7 @@ mxCylinder.prototype.getCylinderSize = function(x, y, w, h) { - let size = utils.getValue(this.style, 'size'); + let size = getValue(this.style, 'size'); if (size != null) { @@ -978,9 +988,9 @@ mxCylinder.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let size = utils.getValue(this.style, 'size', 0.15) * 2; + let size = getValue(this.style, 'size', 0.15) * 2; return new Rectangle(0, Math.min(this.maxHeight * this.scale, rect.height * size), 0, 0); } @@ -990,11 +1000,11 @@ CylinderShape3.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let size = utils.getValue(this.style, 'size', 15); + let size = getValue(this.style, 'size', 15); - if (!utils.getValue(this.style, 'lid', true)) + if (!getValue(this.style, 'lid', true)) { size /= 2; } @@ -1007,17 +1017,17 @@ FolderShape.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let sizeY = utils.getValue(this.style, 'tabHeight', 15) * this.scale; + let sizeY = getValue(this.style, 'tabHeight', 15) * this.scale; - if (utils.getValue(this.style, 'labelInHeader', false)) + if (getValue(this.style, 'labelInHeader', false)) { - let sizeX = utils.getValue(this.style, 'tabWidth', 15) * this.scale; - let sizeY = utils.getValue(this.style, 'tabHeight', 15) * this.scale; - let rounded = utils.getValue(this.style, 'rounded', false); - let absArcSize = utils.getValue(this.style, 'absoluteArcSize', false); - let arcSize = parseFloat(utils.getValue(this.style, 'arcSize', this.arcSize)); + let sizeX = getValue(this.style, 'tabWidth', 15) * this.scale; + let sizeY = getValue(this.style, 'tabHeight', 15) * this.scale; + let rounded = getValue(this.style, 'rounded', false); + let absArcSize = getValue(this.style, 'absoluteArcSize', false); + let arcSize = parseFloat(getValue(this.style, 'arcSize', this.arcSize)); if (!absArcSize) { @@ -1031,7 +1041,7 @@ arcSize = 0; } - if (utils.getValue(this.style, 'tabPosition', this.tabPosition) == 'left') + if (getValue(this.style, 'tabPosition', this.tabPosition) == 'left') { return new Rectangle(arcSize, 0, Math.min(rect.width, rect.width - sizeX), Math.min(rect.height, rect.height - sizeY)); } @@ -1051,9 +1061,9 @@ UMLStateShape.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let connPoint = utils.getValue(this.style, 'umlStateConnection', null); + let connPoint = getValue(this.style, 'umlStateConnection', null); if (connPoint != null) { @@ -1066,9 +1076,9 @@ NoteShape2.prototype.getLabelMargins = function(rect) { - if (utils.getValue(this.style, 'boundedLbl', false)) + if (getValue(this.style, 'boundedLbl', false)) { - let size = utils.getValue(this.style, 'size', 15); + let size = getValue(this.style, 'size', 15); return new Rectangle(0, Math.min(rect.height * this.scale, size * this.scale), 0, Math.max(0, size * this.scale)); } @@ -1081,7 +1091,7 @@ { Actor.call(this); }; - utils.extend(ParallelogramShape, Actor); + extend(ParallelogramShape, Actor); ParallelogramShape.prototype.size = 0.2; ParallelogramShape.prototype.fixedSize = 20; ParallelogramShape.prototype.isRoundable = function() @@ -1090,10 +1100,10 @@ }; ParallelogramShape.prototype.redrawPath = function(c, x, y, w, h) { - let fixed = utils.getValue(this.style, 'fixedSize', '0') != '0'; + let fixed = getValue(this.style, 'fixedSize', '0') != '0'; - let dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, h), new Point(dx, 0), new Point(w, 0), new Point(w - dx, h)], this.isRounded, arcSize, true); c.end(); @@ -1106,7 +1116,7 @@ { Actor.call(this); }; - utils.extend(TrapezoidShape, Actor); + extend(TrapezoidShape, Actor); TrapezoidShape.prototype.size = 0.2; TrapezoidShape.prototype.fixedSize = 20; TrapezoidShape.prototype.isRoundable = function() @@ -1116,10 +1126,10 @@ TrapezoidShape.prototype.redrawPath = function(c, x, y, w, h) { - let fixed = utils.getValue(this.style, 'fixedSize', '0') != '0'; + let fixed = getValue(this.style, 'fixedSize', '0') != '0'; - let dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(utils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, h), new Point(dx, 0), new Point(w - dx, 0), new Point(w, h)], this.isRounded, arcSize, true); }; @@ -1131,13 +1141,13 @@ { Actor.call(this); }; - utils.extend(CurlyBracketShape, Actor); + extend(CurlyBracketShape, Actor); CurlyBracketShape.prototype.size = 0.5; CurlyBracketShape.prototype.redrawPath = function(c, x, y, w, h) { c.setFillColor(null); - let s = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(w, 0), new Point(s, 0), new Point(s, h / 2), new Point(0, h / 2), new Point(s, h / 2), new Point(s, h), new Point(w, h)], this.isRounded, arcSize, false); @@ -1151,7 +1161,7 @@ { Actor.call(this); }; - utils.extend(ParallelMarkerShape, Actor); + extend(ParallelMarkerShape, Actor); ParallelMarkerShape.prototype.redrawPath = function(c, x, y, w, h) { c.setStrokeWidth(1); @@ -1181,22 +1191,22 @@ this.defaultVariation = defaultVariation; this.originalLineTo = this.canvas.lineTo; - this.canvas.lineTo = utils.bind(this, HandJiggle.prototype.lineTo); + this.canvas.lineTo = this.bind(HandJiggle.prototype.lineTo); this.originalMoveTo = this.canvas.moveTo; - this.canvas.moveTo = utils.bind(this, HandJiggle.prototype.moveTo); + this.canvas.moveTo = this.bind(HandJiggle.prototype.moveTo); this.originalClose = this.canvas.close; - this.canvas.close = utils.bind(this, HandJiggle.prototype.close); + this.canvas.close = this.bind(HandJiggle.prototype.close); this.originalQuadTo = this.canvas.quadTo; - this.canvas.quadTo = utils.bind(this, HandJiggle.prototype.quadTo); + this.canvas.quadTo = this.bind(HandJiggle.prototype.quadTo); this.originalCurveTo = this.canvas.curveTo; - this.canvas.curveTo = utils.bind(this, HandJiggle.prototype.curveTo); + this.canvas.curveTo = this.bind(HandJiggle.prototype.curveTo); this.originalArcTo = this.canvas.arcTo; - this.canvas.arcTo = utils.bind(this, HandJiggle.prototype.arcTo); + this.canvas.arcTo = this.bind(HandJiggle.prototype.arcTo); }; HandJiggle.prototype.moveTo = function(endX, endY) @@ -1338,13 +1348,13 @@ // Returns a new HandJiggle canvas Shape.prototype.createComicCanvas = function(c) { - return new HandJiggle(c, utils.getValue(this.style, 'jiggle', this.defaultJiggle)); + return new HandJiggle(c, getValue(this.style, 'jiggle', this.defaultJiggle)); }; // Overrides to avoid call to rect Shape.prototype.createHandJiggle = function(c) { - if (!this.outline && this.style != null && utils.getValue(this.style, 'comic', '0') != '0') + if (!this.outline && this.style != null && getValue(this.style, 'comic', '0') != '0') { return this.createComicCanvas(c); } @@ -1359,8 +1369,8 @@ var mxRectangleShapeIsHtmlAllowed0 = RectangleShape.prototype.isHtmlAllowed; RectangleShape.prototype.isHtmlAllowed = function() { - return !this.outline && (this.style == null || (utils.getValue(this.style, 'comic', '0') == '0' && - utils.getValue(this.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '0')) && + return !this.outline && (this.style == null || (getValue(this.style, 'comic', '0') == '0' && + getValue(this.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '0')) && mxRectangleShapeIsHtmlAllowed0.apply(this, arguments); }; @@ -1377,7 +1387,7 @@ if (this.style != null) { - events = utils.getValue(this.style, 'pointerEvents', '1') == '1'; + events = getValue(this.style, 'pointerEvents', '1') == '1'; } if (events || (this.fill != null && this.fill != mxConstants.NONE) || @@ -1394,14 +1404,14 @@ { let r = 0; - if (utils.getValue(this.style, 'absoluteArcSize', 0) == '1') + if (getValue(this.style, 'absoluteArcSize', 0) == '1') { - r = Math.min(w / 2, Math.min(h / 2, utils.getValue(this.style, + r = Math.min(w / 2, Math.min(h / 2, getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2)); } else { - let f = utils.getValue(this.style, 'arcSize', + let f = getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; r = Math.min(w * f, h * f); } @@ -1453,7 +1463,7 @@ { RectangleShape.call(this); }; - utils.extend(ProcessShape, RectangleShape); + extend(ProcessShape, RectangleShape); ProcessShape.prototype.size = 0.1; ProcessShape.prototype.fixedSize = false; @@ -1463,7 +1473,7 @@ }; ProcessShape.prototype.getLabelBounds = function(rect) { - if (utils.getValue(this.state.style, 'horizontal', true) == + if (getValue(this.state.style, 'horizontal', true) == (this.direction == null || this.direction == mxConstants.DIRECTION_EAST || this.direction == mxConstants.DIRECTION_WEST)) @@ -1472,11 +1482,11 @@ let h = rect.height; let r = new Rectangle(rect.x, rect.y, w, h); - let inset = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let inset = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); if (this.isRounded) { - let f = utils.getValue(this.style, 'arcSize', + let f = getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; inset = Math.max(inset, Math.min(w * f, h * f)); } @@ -1491,8 +1501,8 @@ }; ProcessShape.prototype.paintForeground = function(c, x, y, w, h) { - let isFixedSize = utils.getValue(this.style, 'fixedSize', this.fixedSize); - let inset = parseFloat(utils.getValue(this.style, 'size', this.size)); + let isFixedSize = getValue(this.style, 'fixedSize', this.fixedSize); + let inset = parseFloat(getValue(this.style, 'size', this.size)); if (isFixedSize) { @@ -1506,7 +1516,7 @@ if (this.isRounded) { - let f = utils.getValue(this.style, 'arcSize', + let f = getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; inset = Math.max(inset, Math.min(w * f, h * f)); } @@ -1531,7 +1541,7 @@ { RectangleShape.call(this); }; - utils.extend(TransparentShape, RectangleShape); + extend(TransparentShape, RectangleShape); TransparentShape.prototype.paintBackground = function(c, x, y, w, h) { c.setFillColor(mxConstants.NONE); @@ -1547,14 +1557,14 @@ { Actor.call(this); }; - utils.extend(CalloutShape, HexagonShape); + extend(CalloutShape, HexagonShape); CalloutShape.prototype.size = 30; CalloutShape.prototype.position = 0.5; CalloutShape.prototype.position2 = 0.5; CalloutShape.prototype.base = 20; CalloutShape.prototype.getLabelMargins = function() { - return new Rectangle(0, 0, 0, parseFloat(utils.getValue( + return new Rectangle(0, 0, 0, parseFloat(getValue( this.style, 'size', this.size)) * this.scale); }; CalloutShape.prototype.isRoundable = function() @@ -1563,11 +1573,11 @@ }; CalloutShape.prototype.redrawPath = function(c, x, y, w, h) { - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; - let s = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let dx = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'position', this.position)))); - var dx2 = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'position2', this.position2)))); - let base = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'base', this.base)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); + let dx = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'position', this.position)))); + var dx2 = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'position2', this.position2)))); + let base = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'base', this.base)))); this.addPoints(c, [new Point(0, 0), new Point(w, 0), new Point(w, h - s), new Point(Math.min(w, dx + base), h - s), new Point(dx2, h), @@ -1582,7 +1592,7 @@ { Actor.call(this); }; - utils.extend(StepShape, Actor); + extend(StepShape, Actor); StepShape.prototype.size = 0.2; StepShape.prototype.fixedSize = 20; StepShape.prototype.isRoundable = function() @@ -1591,10 +1601,10 @@ }; StepShape.prototype.redrawPath = function(c, x, y, w, h) { - let fixed = utils.getValue(this.style, 'fixedSize', '0') != '0'; - let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'size', this.fixedSize)))) : - w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let fixed = getValue(this.style, 'fixedSize', '0') != '0'; + let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'size', this.fixedSize)))) : + w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, 0), new Point(w - s, 0), new Point(w, h / 2), new Point(w - s, h), new Point(0, h), new Point(s, h / 2)], this.isRounded, arcSize, true); c.end(); @@ -1607,7 +1617,7 @@ { Actor.call(this); }; - utils.extend(HexagonShape, HexagonShape); + extend(HexagonShape, HexagonShape); HexagonShape.prototype.size = 0.25; HexagonShape.prototype.fixedSize = 20; HexagonShape.prototype.isRoundable = function() @@ -1616,10 +1626,10 @@ }; HexagonShape.prototype.redrawPath = function(c, x, y, w, h) { - let fixed = utils.getValue(this.style, 'fixedSize', '0') != '0'; - let s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(utils.getValue(this.style, 'size', this.fixedSize)))) : - w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let fixed = getValue(this.style, 'fixedSize', '0') != '0'; + let s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(getValue(this.style, 'size', this.fixedSize)))) : + w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(s, 0), new Point(w - s, 0), new Point(w, 0.5 * h), new Point(w - s, h), new Point(s, h), new Point(0, 0.5 * h)], this.isRounded, arcSize, true); }; @@ -1631,7 +1641,7 @@ { RectangleShape.call(this); }; - utils.extend(PlusShape, RectangleShape); + extend(PlusShape, RectangleShape); PlusShape.prototype.isHtmlAllowed = function() { return false; @@ -1696,7 +1706,7 @@ { RectangleShape.call(this); }; - utils.extend(ExtendedShape, RectangleShape); + extend(ExtendedShape, RectangleShape); ExtendedShape.prototype.isHtmlAllowed = function() { return false; @@ -1817,7 +1827,7 @@ { mxCylinder.call(this); }; - utils.extend(MessageShape, mxCylinder); + extend(MessageShape, mxCylinder); MessageShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) { if (isForeground) @@ -1844,7 +1854,7 @@ { Shape.call(this); }; - utils.extend(UmlActorShape, Shape); + extend(UmlActorShape, Shape); UmlActorShape.prototype.paintBackground = function(c, x, y, w, h) { c.translate(x, y); @@ -1881,7 +1891,7 @@ { Shape.call(this); }; - utils.extend(UmlBoundaryShape, Shape); + extend(UmlBoundaryShape, Shape); UmlBoundaryShape.prototype.getLabelMargins = function(rect) { return new Rectangle(rect.width / 6, 0, 0, 0); @@ -1917,7 +1927,7 @@ { EllipseShape.call(this); }; - utils.extend(UmlEntityShape, EllipseShape); + extend(UmlEntityShape, EllipseShape); UmlEntityShape.prototype.paintVertexShape = function(c, x, y, w, h) { EllipseShape.prototype.paintVertexShape.apply(this, arguments); @@ -1936,7 +1946,7 @@ { Shape.call(this); }; - utils.extend(UmlDestroyShape, Shape); + extend(UmlDestroyShape, Shape); UmlDestroyShape.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); @@ -1957,7 +1967,7 @@ { Shape.call(this); }; - utils.extend(UmlControlShape, Shape); + extend(UmlControlShape, Shape); UmlControlShape.prototype.getLabelBounds = function(rect) { return new Rectangle(rect.x, rect.y + rect.height / 8, rect.width, rect.height * 7 / 8); @@ -1995,7 +2005,7 @@ { RectangleShape.call(this); }; - utils.extend(UmlLifeline, RectangleShape); + extend(UmlLifeline, RectangleShape); UmlLifeline.prototype.size = 40; UmlLifeline.prototype.isHtmlAllowed = function() { @@ -2004,14 +2014,14 @@ UmlLifeline.prototype.getLabelBounds = function(rect) { let size = Math.max(0, Math.min(rect.height, parseFloat( - utils.getValue(this.style, 'size', this.size)) * this.scale)); + getValue(this.style, 'size', this.size)) * this.scale)); return new Rectangle(rect.x, rect.y, rect.width, size); }; UmlLifeline.prototype.paintBackground = function(c, x, y, w, h) { - let size = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let participant = utils.getValue(this.style, 'participant'); + let size = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); + let participant = getValue(this.style, 'participant'); if (participant == null || this.state == null) { @@ -2043,7 +2053,7 @@ }; UmlLifeline.prototype.paintForeground = function(c, x, y, w, h) { - let size = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let size = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); RectangleShape.prototype.paintForeground.call(this, c, x, y, w, Math.min(h, size)); }; @@ -2054,22 +2064,22 @@ { Shape.call(this); }; - utils.extend(UmlFrame, Shape); + extend(UmlFrame, Shape); UmlFrame.prototype.width = 60; UmlFrame.prototype.height = 30; UmlFrame.prototype.corner = 10; UmlFrame.prototype.getLabelMargins = function(rect) { return new Rectangle(0, 0, - rect.width - (parseFloat(utils.getValue(this.style, 'width', this.width) * this.scale)), - rect.height - (parseFloat(utils.getValue(this.style, 'height', this.height) * this.scale))); + rect.width - (parseFloat(getValue(this.style, 'width', this.width) * this.scale)), + rect.height - (parseFloat(getValue(this.style, 'height', this.height) * this.scale))); }; UmlFrame.prototype.paintBackground = function(c, x, y, w, h) { let co = this.corner; - var w0 = Math.min(w, Math.max(co, parseFloat(utils.getValue(this.style, 'width', this.width)))); - var h0 = Math.min(h, Math.max(co * 1.5, parseFloat(utils.getValue(this.style, 'height', this.height)))); - let bg = utils.getValue(this.style, 'swimlaneFillColor', mxConstants.NONE); + var w0 = Math.min(w, Math.max(co, parseFloat(getValue(this.style, 'width', this.width)))); + var h0 = Math.min(h, Math.max(co * 1.5, parseFloat(getValue(this.style, 'height', this.height)))); + let bg = getValue(this.style, 'swimlaneFillColor', mxConstants.NONE); if (bg != mxConstants.NONE) { @@ -2114,7 +2124,7 @@ if (vertex != null) { - size = utils.getValue(vertex.style, 'size', size) * vertex.view.scale; + size = getValue(vertex.style, 'size', size) * vertex.view.scale; } let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1; @@ -2179,8 +2189,8 @@ // Callout Perimeter Perimeter.CalloutPerimeter = (bounds, vertex, next, orthogonal) => { - return Perimeter.RectanglePerimeter(utils.getDirectedBounds(bounds, new Rectangle(0, 0, 0, - Math.max(0, Math.min(bounds.height, parseFloat(utils.getValue(vertex.style, 'size', + return Perimeter.RectanglePerimeter(getDirectedBounds(bounds, new Rectangle(0, 0, 0, + Math.max(0, Math.min(bounds.height, parseFloat(getValue(vertex.style, 'size', CalloutShape.prototype.size)) * vertex.view.scale))), vertex.style), vertex, next, orthogonal); }; @@ -2190,12 +2200,12 @@ // Parallelogram Perimeter Perimeter.ParallelogramPerimeter = (bounds, vertex, next, orthogonal) => { - let fixed = utils.getValue(vertex.style, 'fixedSize', '0') != '0'; + let fixed = getValue(vertex.style, 'fixedSize', '0') != '0'; let size = (fixed) ? ParallelogramShape.prototype.fixedSize : ParallelogramShape.prototype.size; if (vertex != null) { - size = utils.getValue(vertex.style, 'size', size); + size = getValue(vertex.style, 'size', size); } if (fixed) @@ -2208,7 +2218,7 @@ let w = bounds.width; let h = bounds.height; - let direction = (vertex != null) ? utils.getValue( + let direction = (vertex != null) ? getValue( vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; let vertical = direction == mxConstants.DIRECTION_NORTH || @@ -2245,7 +2255,7 @@ } } - return utils.getPerimeterPoint(points, p1, next); + return getPerimeterPoint(points, p1, next); }; StyleRegistry.putValue('parallelogramPerimeter', Perimeter.ParallelogramPerimeter); @@ -2253,12 +2263,12 @@ // Trapezoid Perimeter Perimeter.TrapezoidPerimeter = (bounds, vertex, next, orthogonal) => { - let fixed = utils.getValue(vertex.style, 'fixedSize', '0') != '0'; + let fixed = getValue(vertex.style, 'fixedSize', '0') != '0'; let size = (fixed) ? TrapezoidShape.prototype.fixedSize : TrapezoidShape.prototype.size; if (vertex != null) { - size = utils.getValue(vertex.style, 'size', size); + size = getValue(vertex.style, 'size', size); } if (fixed) @@ -2271,7 +2281,7 @@ let w = bounds.width; let h = bounds.height; - let direction = (vertex != null) ? utils.getValue( + let direction = (vertex != null) ? getValue( vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; let points = []; @@ -2318,7 +2328,7 @@ } } - return utils.getPerimeterPoint(points, p1, next); + return getPerimeterPoint(points, p1, next); }; StyleRegistry.putValue('trapezoidPerimeter', Perimeter.TrapezoidPerimeter); @@ -2326,12 +2336,12 @@ // Step Perimeter Perimeter.StepPerimeter = (bounds, vertex, next, orthogonal) => { - let fixed = utils.getValue(vertex.style, 'fixedSize', '0') != '0'; + let fixed = getValue(vertex.style, 'fixedSize', '0') != '0'; let size = (fixed) ? StepShape.prototype.fixedSize : StepShape.prototype.size; if (vertex != null) { - size = utils.getValue(vertex.style, 'size', size); + size = getValue(vertex.style, 'size', size); } if (fixed) @@ -2347,7 +2357,7 @@ let cx = bounds.getCenterX(); let cy = bounds.getCenterY(); - let direction = (vertex != null) ? utils.getValue( + let direction = (vertex != null) ? getValue( vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; var points; @@ -2395,7 +2405,7 @@ } } - return utils.getPerimeterPoint(points, p1, next); + return getPerimeterPoint(points, p1, next); }; StyleRegistry.putValue('stepPerimeter', Perimeter.StepPerimeter); @@ -2403,12 +2413,12 @@ // Hexagon Perimeter 2 (keep existing one) Perimeter.HexagonPerimeter2 = (bounds, vertex, next, orthogonal) => { - let fixed = utils.getValue(vertex.style, 'fixedSize', '0') != '0'; + let fixed = getValue(vertex.style, 'fixedSize', '0') != '0'; let size = (fixed) ? HexagonShape.prototype.fixedSize : HexagonShape.prototype.size; if (vertex != null) { - size = utils.getValue(vertex.style, 'size', size); + size = getValue(vertex.style, 'size', size); } if (fixed) @@ -2424,7 +2434,7 @@ let cx = bounds.getCenterX(); let cy = bounds.getCenterY(); - let direction = (vertex != null) ? utils.getValue( + let direction = (vertex != null) ? getValue( vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; let vertical = direction == mxConstants.DIRECTION_NORTH || @@ -2460,7 +2470,7 @@ } } - return utils.getPerimeterPoint(points, p1, next); + return getPerimeterPoint(points, p1, next); }; StyleRegistry.putValue('hexagonPerimeter2', Perimeter.HexagonPerimeter2); @@ -2470,11 +2480,11 @@ { Shape.call(this); }; - utils.extend(LollipopShape, Shape); + extend(LollipopShape, Shape); LollipopShape.prototype.size = 10; LollipopShape.prototype.paintBackground = function(c, x, y, w, h) { - let sz = parseFloat(utils.getValue(this.style, 'size', this.size)); + let sz = parseFloat(getValue(this.style, 'size', this.size)); c.translate(x, y); c.ellipse((w - sz) / 2, 0, sz, sz); @@ -2494,13 +2504,13 @@ { Shape.call(this); }; - utils.extend(RequiresShape, Shape); + extend(RequiresShape, Shape); RequiresShape.prototype.size = 10; RequiresShape.prototype.inset = 2; RequiresShape.prototype.paintBackground = function(c, x, y, w, h) { - let sz = parseFloat(utils.getValue(this.style, 'size', this.size)); - let inset = parseFloat(utils.getValue(this.style, 'inset', this.inset)) + this.strokewidth; + let sz = parseFloat(getValue(this.style, 'size', this.size)); + let inset = parseFloat(getValue(this.style, 'inset', this.inset)) + this.strokewidth; c.translate(x, y); c.begin(); @@ -2524,7 +2534,7 @@ { Shape.call(this); }; - utils.extend(RequiredInterfaceShape, Shape); + extend(RequiredInterfaceShape, Shape); RequiredInterfaceShape.prototype.paintBackground = function(c, x, y, w, h) { @@ -2545,11 +2555,11 @@ { Shape.call(this); }; - utils.extend(ProvidedRequiredInterfaceShape, Shape); + extend(ProvidedRequiredInterfaceShape, Shape); ProvidedRequiredInterfaceShape.prototype.inset = 2; ProvidedRequiredInterfaceShape.prototype.paintBackground = function(c, x, y, w, h) { - let inset = parseFloat(utils.getValue(this.style, 'inset', this.inset)) + this.strokewidth; + let inset = parseFloat(getValue(this.style, 'inset', this.inset)) + this.strokewidth; c.translate(x, y); c.ellipse(0, inset, w - 2 * inset, h - 2 * inset); @@ -2570,13 +2580,13 @@ { mxCylinder.call(this); }; - utils.extend(ModuleShape, mxCylinder); + extend(ModuleShape, mxCylinder); ModuleShape.prototype.jettyWidth = 20; ModuleShape.prototype.jettyHeight = 10; ModuleShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) { - let dx = parseFloat(utils.getValue(this.style, 'jettyWidth', this.jettyWidth)); - let dy = parseFloat(utils.getValue(this.style, 'jettyHeight', this.jettyHeight)); + let dx = parseFloat(getValue(this.style, 'jettyWidth', this.jettyWidth)); + let dy = parseFloat(getValue(this.style, 'jettyHeight', this.jettyHeight)); var x0 = dx / 2; var x1 = x0 + dx / 2; var y0 = Math.min(dy, h - dy); @@ -2620,13 +2630,13 @@ { mxCylinder.call(this); }; - utils.extend(ComponentShape, mxCylinder); + extend(ComponentShape, mxCylinder); ComponentShape.prototype.jettyWidth = 32; ComponentShape.prototype.jettyHeight = 12; ComponentShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) { - let dx = parseFloat(utils.getValue(this.style, 'jettyWidth', this.jettyWidth)); - let dy = parseFloat(utils.getValue(this.style, 'jettyHeight', this.jettyHeight)); + let dx = parseFloat(getValue(this.style, 'jettyWidth', this.jettyWidth)); + let dy = parseFloat(getValue(this.style, 'jettyHeight', this.jettyHeight)); var x0 = dx / 2; var x1 = x0 + dx / 2; var y0 = 0.3 * h - dy / 2; @@ -2670,13 +2680,13 @@ { RectangleShape.call(this); }; - utils.extend(AssociativeEntity, RectangleShape); + extend(AssociativeEntity, RectangleShape); AssociativeEntity.prototype.paintForeground = function(c, x, y, w, h) { let hw = w / 2; let hh = h / 2; - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; c.begin(); this.addPoints(c, [new Point(x + hw, y), new Point(x + w, y + hh), new Point(x + hw, y + h), new Point(x, y + hh)], this.isRounded, arcSize, true); @@ -2692,7 +2702,7 @@ { DoubleEllipseShape.call(this); }; - utils.extend(StateShape, DoubleEllipseShape); + extend(StateShape, DoubleEllipseShape); StateShape.prototype.outerStroke = true; StateShape.prototype.paintVertexShape = function(c, x, y, w, h) { @@ -2719,7 +2729,7 @@ { StateShape.call(this); }; - utils.extend(StartStateShape, StateShape); + extend(StartStateShape, StateShape); StartStateShape.prototype.outerStroke = false; mxCellRenderer.registerShape('startState', StartStateShape); @@ -2730,7 +2740,7 @@ ArrowConnector.call(this); this.spacing = 0; }; - utils.extend(LinkShape, ArrowConnector); + extend(LinkShape, ArrowConnector); LinkShape.prototype.defaultWidth = 4; LinkShape.prototype.isOpenEnded = function() @@ -2740,7 +2750,7 @@ LinkShape.prototype.getEdgeWidth = function() { - return utils.getNumber(this.style, 'width', this.defaultWidth) + Math.max(0, this.strokewidth - 1); + return getNumber(this.style, 'width', this.defaultWidth) + Math.max(0, this.strokewidth - 1); }; LinkShape.prototype.isArrowRounded = function() @@ -2757,23 +2767,23 @@ ArrowConnector.call(this); this.spacing = 0; }; - utils.extend(FlexArrowShape, ArrowConnector); + extend(FlexArrowShape, ArrowConnector); FlexArrowShape.prototype.defaultWidth = 10; FlexArrowShape.prototype.defaultArrowWidth = 20; FlexArrowShape.prototype.getStartArrowWidth = function() { - return this.getEdgeWidth() + utils.getNumber(this.style, 'startWidth', this.defaultArrowWidth); + return this.getEdgeWidth() + getNumber(this.style, 'startWidth', this.defaultArrowWidth); }; FlexArrowShape.prototype.getEndArrowWidth = function() { - return this.getEdgeWidth() + utils.getNumber(this.style, 'endWidth', this.defaultArrowWidth);; + return this.getEdgeWidth() + getNumber(this.style, 'endWidth', this.defaultArrowWidth);; }; FlexArrowShape.prototype.getEdgeWidth = function() { - return utils.getNumber(this.style, 'width', this.defaultWidth) + Math.max(0, this.strokewidth - 1); + return getNumber(this.style, 'width', this.defaultWidth) + Math.max(0, this.strokewidth - 1); }; // Registers the link shape @@ -2784,7 +2794,7 @@ { Actor.call(this); }; - utils.extend(ManualInputShape, Actor); + extend(ManualInputShape, Actor); ManualInputShape.prototype.size = 30; ManualInputShape.prototype.isRoundable = function() { @@ -2792,8 +2802,8 @@ }; ManualInputShape.prototype.redrawPath = function(c, x, y, w, h) { - let s = Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.min(h, parseFloat(getValue(this.style, 'size', this.size))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, h), new Point(0, s), new Point(w, 0), new Point(w, h)], this.isRounded, arcSize, true); c.end(); @@ -2806,7 +2816,7 @@ { RectangleShape.call(this); }; - utils.extend(InternalStorageShape, RectangleShape); + extend(InternalStorageShape, RectangleShape); InternalStorageShape.prototype.dx = 20; InternalStorageShape.prototype.dy = 20; InternalStorageShape.prototype.isHtmlAllowed = function() @@ -2820,13 +2830,13 @@ if (this.isRounded) { - let f = utils.getValue(this.style, 'arcSize', + let f = getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; inset = Math.max(inset, Math.min(w * f, h * f)); } - let dx = Math.max(inset, Math.min(w, parseFloat(utils.getValue(this.style, 'dx', this.dx)))); - let dy = Math.max(inset, Math.min(h, parseFloat(utils.getValue(this.style, 'dy', this.dy)))); + let dx = Math.max(inset, Math.min(w, parseFloat(getValue(this.style, 'dx', this.dx)))); + let dy = Math.max(inset, Math.min(h, parseFloat(getValue(this.style, 'dy', this.dy)))); c.begin(); c.moveTo(x, y + dy); @@ -2848,18 +2858,18 @@ { Actor.call(this); }; - utils.extend(CornerShape, Actor); + extend(CornerShape, Actor); CornerShape.prototype.dx = 20; CornerShape.prototype.dy = 20; // Corner CornerShape.prototype.redrawPath = function(c, x, y, w, h) { - let dx = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'dx', this.dx)))); - let dy = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'dy', this.dy)))); + let dx = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'dx', this.dx)))); + let dy = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'dy', this.dy)))); - let s = Math.min(w / 2, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.min(w / 2, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, 0), new Point(w, 0), new Point(w, dy), new Point(dx, dy), new Point(dx, h), new Point(0, h)], this.isRounded, arcSize, true); c.end(); @@ -2872,7 +2882,7 @@ { Actor.call(this); }; - utils.extend(CrossbarShape, Actor); + extend(CrossbarShape, Actor); CrossbarShape.prototype.redrawPath = function(c, x, y, w, h) { @@ -2896,19 +2906,19 @@ { Actor.call(this); }; - utils.extend(TeeShape, Actor); + extend(TeeShape, Actor); TeeShape.prototype.dx = 20; TeeShape.prototype.dy = 20; // Corner TeeShape.prototype.redrawPath = function(c, x, y, w, h) { - let dx = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'dx', this.dx)))); - let dy = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'dy', this.dy)))); + let dx = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'dx', this.dx)))); + let dy = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'dy', this.dy)))); var w2 = Math.abs(w - dx) / 2; - let s = Math.min(w / 2, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.min(w / 2, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, 0), new Point(w, 0), new Point(w, dy), new Point((w + dx) / 2, dy), new Point((w + dx) / 2, h), new Point((w - dx) / 2, h), new Point((w - dx) / 2, dy), new Point(0, dy)], this.isRounded, arcSize, true); @@ -2922,17 +2932,17 @@ { Actor.call(this); }; - utils.extend(SingleArrowShape, Actor); + extend(SingleArrowShape, Actor); SingleArrowShape.prototype.arrowWidth = 0.3; SingleArrowShape.prototype.arrowSize = 0.2; SingleArrowShape.prototype.redrawPath = function(c, x, y, w, h) { - let aw = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowWidth', this.arrowWidth)))); - let as = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowSize', this.arrowSize)))); + let aw = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowWidth', this.arrowWidth)))); + let as = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowSize', this.arrowSize)))); let at = (h - aw) / 2; let ab = at + aw; - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, at), new Point(w - as, at), new Point(w - as, 0), new Point(w, h / 2), new Point(w - as, h), new Point(w - as, ab), new Point(0, ab)], this.isRounded, arcSize, true); @@ -2946,15 +2956,15 @@ { Actor.call(this); }; - utils.extend(DoubleArrowShape, Actor); + extend(DoubleArrowShape, Actor); DoubleArrowShape.prototype.redrawPath = function(c, x, y, w, h) { - let aw = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth)))); - let as = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowSize', SingleArrowShape.prototype.arrowSize)))); + let aw = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth)))); + let as = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowSize', SingleArrowShape.prototype.arrowSize)))); let at = (h - aw) / 2; let ab = at + aw; - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, h / 2), new Point(as, 0), new Point(as, at), new Point(w - as, at), new Point(w - as, 0), new Point(w, h / 2), new Point(w - as, h), new Point(w - as, ab), new Point(as, ab), new Point(as, h)], @@ -2969,14 +2979,14 @@ { Actor.call(this); }; - utils.extend(DataStorageShape, Actor); + extend(DataStorageShape, Actor); DataStorageShape.prototype.size = 0.1; DataStorageShape.prototype.fixedSize = 20; DataStorageShape.prototype.redrawPath = function(c, x, y, w, h) { - let fixed = utils.getValue(this.style, 'fixedSize', '0') != '0'; - let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'size', this.fixedSize)))) : - w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let fixed = getValue(this.style, 'fixedSize', '0') != '0'; + let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'size', this.fixedSize)))) : + w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); c.moveTo(s, 0); c.lineTo(w, 0); @@ -2994,7 +3004,7 @@ { Actor.call(this); }; - utils.extend(OrShape, Actor); + extend(OrShape, Actor); OrShape.prototype.redrawPath = function(c, x, y, w, h) { c.moveTo(0, 0); @@ -3011,7 +3021,7 @@ { Actor.call(this); }; - utils.extend(XorShape, Actor); + extend(XorShape, Actor); XorShape.prototype.redrawPath = function(c, x, y, w, h) { c.moveTo(0, 0); @@ -3029,7 +3039,7 @@ { Actor.call(this); }; - utils.extend(LoopLimitShape, Actor); + extend(LoopLimitShape, Actor); LoopLimitShape.prototype.size = 20; LoopLimitShape.prototype.isRoundable = function() { @@ -3037,8 +3047,8 @@ }; LoopLimitShape.prototype.redrawPath = function(c, x, y, w, h) { - let s = Math.min(w / 2, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.min(w / 2, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(s, 0), new Point(w - s, 0), new Point(w, s * 0.8), new Point(w, h), new Point(0, h), new Point(0, s * 0.8)], this.isRounded, arcSize, true); c.end(); @@ -3051,7 +3061,7 @@ { Actor.call(this); }; - utils.extend(OffPageConnectorShape, Actor); + extend(OffPageConnectorShape, Actor); OffPageConnectorShape.prototype.size = 3 / 8; OffPageConnectorShape.prototype.isRoundable = function() { @@ -3059,8 +3069,8 @@ }; OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h) { - let s = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'size', this.size)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new Point(0, 0), new Point(w, 0), new Point(w, h - s), new Point(w / 2, h), new Point(0, h - s)], this.isRounded, arcSize, true); c.end(); @@ -3073,7 +3083,7 @@ { EllipseShape.call(this); }; - utils.extend(TapeDataShape, EllipseShape); + extend(TapeDataShape, EllipseShape); TapeDataShape.prototype.paintVertexShape = function(c, x, y, w, h) { EllipseShape.prototype.paintVertexShape.apply(this, arguments); @@ -3092,7 +3102,7 @@ { EllipseShape.call(this); }; - utils.extend(OrEllipseShape, EllipseShape); + extend(OrEllipseShape, EllipseShape); OrEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h) { EllipseShape.prototype.paintVertexShape.apply(this, arguments); @@ -3118,7 +3128,7 @@ { EllipseShape.call(this); }; - utils.extend(SumEllipseShape, EllipseShape); + extend(SumEllipseShape, EllipseShape); SumEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h) { EllipseShape.prototype.paintVertexShape.apply(this, arguments); @@ -3145,7 +3155,7 @@ { RhombusShape.call(this); }; - utils.extend(SortShape, RhombusShape); + extend(SortShape, RhombusShape); SortShape.prototype.paintVertexShape = function(c, x, y, w, h) { RhombusShape.prototype.paintVertexShape.apply(this, arguments); @@ -3165,7 +3175,7 @@ { EllipseShape.call(this); }; - utils.extend(CollateShape, EllipseShape); + extend(CollateShape, EllipseShape); CollateShape.prototype.paintVertexShape = function(c, x, y, w, h) { c.begin(); @@ -3190,7 +3200,7 @@ { EllipseShape.call(this); }; - utils.extend(DimensionShape, EllipseShape); + extend(DimensionShape, EllipseShape); DimensionShape.prototype.paintVertexShape = function(c, x, y, w, h) { // Arrow size @@ -3225,7 +3235,7 @@ { EllipseShape.call(this); }; - utils.extend(PartialRectangleShape, EllipseShape); + extend(PartialRectangleShape, EllipseShape); PartialRectangleShape.prototype.paintVertexShape = function(c, x, y, w, h) { if (!this.outline) @@ -3236,7 +3246,7 @@ if (this.style != null) { let pointerEvents = c.pointerEvents; - let events = utils.getValue(this.style, 'pointerEvents', '1') == '1'; + let events = getValue(this.style, 'pointerEvents', '1') == '1'; if (!events && (this.fill == null || this.fill == mxConstants.NONE)) { @@ -3251,7 +3261,7 @@ c.begin(); c.moveTo(x, y); - if (this.outline || utils.getValue(this.style, 'top', '1') == '1') + if (this.outline || getValue(this.style, 'top', '1') == '1') { c.lineTo(x + w, y); } @@ -3260,7 +3270,7 @@ c.moveTo(x + w, y); } - if (this.outline || utils.getValue(this.style, 'right', '1') == '1') + if (this.outline || getValue(this.style, 'right', '1') == '1') { c.lineTo(x + w, y + h); } @@ -3269,7 +3279,7 @@ c.moveTo(x + w, y + h); } - if (this.outline || utils.getValue(this.style, 'bottom', '1') == '1') + if (this.outline || getValue(this.style, 'bottom', '1') == '1') { c.lineTo(x, y + h); } @@ -3278,7 +3288,7 @@ c.moveTo(x, y + h); } - if (this.outline || utils.getValue(this.style, 'left', '1') == '1') + if (this.outline || getValue(this.style, 'left', '1') == '1') { c.lineTo(x, y); } @@ -3295,7 +3305,7 @@ { EllipseShape.call(this); }; - utils.extend(LineEllipseShape, EllipseShape); + extend(LineEllipseShape, EllipseShape); LineEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h) { EllipseShape.prototype.paintVertexShape.apply(this, arguments); @@ -3303,7 +3313,7 @@ c.setShadow(false); c.begin(); - if (utils.getValue(this.style, 'line') == 'vertical') + if (getValue(this.style, 'line') == 'vertical') { c.moveTo(x + w / 2, y); c.lineTo(x + w / 2, y + h); @@ -3325,7 +3335,7 @@ { Actor.call(this); }; - utils.extend(DelayShape, Actor); + extend(DelayShape, Actor); DelayShape.prototype.redrawPath = function(c, x, y, w, h) { let dx = Math.min(w, h / 2); @@ -3345,12 +3355,12 @@ { Actor.call(this); }; - utils.extend(CrossShape, Actor); + extend(CrossShape, Actor); CrossShape.prototype.size = 0.2; CrossShape.prototype.redrawPath = function(c, x, y, w, h) { let m = Math.min(h, w); - let size = Math.max(0, Math.min(m, m * parseFloat(utils.getValue(this.style, 'size', this.size)))); + let size = Math.max(0, Math.min(m, m * parseFloat(getValue(this.style, 'size', this.size)))); let t = (h - size) / 2; let b = t + size; let l = (w - size) / 2; @@ -3379,12 +3389,12 @@ { Actor.call(this); }; - utils.extend(DisplayShape, Actor); + extend(DisplayShape, Actor); DisplayShape.prototype.size = 0.25; DisplayShape.prototype.redrawPath = function(c, x, y, w, h) { let dx = Math.min(w, h / 2); - let s = Math.min(w - dx, Math.max(0, parseFloat(utils.getValue(this.style, 'size', this.size))) * w); + let s = Math.min(w - dx, Math.max(0, parseFloat(getValue(this.style, 'size', this.size))) * w); c.moveTo(0, h / 2); c.lineTo(s, 0); @@ -3403,7 +3413,7 @@ { Connector.call(this); }; - utils.extend(FilledEdge, Connector); + extend(FilledEdge, Connector); FilledEdge.prototype.origPaintEdgeShape = FilledEdge.prototype.paintEdgeShape; FilledEdge.prototype.paintEdgeShape = function(c, pts, rounded) @@ -3413,7 +3423,7 @@ for (let i = 0; i < pts.length; i++) { - temp.push(utils.clone(pts[i])); + temp.push(clone(pts[i])); } // paintEdgeShape resets dashed to false @@ -3423,7 +3433,7 @@ if (c.state.strokeWidth >= 3) { - let fillClr = utils.getValue(this.style, 'fillColor', null); + let fillClr = getValue(this.style, 'fillColor', null); if (fillClr != null) { @@ -3764,15 +3774,15 @@ { let tmp = (yOffset != null) ? yOffset : bounds.height / 8; - if (utils.getValue(state.style, 'absoluteArcSize', 0) == '1') + if (getValue(state.style, 'absoluteArcSize', 0) == '1') { - let arcSize = utils.getValue(state.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let arcSize = getValue(state.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; return new Point(bounds.x + bounds.width - Math.min(bounds.width / 2, arcSize), bounds.y + tmp); } else { - let arcSize = Math.max(0, parseFloat(utils.getValue(state.style, + let arcSize = Math.max(0, parseFloat(getValue(state.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100; return new Point(bounds.x + bounds.width - Math.min(Math.max(bounds.width / 2, bounds.height / 2), @@ -3780,7 +3790,7 @@ } }, function(bounds, pt, me) { - if (utils.getValue(state.style, 'absoluteArcSize', 0) == '1') + if (getValue(state.style, 'absoluteArcSize', 0) == '1') { this.state.style.arcSize = Math.round(Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x) * 2))); @@ -3800,7 +3810,7 @@ { let handles = []; - if (utils.getValue(state.style, 'rounded', false)) + if (getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3817,19 +3827,19 @@ { let handles = [createHandle(state, ['size'], function(bounds) { - let fixed = (fixedDefaultValue != null) ? utils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; - let size = Math.max(0, parseFloat(utils.getValue(this.state.style, 'size', (fixed) ? fixedDefaultValue : defaultValue))); + let fixed = (fixedDefaultValue != null) ? getValue(this.state.style, 'fixedSize', '0') != '0' : null; + let size = Math.max(0, parseFloat(getValue(this.state.style, 'size', (fixed) ? fixedDefaultValue : defaultValue))); return new Point(bounds.x + Math.min(bounds.width * 0.75 * max, size * ((fixed) ? 0.75 : bounds.width * 0.75)), bounds.y + bounds.height / 4); }, function(bounds, pt) { - let fixed = (fixedDefaultValue != null) ? utils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; + let fixed = (fixedDefaultValue != null) ? getValue(this.state.style, 'fixedSize', '0') != '0' : null; let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width * 0.75)); this.state.style.size = size; }, false, true)]; - if (utils.getValue(state.style, 'rounded', false)) + if (getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3846,19 +3856,19 @@ { let handles = [createHandle(state, ['size'], function(bounds) { - let fixed = (fixedDefaultValue != null) ? utils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; - let size = parseFloat(utils.getValue(this.state.style, 'size', (fixed) ? fixedDefaultValue : defaultValue)); + let fixed = (fixedDefaultValue != null) ? getValue(this.state.style, 'fixedSize', '0') != '0' : null; + let size = parseFloat(getValue(this.state.style, 'size', (fixed) ? fixedDefaultValue : defaultValue)); return new Point(bounds.x + Math.max(0, Math.min(bounds.width * 0.5, size * ((fixed) ? 1 : bounds.width))), bounds.getCenterY()); }, function(bounds, pt, me) { - let fixed = (fixedDefaultValue != null) ? utils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; + let fixed = (fixedDefaultValue != null) ? getValue(this.state.style, 'fixedSize', '0') != '0' : null; let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width)); this.state.style.size = size; }, false, redrawEdges)]; - if (allowArcHandle && utils.getValue(state.style, 'rounded', false)) + if (allowArcHandle && getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3874,7 +3884,7 @@ let handles = [createHandle(state, ['size'], function(bounds) { let size = Math.max(0, Math.min(bounds.width, Math.min(bounds.height, parseFloat( - utils.getValue(this.state.style, 'size', defaultValue))))) * factor; + getValue(this.state.style, 'size', defaultValue))))) * factor; return new Point(bounds.x + size, bounds.y + size); }, function(bounds, pt) @@ -3883,7 +3893,7 @@ Math.min(bounds.height, pt.y - bounds.y))) / factor); }, false)]; - if (allowArcHandle && utils.getValue(state.style, 'rounded', false)) + if (allowArcHandle && getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3898,7 +3908,7 @@ { return [createHandle(state, ['size'], function(bounds) { - let size = Math.max(0, Math.min(bounds.height * 0.5, parseFloat(utils.getValue(this.state.style, 'size', defaultValue)))); + let size = Math.max(0, Math.min(bounds.height * 0.5, parseFloat(getValue(this.state.style, 'size', defaultValue)))); return new Point(bounds.x, bounds.y + size); }, function(bounds, pt) @@ -3914,8 +3924,8 @@ { return [createHandle(state, ['arrowWidth', 'arrowSize'], function(bounds) { - let aw = Math.max(0, Math.min(1, utils.getValue(this.state.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth))); - let as = Math.max(0, Math.min(maxSize, utils.getValue(this.state.style, 'arrowSize', SingleArrowShape.prototype.arrowSize))); + let aw = Math.max(0, Math.min(1, getValue(this.state.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth))); + let as = Math.max(0, Math.min(maxSize, getValue(this.state.style, 'arrowSize', SingleArrowShape.prototype.arrowSize))); return new Point(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2); }, function(bounds, pt) @@ -3976,7 +3986,7 @@ return new Point(p0.x + nx * dist / 4 + ny * w / 2, p0.y + ny * dist / 4 - nx * w / 2); }, function(dist, nx, ny, p0, p1, pt) { - let w = Math.sqrt(utils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); + let w = Math.sqrt(ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); state.style.width = Math.round(w * 2) / state.view.scale - spacing; }); }; @@ -3999,19 +4009,19 @@ let tol = state.view.graph.gridSize / state.view.scale; let handles = []; - if (utils.getValue(state.style, 'startArrow', mxConstants.NONE) != mxConstants.NONE) + if (getValue(state.style, 'startArrow', mxConstants.NONE) != mxConstants.NONE) { handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1) { let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale; - let l = utils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new Point(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2); }, function(dist, nx, ny, p0, p1, pt, me) { - let w = Math.sqrt(utils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); - let l = utils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); + let w = Math.sqrt(ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); + let l = ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; state.style.width = Math.round(w * 2) / state.view.scale; @@ -4035,14 +4045,14 @@ handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1) { let w = (state.shape.getStartArrowWidth() - state.shape.strokewidth) * state.view.scale; - let l = utils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new Point(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2); }, function(dist, nx, ny, p0, p1, pt, me) { - let w = Math.sqrt(utils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); - let l = utils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); + let w = Math.sqrt(ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); + let l = ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; state.style.startWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; @@ -4070,19 +4080,19 @@ })); } - if (utils.getValue(state.style, 'endArrow', mxConstants.NONE) != mxConstants.NONE) + if (getValue(state.style, 'endArrow', mxConstants.NONE) != mxConstants.NONE) { handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1) { let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale; - let l = utils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new Point(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2); }, function(dist, nx, ny, p0, p1, pt, me) { - let w = Math.sqrt(utils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); - let l = utils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); + let w = Math.sqrt(ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); + let l = ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; state.style.width = Math.round(w * 2) / state.view.scale; @@ -4106,14 +4116,14 @@ handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1) { let w = (state.shape.getEndArrowWidth() - state.shape.strokewidth) * state.view.scale; - let l = utils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new Point(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2); }, function(dist, nx, ny, p0, p1, pt, me) { - let w = Math.sqrt(utils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); - let l = utils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); + let w = Math.sqrt(ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); + let l = ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; state.style.endWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; @@ -4147,18 +4157,18 @@ { let handles = []; - if (utils.getValue(state.style, 'rounded')) + if (getValue(state.style, 'rounded')) { - let size = parseFloat(utils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE)); + let size = parseFloat(getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE)); handles.push(createArcHandle(state, size / 2)); } // Start size handle must be last item in handles for hover to work in tables (see mouse event handler in Graph) handles.push(createHandle(state, .startSize, function(bounds) { - let size = parseFloat(utils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE)); + let size = parseFloat(getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE)); - if (utils.getValue(state.style, 'horizontal', 1) == 1) + if (getValue(state.style, 'horizontal', 1) == 1) { return new Point(bounds.getCenterX(), bounds.y + Math.max(0, Math.min(bounds.height, size))); } @@ -4169,7 +4179,7 @@ }, function(bounds, pt) { state.style.startSize = - (utils.getValue(this.state.style, 'horizontal', 1) == 1) ? + (getValue(this.state.style, 'horizontal', 1) == 1) ? Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))) : Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); }, false, null, function(me) @@ -4213,7 +4223,7 @@ { return [createHandle(state, ['size'], function(bounds) { - let size = Math.max(0, Math.min(bounds.height, parseFloat(utils.getValue(this.state.style, 'size', UmlLifeline.prototype.size)))); + let size = Math.max(0, Math.min(bounds.height, parseFloat(getValue(this.state.style, 'size', UmlLifeline.prototype.size)))); return new Point(bounds.getCenterX(), bounds.y + size); }, function(bounds, pt) @@ -4225,8 +4235,8 @@ { let handles = [createHandle(state, ['width', 'height'], function(bounds) { - var w0 = Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, utils.getValue(this.state.style, 'width', UmlFrame.prototype.width))); - var h0 = Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, utils.getValue(this.state.style, 'height', UmlFrame.prototype.height))); + var w0 = Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, getValue(this.state.style, 'width', UmlFrame.prototype.width))); + var h0 = Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, getValue(this.state.style, 'height', UmlFrame.prototype.height))); return new Point(bounds.x + w0, bounds.y + h0); }, function(bounds, pt) @@ -4242,18 +4252,18 @@ let handles = [createHandle(state, ['size'], function(bounds) { - let fixed = utils.getValue(this.state.style, 'fixedSize', '0') != '0'; - let size = parseFloat(utils.getValue(this.state.style, 'size', ProcessShape.prototype.size)); + let fixed = getValue(this.state.style, 'fixedSize', '0') != '0'; + let size = parseFloat(getValue(this.state.style, 'size', ProcessShape.prototype.size)); return (fixed) ? new Point(bounds.x + size, bounds.y + bounds.height / 4) : new Point(bounds.x + bounds.width * size, bounds.y + bounds.height / 4); }, function(bounds, pt) { - let fixed = utils.getValue(this.state.style, 'fixedSize', '0') != '0'; + let fixed = getValue(this.state.style, 'fixedSize', '0') != '0'; let size = (fixed) ? Math.max(0, Math.min(bounds.width * 0.5, (pt.x - bounds.x))) : Math.max(0, Math.min(0.5, (pt.x - bounds.x) / bounds.width)); this.state.style.size = size; }, false)]; - if (utils.getValue(state.style, 'rounded', false)) + if (getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4265,7 +4275,7 @@ return [createHandle(state, ['size'], function(bounds) { let m = Math.min(bounds.width, bounds.height); - let size = Math.max(0, Math.min(1, utils.getValue(this.state.style, 'size', CrossShape.prototype.size))) * m / 2; + let size = Math.max(0, Math.min(1, getValue(this.state.style, 'size', CrossShape.prototype.size))) * m / 2; return new Point(bounds.getCenterX() - size, bounds.getCenterY() - size); }, function(bounds, pt) @@ -4280,7 +4290,7 @@ return [createHandle(state, ['size'], function(bounds) { let size = Math.max(0, Math.min(bounds.width, Math.min(bounds.height, parseFloat( - utils.getValue(this.state.style, 'size', NoteShape.prototype.size))))); + getValue(this.state.style, 'size', NoteShape.prototype.size))))); return new Point(bounds.x + bounds.width - size, bounds.y + size); }, function(bounds, pt) @@ -4294,7 +4304,7 @@ return [createHandle(state, ['size'], function(bounds) { let size = Math.max(0, Math.min(bounds.width, Math.min(bounds.height, parseFloat( - utils.getValue(this.state.style, 'size', NoteShape2.prototype.size))))); + getValue(this.state.style, 'size', NoteShape2.prototype.size))))); return new Point(bounds.x + bounds.width - size, bounds.y + size); }, function(bounds, pt) @@ -4307,7 +4317,7 @@ { let handles = [createHandle(state, ['size'], function(bounds) { - let size = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'size', ManualInputShape.prototype.size))); + let size = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'size', ManualInputShape.prototype.size))); return new Point(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4); }, function(bounds, pt) @@ -4315,7 +4325,7 @@ this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3))); }, false)]; - if (utils.getValue(state.style, 'rounded', false)) + if (getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4326,13 +4336,13 @@ { return [createHandle(state, ['size'], function(bounds) { - let fixed = utils.getValue(this.state.style, 'fixedSize', '0') != '0'; - let size = parseFloat(utils.getValue(this.state.style, 'size', (fixed) ? DataStorageShape.prototype.fixedSize : DataStorageShape.prototype.size)); + let fixed = getValue(this.state.style, 'fixedSize', '0') != '0'; + let size = parseFloat(getValue(this.state.style, 'size', (fixed) ? DataStorageShape.prototype.fixedSize : DataStorageShape.prototype.size)); return new Point(bounds.x + bounds.width - size * ((fixed) ? 1 : bounds.width), bounds.getCenterY()); }, function(bounds, pt) { - let fixed = utils.getValue(this.state.style, 'fixedSize', '0') != '0'; + let fixed = getValue(this.state.style, 'fixedSize', '0') != '0'; let size = (fixed) ? Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x))) : Math.max(0, Math.min(1, (bounds.x + bounds.width - pt.x) / bounds.width)); this.state.style.size = size; @@ -4342,19 +4352,19 @@ { let handles = [createHandle(state, ['size', 'position'], function(bounds) { - let size = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'size', CalloutShape.prototype.size))); - let position = Math.max(0, Math.min(1, utils.getValue(this.state.style, 'position', CalloutShape.prototype.position))); - let base = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'base', CalloutShape.prototype.base))); + let size = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'size', CalloutShape.prototype.size))); + let position = Math.max(0, Math.min(1, getValue(this.state.style, 'position', CalloutShape.prototype.position))); + let base = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'base', CalloutShape.prototype.base))); return new Point(bounds.x + position * bounds.width, bounds.y + bounds.height - size); }, function(bounds, pt) { - let base = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'base', CalloutShape.prototype.base))); + let base = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'base', CalloutShape.prototype.base))); this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))); this.state.style.position = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100; }, false), createHandle(state, ['position2'], function(bounds) { - var position2 = Math.max(0, Math.min(1, utils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2))); + var position2 = Math.max(0, Math.min(1, getValue(this.state.style, 'position2', CalloutShape.prototype.position2))); return new Point(bounds.x + position2 * bounds.width, bounds.y + bounds.height); }, function(bounds, pt) @@ -4362,19 +4372,19 @@ this.state.style['position2'] = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100; }, false), createHandle(state, ['base'], function(bounds) { - let size = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'size', CalloutShape.prototype.size))); - let position = Math.max(0, Math.min(1, utils.getValue(this.state.style, 'position', CalloutShape.prototype.position))); - let base = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'base', CalloutShape.prototype.base))); + let size = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'size', CalloutShape.prototype.size))); + let position = Math.max(0, Math.min(1, getValue(this.state.style, 'position', CalloutShape.prototype.position))); + let base = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'base', CalloutShape.prototype.base))); return new Point(bounds.x + Math.min(bounds.width, position * bounds.width + base), bounds.y + bounds.height - size); }, function(bounds, pt) { - let position = Math.max(0, Math.min(1, utils.getValue(this.state.style, 'position', CalloutShape.prototype.position))); + let position = Math.max(0, Math.min(1, getValue(this.state.style, 'position', CalloutShape.prototype.position))); this.state.style.base = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width))); }, false)]; - if (utils.getValue(state.style, 'rounded', false)) + if (getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4385,8 +4395,8 @@ { let handles = [createHandle(state, ['dx', 'dy'], function(bounds) { - let dx = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'dx', InternalStorageShape.prototype.dx))); - let dy = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'dy', InternalStorageShape.prototype.dy))); + let dx = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'dx', InternalStorageShape.prototype.dx))); + let dy = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'dy', InternalStorageShape.prototype.dy))); return new Point(bounds.x + dx, bounds.y + dy); }, function(bounds, pt) @@ -4395,7 +4405,7 @@ this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; - if (utils.getValue(state.style, 'rounded', false)) + if (getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4406,8 +4416,8 @@ { let handles = [createHandle(state, ['jettyWidth', 'jettyHeight'], function(bounds) { - let dx = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'jettyWidth', ModuleShape.prototype.jettyWidth))); - let dy = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'jettyHeight', ModuleShape.prototype.jettyHeight))); + let dx = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'jettyWidth', ModuleShape.prototype.jettyWidth))); + let dy = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'jettyHeight', ModuleShape.prototype.jettyHeight))); return new Point(bounds.x + dx / 2, bounds.y + dy * 2); }, function(bounds, pt) @@ -4422,8 +4432,8 @@ { return [createHandle(state, ['dx', 'dy'], function(bounds) { - let dx = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'dx', CornerShape.prototype.dx))); - let dy = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'dy', CornerShape.prototype.dy))); + let dx = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'dx', CornerShape.prototype.dx))); + let dy = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'dy', CornerShape.prototype.dy))); return new Point(bounds.x + dx, bounds.y + dy); }, function(bounds, pt) @@ -4436,8 +4446,8 @@ { return [createHandle(state, ['dx', 'dy'], function(bounds) { - let dx = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'dx', TeeShape.prototype.dx))); - let dy = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'dy', TeeShape.prototype.dy))); + let dx = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'dx', TeeShape.prototype.dx))); + let dy = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'dy', TeeShape.prototype.dy))); return new Point(bounds.x + (bounds.width + dx) / 2, bounds.y + dy); }, function(bounds, pt) @@ -4452,10 +4462,10 @@ { return [createHandle(state, ['tabWidth', 'tabHeight'], function(bounds) { - let tw = Math.max(0, Math.min(bounds.width, utils.getValue(this.state.style, 'tabWidth', FolderShape.prototype.tabWidth))); - let th = Math.max(0, Math.min(bounds.height, utils.getValue(this.state.style, 'tabHeight', FolderShape.prototype.tabHeight))); + let tw = Math.max(0, Math.min(bounds.width, getValue(this.state.style, 'tabWidth', FolderShape.prototype.tabWidth))); + let th = Math.max(0, Math.min(bounds.height, getValue(this.state.style, 'tabHeight', FolderShape.prototype.tabHeight))); - if (utils.getValue(this.state.style, 'tabPosition', FolderShape.prototype.tabPosition) == mxConstants.ALIGN_RIGHT) + if (getValue(this.state.style, 'tabPosition', FolderShape.prototype.tabPosition) == mxConstants.ALIGN_RIGHT) { tw = bounds.width - tw; } @@ -4465,7 +4475,7 @@ { let tw = Math.max(0, Math.min(bounds.width, pt.x - bounds.x)); - if (utils.getValue(this.state.style, 'tabPosition', FolderShape.prototype.tabPosition) == mxConstants.ALIGN_RIGHT) + if (getValue(this.state.style, 'tabPosition', FolderShape.prototype.tabPosition) == mxConstants.ALIGN_RIGHT) { tw = bounds.width - tw; } @@ -4478,7 +4488,7 @@ { return [createHandle(state, ['size'], function(bounds) { - let size = Math.max(0, Math.min(1, parseFloat(utils.getValue(this.state.style, 'size', DocumentShape.prototype.size)))); + let size = Math.max(0, Math.min(1, parseFloat(getValue(this.state.style, 'size', DocumentShape.prototype.size)))); return new Point(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height); }, function(bounds, pt) @@ -4490,7 +4500,7 @@ { return [createHandle(state, ['size'], function(bounds) { - let size = Math.max(0, Math.min(1, parseFloat(utils.getValue(this.state.style, 'size', TapeShape.prototype.size)))); + let size = Math.max(0, Math.min(1, parseFloat(getValue(this.state.style, 'size', TapeShape.prototype.size)))); return new Point(bounds.getCenterX(), bounds.y + size * bounds.height / 2); }, function(bounds, pt) @@ -4502,7 +4512,7 @@ { return [createHandle(state, ['isoAngle'], function(bounds) { - let isoAngle = Math.max(0.01, Math.min(94, parseFloat(utils.getValue(this.state.style, 'isoAngle', IsoCubeShape2.isoAngle)))) * Math.PI / 200 ; + let isoAngle = Math.max(0.01, Math.min(94, parseFloat(getValue(this.state.style, 'isoAngle', IsoCubeShape2.isoAngle)))) * Math.PI / 200 ; let isoH = Math.min(bounds.width * Math.tan(isoAngle), bounds.height * 0.5); return new Point(bounds.x, bounds.y + isoH); @@ -4517,7 +4527,7 @@ { return [createHandle(state, ['size'], function(bounds) { - let size = Math.max(0, Math.min(1, parseFloat(utils.getValue(this.state.style, 'size', OffPageConnectorShape.prototype.size)))); + let size = Math.max(0, Math.min(1, parseFloat(getValue(this.state.style, 'size', OffPageConnectorShape.prototype.size)))); return new Point(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height); }, function(bounds, pt) @@ -4620,19 +4630,19 @@ let isoHVector = new Point(1, 0); let isoVVector = new Point(1, 0); - var alpha1 = utils.toRadians(-30); + var alpha1 = toRadians(-30); var cos1 = Math.cos(alpha1); var sin1 = Math.sin(alpha1); - isoHVector = utils.getRotatedPoint(isoHVector, cos1, sin1); + isoHVector = getRotatedPoint(isoHVector, cos1, sin1); - var alpha2 = utils.toRadians(-150); + var alpha2 = toRadians(-150); var cos2 = Math.cos(alpha2); var sin2 = Math.sin(alpha2); - isoVVector = utils.getRotatedPoint(isoVVector, cos2, sin2); + isoVVector = getRotatedPoint(isoVVector, cos2, sin2); mxEdgeStyle.IsometricConnector = (state, source, target, points, result) => { @@ -4669,7 +4679,7 @@ var b1 = isoVVector.x; var b2 = isoVVector.y; - let elbow = utils.getValue(state.style, 'elbow', 'horizontal') == 'horizontal'; + let elbow = getValue(state.style, 'elbow', 'horizontal') == 'horizontal'; if (pe != null && p0 != null) { @@ -4740,7 +4750,7 @@ IsoCubeShape.prototype.getConstraints = function(style, w, h) { let constr = []; - var tan30 = Math.tan(utils.toRadians(30)); + var tan30 = Math.tan(toRadians(30)); var tan30Dx = (0.5 - tan30) / 2; let m = Math.min(w, h / (0.5 + tan30)); let dx = (w - m) / 2; @@ -4759,7 +4769,7 @@ IsoCubeShape2.prototype.getConstraints = function(style, w, h) { let constr = []; - let isoAngle = Math.max(0.01, Math.min(94, parseFloat(utils.getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ; + let isoAngle = Math.max(0.01, Math.min(94, parseFloat(getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ; let isoH = Math.min(w * Math.tan(isoAngle), h * 0.5); constr.push(new ConnectionConstraint(new Point(0.5, 0), false)); @@ -4777,11 +4787,11 @@ CalloutShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let arcSize = utils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; - let s = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); - let dx = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'position', this.position)))); - var dx2 = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'position2', this.position2)))); - let base = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'base', this.base)))); + let arcSize = getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; + let s = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); + let dx = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'position', this.position)))); + var dx2 = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'position2', this.position2)))); + let base = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'base', this.base)))); constr.push(new ConnectionConstraint(new Point(0, 0), false)); constr.push(new ConnectionConstraint(new Point(0.25, 0), false)); @@ -4831,7 +4841,7 @@ NoteShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))))); + let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(getValue(this.style, 'size', this.size))))); constr.push(new ConnectionConstraint(new Point(0, 0), false)); constr.push(new ConnectionConstraint(new Point(0, 0), false, null, (w - s) * 0.5, 0)); @@ -4855,7 +4865,7 @@ CardShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))))); + let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(getValue(this.style, 'size', this.size))))); constr.push(new ConnectionConstraint(new Point(1, 0), false)); constr.push(new ConnectionConstraint(new Point(0, 0), false, null, (w + s) * 0.5, 0)); @@ -4879,7 +4889,7 @@ CubeShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size))))); + let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(getValue(this.style, 'size', this.size))))); constr.push(new ConnectionConstraint(new Point(0, 0), false)); constr.push(new ConnectionConstraint(new Point(0, 0), false, null, (w - s) * 0.5, 0)); @@ -4900,7 +4910,7 @@ CylinderShape3.prototype.getConstraints = function(style, w, h) { let constr = []; - let s = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'size', this.size)))); + let s = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'size', this.size)))); constr.push(new ConnectionConstraint(new Point(0.5, 0), false)); constr.push(new ConnectionConstraint(new Point(0, 0.5), false)); @@ -4928,9 +4938,9 @@ FolderShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let dx = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'tabWidth', this.tabWidth)))); - let dy = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'tabHeight', this.tabHeight)))); - let tp = utils.getValue(this.style, 'tabPosition', this.tabPosition); + let dx = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'tabWidth', this.tabWidth)))); + let dy = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'tabHeight', this.tabHeight)))); + let tp = getValue(this.style, 'tabPosition', this.tabPosition); if (tp == 'left') { @@ -4979,7 +4989,7 @@ { let constr = []; let dx = Math.min(w, h / 2); - let s = Math.min(w - dx, Math.max(0, parseFloat(utils.getValue(this.style, 'size', this.size))) * w); + let s = Math.min(w - dx, Math.max(0, parseFloat(getValue(this.style, 'size', this.size))) * w); constr.push(new ConnectionConstraint(new Point(0, 0.5), false, null)); constr.push(new ConnectionConstraint(new Point(0, 0), false, null, s, 0)); @@ -4995,8 +5005,8 @@ ModuleShape.prototype.getConstraints = function(style, w, h) { - var x0 = parseFloat(utils.getValue(style, 'jettyWidth', ModuleShape.prototype.jettyWidth)) / 2; - let dy = parseFloat(utils.getValue(style, 'jettyHeight', ModuleShape.prototype.jettyHeight)); + var x0 = parseFloat(getValue(style, 'jettyWidth', ModuleShape.prototype.jettyWidth)) / 2; + let dy = parseFloat(getValue(style, 'jettyHeight', ModuleShape.prototype.jettyHeight)); let constr = [new ConnectionConstraint(new Point(0, 0), false, null, x0), new ConnectionConstraint(new Point(0.25, 0), true), new ConnectionConstraint(new Point(0.5, 0), true), @@ -5156,8 +5166,8 @@ TeeShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let dx = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'dx', this.dx)))); - let dy = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'dy', this.dy)))); + let dx = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'dx', this.dx)))); + let dy = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'dy', this.dy)))); var w2 = Math.abs(w - dx) / 2; constr.push(new ConnectionConstraint(new Point(0, 0), false)); @@ -5183,8 +5193,8 @@ CornerShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let dx = Math.max(0, Math.min(w, parseFloat(utils.getValue(this.style, 'dx', this.dx)))); - let dy = Math.max(0, Math.min(h, parseFloat(utils.getValue(this.style, 'dy', this.dy)))); + let dx = Math.max(0, Math.min(w, parseFloat(getValue(this.style, 'dx', this.dx)))); + let dy = Math.max(0, Math.min(h, parseFloat(getValue(this.style, 'dy', this.dy)))); constr.push(new ConnectionConstraint(new Point(0, 0), false)); constr.push(new ConnectionConstraint(new Point(0.5, 0), false)); @@ -5215,8 +5225,8 @@ SingleArrowShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let aw = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowWidth', this.arrowWidth)))); - let as = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowSize', this.arrowSize)))); + let aw = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowWidth', this.arrowWidth)))); + let as = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowSize', this.arrowSize)))); let at = (h - aw) / 2; let ab = at + aw; @@ -5235,8 +5245,8 @@ DoubleArrowShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let aw = h * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth)))); - let as = w * Math.max(0, Math.min(1, parseFloat(utils.getValue(this.style, 'arrowSize', SingleArrowShape.prototype.arrowSize)))); + let aw = h * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth)))); + let as = w * Math.max(0, Math.min(1, parseFloat(getValue(this.style, 'arrowSize', SingleArrowShape.prototype.arrowSize)))); let at = (h - aw) / 2; let ab = at + aw; @@ -5256,7 +5266,7 @@ { let constr = []; let m = Math.min(h, w); - let size = Math.max(0, Math.min(m, m * parseFloat(utils.getValue(this.style, 'size', this.size)))); + let size = Math.max(0, Math.min(m, m * parseFloat(getValue(this.style, 'size', this.size)))); let t = (h - size) / 2; let b = t + size; let l = (w - size) / 2; diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js index 96a4785f7..29785b7ca 100644 --- a/docs/stashed/grapheditor/www/js/Sidebar.js +++ b/docs/stashed/grapheditor/www/js/Sidebar.js @@ -19,14 +19,14 @@ function Sidebar(editorUi, container) document.body.appendChild(this.graph.container); - this.pointerUpHandler = utils.bind(this, function() + this.pointerUpHandler = this.bind(function() { this.showTooltips = true; }); mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerup' : 'mouseup', this.pointerUpHandler); - this.pointerDownHandler = utils.bind(this, function() + this.pointerDownHandler = this.bind(function() { this.showTooltips = false; this.hideTooltip(); @@ -34,7 +34,7 @@ function Sidebar(editorUi, container) mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', this.pointerDownHandler); - this.pointerMoveHandler = utils.bind(this, function(evt) + this.pointerMoveHandler = this.bind(function(evt) { let src = mxEvent.getSource(evt); @@ -54,7 +54,7 @@ function Sidebar(editorUi, container) mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', this.pointerMoveHandler); // Handles mouse leaving the window - this.pointerOutHandler = utils.bind(this, function(evt) + this.pointerOutHandler = this.bind(function(evt) { if (evt.toElement == null && evt.relatedTarget == null) { @@ -65,7 +65,7 @@ function Sidebar(editorUi, container) mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerout' : 'mouseout', this.pointerOutHandler); // Enables tooltips after scroll - mxEvent.addListener(container, 'scroll', utils.bind(this, function() + mxEvent.addListener(container, 'scroll', this.bind(function() { this.showTooltips = true; this.hideTooltip(); @@ -265,7 +265,7 @@ Sidebar.prototype.showTooltip = function(elt, cells, w, h, title, showLabel) this.thread = null; } - let show = utils.bind(this, function() + let show = this.bind(function() { // Lazy creation of the DOM nodes and graph instance if (this.tooltip == null) @@ -344,7 +344,7 @@ Sidebar.prototype.showTooltip = function(elt, cells, w, h, title, showLabel) } this.tooltipTitle.style.display = ''; - utils.write(this.tooltipTitle, title); + write(this.tooltipTitle, title); // Allows for wider labels w2 = Math.min(this.maxTooltipWidth, Math.max(width, this.tooltipTitle.scrollWidth + 4)); @@ -446,7 +446,7 @@ Sidebar.prototype.hideTooltip = function() */ Sidebar.prototype.addDataEntry = function(tags, width, height, title, data) { - return this.addEntry(tags, utils.bind(this, function() + return this.addEntry(tags, this.bind(function() { return this.createVertexTemplateFromData(data, width, height, title); })); @@ -459,7 +459,7 @@ Sidebar.prototype.addEntries = function(images) { for (let i = 0; i < images.length; i++) { - (utils.bind(this, function(img) + (this.bind(function(img) { let data = img.data; let tags = (img.title != null) ? img.title : ''; @@ -471,7 +471,7 @@ Sidebar.prototype.addEntries = function(images) if (data != null && tags.length > 0) { - this.addEntry(tags, utils.bind(this, function() + this.addEntry(tags, this.bind(function() { data = this.editorUi.convertDataUri(data); let s = 'shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;'; @@ -487,7 +487,7 @@ Sidebar.prototype.addEntries = function(images) } else if (img.xml != null && tags.length > 0) { - this.addEntry(tags, utils.bind(this, function() + this.addEntry(tags, this.bind(function() { let cells = this.editorUi.stringToCells(Graph.decompress(img.xml)); @@ -747,7 +747,7 @@ Sidebar.prototype.addSearchPalette = function(expand) div.appendChild(inner); let center = document.createElement('center'); - let button = utils.button(Resources.get('moreResults'), function() + let button = button(Resources.get('moreResults'), function() { find(); }); @@ -774,7 +774,7 @@ Sidebar.prototype.addSearchPalette = function(expand) // Count is dynamically updated below let count = 12; - let clearDiv = utils.bind(this, function() + let clearDiv = this.bind(function() { active = false; this.currentSearch = null; @@ -808,7 +808,7 @@ Sidebar.prototype.addSearchPalette = function(expand) input.focus(); }); - find = utils.bind(this, function() + find = this.bind(function() { // Shows 4 rows (minimum 4 results) count = 4 * Math.max(1, Math.floor(this.container.clientWidth / (this.thumbWidth + 10))); @@ -839,7 +839,7 @@ Sidebar.prototype.addSearchPalette = function(expand) let current = {}; this.currentSearch = current; - this.searchEntries(searchTerm, count, page, utils.bind(this, function(results, len, more, terms) + this.searchEntries(searchTerm, count, page, this.bind(function(results, len, more, terms) { if (this.currentSearch == current) { @@ -861,7 +861,7 @@ Sidebar.prototype.addSearchPalette = function(expand) for (let i = 0; i < results.length; i++) { - (utils.bind(this, function(result) + (this.bind(function(result) { try { @@ -878,7 +878,7 @@ Sidebar.prototype.addSearchPalette = function(expand) hash[elt.innerHTML] = hash[elt.innerHTML].concat(result.parentLibraries); } - mxEvent.addGestureListeners(elt, null, null, utils.bind(this, function(evt) + mxEvent.addGestureListeners(elt, null, null, this.bind(function(evt) { let libs = hash[elt.innerHTML]; @@ -913,7 +913,7 @@ Sidebar.prototype.addSearchPalette = function(expand) button.style.cursor = ''; div.appendChild(center); } - }), utils.bind(this, function() + }), this.bind(function() { // TODO: Error handling button.style.cursor = ''; @@ -933,7 +933,7 @@ Sidebar.prototype.addSearchPalette = function(expand) } }); - mxEvent.addListener(input, 'keydown', utils.bind(this, function(evt) + mxEvent.addListener(input, 'keydown', this.bind(function(evt) { if (evt.keyCode == 13 /* Enter */) { @@ -942,7 +942,7 @@ Sidebar.prototype.addSearchPalette = function(expand) } })); - mxEvent.addListener(input, 'keyup', utils.bind(this, function(evt) + mxEvent.addListener(input, 'keyup', this.bind(function(evt) { if (input.value == '') { @@ -1021,7 +1021,7 @@ Sidebar.prototype.insertSearchHint = function(div, searchTerm, count, page, resu 'color:gray;padding:6px 0px 0px 0px !important;margin:4px 8px 4px 8px;' + 'text-align:center;cursor:default !important'; - utils.write(err, Resources.get('noResultsFor', [searchTerm])); + write(err, Resources.get('noResultsFor', [searchTerm])); div.appendChild(err); } }; @@ -1066,7 +1066,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) this.createVertexTemplateEntry('shape=xor;whiteSpace=wrap;html=1;', 60, 80, '', 'Or', null, null, 'logic or'), this.createVertexTemplateEntry('shape=or;whiteSpace=wrap;html=1;', 60, 80, '', 'And', null, null, 'logic and'), this.createVertexTemplateEntry('shape=dataStorage;whiteSpace=wrap;html=1;fixedSize=1;', 100, 80, '', 'Data Storage'), - this.addEntry('curve', utils.bind(this, function() + this.addEntry('curve', this.bind(function() { let cell = new Cell('', new Geometry(0, 0, 50, 50), 'curved=1;endArrow=classic;html=1;'); cell.geometry.setTerminalPoint(new Point(0, 50), true); @@ -1085,7 +1085,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) this.createEdgeTemplateEntry('endArrow=classic;startArrow=classic;html=1;', 50, 50, '', 'Bidirectional Connector', null, lineTags + 'bidirectional'), this.createEdgeTemplateEntry('endArrow=classic;html=1;', 50, 50, '', 'Directional Connector', null, lineTags + 'directional directed'), this.createEdgeTemplateEntry('shape=link;html=1;', 100, 0, '', 'Link', null, lineTags + 'link'), - this.addEntry(lineTags + 'edge title', utils.bind(this, function() + this.addEntry(lineTags + 'edge title', this.bind(function() { let edge = new Cell('', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1101,7 +1101,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) return this.createEdgeTemplateFromCells([edge], 100, 0, 'Connector with Label'); })), - this.addEntry(lineTags + 'edge title multiplicity', utils.bind(this, function() + this.addEntry(lineTags + 'edge title multiplicity', this.bind(function() { let edge = new Cell('', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1123,7 +1123,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) return this.createEdgeTemplateFromCells([edge], 160, 0, 'Connector with 2 Labels'); })), - this.addEntry(lineTags + 'edge title multiplicity', utils.bind(this, function() + this.addEntry(lineTags + 'edge title multiplicity', this.bind(function() { let edge = new Cell('Label', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1151,7 +1151,7 @@ Sidebar.prototype.addGeneralPalette = function(expand) return this.createEdgeTemplateFromCells([edge], 160, 0, 'Connector with 3 Labels'); })), - this.addEntry(lineTags + 'edge shape symbol message mail email', utils.bind(this, function() + this.addEntry(lineTags + 'edge shape symbol message mail email', this.bind(function() { let edge = new Cell('', new Geometry(0, 0, 0, 0), 'endArrow=classic;html=1;'); edge.geometry.setTerminalPoint(new Point(0, 0), true); @@ -1215,7 +1215,7 @@ Sidebar.prototype.addMiscPalette = function(expand) 'Title' + 'Section 1.1\nSection 1.2\nSection 1.3' + 'Section 2.1\nSection 2.2\nSection 2.3', 'HTML Table 4'), - this.addEntry('link hyperlink', utils.bind(this, function() + this.addEntry('link hyperlink', this.bind(function() { let cell = new Cell('Link', new Geometry(0, 0, 60, 40), 'text;html=1;strokeColor=none;fillColor=none;whiteSpace=wrap;align=center;verticalAlign=middle;fontColor=#0000EE;fontStyle=4;'); cell.vertex = true; @@ -1223,7 +1223,7 @@ Sidebar.prototype.addMiscPalette = function(expand) return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Link'); })), - this.addEntry('timestamp date time text label', utils.bind(this, function() + this.addEntry('timestamp date time text label', this.bind(function() { let cell = new Cell('%date{ddd mmm dd yyyy HH:MM:ss}%', new Geometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;'); cell.vertex = true; @@ -1231,7 +1231,7 @@ Sidebar.prototype.addMiscPalette = function(expand) return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Timestamp'); })), - this.addEntry('variable placeholder metadata hello world text label', utils.bind(this, function() + this.addEntry('variable placeholder metadata hello world text label', this.bind(function() { let cell = new Cell('%name% Text', new Geometry(0, 0, 80, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;'); cell.vertex = true; @@ -2469,7 +2469,7 @@ Sidebar.prototype.createTitle = function(label) let elt = document.createElement('a'); elt.setAttribute('title', Resources.get('sidebarTooltip')); elt.className = 'geTitle'; - utils.write(elt, label); + write(elt, label); return elt; }; @@ -2532,7 +2532,7 @@ Sidebar.prototype.createThumb = function(cells, width, height, parent, title, sh div.style.whiteSpace = 'nowrap'; div.style.paddingTop = '4px'; - utils.write(div, title); + write(div, title); parent.appendChild(div); } @@ -2568,7 +2568,7 @@ Sidebar.prototype.createItem = function(cells, title, showLabel, showTitle, widt this.addClickHandler(elt, ds, cells); // Uses guides for vertices only if enabled in graph - ds.isGuidesEnabled = utils.bind(this, function() + ds.isGuidesEnabled = this.bind(function() { return this.editorUi.editor.graph.graphHandler.guidesEnabled; }); @@ -2583,7 +2583,7 @@ Sidebar.prototype.createItem = function(cells, title, showLabel, showTitle, widt // Shows a tooltip with the rendered cell if (!mxClient.IS_IOS) { - mxEvent.addGestureListeners(elt, null, utils.bind(this, function(evt) + mxEvent.addGestureListeners(elt, null, this.bind(function(evt) { if (mxEvent.isMouseEvent(evt)) { @@ -2628,7 +2628,7 @@ Sidebar.prototype.updateShapes = function(source, targets) graph.getModel().setStyle(targetCell, cellStyle); // Removes all children of composite cells - if (utils.getValue(style, 'composite', '0') == '1') + if (getValue(style, 'composite', '0') == '1') { let childCount = targetCell.getChildCount(); @@ -2675,7 +2675,7 @@ Sidebar.prototype.createDropHandler = function(cells, allowSplit, allowCellsInse { allowCellsInserted = (allowCellsInserted != null) ? allowCellsInserted : true; - return utils.bind(this, function(graph, evt, target, x, y, force) + return this.bind(function(graph, evt, target, x, y, force) { let elt = (force) ? null : ((mxEvent.isTouchEvent(evt) || mxEvent.isPenEvent(evt)) ? document.elementFromPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt)) : @@ -3143,8 +3143,8 @@ Sidebar.prototype.isDropStyleEnabled = function(cells, firstVertex) if (vstyle != null) { - result = utils.getValue(vstyle, 'strokeColor', mxConstants.NONE) != mxConstants.NONE || - utils.getValue(vstyle, 'fillColor', mxConstants.NONE) != mxConstants.NONE; + result = getValue(vstyle, 'strokeColor', mxConstants.NONE) != mxConstants.NONE || + getValue(vstyle, 'fillColor', mxConstants.NONE) != mxConstants.NONE; } } @@ -3192,7 +3192,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, let dropStyleEnabled = this.isDropStyleEnabled(cells, firstVertex); - let dragSource = utils.makeDraggable(elt, graph, utils.bind(this, function(graph, evt, target, x, y) + let dragSource = makeDraggable(elt, graph, this.bind(function(graph, evt, target, x, y) { if (this.updateThread != null) { @@ -3246,7 +3246,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, function createArrow(img, tooltip) { let arrow = null; - arrow = utils.createImage(img.src); + arrow = createImage(img.src); arrow.style.width = img.width + 'px'; arrow.style.height = img.height + 'px'; @@ -3255,7 +3255,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, arrow.setAttribute('title', tooltip); } - utils.setOpacity(arrow, (img == this.refreshTarget) ? 30 : 20); + setOpacity(arrow, (img == this.refreshTarget) ? 30 : 20); arrow.style.position = 'absolute'; arrow.style.cursor = 'crosshair'; @@ -3283,14 +3283,14 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, { if (arrow.parentNode != null) { - if (utils.contains(bounds, x, y)) + if (contains(bounds, x, y)) { - utils.setOpacity(arrow, 100); + setOpacity(arrow, 100); activeArrow = arrow; } else { - utils.setOpacity(arrow, (arrow == styleTarget) ? 30 : 20); + setOpacity(arrow, (arrow == styleTarget) ? 30 : 20); } } @@ -3433,7 +3433,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, let sourceCellStyle = this.editorUi.editor.graph.getCellStyle(cells[0]); // Allows drop into cell only if target is a valid root - dragSource.getDropTarget = utils.bind(this, function(graph, x, y, evt) + dragSource.getDropTarget = this.bind(function(graph, x, y, evt) { // Alt means no targets at all // LATER: Show preview where result will go @@ -3498,11 +3498,11 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, // Shift means disabled, delayed on cells with children, shows after this.dropTargetDelay, hides after 2500ms if (dropStyleEnabled && (timeOnTarget < 2500) && state != null && !mxEvent.isShiftDown(evt) && // If shape is equal or target has no stroke, fill and gradient then use longer delay except for images - (((utils.getValue(state.style, 'shape') != utils.getValue(sourceCellStyle, 'shape') && - (utils.getValue(state.style, 'strokeColor', mxConstants.NONE) != mxConstants.NONE || - utils.getValue(state.style, 'fillColor', mxConstants.NONE) != mxConstants.NONE || - utils.getValue(state.style, 'gradientColor', mxConstants.NONE) != mxConstants.NONE)) || - utils.getValue(sourceCellStyle, 'shape') == 'image') || + (((getValue(state.style, 'shape') != getValue(sourceCellStyle, 'shape') && + (getValue(state.style, 'strokeColor', mxConstants.NONE) != mxConstants.NONE || + getValue(state.style, 'fillColor', mxConstants.NONE) != mxConstants.NONE || + getValue(state.style, 'gradientColor', mxConstants.NONE) != mxConstants.NONE)) || + getValue(sourceCellStyle, 'shape') == 'image') || timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) && !this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) || (state.cell.isEdge() && cells[0].isEdge()))) @@ -3525,7 +3525,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, checkArrow(x, y, tmp, styleTarget); } // Does not reset on ignored edges - else if (currentStyleTarget == null || !utils.contains(currentStyleTarget, x, y) || + else if (currentStyleTarget == null || !contains(currentStyleTarget, x, y) || (timeOnTarget > 1500 && !mxEvent.isShiftDown(evt))) { currentStyleTarget = null; @@ -3648,7 +3648,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, // Drop arrows shown after this.dropTargetDelay, hidden after 5 secs, switches arrows after 500ms if ((currentTargetState != null && timeOnTarget >= 5000) || (currentTargetState != state && - (bbox == null || !utils.contains(bbox, x, y) || + (bbox == null || !contains(bbox, x, y) || (timeOnTarget > 500 && activeArrow == null && validTarget)))) { activeTarget = false; @@ -3908,7 +3908,7 @@ Sidebar.prototype.addClickHandler = function(elt, ds, cells) if (this.dragElement != null) { this.dragElement.style.display = 'none'; - utils.setOpacity(elt, 50); + setOpacity(elt, 50); } }; @@ -3919,7 +3919,7 @@ Sidebar.prototype.addClickHandler = function(elt, ds, cells) Math.abs(first.y - mxEvent.getClientY(evt)) > tol)) { this.dragElement.style.display = ''; - utils.setOpacity(elt, 100); + setOpacity(elt, 100); } oldMouseMove.apply(this, arguments); @@ -3936,7 +3936,7 @@ Sidebar.prototype.addClickHandler = function(elt, ds, cells) } oldMouseUp.apply(ds, arguments); - utils.setOpacity(elt, 100); + setOpacity(elt, 100); first = null; // Blocks tooltips on this element after single click @@ -3957,7 +3957,7 @@ Sidebar.prototype.createVertexTemplateEntry = function(style, width, height, val { tags = (tags != null && tags.length > 0) ? tags : ((title != null) ? title.toLowerCase() : ''); - return this.addEntry(tags, utils.bind(this, function() + return this.addEntry(tags, this.bind(function() { return this.createVertexTemplate(style, width, height, value, title, showLabel, showTitle); })); @@ -3979,7 +3979,7 @@ Sidebar.prototype.createVertexTemplate = function(style, width, height, value, t */ Sidebar.prototype.createVertexTemplateFromData = function(data, width, height, title, showLabel, showTitle, allowCellsInserted) { - let doc = utils.parseXml(Graph.decompress(data)); + let doc = parseXml(Graph.decompress(data)); let codec = new mxCodec(doc); let model = new Model(); @@ -4007,7 +4007,7 @@ Sidebar.prototype.createEdgeTemplateEntry = function(style, width, height, value { tags = (tags != null && tags.length > 0) ? tags : title.toLowerCase(); - return this.addEntry(tags, utils.bind(this, function() + return this.addEntry(tags, this.bind(function() { return this.createEdgeTemplate(style, width, height, value, title, showLabel, allowCellsInserted); })); @@ -4040,7 +4040,7 @@ Sidebar.prototype.createEdgeTemplateFromCells = function(cells, width, height, t */ Sidebar.prototype.addPaletteFunctions = function(id, title, expanded, fns) { - this.addPalette(id, title, expanded, utils.bind(this, function(content) + this.addPalette(id, title, expanded, this.bind(function(content) { for (let i = 0; i < fns.length; i++) { @@ -4103,7 +4103,7 @@ Sidebar.prototype.addFoldingHandler = function(title, content, funct) title.style.backgroundRepeat = 'no-repeat'; title.style.backgroundPosition = '0% 50%'; - mxEvent.addListener(title, 'click', utils.bind(this, function(evt) + mxEvent.addListener(title, 'click', this.bind(function(evt) { if (content.style.display == 'none') { @@ -4153,7 +4153,7 @@ Sidebar.prototype.addFoldingHandler = function(title, content, funct) // Prevents focus mxEvent.addListener(title, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - utils.bind(this, function(evt) + bind(this, function(evt) { evt.preventDefault(); })); @@ -4191,7 +4191,7 @@ Sidebar.prototype.addImagePalette = function(id, title, prefix, postfix, items, for (let i = 0; i < items.length; i++) { - (utils.bind(this, function(item, title, tmpTags) + (this.bind(function(item, title, tmpTags) { if (tmpTags == null) { @@ -4250,9 +4250,9 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig } } - StencilShapeRegistry.loadStencilSet(stencilFile, utils.bind(this, function(packageName, stencilName, displayName, w, h) + StencilShapeRegistry.loadStencilSet(stencilFile, this.bind(function(packageName, stencilName, displayName, w, h) { - if (ignore == null || utils.indexOf(ignore, stencilName) < 0) + if (ignore == null || indexOf(ignore, stencilName) < 0) { let tmp = this.getTagsForStencil(packageName, stencilName); let tmpTags = (tags != null) ? tags[stencilName] : null; @@ -4272,7 +4272,7 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig } else { - this.addPalette(id, title, false, utils.bind(this, function(content) + this.addPalette(id, title, false, this.bind(function(content) { if (style == null) { @@ -4292,9 +4292,9 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig } } - StencilShapeRegistry.loadStencilSet(stencilFile, utils.bind(this, function(packageName, stencilName, displayName, w, h) + StencilShapeRegistry.loadStencilSet(stencilFile, this.bind(function(packageName, stencilName, displayName, w, h) { - if (ignore == null || utils.indexOf(ignore, stencilName) < 0) + if (ignore == null || indexOf(ignore, stencilName) < 0) { content.appendChild(this.createVertexTemplate('shape=' + packageName + stencilName.toLowerCase() + style, Math.round(w * scale), Math.round(h * scale), '', stencilName.replace(/_/g, ' '), true)); diff --git a/docs/stashed/grapheditor/www/js/Toolbar.js b/docs/stashed/grapheditor/www/js/Toolbar.js index ff8ea6a2a..cfe377c52 100644 --- a/docs/stashed/grapheditor/www/js/Toolbar.js +++ b/docs/stashed/grapheditor/www/js/Toolbar.js @@ -1,6 +1,10 @@ /** * Copyright (c) 2006-2012, JGraph Ltd */ +const { getOffset } = require('../../../../../packages/core/src/util/Utils'); +const { write } = require('../../../../../packages/core/src/util/DomUtils'); +const { htmlEntities } = require('../../../../../packages/core/src/util/StringUtils'); + /** * Construcs a new toolbar for the given editor. */ @@ -12,7 +16,7 @@ function Toolbar(editorUi, container) this.init(); // Global handler to hide the current menu - this.gestureHandler = utils.bind(this, function(evt) + this.gestureHandler = this.bind(function(evt) { if (this.editorUi.currentMenu != null && mxEvent.getSource(evt) != this.editorUi.currentMenu.div) { @@ -90,7 +94,7 @@ Toolbar.prototype.init = function() } // Updates the label if the scale changes - this.updateZoom = utils.bind(this, function() + this.updateZoom = this.bind(function() { viewMenu.innerHTML = Math.round(this.editorUi.editor.graph.view.scale * 100) + '%' + this.dropdownImageHtml; @@ -141,7 +145,7 @@ Toolbar.prototype.init = function() if (sw >= 440) { - this.edgeShapeMenu = this.addMenuFunction('', Resources.get('connection'), false, utils.bind(this, function(menu) + this.edgeShapeMenu = this.addMenuFunction('', Resources.get('connection'), false, this.bind(function(menu) { this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], [null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', Resources.get('line')); this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['link', null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', Resources.get('link')); @@ -152,7 +156,7 @@ Toolbar.prototype.init = function() this.addDropDownArrow(this.edgeShapeMenu, 'geSprite-connection', 44, 50, 0, 0, 22, -4); } - this.edgeStyleMenu = this.addMenuFunction('geSprite-orthogonal', Resources.get('waypoints'), false, utils.bind(this, function(menu) + this.edgeStyleMenu = this.addMenuFunction('geSprite-orthogonal', Resources.get('waypoints'), false, this.bind(function(menu) { this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', Resources.get('straight')); this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', Resources.get('orthogonal')); @@ -183,7 +187,7 @@ Toolbar.prototype.addTableDropDown = function() // KNOWN: All table stuff does not work with undo/redo // KNOWN: Lost focus after click on submenu with text (not icon) in quirks and IE8. This is because the TD seems // to catch the focus on click in these browsers. NOTE: Workaround in mxPopupMenu for icon items (without text). - let menuElt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, utils.bind(this, function(menu) + let menuElt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, this.bind(function(menu) { let graph = this.editorUi.editor.graph; let cell = graph.getSelectionCell(); @@ -194,7 +198,7 @@ Toolbar.prototype.addTableDropDown = function() } else { - let elt = menu.addItem('', null, utils.bind(this, function() + let elt = menu.addItem('', null, this.bind(function() { try { @@ -207,7 +211,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertcolumnbefore'); elt.setAttribute('title', Resources.get('insertColumnBefore')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -220,7 +224,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertcolumnafter'); elt.setAttribute('title', Resources.get('insertColumnAfter')); - elt = menu.addItem('Delete column', null, utils.bind(this, function() + elt = menu.addItem('Delete column', null, this.bind(function() { if (cell != null) { @@ -236,7 +240,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-deletecolumn'); elt.setAttribute('title', Resources.get('deleteColumn')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -249,7 +253,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertrowbefore'); elt.setAttribute('title', Resources.get('insertRowBefore')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -262,7 +266,7 @@ Toolbar.prototype.addTableDropDown = function() }), null, 'geIcon geSprite geSprite-insertrowafter'); elt.setAttribute('title', Resources.get('insertRowAfter')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -338,7 +342,7 @@ Toolbar.prototype.setFontName = function(value) if (this.fontMenu != null) { this.fontMenu.innerHTML = '
' + - utils.htmlEntities(value) + '
' + this.dropdownImageHtml; + htmlEntities(value) + '' + this.dropdownImageHtml; } }; @@ -350,7 +354,7 @@ Toolbar.prototype.setFontSize = function(value) if (this.sizeMenu != null) { this.sizeMenu.innerHTML = '
' + - utils.htmlEntities(value) + '
' + this.dropdownImageHtml; + htmlEntities(value) + '' + this.dropdownImageHtml; } }; @@ -417,51 +421,51 @@ Toolbar.prototype.createTextToolbar = function() // KNOWN: Lost focus after click on submenu with text (not icon) in quirks and IE8. This is because the TD seems // to catch the focus on click in these browsers. NOTE: Workaround in mxPopupMenu for icon items (without text). - let alignMenu = this.addMenuFunction('', Resources.get('align'), false, utils.bind(this, function(menu) + let alignMenu = this.addMenuFunction('', Resources.get('align'), false, this.bind(function(menu) { - elt = menu.addItem('', null, utils.bind(this, function(evt) + elt = menu.addItem('', null, this.bind(function(evt) { graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt); }), null, 'geIcon geSprite geSprite-left'); elt.setAttribute('title', Resources.get('left')); - elt = menu.addItem('', null, utils.bind(this, function(evt) + elt = menu.addItem('', null, this.bind(function(evt) { graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt); }), null, 'geIcon geSprite geSprite-center'); elt.setAttribute('title', Resources.get('center')); - elt = menu.addItem('', null, utils.bind(this, function(evt) + elt = menu.addItem('', null, this.bind(function(evt) { graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt); }), null, 'geIcon geSprite geSprite-right'); elt.setAttribute('title', Resources.get('right')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { document.execCommand('justifyfull', false, null); }), null, 'geIcon geSprite geSprite-justifyfull'); elt.setAttribute('title', Resources.get('justifyfull')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { document.execCommand('insertorderedlist', false, null); }), null, 'geIcon geSprite geSprite-orderedlist'); elt.setAttribute('title', Resources.get('numberedList')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { document.execCommand('insertunorderedlist', false, null); }), null, 'geIcon geSprite geSprite-unorderedlist'); elt.setAttribute('title', Resources.get('bulletedList')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { document.execCommand('outdent', false, null); }), null, 'geIcon geSprite geSprite-outdent'); elt.setAttribute('title', Resources.get('decreaseIndent')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { document.execCommand('indent', false, null); }), null, 'geIcon geSprite geSprite-indent'); @@ -480,7 +484,7 @@ Toolbar.prototype.createTextToolbar = function() alignMenu.getElementsByTagName('img')[0].style.top = '5px'; } - let formatMenu = this.addMenuFunction('', Resources.get('format'), false, utils.bind(this, function(menu) + let formatMenu = this.addMenuFunction('', Resources.get('format'), false, this.bind(function(menu) { elt = menu.addItem('', null, this.editorUi.actions.get('subscript').funct, null, 'geIcon geSprite geSprite-subscript'); @@ -499,7 +503,7 @@ Toolbar.prototype.createTextToolbar = function() null, 'geIcon geSprite geSprite-fontbackground'); elt.setAttribute('title', Resources.get('backgroundColor')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { document.execCommand('removeformat', false, null); }), null, 'geIcon geSprite geSprite-removeformat'); @@ -536,19 +540,19 @@ Toolbar.prototype.createTextToolbar = function() this.addSeparator(); - let insertMenu = this.addMenuFunction('', Resources.get('insert'), true, utils.bind(this, function(menu) + let insertMenu = this.addMenuFunction('', Resources.get('insert'), true, this.bind(function(menu) { - menu.addItem(Resources.get('insertLink'), null, utils.bind(this, function() + menu.addItem(Resources.get('insertLink'), null, this.bind(function() { this.editorUi.actions.get('link').funct(); })); - menu.addItem(Resources.get('insertImage'), null, utils.bind(this, function() + menu.addItem(Resources.get('insertImage'), null, this.bind(function() { this.editorUi.actions.get('image').funct(); })); - menu.addItem(Resources.get('insertHorizontalRule'), null, utils.bind(this, function() + menu.addItem(Resources.get('insertHorizontalRule'), null, this.bind(function() { document.execCommand('inserthorizontalrule', false, null); })); @@ -574,7 +578,7 @@ Toolbar.prototype.createTextToolbar = function() // KNOWN: All table stuff does not work with undo/redo // KNOWN: Lost focus after click on submenu with text (not icon) in quirks and IE8. This is because the TD seems // to catch the focus on click in these browsers. NOTE: Workaround in mxPopupMenu for icon items (without text). - let elt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, utils.bind(this, function(menu) + let elt = this.addMenuFunction('geIcon geSprite geSprite-table', Resources.get('table'), false, this.bind(function(menu) { let elt = graph.getSelectedElement(); let cell = graph.getParentByNames(elt, ['TD', 'TH'], graph.cellEditor.text2); @@ -609,7 +613,7 @@ Toolbar.prototype.createTextToolbar = function() { let table = graph.getParentByName(row, 'TABLE', graph.cellEditor.text2); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -622,7 +626,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertcolumnbefore'); elt.setAttribute('title', Resources.get('insertColumnBefore')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -635,7 +639,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertcolumnafter'); elt.setAttribute('title', Resources.get('insertColumnAfter')); - elt = menu.addItem('Delete column', null, utils.bind(this, function() + elt = menu.addItem('Delete column', null, this.bind(function() { if (cell != null) { @@ -651,7 +655,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-deletecolumn'); elt.setAttribute('title', Resources.get('deleteColumn')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -664,7 +668,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertrowbefore'); elt.setAttribute('title', Resources.get('insertRowBefore')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -677,7 +681,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-insertrowafter'); elt.setAttribute('title', Resources.get('insertRowAfter')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { try { @@ -690,7 +694,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-deleterow'); elt.setAttribute('title', Resources.get('deleteRow')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { // Converts rgb(r,g,b) values let color = table.style.borderColor.replace( @@ -716,7 +720,7 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-strokecolor'); elt.setAttribute('title', Resources.get('borderColor')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { // Converts rgb(r,g,b) values let color = table.style.backgroundColor.replace( @@ -738,11 +742,11 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-fillcolor'); elt.setAttribute('title', Resources.get('backgroundColor')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { let value = table.getAttribute('cellPadding') || 0; - let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), utils.bind(this, function(newValue) + let dlg = new FilenameDialog(this.editorUi, value, Resources.get('apply'), this.bind(function(newValue) { if (newValue != null && newValue.length > 0) { @@ -758,19 +762,19 @@ Toolbar.prototype.createTextToolbar = function() }), null, 'geIcon geSprite geSprite-fit'); elt.setAttribute('title', Resources.get('spacing')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { table.setAttribute('align', 'left'); }), null, 'geIcon geSprite geSprite-left'); elt.setAttribute('title', Resources.get('left')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { table.setAttribute('align', 'center'); }), null, 'geIcon geSprite geSprite-center'); elt.setAttribute('title', Resources.get('center')); - elt = menu.addItem('', null, utils.bind(this, function() + elt = menu.addItem('', null, this.bind(function() { table.setAttribute('align', 'right'); }), null, 'geIcon geSprite geSprite-right'); @@ -989,7 +993,7 @@ Toolbar.prototype.addClickHandler = function(elt, funct) // Prevents focus mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - utils.bind(this, function(evt) + this.bind(function(evt) { evt.preventDefault(); })); @@ -1023,7 +1027,7 @@ Toolbar.prototype.createLabel = function(label, tooltip) { let elt = document.createElement('a'); elt.className = 'geLabel'; - utils.write(elt, label); + write(elt, label); return elt; }; @@ -1039,7 +1043,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) let menu = null; let show = true; - mxEvent.addListener(elt, 'click', utils.bind(this, function(evt) + mxEvent.addListener(elt, 'click', this.bind(function(evt) { if (show && (elt.enabled == null || elt.enabled)) { @@ -1050,7 +1054,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) menu.labels = showLabels; menu.autoExpand = true; - let offset = utils.getOffset(elt); + let offset = getOffset(elt); menu.popup(offset.x, offset.y + elt.offsetHeight, null, evt); this.editorUi.setCurrentMenu(menu, elt); @@ -1060,7 +1064,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) menu.div.style.width = '40px'; } - menu.hideMenu = utils.bind(this, function() + menu.hideMenu = this.bind(function() { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); this.editorUi.resetCurrentMenu(); @@ -1068,7 +1072,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) }); // Extends destroy to reset global state - menu.addListener(mxEvent.EVENT_HIDE, utils.bind(this, function() + menu.addListener(mxEvent.EVENT_HIDE, this.bind(function() { this.currentElt = null; })); @@ -1080,7 +1084,7 @@ Toolbar.prototype.addMenuHandler = function(elt, showLabels, funct, showAll) // Hides menu if already showing and prevents focus mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - utils.bind(this, function(evt) + this.bind(function(evt) { show = this.currentElt != elt; evt.preventDefault(); diff --git a/docs/stashed/grapheditor/www/open.html b/docs/stashed/grapheditor/www/open.html index 0f2e43c92..2f997be76 100644 --- a/docs/stashed/grapheditor/www/open.html +++ b/docs/stashed/grapheditor/www/open.html @@ -64,7 +64,7 @@ } else { - window.parent.utils.alert(window.parent.Resources.get('invalidOrMissingFile')); + window.parent.alert(window.parent.Resources.get('invalidOrMissingFile')); return false; } @@ -102,7 +102,7 @@ if (localStorage.length == 0) { - window.parent.utils.write(div, window.parent.Resources.get('noFiles')); + window.parent.write(div, window.parent.Resources.get('noFiles')); } else { @@ -125,7 +125,7 @@ link.style.fontDecoration = 'none'; link.style.fontSize = '14pt'; let key = keys[i]; - window.parent.utils.write(link, key); + window.parent.write(link, key); link.style.cursor = 'pointer'; div.appendChild(link); @@ -136,13 +136,13 @@ img.style.display = 'inline-block'; div.appendChild(img); - window.parent.utils.br(div); + window.parent.br(div); window.parent.mxEvent.addListener(img, 'click', (function(k) { return function() { - if (window.parent.utils.confirm(window.parent.Resources.get('delete') + ' "' + k + '"?')) + if (window.parent.confirm(window.parent.Resources.get('delete') + ' "' + k + '"?')) { localStorage.removeItem(k); window.location.reload(); @@ -161,17 +161,17 @@ } catch (e) { - window.parent.utils.alert(e.message); + window.parent.alert(e.message); } }; })(key)); } } - window.parent.utils.br(div); - window.parent.utils.br(div); + window.parent.br(div); + window.parent.br(div); - let cancelBtn = window.parent.utils.button(window.parent.Resources.get('cancel'), function() + let cancelBtn = window.parent.button(window.parent.Resources.get('cancel'), function() { hideWindow(true); }); diff --git a/packages/core/src/editor/mxDefaultToolbar.js b/packages/core/src/editor/mxDefaultToolbar.js index 9c1ba80dd..e8dbca469 100644 --- a/packages/core/src/editor/mxDefaultToolbar.js +++ b/packages/core/src/editor/mxDefaultToolbar.js @@ -8,7 +8,7 @@ import mxClient from '../mxClient'; import mxToolbar from '../util/gui/mxToolbar'; import Geometry from '../view/geometry/Geometry'; -import utils from '../util/Utils'; +import utils, { convertPoint } from '../util/Utils'; import InternalEvent from '../view/event/InternalEvent'; import { getClientX, getClientY } from '../util/EventUtils'; import { makeDraggable } from '../util/GestureUtils'; @@ -334,7 +334,7 @@ class mxDefaultToolbar { if (graph.canImportCell(vertex)) { const x = getClientX(evt); const y = getClientY(evt); - const pt = utils.convertPoint(graph.container, x, y); + const pt = convertPoint(graph.container, x, y); // Splits the target edge or inserts into target group if ( diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js index 91d1a33e6..9ee029c2b 100644 --- a/packages/core/src/editor/mxEditor.js +++ b/packages/core/src/editor/mxEditor.js @@ -13,7 +13,7 @@ import CompactTreeLayout from '../view/layout/layout/CompactTreeLayout'; import mxDefaultToolbar from './mxDefaultToolbar'; import StackLayout from '../view/layout/layout/StackLayout'; import EventObject from '../view/event/EventObject'; -import utils from '../util/Utils'; +import utils, { getOffset } from '../util/Utils'; import mxCodec from '../util/serialization/mxCodec'; import mxWindow, { error } from '../util/gui/mxWindow'; import mxForm from '../util/gui/mxForm'; @@ -43,6 +43,8 @@ import PrintPreview from '../view/printing/PrintPreview'; import mxClipboard from '../util/storage/mxClipboard'; import mxLog from '../util/gui/mxLog'; import { isNode } from '../util/DomUtils'; +import { getViewXml, getXml } from '../util/XmlUtils'; +import { load, post, submit } from '../util/network/mxXmlRequest'; /** * Installs the required language resources at class @@ -995,7 +997,7 @@ class mxEditor extends EventSource { }); this.addAction('show', (editor) => { - utils.show(editor.graph, null, 10, 10); + show(editor.graph, null, 10, 10); }); this.addAction('exportImage', (editor) => { @@ -1004,10 +1006,10 @@ class mxEditor extends EventSource { if (url == null || mxClient.IS_LOCAL) { editor.execute('show'); } else { - const node = utils.getViewXml(editor.graph, 1); - const xml = utils.getXml(node, '\n'); + const node = getViewXml(editor.graph, 1); + const xml = getXml(node, '\n'); - utils.submit( + submit( url, `${editor.postParameterName}=${encodeURIComponent(xml)}`, document, @@ -1952,7 +1954,7 @@ class mxEditor extends EventSource { // open(filename: string): void; open(filename) { if (filename != null) { - const xml = utils.load(filename).getXml(); + const xml = load(filename).getXml(); this.readGraphModel(xml.documentElement); this.filename = filename; @@ -1976,7 +1978,7 @@ class mxEditor extends EventSource { * Posts the string returned by {@link writeGraphModel} to the given URL or the * URL returned by {@link getUrlPost}. The actual posting is carried out by * {@link postDiagram}. If the URL is null then the resulting XML will be - * displayed using {@link utils.popup}. Exceptions should be handled as + * displayed using {@link popup}. Exceptions should be handled as * follows: * * @example @@ -2041,7 +2043,7 @@ class mxEditor extends EventSource { data = encodeURIComponent(data); } - utils.post(url, `${this.postParameterName}=${data}`, (req) => { + post(url, `${this.postParameterName}=${data}`, (req) => { this.fireEvent( new EventObject( InternalEvent.POST, @@ -2076,7 +2078,7 @@ class mxEditor extends EventSource { const enc = new mxCodec(); const node = enc.encode(this.graph.getModel()); - return utils.getXml(node, linefeed); + return getXml(node, linefeed); } /** @@ -2144,7 +2146,7 @@ class mxEditor extends EventSource { // graph and computes the location of the dialog this.graph.stopEditing(true); - const offset = utils.getOffset(this.graph.container); + const offset = getOffset(this.graph.container); let x = offset.x + 10; let { y } = offset; diff --git a/packages/core/src/util/Resources.js b/packages/core/src/util/Resources.js index 792dfe9aa..5676f02cc 100644 --- a/packages/core/src/util/Resources.js +++ b/packages/core/src/util/Resources.js @@ -4,6 +4,7 @@ */ import mxClient from '../mxClient'; import { NONE } from './Constants'; +import { get, load } from './network/mxXmlRequest'; /** * Class: mxResources @@ -215,7 +216,7 @@ const Resources = { const loadSpecialBundle = () => { if (specialBundle != null) { if (callback) { - utils.get( + get( specialBundle, (req) => { Resources.parse(req.getText()); @@ -227,7 +228,7 @@ const Resources = { ); } else { try { - const req = utils.load(specialBundle); + const req = load(specialBundle); if (req.isReady()) { Resources.parse(req.getText()); @@ -243,7 +244,7 @@ const Resources = { if (defaultBundle != null) { if (callback) { - utils.get( + get( defaultBundle, (req) => { Resources.parse(req.getText()); @@ -255,7 +256,7 @@ const Resources = { ); } else { try { - const req = utils.load(defaultBundle); + const req = load(defaultBundle); if (req.isReady()) { Resources.parse(req.getText()); diff --git a/packages/core/src/util/XmlUtils.js b/packages/core/src/util/XmlUtils.js index 0611c4781..0a4801b34 100644 --- a/packages/core/src/util/XmlUtils.js +++ b/packages/core/src/util/XmlUtils.js @@ -2,6 +2,7 @@ import Point from '../view/geometry/Point'; import TemporaryCellStates from '../view/cell/TemporaryCellStates'; import mxCodec from './serialization/mxCodec'; import { DIALECT_SVG, NS_SVG } from './Constants'; +import { htmlEntities } from './StringUtils'; /** * Function: createXmlDocument @@ -14,7 +15,7 @@ export const createXmlDocument = () => { if (document.implementation && document.implementation.createDocument) { doc = document.implementation.createDocument('', '', null); } else if ('ActiveXObject' in window) { - doc = utils.createMsXmlDocument(); + doc = createMsXmlDocument(); } return doc; @@ -195,14 +196,14 @@ export const getPrettyXml = (node, tab, indent, newline, ns) => { if (node.nodeType === NODETYPE_DOCUMENT) { result.push( - utils.getPrettyXml(node.documentElement, tab, indent, newline, ns) + getPrettyXml(node.documentElement, tab, indent, newline, ns) ); } else if (node.nodeType === NODETYPE_DOCUMENT_FRAGMENT) { let tmp = node.firstChild; if (tmp != null) { while (tmp != null) { - result.push(utils.getPrettyXml(tmp, tab, indent, newline, ns)); + result.push(getPrettyXml(tmp, tab, indent, newline, ns)); tmp = tmp.nextSibling; } } @@ -247,7 +248,7 @@ export const getPrettyXml = (node, tab, indent, newline, ns) => { while (tmp != null) { result.push( - utils.getPrettyXml(tmp, tab, indent + tab, newline, ns) + getPrettyXml(tmp, tab, indent + tab, newline, ns) ); tmp = tmp.nextSibling; } diff --git a/packages/core/src/util/animate/mxEffects.js b/packages/core/src/util/animate/mxEffects.js index 5d64fc7d3..f7df8d473 100644 --- a/packages/core/src/util/animate/mxEffects.js +++ b/packages/core/src/util/animate/mxEffects.js @@ -4,7 +4,7 @@ * Updated to ES9 syntax by David Morrissey 2021 * Type definitions from the typed-mxgraph project */ -import utils from '../Utils'; +import utils, { setOpacity } from '../Utils'; import GeometryChange from '../../view/geometry/GeometryChange'; import TerminalChange from '../../view/cell/edge/TerminalChange'; import ValueChange from '../../view/cell/ValueChange'; @@ -67,7 +67,7 @@ class mxEffects { change.constructor !== GeometryChange || change.cell.isEdge() ) { - utils.setOpacity(state.shape.node, (100 * step) / maxStep); + setOpacity(state.shape.node, (100 * step) / maxStep); } else { const { scale } = graph.getView(); @@ -133,7 +133,7 @@ class mxEffects { const childState = graph.getView().getState(child); if (childState != null) { - utils.setOpacity(childState.shape.node, opacity); + setOpacity(childState.shape.node, opacity); mxEffects.cascadeOpacity(graph, child, opacity); } } @@ -146,7 +146,7 @@ class mxEffects { const edgeState = graph.getView().getState(edges[i]); if (edgeState != null) { - utils.setOpacity(edgeState.shape.node, opacity); + setOpacity(edgeState.shape.node, opacity); } } } @@ -163,12 +163,12 @@ class mxEffects { let opacity = from || 100; - utils.setOpacity(node, opacity); + setOpacity(node, opacity); if (isEnabled || isEnabled == null) { const f = () => { opacity = Math.max(opacity - step, 0); - utils.setOpacity(node, opacity); + setOpacity(node, opacity); if (opacity > 0) { window.setTimeout(f, delay); diff --git a/packages/core/src/util/dom/mxDivResizer.js b/packages/core/src/util/dom/mxDivResizer.js index be4309852..8360369fc 100644 --- a/packages/core/src/util/dom/mxDivResizer.js +++ b/packages/core/src/util/dom/mxDivResizer.js @@ -5,6 +5,8 @@ * Type definitions from the typed-mxgraph project */ +import { getCurrentStyle } from '../Utils'; + /** * Maintains the size of a div element in Internet Explorer. This is a * workaround for the right and bottom style being ignored in IE. @@ -36,7 +38,7 @@ class mxDivResizer { } this.div = div; - const style = utils.getCurrentStyle(div); + const style = getCurrentStyle(div); if (style != null) { this.resizeWidth = style.width == 'auto'; diff --git a/packages/core/src/util/gui/mxLog.js b/packages/core/src/util/gui/mxLog.js index c1c632036..9c6ee0538 100644 --- a/packages/core/src/util/gui/mxLog.js +++ b/packages/core/src/util/gui/mxLog.js @@ -199,7 +199,7 @@ class mxLog { */ // static info(): void; static info() { - mxLog.writeln(utils.toString(navigator)); + mxLog.writeln(toString(navigator)); } /** diff --git a/packages/core/src/util/gui/mxPopupMenu.js b/packages/core/src/util/gui/mxPopupMenu.js index ad4357a78..b23bee381 100644 --- a/packages/core/src/util/gui/mxPopupMenu.js +++ b/packages/core/src/util/gui/mxPopupMenu.js @@ -5,7 +5,7 @@ * Type definitions from the typed-mxgraph project */ import EventSource from '../../view/event/EventSource'; -import utils from '../Utils'; +import utils, { fit, getDocumentScrollOrigin } from '../Utils'; import EventObject from '../../view/event/EventObject'; import mxClient from '../../mxClient'; import InternalEvent from '../../view/event/InternalEvent'; @@ -418,7 +418,7 @@ class mxPopupMenu extends EventSource { // Moves the submenu to the left side if there is no space const left = parseInt(row.div.offsetLeft); const width = parseInt(row.div.offsetWidth); - const offset = utils.getDocumentScrollOrigin(document); + const offset = getDocumentScrollOrigin(document); const b = document.body; const d = document.documentElement; @@ -432,7 +432,7 @@ class mxPopupMenu extends EventSource { )}px`; } - utils.fit(row.div); + fit(row.div); } } @@ -532,7 +532,7 @@ class mxPopupMenu extends EventSource { showMenu() { // Fits the div inside the viewport document.body.appendChild(this.div); - utils.fit(this.div); + fit(this.div); } /** diff --git a/packages/core/src/util/gui/mxToolbar.js b/packages/core/src/util/gui/mxToolbar.js index 3985a7597..4c4fa441a 100644 --- a/packages/core/src/util/gui/mxToolbar.js +++ b/packages/core/src/util/gui/mxToolbar.js @@ -12,7 +12,7 @@ import mxPopupMenu from './mxPopupMenu'; import EventSource from '../../view/event/EventSource'; import EventObject from '../../view/event/EventObject'; import mxClient from '../../mxClient'; -import { write, writeln } from '../DomUtils'; +import { br, write, writeln } from '../DomUtils'; /** * Creates a toolbar inside a given DOM node. The toolbar may contain icons, @@ -419,7 +419,7 @@ class mxToolbar extends EventSource { */ // addBreak(): void; addBreak() { - utils.br(this.container); + br(this.container); } /** diff --git a/packages/core/src/util/gui/mxWindow.js b/packages/core/src/util/gui/mxWindow.js index ede14b573..0ee9ddd2c 100644 --- a/packages/core/src/util/gui/mxWindow.js +++ b/packages/core/src/util/gui/mxWindow.js @@ -8,7 +8,7 @@ import Rectangle from '../../view/geometry/Rectangle'; import EventObject from '../../view/event/EventObject'; import EventSource from '../../view/event/EventSource'; -import utils from '../Utils'; +import utils, { fit, getCurrentStyle } from '../Utils'; import InternalEvent from '../../view/event/InternalEvent'; import mxClient from '../../mxClient'; import { NODETYPE_TEXT } from '../Constants'; @@ -396,7 +396,7 @@ class mxWindow extends EventSource { // activate(): void; activate() { if (mxWindow.activeWindow !== this) { - const style = utils.getCurrentStyle(this.getElement()); + const style = getCurrentStyle(this.getElement()); const index = style != null ? style.zIndex : 3; if (mxWindow.activeWindow) { @@ -430,7 +430,7 @@ class mxWindow extends EventSource { */ // fit(): void; fit() { - utils.fit(this.div); + fit(this.div); } /** @@ -714,7 +714,7 @@ class mxWindow extends EventSource { this.resize.style.visibility = 'hidden'; } - const style = utils.getCurrentStyle(this.contentWrapper); + const style = getCurrentStyle(this.contentWrapper); if (style.overflow === 'auto' || this.resize != null) { this.contentWrapper.style.height = `${ @@ -740,7 +740,7 @@ class mxWindow extends EventSource { this.div.style.height = height; this.div.style.width = width; - const style = utils.getCurrentStyle(this.contentWrapper); + const style = getCurrentStyle(this.contentWrapper); if (style.overflow === 'auto' || this.resize != null) { this.contentWrapper.style.height = `${ @@ -933,7 +933,7 @@ class mxWindow extends EventSource { this.div.style.display = ''; this.activate(); - const style = utils.getCurrentStyle(this.contentWrapper); + const style = getCurrentStyle(this.contentWrapper); if ( (style.overflow == 'auto' || this.resize != null) && diff --git a/packages/core/src/util/serialization/mxCodec.js b/packages/core/src/util/serialization/mxCodec.js index d97fe173c..ed3d8f75f 100644 --- a/packages/core/src/util/serialization/mxCodec.js +++ b/packages/core/src/util/serialization/mxCodec.js @@ -12,6 +12,7 @@ import Cell from '../../view/cell/datatypes/Cell'; import mxLog from '../gui/mxLog'; import { getFunctionName } from '../StringUtils'; import { importNode, isNode } from '../DomUtils'; +import { createMsXmlDocument } from '../XmlUtils'; const createXmlDocument = () => { // Put here from '../util/mxXmlUtils' to eliminate circular dependency @@ -20,7 +21,7 @@ const createXmlDocument = () => { if (document.implementation && document.implementation.createDocument) { doc = document.implementation.createDocument('', '', null); } else if ('ActiveXObject' in window) { - doc = utils.createMsXmlDocument(); + doc = createMsXmlDocument(); } return doc; diff --git a/packages/core/src/util/serialization/mxDefaultToolbarCodec.js b/packages/core/src/util/serialization/mxDefaultToolbarCodec.js index f3d1a12bd..d22f01fa8 100644 --- a/packages/core/src/util/serialization/mxDefaultToolbarCodec.js +++ b/packages/core/src/util/serialization/mxDefaultToolbarCodec.js @@ -11,6 +11,7 @@ import mxCodecRegistry from './mxCodecRegistry'; import { getChildNodes, getTextContent } from '../DomUtils'; import { getClientX, getClientY } from '../EventUtils'; import { NODETYPE_ELEMENT } from '../Constants'; +import { convertPoint } from '../Utils'; /** * Class: mxDefaultToolbarCodec @@ -242,7 +243,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec { // is made in the corresponding combobox. mxEvent.addListener(select, 'change', () => { into.toolbar.selectMode(img, (evt) => { - const pt = utils.convertPoint( + const pt = convertPoint( editor.graph.container, getClientX(evt), getClientY(evt) diff --git a/packages/core/src/util/serialization/mxObjectCodec.js b/packages/core/src/util/serialization/mxObjectCodec.js index 71e35d861..2dab2cf0b 100644 --- a/packages/core/src/util/serialization/mxObjectCodec.js +++ b/packages/core/src/util/serialization/mxObjectCodec.js @@ -10,8 +10,9 @@ import mxLog from '../gui/mxLog'; import Geometry from '../../view/geometry/Geometry'; import Point from '../../view/geometry/Point'; import { NODETYPE_ELEMENT } from '../Constants'; -import utils from '../Utils'; +import utils, { isInteger, isNumeric } from '../Utils'; import { getTextContent } from '../DomUtils'; +import { load } from '../network/mxXmlRequest'; /** * Generic codec for JavaScript objects that implements a mapping between @@ -398,7 +399,7 @@ class mxObjectCodec { const value = obj[name]; if (value != null && !this.isExcluded(obj, name, value, true)) { - if (utils.isInteger(name)) { + if (isInteger(name)) { name = null; } @@ -577,7 +578,7 @@ class mxObjectCodec { attr.name === 'height')) || (obj.constructor === Point && (attr.name === 'x' || attr.name === 'y')) || - utils.isNumeric(attr.value); + isNumeric(attr.value); return result; } @@ -637,7 +638,7 @@ class mxObjectCodec { * - If the object is an array and the variable name is empty then the * value or child object is appended to the array. * - If an add child has no value or the object is not an array then - * the child text content is evaluated using {@link utils.eval}. + * the child text content is evaluated using {@link eval}. * * For add nodes where the object is not an array and the variable name * is defined, the default mechanism is used, allowing to override/add @@ -880,7 +881,7 @@ class mxObjectCodec { const name = node.getAttribute('name'); if (name != null) { try { - const xml = utils.load(name).getDocumentElement(); + const xml = load(name).getDocumentElement(); if (xml != null) { dec.decode(xml, into); } diff --git a/packages/core/src/util/serialization/mxStylesheetCodec.js b/packages/core/src/util/serialization/mxStylesheetCodec.js index b4edcd612..4de161204 100644 --- a/packages/core/src/util/serialization/mxStylesheetCodec.js +++ b/packages/core/src/util/serialization/mxStylesheetCodec.js @@ -6,13 +6,14 @@ */ import Stylesheet from '../../view/style/Stylesheet'; -import utils from '../Utils'; +import utils, { isNumeric } from '../Utils'; import mxCodecRegistry from './mxCodecRegistry'; import { NODETYPE_ELEMENT } from '../Constants'; import mxLog from '../gui/mxLog'; import StyleRegistry from '../../view/style/StyleRegistry'; import mxObjectCodec from './mxObjectCodec'; import { getTextContent } from '../DomUtils'; +import { clone } from '../CloneUtils'; /** * Class: mxStylesheetCodec @@ -145,7 +146,7 @@ class mxStylesheetCodec extends mxObjectCodec { if (as != null) { const extend = node.getAttribute('extend'); - let style = extend != null ? utils.clone(obj.styles[extend]) : null; + let style = extend != null ? clone(obj.styles[extend]) : null; if (style == null) { if (extend != null) { @@ -176,7 +177,7 @@ class mxStylesheetCodec extends mxObjectCodec { } else { value = entry.getAttribute('value'); - if (utils.isNumeric(value)) { + if (isNumeric(value)) { value = parseFloat(value); } } diff --git a/packages/core/src/view/GraphHandler.ts b/packages/core/src/view/GraphHandler.ts index e190147a6..559d091c0 100644 --- a/packages/core/src/view/GraphHandler.ts +++ b/packages/core/src/view/GraphHandler.ts @@ -7,7 +7,7 @@ import mxClient from '../mxClient'; import InternalEvent from './event/InternalEvent'; -import utils from '../util/Utils'; +import utils, { contains, convertPoint, getRotatedPoint, getValue, toRadians } from '../util/Utils'; import RectangleShape from './geometry/shape/node/RectangleShape'; import mxGuide from '../util/Guide'; import Point from './geometry/Point'; @@ -844,7 +844,7 @@ class GraphHandler { // start(cell: mxCell, x: number, y: number): void; start(cell, x, y, cells) { this.cell = cell; - this.first = utils.convertPoint(this.graph.container, x, y); + this.first = convertPoint(this.graph.container, x, y); this.cells = cells != null ? cells : this.getCells(this.cell); this.bounds = this.graph.getView().getBounds(this.cells); this.pBounds = this.getPreviewBounds(this.cells); @@ -962,7 +962,7 @@ class GraphHandler { */ // getDelta(me: mxMouseEvent): mxPoint; getDelta(me) { - const point = utils.convertPoint( + const point = convertPoint( this.graph.container, me.getX(), me.getY() @@ -1702,23 +1702,23 @@ class GraphHandler { const pState = this.graph.getView().getState(parent); if (pState != null) { - let pt = utils.convertPoint( + let pt = convertPoint( this.graph.container, getClientX(evt), getClientY(evt) ); - const alpha = utils.toRadians( - utils.getValue(pState.style, 'rotation') || 0 + const alpha = toRadians( + getValue(pState.style, 'rotation') || 0 ); if (alpha !== 0) { const cos = Math.cos(-alpha); const sin = Math.sin(-alpha); const cx = new Point(pState.getCenterX(), pState.getCenterY()); - pt = utils.getRotatedPoint(pt, cos, sin, cx); + pt = getRotatedPoint(pt, cos, sin, cx); } - return !utils.contains(pState, pt.x, pt.y); + return !contains(pState, pt.x, pt.y); } } diff --git a/packages/core/src/view/Outline.ts b/packages/core/src/view/Outline.ts index 775db88d2..929e92fdc 100644 --- a/packages/core/src/view/Outline.ts +++ b/packages/core/src/view/Outline.ts @@ -570,7 +570,7 @@ class Outline { this.zoom = me.isSource(this.sizer) || // @ts-ignore - (hit != null && utils.intersects(this.sizer.bounds, hit)); + (hit != null && intersects(this.sizer.bounds, hit)); this.startX = me.getX(); this.startY = me.getY(); this.active = true; @@ -578,7 +578,7 @@ class Outline { if ( this.source.useScrollbarsForPanning && - utils.hasScrollbars(this.source.container) + hasScrollbars(this.source.container) ) { this.dx0 = sourceContainer.scrollLeft; this.dy0 = sourceContainer.scrollTop; @@ -703,7 +703,7 @@ class Outline { if (!this.zoom) { // Applies the new translation if the source // has no scrollbars - if (!source.useScrollbarsForPanning || !utils.hasScrollbars(source.container)) { + if (!source.useScrollbarsForPanning || !hasScrollbars(source.container)) { source.panGraph(0, 0); dx /= outline.getView().scale; dy /= outline.getView().scale; diff --git a/packages/core/src/view/cell/edge/EdgeHandler.ts b/packages/core/src/view/cell/edge/EdgeHandler.ts index fb8d67d7b..b2e1a9936 100644 --- a/packages/core/src/view/cell/edge/EdgeHandler.ts +++ b/packages/core/src/view/cell/edge/EdgeHandler.ts @@ -31,7 +31,15 @@ import { OUTLINE_HIGHLIGHT_COLOR, OUTLINE_HIGHLIGHT_STROKEWIDTH, } from '../../../util/Constants'; -import utils from '../../../util/Utils'; +import utils, { + contains, + convertPoint, + findNearestSegment, + getValue, + intersects, + ptSegDistSq, + setOpacity, +} from '../../../util/Utils'; import ImageShape from '../../geometry/shape/node/ImageShape'; import RectangleShape from '../../geometry/shape/node/RectangleShape'; import ConnectionConstraint from '../../connection/ConnectionConstraint'; @@ -66,7 +74,7 @@ import Shape from '../../geometry/shape/Shape'; * @class EdgeHandler */ class EdgeHandler { - constructor(state) { + constructor(state: CellState | null = null) { if (state != null && state.shape != null) { this.state = state; this.init(); @@ -97,7 +105,7 @@ class EdgeHandler { * * Reference to the being modified. */ - state: CellState = null; + state: CellState; /** * Variable: marker @@ -354,8 +362,7 @@ class EdgeHandler { * * Initializes the shapes required for this edge handler. */ - // init(): void; - init() { + init(): void { this.graph = this.state.view.graph; this.marker = this.createMarker(); this.constraintHandler = new ConstraintHandler(this.graph); @@ -431,8 +438,7 @@ class EdgeHandler { * * Returns an array of custom handles. This implementation returns null. */ - // createCustomHandles(): any[]; - createCustomHandles() { + createCustomHandles(): any[] | null { return null; } @@ -443,14 +449,13 @@ class EdgeHandler { * is true and the current style allows and * renders custom waypoints. */ - // isVirtualBendsEnabled(evt: Event): boolean; - isVirtualBendsEnabled(evt) { + isVirtualBendsEnabled(evt: Event): boolean { return ( this.virtualBendsEnabled && (this.state.style.edge == null || this.state.style.edge === NONE || this.state.style.noEdgeStyle == 1) && - utils.getValue(this.state.style, 'shape', null) != 'arrow' + getValue(this.state.style, 'shape', null) != 'arrow' ); } @@ -895,7 +900,7 @@ class EdgeHandler { shape.node != null && shape.node.style.display !== 'none' && shape.node.style.visibility !== 'hidden' && - (me.isSource(shape) || (hit != null && utils.intersects(shape.bounds, hit))) + (me.isSource(shape) || (hit != null && intersects(shape.bounds, hit))) ) { const dx = me.getGraphX() - shape.bounds.getCenterX(); const dy = me.getGraphY() - shape.bounds.getCenterY(); @@ -996,7 +1001,7 @@ class EdgeHandler { this.graph.isLabelMovable(me.getCell()) ) { if (handle <= InternalEvent.VIRTUAL_HANDLE) { - utils.setOpacity( + setOpacity( this.virtualBends[InternalEvent.VIRTUAL_HANDLE - handle].node, 100 ); @@ -1287,7 +1292,7 @@ class EdgeHandler { if (i !== this.index) { const bend = this.bends[i]; - if (bend != null && utils.contains(bend.bounds, pt.x, pt.y)) { + if (bend != null && contains(bend.bounds, pt.x, pt.y)) { if (this.index <= InternalEvent.VIRTUAL_HANDLE) { points.splice(InternalEvent.VIRTUAL_HANDLE - this.index, 1); } else { @@ -1342,7 +1347,7 @@ class EdgeHandler { if ( idx > 0 && idx < abs.length - 1 && - utils.ptSegDistSq( + ptSegDistSq( abs[idx - 1].x, abs[idx - 1].y, abs[idx + 1].x, @@ -1381,7 +1386,7 @@ class EdgeHandler { */ // isOutlineConnectEvent(me: mxMouseEvent): boolean; isOutlineConnectEvent(me) { - const offset = utils.getOffset(this.graph.container); + const offset = getOffset(this.graph.container); const evt = me.getEvent(); const clientX = getClientX(evt); @@ -2027,7 +2032,7 @@ class EdgeHandler { */ // addPoint(state: mxCellState, evt: Event): void; addPoint(state, evt) { - const pt = utils.convertPoint(this.graph.container, getClientX(evt), getClientY(evt)); + const pt = convertPoint(this.graph.container, getClientX(evt), getClientY(evt)); const gridEnabled = this.graph.isGridEnabledEvent(evt); this.convertPoint(pt, gridEnabled); this.addPointAt(state, pt.x, pt.y); @@ -2057,7 +2062,7 @@ class EdgeHandler { offset = new Point(pState.x, pState.y); } - const index = utils.findNearestSegment( + const index = findNearestSegment( state, pt.x * s + offset.x, pt.y * s + offset.y @@ -2246,7 +2251,7 @@ class EdgeHandler { b.bounds.height ); b.redraw(); - utils.setOpacity(b.node, this.virtualBendOpacity); + setOpacity(b.node, this.virtualBendOpacity); last = pt; if (this.manageLabelHandle) { @@ -2347,7 +2352,7 @@ class EdgeHandler { } else if ( this.handleImage == null && this.labelShape.visible && - utils.intersects(this.bends[i].bounds, this.labelShape.bounds) + intersects(this.bends[i].bounds, this.labelShape.bounds) ) { const w = HANDLE_SIZE + 3; const h = HANDLE_SIZE + 3; @@ -2379,7 +2384,7 @@ class EdgeHandler { if (this.labelShape != null) { const b2 = this.labelShape.bounds; - if (utils.intersects(b, b2)) { + if (intersects(b, b2)) { if (b.getCenterY() < b2.getCenterY()) { b2.y = b.y + b.height; } else { @@ -2412,7 +2417,7 @@ class EdgeHandler { } } - if (this.shape != null && !utils.equalPoints(this.shape.points, this.abspoints)) { + if (this.shape != null && !equalPoints(this.shape.points, this.abspoints)) { this.shape.apply(this.state); this.shape.points = this.abspoints.slice(); this.shape.scale = this.state.view.scale; diff --git a/packages/core/src/view/cell/edge/ElbowEdgeHandler.ts b/packages/core/src/view/cell/edge/ElbowEdgeHandler.ts index 82ae75978..e2161b88b 100644 --- a/packages/core/src/view/cell/edge/ElbowEdgeHandler.ts +++ b/packages/core/src/view/cell/edge/ElbowEdgeHandler.ts @@ -17,7 +17,7 @@ import Point from '../../geometry/Point'; import EdgeStyle from '../../style/EdgeStyle'; import Resources from '../../../util/Resources'; import Rectangle from '../../geometry/Rectangle'; -import utils from '../../../util/Utils'; +import utils, { intersects } from '../../../util/Utils'; import mxClient from '../../../mxClient'; import { isConsumed } from '../../../util/EventUtils'; @@ -233,7 +233,7 @@ class ElbowEdgeHandler extends EdgeHandler { } else if ( this.handleImage == null && this.labelShape.visible && - utils.intersects(bounds, this.labelShape.bounds) + intersects(bounds, this.labelShape.bounds) ) { w = HANDLE_SIZE + 3; h = HANDLE_SIZE + 3; diff --git a/packages/core/src/view/cell/vertex/VertexHandler.ts b/packages/core/src/view/cell/vertex/VertexHandler.ts index 050615a3c..27d29971f 100644 --- a/packages/core/src/view/cell/vertex/VertexHandler.ts +++ b/packages/core/src/view/cell/vertex/VertexHandler.ts @@ -25,7 +25,7 @@ import RectangleShape from '../../geometry/shape/node/RectangleShape'; import ImageShape from '../../geometry/shape/node/ImageShape'; import EllipseShape from '../../geometry/shape/node/EllipseShape'; import Point from '../../geometry/Point'; -import utils from '../../../util/Utils'; +import utils, { getRotatedPoint, intersects, mod, toRadians } from '../../../util/Utils'; import mxClient from '../../../mxClient'; import { isMouseEvent, isShiftDown } from '../../../util/EventUtils'; import Graph from '../../Graph'; @@ -610,7 +610,7 @@ class VertexHandler { shape != null && (me.isSource(shape) || (real != null && - utils.intersects(shape.bounds, real) && + intersects(shape.bounds, real) && shape.node.style.display !== 'none' && shape.node.style.visibility !== 'hidden')) ); @@ -1032,7 +1032,7 @@ class VertexHandler { // resizeVertex(me: mxMouseEvent): void; resizeVertex(me) { const ct = new point(this.state.getCenterX(), this.state.getCenterY()); - const alpha = utils.toRadians(this.state.style.rotation || '0'); + const alpha = toRadians(this.state.style.rotation || '0'); const point = new Point(me.getGraphX(), me.getGraphY()); const tr = this.graph.view.translate; const { scale } = this.graph.view; @@ -1330,7 +1330,7 @@ class VertexHandler { } } else { const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent()); - const alpha = utils.toRadians(this.state.style.rotation || '0'); + const alpha = toRadians(this.state.style.rotation || '0'); const cos = Math.cos(-alpha); const sin = Math.sin(-alpha); @@ -1519,11 +1519,11 @@ class VertexHandler { if (geo != null) { if (index === InternalEvent.LABEL_HANDLE) { - const alpha = -utils.toRadians(this.state.style.rotation || '0'); + const alpha = -toRadians(this.state.style.rotation || '0'); const cos = Math.cos(alpha); const sin = Math.sin(alpha); const { scale } = this.graph.view; - const pt = utils.getRotatedPoint( + const pt = getRotatedPoint( new Point( Math.round((this.labelShape.bounds.getCenterX() - this.startX) / scale), Math.round((this.labelShape.bounds.getCenterY() - this.startY) / scale) @@ -1914,61 +1914,61 @@ class VertexHandler { 'w-resize', ]; - const alpha = utils.toRadians(this.state.style.rotation || '0'); + const alpha = toRadians(this.state.style.rotation || '0'); const cos = Math.cos(alpha); const sin = Math.sin(alpha); const da = Math.round((alpha * 4) / Math.PI); const ct = new Point(s.getCenterX(), s.getCenterY()); - let pt = utils.getRotatedPoint(new Point(s.x, s.y), cos, sin, ct); + let pt = getRotatedPoint(new Point(s.x, s.y), cos, sin, ct); this.moveSizerTo(this.sizers[0], pt.x, pt.y); - this.sizers[0].setCursor(crs[utils.mod(0 + da, crs.length)]); + this.sizers[0].setCursor(crs[mod(0 + da, crs.length)]); pt.x = cx; pt.y = s.y; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[1], pt.x, pt.y); - this.sizers[1].setCursor(crs[utils.mod(1 + da, crs.length)]); + this.sizers[1].setCursor(crs[mod(1 + da, crs.length)]); pt.x = r; pt.y = s.y; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[2], pt.x, pt.y); - this.sizers[2].setCursor(crs[utils.mod(2 + da, crs.length)]); + this.sizers[2].setCursor(crs[mod(2 + da, crs.length)]); pt.x = s.x; pt.y = cy; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[3], pt.x, pt.y); - this.sizers[3].setCursor(crs[utils.mod(7 + da, crs.length)]); + this.sizers[3].setCursor(crs[mod(7 + da, crs.length)]); pt.x = r; pt.y = cy; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[4], pt.x, pt.y); - this.sizers[4].setCursor(crs[utils.mod(3 + da, crs.length)]); + this.sizers[4].setCursor(crs[mod(3 + da, crs.length)]); pt.x = s.x; pt.y = b; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[5], pt.x, pt.y); - this.sizers[5].setCursor(crs[utils.mod(6 + da, crs.length)]); + this.sizers[5].setCursor(crs[mod(6 + da, crs.length)]); pt.x = cx; pt.y = b; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[6], pt.x, pt.y); - this.sizers[6].setCursor(crs[utils.mod(5 + da, crs.length)]); + this.sizers[6].setCursor(crs[mod(5 + da, crs.length)]); pt.x = r; pt.y = b; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[7], pt.x, pt.y); - this.sizers[7].setCursor(crs[utils.mod(4 + da, crs.length)]); + this.sizers[7].setCursor(crs[mod(4 + da, crs.length)]); pt.x = cx + this.state.absoluteOffset.x; pt.y = cy + this.state.absoluteOffset.y; - pt = utils.getRotatedPoint(pt, cos, sin, ct); + pt = getRotatedPoint(pt, cos, sin, ct); this.moveSizerTo(this.sizers[8], pt.x, pt.y); } else if (this.state.width >= 2 && this.state.height >= 2) { this.moveSizerTo( @@ -1983,14 +1983,14 @@ class VertexHandler { } if (this.rotationShape != null) { - const alpha = utils.toRadians( + const alpha = toRadians( this.currentAlpha != null ? this.currentAlpha : this.state.style.rotation || '0' ); const cos = Math.cos(alpha); const sin = Math.sin(alpha); const ct = new Point(this.state.getCenterX(), this.state.getCenterY()); - const pt = utils.getRotatedPoint(this.getRotationHandlePosition(), cos, sin, ct); + const pt = getRotatedPoint(this.getRotationHandlePosition(), cos, sin, ct); if (this.rotationShape.node != null) { this.moveSizerTo(this.rotationShape, pt.x, pt.y); diff --git a/packages/core/src/view/connection/ConstraintHandler.ts b/packages/core/src/view/connection/ConstraintHandler.ts index 76d8222dc..b68ba6cae 100644 --- a/packages/core/src/view/connection/ConstraintHandler.ts +++ b/packages/core/src/view/connection/ConstraintHandler.ts @@ -15,7 +15,7 @@ import { HIGHLIGHT_STROKEWIDTH, } from '../../util/Constants'; import InternalEvent from '../event/InternalEvent'; -import utils from '../../util/Utils'; +import utils, { intersects } from '../../util/Utils'; import Rectangle from '../geometry/Rectangle'; import ImageShape from '../geometry/shape/node/ImageShape'; import RectangleShape from '../geometry/shape/node/RectangleShape'; @@ -262,7 +262,7 @@ class ConstraintHandler { this.currentFocus == null || state != null || !this.currentFocus.cell.isVertex() || - !utils.intersects(this.currentFocusArea, mouse)) && + !intersects(this.currentFocusArea, mouse)) && state !== this.currentFocus ) { this.currentFocusArea = null; @@ -464,7 +464,7 @@ class ConstraintHandler { */ // intersects(icon: mxShape, mouse: mxRectangle, source: mxCell, existingEdge: mxCell): boolean; intersects(icon, mouse, source, existingEdge) { - return utils.intersects(icon.bounds, mouse); + return intersects(icon.bounds, mouse); } /** diff --git a/packages/core/src/view/connection/GraphConnections.ts b/packages/core/src/view/connection/GraphConnections.ts index 13ed9ad68..337b28f98 100644 --- a/packages/core/src/view/connection/GraphConnections.ts +++ b/packages/core/src/view/connection/GraphConnections.ts @@ -347,9 +347,9 @@ class GraphConnections { // Legacy support for stencilFlipH/V if (vertex.shape != null && vertex.shape.stencil != null) { flipH = - utils.getValue(vertex.style, 'stencilFlipH', 0) == 1 || flipH; + getValue(vertex.style, 'stencilFlipH', 0) == 1 || flipH; flipV = - utils.getValue(vertex.style, 'stencilFlipV', 0) == 1 || flipV; + getValue(vertex.style, 'stencilFlipV', 0) == 1 || flipV; } if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) { diff --git a/packages/core/src/view/drag_drop/DragSource.ts b/packages/core/src/view/drag_drop/DragSource.ts index ca23ee233..fd1a56fbd 100644 --- a/packages/core/src/view/drag_drop/DragSource.ts +++ b/packages/core/src/view/drag_drop/DragSource.ts @@ -6,7 +6,7 @@ */ import Rectangle from '../geometry/Rectangle'; import CellHighlight from '../selection/CellHighlight'; -import utils from '../../util/Utils'; +import utils, { getDocumentScrollOrigin, getOffset, getScrollOrigin, setOpacity } from '../../util/Utils'; import InternalEvent from '../event/InternalEvent'; import mxClient from '../../mxClient'; import mxGuide from '../../util/Guide'; @@ -336,7 +336,7 @@ class DragSource { this.dragElement = this.createDragElement(evt); this.dragElement.style.position = 'absolute'; this.dragElement.style.zIndex = this.dragElementZIndex; - utils.setOpacity(this.dragElement, this.dragElementOpacity); + setOpacity(this.dragElement, this.dragElementOpacity); if (this.checkEventSource && mxClient.IS_SVG) { this.dragElement.style.pointerEvents = 'none'; @@ -385,8 +385,8 @@ class DragSource { graphContainsEvent(graph, evt) { const x = getClientX(evt); const y = getClientY(evt); - const offset = utils.getOffset(graph.container); - const origin = utils.getScrollOrigin(); + const offset = getOffset(graph.container); + const origin = getScrollOrigin(); let elt = this.getElementForEvent(evt); if (this.checkEventSource) { @@ -454,7 +454,7 @@ class DragSource { y += this.dragOffset.y; } - const offset = utils.getDocumentScrollOrigin(document); + const offset = getDocumentScrollOrigin(document); this.dragElement.style.left = `${x + offset.x}px`; this.dragElement.style.top = `${y + offset.y}px`; @@ -590,8 +590,8 @@ class DragSource { */ // dragOver(graph: mxGraph, evt: Event): void; dragOver(graph, evt) { - const offset = utils.getOffset(graph.container); - const origin = utils.getScrollOrigin(graph.container); + const offset = getOffset(graph.container); + const origin = getScrollOrigin(graph.container); let x = getClientX(evt) - offset.x + origin.x - graph.panDx; let y = getClientY(evt) - offset.y + origin.y - graph.panDy; diff --git a/packages/core/src/view/editing/CellEditor.ts b/packages/core/src/view/editing/CellEditor.ts index f84c4d9f7..879fde6ad 100644 --- a/packages/core/src/view/editing/CellEditor.ts +++ b/packages/core/src/view/editing/CellEditor.ts @@ -5,7 +5,7 @@ * Type definitions from the typed-mxgraph project */ -import utils, {getAlignmentAsPoint, getValue } from '../../util/Utils'; +import { getAlignmentAsPoint, getStringValue, getValue, setPrefixedStyle } from '../../util/Utils'; import Rectangle from '../geometry/Rectangle'; import InternalEvent from '../event/InternalEvent'; import mxClient from '../../mxClient'; @@ -627,12 +627,12 @@ class CellEditor { } } else { let bounds = Rectangle.fromRectangle(state); - let hpos = utils.getValue( + let hpos = getValue( state.style, 'labelPosition', ALIGN_CENTER ); - let vpos = utils.getValue( + let vpos = getValue( state.style, 'verticalLabelPosition', ALIGN_MIDDLE @@ -757,12 +757,12 @@ class CellEditor { )}px`; } - utils.setPrefixedStyle( + setPrefixedStyle( this.textarea.style, 'transformOrigin', '0px 0px' ); - utils.setPrefixedStyle( + setPrefixedStyle( this.textarea.style, 'transform', `scale(${scale},${scale})${ @@ -831,8 +831,8 @@ class CellEditor { state.style.fontFamily != null ? state.style.fontFamily : DEFAULT_FONTFAMILY; - const color = utils.getValue(state.style, 'fontColor', 'black'); - const align = utils.getValue(state.style, 'align', ALIGN_LEFT); + const color = getValue(state.style, 'fontColor', 'black'); + const align = getValue(state.style, 'align', ALIGN_LEFT); const bold = (state.style.fontStyle || 0) & FONT_BOLD; const italic = (state.style.fontStyle || 0) & FONT_ITALIC; @@ -1176,7 +1176,7 @@ class CellEditor { // Applies the horizontal and vertical label positions if (state.cell.isVertex()) { const horizontal: string = ( - utils.getStringValue( + getStringValue( state.style, 'labelPosition', ALIGN_CENTER diff --git a/packages/core/src/view/layout/layout/StackLayout.ts b/packages/core/src/view/layout/layout/StackLayout.ts index 11c7d881a..721314aba 100644 --- a/packages/core/src/view/layout/layout/StackLayout.ts +++ b/packages/core/src/view/layout/layout/StackLayout.ts @@ -6,7 +6,7 @@ */ import GraphLayout from './GraphLayout'; import Rectangle from '../../geometry/Rectangle'; -import utils, { getNumber } from '../../../util/Utils'; +import utils, { getNumber, getValue } from '../../../util/Utils'; import { DEFAULT_STARTSIZE, } from '../../../util/Constants'; @@ -299,12 +299,12 @@ class StackLayout extends GraphLayout { if (this.graph.isSwimlane(parent)) { // Uses computed style to get latest const style = this.graph.getCellStyle(parent); - let start = utils.getNumber( + let start = getNumber( style, 'startSize', DEFAULT_STARTSIZE ); - const horz = utils.getValue(style, 'horizontal', true) == 1; + const horz = getValue(style, 'horizontal', true) == 1; if (pgeo != null) { if (horz) { diff --git a/packages/core/src/view/layout/layout/hierarchical/model/SwimlaneModel.ts b/packages/core/src/view/layout/layout/hierarchical/model/SwimlaneModel.ts index 19ef51a84..51b7c38f6 100644 --- a/packages/core/src/view/layout/layout/hierarchical/model/SwimlaneModel.ts +++ b/packages/core/src/view/layout/layout/hierarchical/model/SwimlaneModel.ts @@ -12,6 +12,7 @@ import GraphLayout from '../../GraphLayout'; import Dictionary from '../../../../../util/Dictionary'; import CellArray from '../../../../cell/datatypes/CellArray'; import Cell from '../../../../cell/datatypes/Cell'; +import { clone } from '../../../../../util/CloneUtils'; /** * Class: mxSwimlaneModel @@ -490,7 +491,7 @@ class SwimlaneModel { root, targetNode, internalEdge, - utils.clone(seen, null, true), + clone(seen, null, true), 0 ); } else if (root.swimlaneIndex === targetNode.swimlaneIndex) { @@ -498,7 +499,7 @@ class SwimlaneModel { root, targetNode, internalEdge, - utils.clone(seen, null, true), + clone(seen, null, true), chainCount + 1 ); } diff --git a/packages/core/src/view/layout/layout/hierarchical/stage/mxSwimlaneOrdering.js b/packages/core/src/view/layout/layout/hierarchical/stage/mxSwimlaneOrdering.js index cd0f152ad..810626a7c 100644 --- a/packages/core/src/view/layout/layout/hierarchical/stage/mxSwimlaneOrdering.js +++ b/packages/core/src/view/layout/layout/hierarchical/stage/mxSwimlaneOrdering.js @@ -5,8 +5,9 @@ * Type definitions from the typed-mxgraph project */ import MxHierarchicalLayoutStage from './HierarchicalLayoutStage'; -import utils from '../../../../../util/Utils'; +import utils, { remove } from '../../../../../util/Utils'; import CellPath from '../../../../cell/datatypes/CellPath'; +import { clone } from '../../../../../util/CloneUtils'; /** * Class: mxSwimlaneOrdering @@ -42,7 +43,7 @@ class mxSwimlaneOrdering extends MxHierarchicalLayoutStage { execute(parent) { const model = this.layout.getModel(); const seenNodes = {}; - const unseenNodes = utils.clone(model.vertexMapper, null, true); + const unseenNodes = clone(model.vertexMapper, null, true); // Perform a dfs through the internal model. If a cycle is found, // reverse it. @@ -78,16 +79,16 @@ class mxSwimlaneOrdering extends MxHierarchicalLayoutStage { if (isAncestor) { connectingEdge.invert(); - utils.remove(connectingEdge, parent.connectsAsSource); + remove(connectingEdge, parent.connectsAsSource); node.connectsAsSource.push(connectingEdge); parent.connectsAsTarget.push(connectingEdge); - utils.remove(connectingEdge, node.connectsAsTarget); + remove(connectingEdge, node.connectsAsTarget); } else if (reversedOverSwimlane) { connectingEdge.invert(); - utils.remove(connectingEdge, parent.connectsAsTarget); + remove(connectingEdge, parent.connectsAsTarget); node.connectsAsTarget.push(connectingEdge); parent.connectsAsSource.push(connectingEdge); - utils.remove(connectingEdge, node.connectsAsSource); + remove(connectingEdge, node.connectsAsSource); } const cellId = CellPath.create(node.cell); diff --git a/packages/core/src/view/panning/PanningHandler.ts b/packages/core/src/view/panning/PanningHandler.ts index 6d721f8d9..3052d9911 100644 --- a/packages/core/src/view/panning/PanningHandler.ts +++ b/packages/core/src/view/panning/PanningHandler.ts @@ -5,7 +5,7 @@ * Type definitions from the typed-mxgraph project */ import EventSource from '../event/EventSource'; -import utils from '../../util/Utils'; +import utils, { hasScrollbars } from '../../util/Utils'; import EventObject from '../event/EventObject'; import InternalEvent from '../event/InternalEvent'; import { isConsumed, isControlDown, isLeftMouseButton, isMultiTouchEvent, isPopupTrigger, isShiftDown } from '../../util/EventUtils'; @@ -425,7 +425,7 @@ class PanningHandler extends EventSource { // Ignores if scrollbars have been used for panning if ( !this.graph.useScrollbarsForPanning || - !utils.hasScrollbars(this.graph.container) + !hasScrollbars(this.graph.container) ) { const { scale } = this.graph.getView(); const t = this.graph.getView().translate; diff --git a/packages/core/src/view/panning/PanningManager.ts b/packages/core/src/view/panning/PanningManager.ts index 4a71278ec..0aff317de 100644 --- a/packages/core/src/view/panning/PanningManager.ts +++ b/packages/core/src/view/panning/PanningManager.ts @@ -5,6 +5,9 @@ * Type definitions from the typed-mxgraph project */ +import { hasScrollbars } from '../../util/Utils'; +import EventObject from '../event/EventObject'; + /** * Class: mxPanningManager * @@ -46,7 +49,7 @@ class PanningManager { mxEvent.addListener(document, 'mouseup', this.mouseUpListener); const createThread = () => { - this.scrollbars = utils.hasScrollbars(graph.container); + this.scrollbars = hasScrollbars(graph.container); this.scrollLeft = graph.container.scrollLeft; this.scrollTop = graph.container.scrollTop; @@ -69,7 +72,7 @@ class PanningManager { }; this.isActive = () => { - return active; + return this.active; }; this.getDx = () => { diff --git a/packages/core/src/view/printing/PrintPreview.ts b/packages/core/src/view/printing/PrintPreview.ts index 9b555819b..cbc33a262 100644 --- a/packages/core/src/view/printing/PrintPreview.ts +++ b/packages/core/src/view/printing/PrintPreview.ts @@ -8,7 +8,7 @@ import Rectangle from '../geometry/Rectangle'; import TemporaryCellStates from '../cell/TemporaryCellStates'; import InternalEvent from '../event/InternalEvent'; import mxClient from '../../mxClient'; -import utils from '../../util/Utils'; +import utils, { intersects } from '../../util/Utils'; import { DIALECT_SVG } from '../../util/Constants'; import { write } from '../../util/DomUtils'; import Graph from '../Graph'; @@ -25,7 +25,7 @@ import Graph from '../Graph'; * preview.open(); * ``` * - * Use {@link utils.getScaleForPageCount} as follows in order to print the graph + * Use {@link getScaleForPageCount} as follows in order to print the graph * across a given number of pages: * * @example @@ -134,7 +134,7 @@ import Graph from '../Graph'; * ### Page Format * * For landscape printing, use {@link mxConstants.PAGE_FORMAT_A4_LANDSCAPE} as - * the pageFormat in {@link utils.getScaleForPageCount} and {@link PrintPreview}. + * the pageFormat in {@link getScaleForPageCount} and {@link PrintPreview}. * Keep in mind that one can not set the defaults for the print dialog * of the operating system from JavaScript so the user must manually choose * a page format that matches this setting. @@ -899,7 +899,7 @@ class PrintPreview { bbox != null && bbox.width > 0 && bbox.height > 0 && - !utils.intersects(tempClip, bbox) + !intersects(tempClip, bbox) ) { return; } diff --git a/packages/core/src/view/style/EdgeStyle.ts b/packages/core/src/view/style/EdgeStyle.ts index 9cce1da99..219e1978a 100644 --- a/packages/core/src/view/style/EdgeStyle.ts +++ b/packages/core/src/view/style/EdgeStyle.ts @@ -5,7 +5,14 @@ * Type definitions from the typed-mxgraph project */ -import utils from '../../util/Utils'; +import utils, { + contains, + getBoundingBox, + getNumber, + getPortConstraints, + getValue, + reversePortConstraints, +} from '../../util/Utils'; import Point from '../geometry/Point'; import CellState from '../cell/datatypes/CellState'; import { @@ -123,7 +130,7 @@ class EdgeStyle { const { view } = state; const { graph } = view; const segment = - utils.getValue(state.style, 'segment', ENTITY_SEGMENT) * view.scale; + getValue(state.style, 'segment', ENTITY_SEGMENT) * view.scale; const pts = state.absolutePoints; const p0 = pts[0]; @@ -148,7 +155,7 @@ class EdgeStyle { source.x = p0.x; source.y = p0.y; } else if (source != null) { - const constraint = utils.getPortConstraints( + const constraint = getPortConstraints( source, state, true, @@ -184,7 +191,7 @@ class EdgeStyle { target.x = pe.x; target.y = pe.y; } else if (target != null) { - const constraint = utils.getPortConstraints( + const constraint = getPortConstraints( target, state, false, @@ -267,7 +274,7 @@ class EdgeStyle { if (pt != null) { pt = view.transformControlPoint(state, pt); - if (utils.contains(source, pt.x, pt.y)) { + if (contains(source, pt.x, pt.y)) { pt = null; } } @@ -278,9 +285,9 @@ class EdgeStyle { let dy = 0; const seg = - utils.getValue(state.style, 'segment', graph.gridSize) * + getValue(state.style, 'segment', graph.gridSize) * view.scale; - const dir = utils.getValue( + const dir = getValue( state.style, 'direction', DIRECTION_WEST @@ -431,15 +438,15 @@ class EdgeStyle { } if ( - !utils.contains(target, x, y1) && - !utils.contains(source, x, y1) + !contains(target, x, y1) && + !contains(source, x, y1) ) { result.push(new Point(x, y1)); } if ( - !utils.contains(target, x, y2) && - !utils.contains(source, x, y2) + !contains(target, x, y2) && + !contains(source, x, y2) ) { result.push(new Point(x, y2)); } @@ -447,8 +454,8 @@ class EdgeStyle { if (result.length === 1) { if (pt != null) { if ( - !utils.contains(target, x, pt.y) && - !utils.contains(source, x, pt.y) + !contains(target, x, pt.y) && + !contains(source, x, pt.y) ) { result.push(new Point(x, pt.y)); } @@ -506,7 +513,7 @@ class EdgeStyle { const y = pt != null ? pt.y : Math.round(b + (t - b) / 2); - if (!utils.contains(target, x, y) && !utils.contains(source, x, y)) { + if (!contains(target, x, y) && !contains(source, x, y)) { result.push(new Point(x, y)); } @@ -516,15 +523,15 @@ class EdgeStyle { x = view.getRoutingCenterX(target); } - if (!utils.contains(target, x, y) && !utils.contains(source, x, y)) { + if (!contains(target, x, y) && !contains(source, x, y)) { result.push(new Point(x, y)); } if (result.length === 1) { if (pt != null && result.length === 1) { if ( - !utils.contains(target, pt.x, y) && - !utils.contains(source, pt.x, y) + !contains(target, pt.x, y) && + !contains(source, pt.x, y) ) { result.push(new Point(pt.x, y)); } @@ -808,7 +815,7 @@ class EdgeStyle { while ( result.length > 1 && result[1] != null && - utils.contains(source, result[1].x, result[1].y) + contains(source, result[1].x, result[1].y) ) { result.splice(1, 1); } @@ -819,7 +826,7 @@ class EdgeStyle { while ( result.length > 1 && result[result.length - 1] != null && - utils.contains( + contains( target, result[result.length - 1].x, result[result.length - 1].y @@ -952,22 +959,22 @@ class EdgeStyle { // mxEdgeStyle.SOURCE_MASK | mxEdgeStyle.TARGET_MASK, static getJettySize(state, isSource) { - let value = utils.getValue( + let value = getValue( state.style, isSource ? 'sourceJettySize' : 'targetJettySize', - utils.getValue(state.style, 'jettySize', EdgeStyle.orthBuffer) + getValue(state.style, 'jettySize', EdgeStyle.orthBuffer) ); if (value === 'auto') { // Computes the automatic jetty size - const type = utils.getValue( + const type = getValue( state.style, isSource ? 'startArrow' : 'endArrow', NONE ); if (type !== NONE) { - const size = utils.getNumber( + const size = getNumber( state.style, isSource ? 'startSize' : 'endSize', DEFAULT_MARKERSIZE @@ -1143,18 +1150,18 @@ class EdgeStyle { let rotation = 0; if (source != null) { - portConstraint[0] = utils.getPortConstraints( + portConstraint[0] = getPortConstraints( source, state, true, DIRECTION_MASK_ALL ); - rotation = utils.getValue(source.style, 'rotation', 0); + rotation = getValue(source.style, 'rotation', 0); // console.log('source rotation', rotation); if (rotation !== 0) { - const newRect = utils.getBoundingBox( + const newRect = getBoundingBox( new Rectangle(sourceX, sourceY, sourceWidth, sourceHeight), rotation ); @@ -1166,18 +1173,18 @@ class EdgeStyle { } if (target != null) { - portConstraint[1] = utils.getPortConstraints( + portConstraint[1] = getPortConstraints( target, state, false, DIRECTION_MASK_ALL ); - rotation = utils.getValue(target.style, 'rotation', 0); + rotation = getValue(target.style, 'rotation', 0); // console.log('target rotation', rotation); if (rotation !== 0) { - const newRect = utils.getBoundingBox( + const newRect = getBoundingBox( new Rectangle(targetX, targetY, targetWidth, targetHeight), rotation ); @@ -1318,8 +1325,8 @@ class EdgeStyle { ? DIRECTION_MASK_NORTH : DIRECTION_MASK_SOUTH; - horPref[1] = utils.reversePortConstraints(horPref[0]); - vertPref[1] = utils.reversePortConstraints(vertPref[0]); + horPref[1] = reversePortConstraints(horPref[0]); + vertPref[1] = reversePortConstraints(vertPref[0]); const preferredHorizDist = sourceLeftDist >= sourceRightDist ? sourceLeftDist : sourceRightDist; @@ -1339,11 +1346,11 @@ class EdgeStyle { } if ((horPref[i] & portConstraint[i]) === 0) { - horPref[i] = utils.reversePortConstraints(horPref[i]); + horPref[i] = reversePortConstraints(horPref[i]); } if ((vertPref[i] & portConstraint[i]) === 0) { - vertPref[i] = utils.reversePortConstraints(vertPref[i]); + vertPref[i] = reversePortConstraints(vertPref[i]); } prefOrdering[i][0] = vertPref[i]; diff --git a/packages/core/src/view/style/Stylesheet.ts b/packages/core/src/view/style/Stylesheet.ts index 5678542c2..7ba4e5b90 100644 --- a/packages/core/src/view/style/Stylesheet.ts +++ b/packages/core/src/view/style/Stylesheet.ts @@ -13,7 +13,7 @@ import { SHAPE_RECTANGLE } from '../../util/Constants'; import Perimeter from './Perimeter'; -import utils from '../../util/Utils'; +import utils, { isNumeric } from '../../util/Utils'; import { clone } from '../../util/CloneUtils'; import StyleMap from "./StyleMap"; @@ -23,8 +23,8 @@ import StyleMap from "./StyleMap"; * Defines the appearance of the cells in a graph. See {@link putCellStyle} for an * example of creating a new cell style. It is recommended to use objects, not * arrays for holding cell styles. Existing styles can be cloned using - * {@link utils.clone} and turned into a string for debugging using - * {@link utils.toString}. + * {@link clone} and turned into a string for debugging using + * {@link toString}. * * ### Default Styles * @@ -58,9 +58,9 @@ import StyleMap from "./StyleMap"; * special value none can be used, eg. highlight;fillColor=none * * See also the helper methods in mxUtils to modify strings of this format, - * namely {@link utils.setStyle}, {@link utils.indexOfStylename}, - * {@link utils.addStylename}, {@link utils.removeStylename}, - * {@link utils.removeAllStylenames} and {@link utils.setStyleFlag}. + * namely {@link setStyle}, {@link indexOfStylename}, + * {@link addStylename}, {@link removeStylename}, + * {@link removeAllStylenames} and {@link setStyleFlag}. * * Constructor: mxStylesheet * @@ -207,7 +207,7 @@ class Stylesheet { if (value === NONE) { delete style[key]; - } else if (utils.isNumeric(value)) { + } else if (isNumeric(value)) { style[key] = parseFloat(value); } else { style[key] = value; diff --git a/packages/html/stories/Drop.stories.js b/packages/html/stories/Drop.stories.js index 5f35f444f..b0ff48022 100644 --- a/packages/html/stories/Drop.stories.js +++ b/packages/html/stories/Drop.stories.js @@ -1,6 +1,7 @@ import mxgraph from '@mxgraph/core'; import { globalTypes } from '../.storybook/preview'; +import { getXml, parseXml } from '@mxgraph/core/src/util/XmlUtils'; export default { title: 'DnD_CopyPaste/Drop', @@ -112,7 +113,7 @@ function handleDrop(graph, file, x, y) { if (file.type.substring(0, 9) === 'image/svg') { const comma = data.indexOf(','); const svgText = atob(data.substring(comma + 1)); - const root = utils.parseXml(svgText); + const root = parseXml(svgText); // Parses SVG to find width and height if (root != null) { @@ -144,7 +145,7 @@ function handleDrop(graph, file, x, y) { h = Math.max(1, Math.round(h)); data = `data:image/svg+xml,${btoa( - utils.getXml(svgs[0], '\n') + getXml(svgs[0], '\n') )}`; graph.insertVertex({ position: [x, y], diff --git a/packages/html/stories/Events.stories.js b/packages/html/stories/Events.stories.js index d3269a2e2..e56b67d12 100644 --- a/packages/html/stories/Events.stories.js +++ b/packages/html/stories/Events.stories.js @@ -158,16 +158,16 @@ function createPopupMenu(graph, menu, cell, evt) { // Function to create the entries in the popupmenu if (cell != null) { menu.addItem('Cell Item', '/images/image.gif', () => { - utils.alert('MenuItem1'); + alert('MenuItem1'); }); } else { menu.addItem('No-Cell Item', '/images/image.gif', () => { - utils.alert('MenuItem2'); + alert('MenuItem2'); }); } menu.addSeparator(); menu.addItem('MenuItem3', '/images/warning.gif', () => { - utils.alert(`MenuItem3: ${graph.getSelectionCount()} selected`); + alert(`MenuItem3: ${graph.getSelectionCount()} selected`); }); } diff --git a/packages/html/stories/FileIO.stories.js b/packages/html/stories/FileIO.stories.js index 9627fbfdc..4d18cb838 100644 --- a/packages/html/stories/FileIO.stories.js +++ b/packages/html/stories/FileIO.stories.js @@ -1,6 +1,10 @@ import mxgraph from '@mxgraph/core'; import { globalTypes } from '../.storybook/preview'; +import { error } from '@mxgraph/core/src/util/mxDomUtils'; +import { clone } from '@mxgraph/core/src/util/CloneUtils'; +import { button } from '@mxgraph/core/src/util/dom/mxDomHelpers'; +import { load } from '@mxgraph/core/src/util/network/mxXmlRequest'; export default { title: 'Xml_Json/FileIO', @@ -34,7 +38,7 @@ const Template = ({ label, ...args }) => { if (!mxClient.isBrowserSupported()) { // Displays an error message if the browser is // not supported. - utils.error('Browser is not supported!', 200, false); + error('Browser is not supported!', 200, false); } else { // Creates the graph inside the given container const graph = new mxGraph(container); @@ -58,7 +62,7 @@ const Template = ({ label, ...args }) => { style = graph.getStylesheet().getDefaultEdgeStyle(); style.labelBackgroundColor = 'white'; - style = utils.clone(style); + style = clone(style); style.startArrow = mxConstants.ARROW_CLASSIC; graph.getStylesheet().putCellStyle('2way', style); @@ -78,7 +82,7 @@ const Template = ({ label, ...args }) => { // Adds a button to execute the layout this.el2.appendChild( - utils.button('Arrange', function(evt) { + button('Arrange', function(evt) { const parent = graph.getDefaultParent(); layout.execute(parent); }) @@ -120,7 +124,7 @@ const Template = ({ label, ...args }) => { !mxe.isConsumed() && cell != null ) { - utils.alert( + alert( `Show properties for cell ${cell.customId || cell.getId()}` ); } @@ -136,7 +140,7 @@ const Template = ({ label, ...args }) => { // is normally the first child of the root (ie. layer 0). const parent = graph.getDefaultParent(); - const req = utils.load(filename); + const req = load(filename); const text = req.getText(); const lines = text.split('\n'); @@ -192,7 +196,7 @@ const Template = ({ label, ...args }) => { // Parses the mxGraph XML file format function read(graph, filename) { - const req = utils.load(filename); + const req = load(filename); const root = req.getDocumentElement(); const dec = new mxCodec(root.ownerDocument); diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js index c652e4294..79dba8fda 100644 --- a/packages/html/stories/FixedPoints.stories.js +++ b/packages/html/stories/FixedPoints.stories.js @@ -1,6 +1,7 @@ import mxgraph from '@mxgraph/core'; import { globalTypes } from '../.storybook/preview'; +import { intersects } from '@mxgraph/core/src/util/Utils'; export default { title: 'Connections/FixedPoints', @@ -37,7 +38,7 @@ const Template = ({ label, ...args }) => { // Snaps to fixed points intersects(icon, point, source, existingEdge) { return ( - !source || existingEdge || utils.intersects(icon.bounds, point) + !source || existingEdge || intersects(icon.bounds, point) ); } } diff --git a/packages/html/stories/HelloPort.stories.js b/packages/html/stories/HelloPort.stories.js index 6e63aefeb..b5428f6cd 100644 --- a/packages/html/stories/HelloPort.stories.js +++ b/packages/html/stories/HelloPort.stories.js @@ -1,6 +1,8 @@ import mxgraph from '@mxgraph/core'; import { globalTypes } from '../.storybook/preview'; +import { popup } from '@mxgraph/core/src/util/gui/mxWindow'; +import { getPrettyXml } from '@mxgraph/core/src/util/XmlUtils'; export default { title: 'Connections/HelloPort', @@ -107,7 +109,7 @@ const Template = ({ label, ...args }) => { const button = mxDomHelpers.button('View XML', function() { const encoder = new mxCodec(); const node = encoder.encode(graph.getModel()); - utils.popup(utils.getPrettyXml(node), true); + popup(getPrettyXml(node), true); }); controller.appendChild(button); diff --git a/packages/html/stories/PageBreaks.stories.js b/packages/html/stories/PageBreaks.stories.js index 8d62c1388..2b2333333 100644 --- a/packages/html/stories/PageBreaks.stories.js +++ b/packages/html/stories/PageBreaks.stories.js @@ -153,11 +153,11 @@ const Template = ({ label, ...args }) => { const footer = header.cloneNode(true); - utils.write(header, `Page ${pageNumber} - Header`); + write(header, `Page ${pageNumber} - Header`); header.style.borderBottom = '1px solid gray'; header.style.top = '0px'; - utils.write(footer, `Page ${pageNumber} - Footer`); + write(footer, `Page ${pageNumber} - Footer`); footer.style.borderTop = '1px solid gray'; footer.style.bottom = '0px';