zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'mcyph-graph-refactor' of https://github.com/jsGraph/mxgraph into mcyph-graph-refactor

development
Junsik Shim 2021-08-01 11:26:49 +09:00
parent bc400a3ae3 6dd7e4f96d
commit c89ce4cea4
53 changed files with 1530 additions and 1402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/stashed/Ports.js
View File

@ -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);
};

54
docs/stashed/Schema.js
View File

@ -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 += '<img src="images/spacer.gif" width="16" height="1">&nbsp;';
}
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);
};
</script>
</head>

22
docs/stashed/Scrollbars.js
View File

@ -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 = () =>
{
let edgeCount = state.cell.getEdgeCount();
@ -254,7 +258,7 @@ export default Scrollbars;
graph.view.invalidate(edge, true, false);
graph.view.validate(edge);
}
});
};
mxEvent.addListener(div, 'scroll', updateEdges);
mxEvent.addListener(div, 'mouseup', updateEdges);
@ -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]);

25
docs/stashed/ServerView.js
View File

@ -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)
(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)
((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)
((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)
((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)
((evt) =>
{
if (this.isContainerEvent(evt))
{
graph.popupMenuHandler.hideMenu();
}
}),
utils.bind(this, function(evt)
((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)
((evt) =>
{
if (this.captureDocumentGesture)
{

21
docs/stashed/Touch.js
View File

@ -1,3 +1,5 @@
import { error } from '../../packages/core/src/util/gui/mxWindow';
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
/**
* 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 = ((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)
((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';

6
docs/stashed/UIConfig.js
View File

@ -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;

87
docs/stashed/grapheditor/www/js/Actions.js
View File

@ -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((() =>
{
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...', (() =>
{
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'), ((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', (() =>
{
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', (() =>
{
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', (() =>
{
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') + '...', (() =>
{
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'), ((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...', (() =>
{
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'), ((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', (() =>
{
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 = ((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...', (() =>
{
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', (() =>
{
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', (() =>
{
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', (() =>
{
// 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', (() =>
{
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((() => { return this.layersWindow != null && this.layersWindow.window.isVisible(); }));
action = this.addAction('formatPanel', (() =>
{
ui.toggleFormatPanel();
}), null, null, Editor.ctrlKey + '+Shift+P');
action.setToggleAction(true);
action.setSelectedCallback(utils.bind(this, function() { return ui.formatWidth > 0; }));
action = this.addAction('outline', utils.bind(this, function()
action.setSelectedCallback((() => { return ui.formatWidth > 0; }));
action = this.addAction('outline', (() =>
{
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((() => { 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.

205
docs/stashed/grapheditor/www/js/Dialogs.js
View File

@ -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 ((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'), (() =>
{
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 = (() =>
{
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, (() =>
{
outline.update(false);
outline.outline.sizeDidChange();
}));
this.window.addListener(mxEvent.SHOW, utils.bind(this, function()
this.window.addListener(mxEvent.SHOW, (() =>
{
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, (() =>
{
outline.suspended = true;
}));
this.window.addListener(mxEvent.NORMALIZE, utils.bind(this, function()
this.window.addListener(mxEvent.NORMALIZE, (() =>
{
outline.suspended = false;
outline.update();
}));
this.window.addListener(mxEvent.MINIMIZE, utils.bind(this, function()
this.window.addListener(mxEvent.MINIMIZE, (() =>
{
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 = '<div class="geSprite geSprite-insert" style="display:inline-block;"></div>';
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(((menu, parent) =>
{
for (let i = layerCount - 1; i >= 0; i--)
{
(utils.bind(this, function(child)
(((child) =>
{
let item = menu.addItem(graph.convertValueToString(child) ||
Resources.get('background'), null, utils.bind(this, function()
Resources.get('background'), null, (() =>
{
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'), ((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)
(((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.window.fit();
}));
@ -2516,7 +2529,7 @@ let LayersWindow = function(editorUi, x, y, w, h)
}
};
let resizeListener = utils.bind(this, function()
let resizeListener = (() =>
{
let x = this.window.getX();
let y = this.window.getY();

133
docs/stashed/grapheditor/www/js/Editor.js
View File

@ -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.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 = ((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 = ((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', (() =>
{
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, ((evt) =>
{
mouseDownSeen = true;
}), null, utils.bind(this, function(evt)
}), null, ((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 = (() =>
{
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', ((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', ((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)
((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)
((evt) =>
{
graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new InternalMouseEvent(evt));
}),
utils.bind(this, function(evt)
((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)
((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 = ((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 = ((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';

322
docs/stashed/grapheditor/www/js/EditorUi.js
View File

File diff suppressed because it is too large Load Diff

507
docs/stashed/grapheditor/www/js/Format.js
View File

File diff suppressed because it is too large Load Diff

127
docs/stashed/grapheditor/www/js/Menus.js
View File

@ -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(((menu, parent) =>
{
let addItem = utils.bind(this, function(fontname)
let addItem = ((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.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, ((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(((menu, parent) =>
{
function addItem(label, tag)
{
return menu.addItem(label, null, utils.bind(this, function()
return menu.addItem(label, null, (() =>
{
// TODO: Check if visible
if (graph.cellEditor.textarea != null)
@ -133,11 +136,11 @@ Menus.prototype.init = function()
addItem('', 'pre').firstChild.nextSibling.innerHTML = '<pre style="margin:0px;">' + Resources.get('formatted') + '</pre>';
addItem('', 'blockquote').firstChild.nextSibling.innerHTML = '<blockquote style="margin-top:0px;margin-bottom:0px;">' + Resources.get('blockquote') + '</blockquote>';
})));
this.put('fontSize', new Menu(utils.bind(this, function(menu, parent)
this.put('fontSize', new Menu(((menu, parent) =>
{
let sizes = [6, 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 72];
let addItem = utils.bind(this, function(fontsize)
let addItem = ((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.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, ((newValue) =>
{
this.customFontSizes.push(newValue);
}));
})));
this.put('direction', new Menu(utils.bind(this, function(menu, parent)
this.put('direction', new Menu(((menu, parent) =>
{
menu.addItem(Resources.get('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent);
menu.addItem(Resources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent);
this.addMenuItems(menu, ['-', 'rotation'], parent);
})));
this.put('align', new Menu(utils.bind(this, function(menu, parent)
this.put('align', new Menu(((menu, parent) =>
{
menu.addItem(Resources.get('leftAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_LEFT); }, parent);
menu.addItem(Resources.get('center'), null, function() { graph.alignCells(mxConstants.ALIGN_CENTER); }, parent);
@ -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(((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(((menu, parent) =>
{
let promptSpacing = utils.bind(this, function(defaultValue, fn)
let promptSpacing = ((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, (() =>
{
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, (() =>
{
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, (() =>
{
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, ((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, (() =>
{
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, ((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, (() =>
{
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, ((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, (() =>
{
let layout = new MxFastOrganicLayout(graph);
promptSpacing(layout.forceConstant, utils.bind(this, function(newValue)
promptSpacing(layout.forceConstant, ((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, (() =>
{
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(((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(((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(((menu, parent) =>
{
this.addMenuItems(menu, ['insertLink', 'insertImage'], parent);
})));
this.put('view', new Menu(utils.bind(this, function(menu, parent)
this.put('view', new Menu(((menu, parent) =>
{
this.addMenuItems(menu, ((this.editorUi.format != null) ? ['formatPanel'] : []).
concat(['outline', 'layers', '-', 'pageView', 'pageScale', '-', 'scrollbars', 'tooltips', '-',
@ -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(((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(((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(((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(((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(((menu, parent) =>
{
this.addMenuItems(menu, ['copyConnect', 'collapseExpand', '-', 'editDiagram']);
})));
this.put('help', new Menu(utils.bind(this, function(menu, parent)
this.put('help', new Menu(((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, ((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 : ((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.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, (() =>
{
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, (() =>
{
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 ((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, (() =>
{
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'), ((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', ((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)
(((menu) =>
{
let elt = menubar.addMenu(Resources.get(menus[i]), utils.bind(this, function()
let elt = menubar.addMenu(Resources.get(menus[i]), (() =>
{
// 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 = ((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 = (() =>
{
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', ((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)
((evt) =>
{
show = this.currentElt != elt;
evt.preventDefault();
}));
mxEvent.addListener(elt, 'click', utils.bind(this, function(evt)
mxEvent.addListener(elt, 'click', ((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.

730
docs/stashed/grapheditor/www/js/Shapes.js
View File

File diff suppressed because it is too large Load Diff

132
docs/stashed/grapheditor/www/js/Sidebar.js
View File

@ -19,14 +19,14 @@ function Sidebar(editorUi, container)
document.body.appendChild(this.graph.container);
this.pointerUpHandler = utils.bind(this, function()
this.pointerUpHandler = (() =>
{
this.showTooltips = true;
});
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerup' : 'mouseup', this.pointerUpHandler);
this.pointerDownHandler = utils.bind(this, function()
this.pointerDownHandler = (() =>
{
this.showTooltips = false;
this.hideTooltip();
@ -34,7 +34,7 @@ function Sidebar(editorUi, container)
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', this.pointerDownHandler);
this.pointerMoveHandler = utils.bind(this, function(evt)
this.pointerMoveHandler = ((evt) =>
{
let src = mxEvent.getSource(evt);
@ -54,7 +54,7 @@ function Sidebar(editorUi, container)
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', this.pointerMoveHandler);
// Handles mouse leaving the window
this.pointerOutHandler = utils.bind(this, function(evt)
this.pointerOutHandler = ((evt) =>
{
if (evt.toElement == null && evt.relatedTarget == null)
{
@ -65,7 +65,7 @@ function Sidebar(editorUi, container)
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerout' : 'mouseout', this.pointerOutHandler);
// Enables tooltips after scroll
mxEvent.addListener(container, 'scroll', utils.bind(this, function()
mxEvent.addListener(container, 'scroll', (() =>
{
this.showTooltips = true;
this.hideTooltip();
@ -265,7 +265,7 @@ Sidebar.prototype.showTooltip = function(elt, cells, w, h, title, showLabel)
this.thread = null;
}
let show = utils.bind(this, function()
let show = (() =>
{
// 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, (() =>
{
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)
(((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, (() =>
{
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, (() =>
{
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 = (() =>
{
active = false;
this.currentSearch = null;
@ -808,7 +808,7 @@ Sidebar.prototype.addSearchPalette = function(expand)
input.focus();
});
find = utils.bind(this, function()
find = (() =>
{
// Shows 4 rows (minimum 4 results)
count = 4 * Math.max(1, Math.floor(this.container.clientWidth / (this.thumbWidth + 10)));
@ -839,7 +839,7 @@ Sidebar.prototype.addSearchPalette = function(expand)
let current = {};
this.currentSearch = current;
this.searchEntries(searchTerm, count, page, utils.bind(this, function(results, len, more, terms)
this.searchEntries(searchTerm, count, page, ((results, len, more, terms) =>
{
if (this.currentSearch == current)
{
@ -861,7 +861,7 @@ Sidebar.prototype.addSearchPalette = function(expand)
for (let i = 0; i < results.length; i++)
{
(utils.bind(this, function(result)
(((result) =>
{
try
{
@ -878,7 +878,7 @@ Sidebar.prototype.addSearchPalette = function(expand)
hash[elt.innerHTML] = hash[elt.innerHTML].concat(result.parentLibraries);
}
mxEvent.addGestureListeners(elt, null, null, utils.bind(this, function(evt)
mxEvent.addGestureListeners(elt, null, null, ((evt) =>
{
let libs = hash[elt.innerHTML];
@ -913,7 +913,7 @@ Sidebar.prototype.addSearchPalette = function(expand)
button.style.cursor = '';
div.appendChild(center);
}
}), utils.bind(this, 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', ((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', ((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', (() =>
{
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', (() =>
{
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', (() =>
{
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', (() =>
{
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', (() =>
{
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)
'<tr><th align="center"><b>Title</b></th></tr>' +
'<tr><td align="center">Section 1.1\nSection 1.2\nSection 1.3</td></tr>' +
'<tr><td align="center">Section 2.1\nSection 2.2\nSection 2.3</td></tr></table>', 'HTML Table 4'),
this.addEntry('link hyperlink', utils.bind(this, function()
this.addEntry('link hyperlink', (() =>
{
let cell = new Cell('Link', new Geometry(0, 0, 60, 40), 'text;html=1;strokeColor=none;fillColor=none;whiteSpace=wrap;align=center;verticalAlign=middle;fontColor=#0000EE;fontStyle=4;');
cell.vertex = true;
@ -1223,7 +1223,7 @@ Sidebar.prototype.addMiscPalette = function(expand)
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Link');
})),
this.addEntry('timestamp date time text label', utils.bind(this, function()
this.addEntry('timestamp date time text label', (() =>
{
let cell = new Cell('%date{ddd mmm dd yyyy HH:MM:ss}%', new Geometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
cell.vertex = true;
@ -1231,7 +1231,7 @@ Sidebar.prototype.addMiscPalette = function(expand)
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Timestamp');
})),
this.addEntry('variable placeholder metadata hello world text label', utils.bind(this, function()
this.addEntry('variable placeholder metadata hello world text label', (() =>
{
let cell = new Cell('%name% Text', new Geometry(0, 0, 80, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
cell.vertex = true;
@ -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 = (() =>
{
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, ((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 ((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, ((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 = ((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, (() =>
{
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, (() =>
{
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, ((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', ((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)
(((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, ((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, ((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, ((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));

102
docs/stashed/grapheditor/www/js/Toolbar.js
View File

@ -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 = ((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 = (() =>
{
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, ((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, ((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, ((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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
try
{
@ -338,7 +342,7 @@ Toolbar.prototype.setFontName = function(value)
if (this.fontMenu != null)
{
this.fontMenu.innerHTML = '<div style="width:60px;overflow:hidden;display:inline-block;">' +
utils.htmlEntities(value) + '</div>' + this.dropdownImageHtml;
htmlEntities(value) + '</div>' + this.dropdownImageHtml;
}
};
@ -350,7 +354,7 @@ Toolbar.prototype.setFontSize = function(value)
if (this.sizeMenu != null)
{
this.sizeMenu.innerHTML = '<div style="width:24px;overflow:hidden;display:inline-block;">' +
utils.htmlEntities(value) + '</div>' + this.dropdownImageHtml;
htmlEntities(value) + '</div>' + 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, ((menu) =>
{
elt = menu.addItem('', null, utils.bind(this, function(evt)
elt = menu.addItem('', null, ((evt) =>
{
graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
}), null, 'geIcon geSprite geSprite-left');
elt.setAttribute('title', Resources.get('left'));
elt = menu.addItem('', null, utils.bind(this, function(evt)
elt = menu.addItem('', null, ((evt) =>
{
graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
}), null, 'geIcon geSprite geSprite-center');
elt.setAttribute('title', Resources.get('center'));
elt = menu.addItem('', null, utils.bind(this, function(evt)
elt = menu.addItem('', null, ((evt) =>
{
graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
}), null, 'geIcon geSprite geSprite-right');
elt.setAttribute('title', Resources.get('right'));
elt = menu.addItem('', null, utils.bind(this, function()
elt = menu.addItem('', null, (() =>
{
document.execCommand('justifyfull', false, null);
}), null, 'geIcon geSprite geSprite-justifyfull');
elt.setAttribute('title', Resources.get('justifyfull'));
elt = menu.addItem('', null, utils.bind(this, function()
elt = menu.addItem('', null, (() =>
{
document.execCommand('insertorderedlist', false, null);
}), null, 'geIcon geSprite geSprite-orderedlist');
elt.setAttribute('title', Resources.get('numberedList'));
elt = menu.addItem('', null, utils.bind(this, function()
elt = menu.addItem('', null, (() =>
{
document.execCommand('insertunorderedlist', false, null);
}), null, 'geIcon geSprite geSprite-unorderedlist');
elt.setAttribute('title', Resources.get('bulletedList'));
elt = menu.addItem('', null, utils.bind(this, function()
elt = menu.addItem('', null, (() =>
{
document.execCommand('outdent', false, null);
}), null, 'geIcon geSprite geSprite-outdent');
elt.setAttribute('title', Resources.get('decreaseIndent'));
elt = menu.addItem('', null, utils.bind(this, function()
elt = menu.addItem('', null, (() =>
{
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, ((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, (() =>
{
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, ((menu) =>
{
menu.addItem(Resources.get('insertLink'), null, utils.bind(this, function()
menu.addItem(Resources.get('insertLink'), null, (() =>
{
this.editorUi.actions.get('link').funct();
}));
menu.addItem(Resources.get('insertImage'), null, utils.bind(this, function()
menu.addItem(Resources.get('insertImage'), null, (() =>
{
this.editorUi.actions.get('image').funct();
}));
menu.addItem(Resources.get('insertHorizontalRule'), null, utils.bind(this, function()
menu.addItem(Resources.get('insertHorizontalRule'), null, (() =>
{
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, ((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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
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, (() =>
{
// 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, (() =>
{
// 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, (() =>
{
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'), ((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, (() =>
{
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, (() =>
{
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, (() =>
{
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)
((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', ((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 = (() =>
{
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.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)
((evt) =>
{
show = this.currentElt != elt;
evt.preventDefault();

18
docs/stashed/grapheditor/www/open.html
View File

@ -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);
});

4
packages/core/src/editor/mxDefaultToolbar.js
View File

@ -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 (

22
packages/core/src/editor/mxEditor.js
View File

@ -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;

9
packages/core/src/util/Resources.js
View File

@ -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());

9
packages/core/src/util/XmlUtils.js
View File

@ -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;
}

12
packages/core/src/util/animate/mxEffects.js
View File

@ -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);

4
packages/core/src/util/dom/mxDivResizer.js
View File

@ -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';

2
packages/core/src/util/gui/mxLog.js
View File

@ -199,7 +199,7 @@ class mxLog {
*/
// static info(): void;
static info() {
mxLog.writeln(utils.toString(navigator));
mxLog.writeln(toString(navigator));
}
/**

8
packages/core/src/util/gui/mxPopupMenu.js
View File

@ -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);
}
/**

4
packages/core/src/util/gui/mxToolbar.js
View File

@ -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);
}
/**

12
packages/core/src/util/gui/mxWindow.js
View File

@ -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) &&

3
packages/core/src/util/serialization/mxCodec.js
View File

@ -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;

3
packages/core/src/util/serialization/mxDefaultToolbarCodec.js
View File

@ -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)

11
packages/core/src/util/serialization/mxObjectCodec.js
View File

@ -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);
}

7
packages/core/src/util/serialization/mxStylesheetCodec.js
View File

@ -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);
}
}

25
packages/core/src/view/GraphHandler.ts
View File

@ -7,7 +7,13 @@
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';
@ -832,7 +838,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);
@ -947,7 +953,7 @@ class GraphHandler {
*/
// getDelta(me: mxMouseEvent): mxPoint;
getDelta(me) {
const point = utils.convertPoint(this.graph.container, me.getX(), me.getY());
const point = convertPoint(this.graph.container, me.getX(), me.getY());
return new point(
point.x - this.first.x - this.graph.panDx,
@ -1649,21 +1655,18 @@ class GraphHandler {
const pState = this.graph.getView().getState(parent);
if (pState != null) {
let pt = utils.convertPoint(
this.graph.container,
getClientX(evt),
getClientY(evt)
);
const alpha = utils.toRadians(utils.getValue(pState.style, 'rotation') || 0);
let pt = convertPoint(this.graph.container, getClientX(evt), getClientY(evt));
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);
}
}

6
packages/core/src/view/Outline.ts
View File

@ -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;

8
packages/core/src/view/cell/edge/EdgeHandler.ts
View File

@ -2242,7 +2242,7 @@ class EdgeHandler {
b.bounds.height
);
b.redraw();
utils.setOpacity(b.node, this.virtualBendOpacity);
setOpacity(b.node, this.virtualBendOpacity);
last = pt;
if (this.manageLabelHandle) {
@ -2341,7 +2341,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;
@ -2372,7 +2372,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 {
@ -2404,7 +2404,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;

4
packages/core/src/view/cell/edge/ElbowEdgeHandler.ts
View File

@ -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;

52
packages/core/src/view/cell/vertex/VertexHandler.ts
View File

@ -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);

6
packages/core/src/view/connection/ConstraintHandler.ts
View File

@ -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);
}
/**

4
packages/core/src/view/connection/GraphConnections.ts
View File

@ -318,8 +318,8 @@ class GraphConnections {
// Legacy support for stencilFlipH/V
if (vertex.shape != null && vertex.shape.stencil != null) {
flipH = utils.getValue(vertex.style, 'stencilFlipH', 0) == 1 || flipH;
flipV = utils.getValue(vertex.style, 'stencilFlipV', 0) == 1 || flipV;
flipH = getValue(vertex.style, 'stencilFlipH', 0) == 1 || flipH;
flipV = getValue(vertex.style, 'stencilFlipV', 0) == 1 || flipV;
}
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {

14
packages/core/src/view/drag_drop/DragSource.ts
View File

@ -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;

16
packages/core/src/view/editing/CellEditor.ts
View File

@ -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 = <string>(
utils.getStringValue(
getStringValue(
state.style,
'labelPosition',
ALIGN_CENTER

6
packages/core/src/view/layout/layout/StackLayout.ts
View File

@ -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) {

5
packages/core/src/view/layout/layout/hierarchical/model/SwimlaneModel.ts
View File

@ -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
);
}

13
packages/core/src/view/layout/layout/hierarchical/stage/mxSwimlaneOrdering.js
View File

@ -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);

4
packages/core/src/view/panning/PanningHandler.ts
View File

@ -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;

7
packages/core/src/view/panning/PanningManager.ts
View File

@ -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 = () => {

8
packages/core/src/view/printing/PrintPreview.ts
View File

@ -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;
}

73
packages/core/src/view/style/EdgeStyle.ts
View File

@ -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];

10
packages/core/src/view/style/Stylesheet.ts
View File

@ -24,8 +24,8 @@ import type { CellStateStyles } from '../../types';
* 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
*
@ -59,9 +59,9 @@ import type { CellStateStyles } from '../../types';
* 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
*

5
packages/html/stories/Drop.stories.js
View File

@ -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],

6
packages/html/stories/Events.stories.js
View File

@ -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`);
});
}

16
packages/html/stories/FileIO.stories.js
View File

@ -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);

3
packages/html/stories/FixedPoints.stories.js
View File

@ -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)
);
}
}

4
packages/html/stories/HelloPort.stories.js
View File

@ -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);

4
packages/html/stories/PageBreaks.stories.js
View File

@ -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';