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

removed references to `arguments` object in various files

development
mcyph 2021-03-21 15:48:17 +11:00
parent 942f537f17
commit 452ba705ea
34 changed files with 597 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/mxgraph/editor/mxDefaultKeyHandler.js
View File

@ -75,7 +75,7 @@ class mxDefaultKeyHandler {
let old = this.handler.escape; let old = this.handler.escape;
this.handler.escape = (evt) => { this.handler.escape = (evt) => {
old.apply(this, arguments); old.apply(this, [editor]);
editor.hideProperties(); editor.hideProperties();
editor.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt)); editor.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt));
}; };

2
src/mxgraph/editor/mxDefaultToolbar.js
View File

@ -115,7 +115,7 @@ class mxDefaultToolbar {
if (funct != null) { if (funct != null) {
this.editor.insertFunction = () => { this.editor.insertFunction = () => {
funct.apply(this, arguments); funct.apply(this, [container]);
this.toolbar.resetMode(); this.toolbar.resetMode();
}; };
} else { } else {

3
src/mxgraph/editor/mxEditor.js
View File

@ -1401,8 +1401,7 @@ class mxEditor extends mxEventSource {
try { try {
// Creates the array of arguments by replacing the actionname // Creates the array of arguments by replacing the actionname
// with the editor instance in the args of this function // with the editor instance in the args of this function
let args = arguments; let args = [this, cell, evt];
args[0] = this;
// Invokes the function on the editor using the args // Invokes the function on the editor using the args
action.apply(this, args); action.apply(this, args);

70
src/mxgraph/handler/mxConnectionHandler.js
View File

@ -2,6 +2,20 @@
* Copyright (c) 2006-2016, JGraph Ltd * Copyright (c) 2006-2016, JGraph Ltd
* Copyright (c) 2006-2016, Gaudenz Alder * Copyright (c) 2006-2016, Gaudenz Alder
*/ */
import mxGeometry from "../model/mxGeometry";
import mxCell from "../model/mxCell";
import mxPoint from "../util/mxPoint";
import mxEventObject from "../util/mxEventObject";
import mxEvent from "../util/mxEvent";
import mxConstants from "../util/mxConstants";
import mxUtils from "../util/mxUtils";
import mxMouseEvent from "../util/mxMouseEvent";
import mxImageShape from "../shape/mxImageShape";
import mxCellMarker from "./mxCellMarker";
import mxConstraintHandler from "./mxConstraintHandler";
import mxPolyline from "../shape/mxPolyline";
import mxEventSource from "../util/mxEventSource";
import mxRectangle from "../util/mxRectangle";
class mxConnectionHandler extends mxEventSource { class mxConnectionHandler extends mxEventSource {
/** /**
@ -421,7 +435,7 @@ class mxConnectionHandler extends mxEventSource {
* released. * released.
*/ */
isInsertBefore = (edge, source, target, evt, dropTarget) => { isInsertBefore = (edge, source, target, evt, dropTarget) => {
return this.insertBeforeSource && source != target; return this.insertBeforeSource && source !== target;
}; };
/** /**
@ -456,7 +470,7 @@ class mxConnectionHandler extends mxEventSource {
let shape = (this.livePreview && this.edgeState != null) ? let shape = (this.livePreview && this.edgeState != null) ?
this.graph.cellRenderer.createShape(this.edgeState) : this.graph.cellRenderer.createShape(this.edgeState) :
new mxPolyline([], mxConstants.INVALID_COLOR); new mxPolyline([], mxConstants.INVALID_COLOR);
shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? shape.dialect = (this.graph.dialect !== mxConstants.DIALECT_SVG) ?
mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG; mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
shape.scale = this.graph.view.scale; shape.scale = this.graph.view.scale;
shape.pointerEvents = false; shape.pointerEvents = false;
@ -558,7 +572,7 @@ class mxConnectionHandler extends mxEventSource {
if (this.previous != null) { if (this.previous != null) {
this.error = this.validateConnection(this.previous.cell, cell); this.error = this.validateConnection(this.previous.cell, cell);
if (this.error != null && this.error.length == 0) { if (this.error != null && this.error.length === 0) {
cell = null; cell = null;
// Enables create target inside groups // Enables create target inside groups
@ -583,7 +597,7 @@ class mxConnectionHandler extends mxEventSource {
if (this.isConnecting()) { if (this.isConnecting()) {
return this.error == null; return this.error == null;
} else { } else {
return isValidState.apply(marker, arguments); return this.isValidState.apply(marker, arguments);
} }
}; };
@ -709,7 +723,7 @@ class mxConnectionHandler extends mxEventSource {
* state - <mxCellState> whose connect icons should be returned. * state - <mxCellState> whose connect icons should be returned.
*/ */
isMoveIconToFrontForState = (state) => { isMoveIconToFrontForState = (state) => {
if (state.text != null && state.text.node.parentNode == this.graph.container) { if (state.text != null && state.text.node.parentNode === this.graph.container) {
return true; return true;
} }
@ -745,7 +759,7 @@ class mxConnectionHandler extends mxEventSource {
icon.dialect = mxConstants.DIALECT_STRICTHTML; icon.dialect = mxConstants.DIALECT_STRICTHTML;
icon.init(this.graph.container); icon.init(this.graph.container);
} else { } else {
icon.dialect = (this.graph.dialect == mxConstants.DIALECT_SVG) ? icon.dialect = (this.graph.dialect === mxConstants.DIALECT_SVG) ?
mxConstants.DIALECT_SVG : mxConstants.DIALECT_VML; mxConstants.DIALECT_SVG : mxConstants.DIALECT_VML;
icon.init(this.graph.getView().getOverlayPane()); icon.init(this.graph.getView().getOverlayPane());
@ -818,12 +832,12 @@ class mxConnectionHandler extends mxEventSource {
if (this.graph.isSwimlane(state.cell)) { if (this.graph.isSwimlane(state.cell)) {
let size = this.graph.getStartSize(state.cell); let size = this.graph.getStartSize(state.cell);
cx = (size.width != 0) ? state.x + size.width * scale / 2 : cx; cx = (size.width !== 0) ? state.x + size.width * scale / 2 : cx;
cy = (size.height != 0) ? state.y + size.height * scale / 2 : cy; cy = (size.height !== 0) ? state.y + size.height * scale / 2 : cy;
let alpha = mxUtils.toRadians(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION) || 0); let alpha = mxUtils.toRadians(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION) || 0);
if (alpha != 0) { if (alpha !== 0) {
let cos = Math.cos(alpha); let cos = Math.cos(alpha);
let sin = Math.sin(alpha); let sin = Math.sin(alpha);
let ct = new mxPoint(state.getCenterX(), state.getCenterY()); let ct = new mxPoint(state.getCenterX(), state.getCenterY());
@ -865,9 +879,9 @@ class mxConnectionHandler extends mxEventSource {
* <icons> is null or <icons> and <icon> are not null. * <icons> is null or <icons> and <icon> are not null.
*/ */
isStartEvent = (me) => { isStartEvent = (me) => {
return ((this.constraintHandler.currentFocus != null && this.constraintHandler.currentConstraint != null) || return ((this.constraintHandler.currentFocus !== null && this.constraintHandler.currentConstraint !== null) ||
(this.previous != null && this.error == null && (this.icons == null || (this.icons != null && (this.previous !== null && this.error === null && (this.icons === null || (this.icons !== null &&
this.icon != null)))); this.icon !== null))));
}; };
/** /**
@ -974,7 +988,7 @@ class mxConnectionHandler extends mxEventSource {
(me.isSource(this.marker.highlight.shape) || (me.isSource(this.marker.highlight.shape) ||
(mxEvent.isAltDown(me.getEvent()) && me.getState() != null) || (mxEvent.isAltDown(me.getEvent()) && me.getState() != null) ||
this.marker.highlight.isHighlightAt(clientX, clientY) || this.marker.highlight.isHighlightAt(clientX, clientY) ||
((gridX != clientX || gridY != clientY) && me.getState() == null && ((gridX !== clientX || gridY !== clientY) && me.getState() == null &&
this.marker.highlight.isHighlightAt(gridX, gridY))); this.marker.highlight.isHighlightAt(gridX, gridY)));
}; };
@ -992,9 +1006,9 @@ class mxConnectionHandler extends mxEventSource {
// Handles special case where grid is large and connection point is at actual point in which // Handles special case where grid is large and connection point is at actual point in which
// case the outline is not followed as long as we're < gridSize / 2 away from that point // case the outline is not followed as long as we're < gridSize / 2 away from that point
if (this.marker.highlight != null && this.marker.highlight.state != null && if (this.marker.highlight != null && this.marker.highlight.state != null &&
this.marker.highlight.state.cell == this.constraintHandler.currentFocus.cell) { this.marker.highlight.state.cell === this.constraintHandler.currentFocus.cell) {
// Direct repaint needed if cell already highlighted // Direct repaint needed if cell already highlighted
if (this.marker.highlight.shape.stroke != 'transparent') { if (this.marker.highlight.shape.stroke !== 'transparent') {
this.marker.highlight.shape.stroke = 'transparent'; this.marker.highlight.shape.stroke = 'transparent';
this.marker.highlight.repaint(); this.marker.highlight.repaint();
} }
@ -1059,7 +1073,7 @@ class mxConnectionHandler extends mxEventSource {
// are not equal (due to grid snapping) and there is no hit on shape or highlight // are not equal (due to grid snapping) and there is no hit on shape or highlight
// but ignores cases where parent is used for non-connectable child cells // but ignores cases where parent is used for non-connectable child cells
if (this.graph.isCellConnectable(me.getCell()) && if (this.graph.isCellConnectable(me.getCell()) &&
this.marker.getValidState() != me.getState()) { this.marker.getValidState() !== me.getState()) {
this.marker.highlight.shape.stroke = 'transparent'; this.marker.highlight.shape.stroke = 'transparent';
this.currentState = null; this.currentState = null;
} else { } else {
@ -1242,7 +1256,7 @@ class mxConnectionHandler extends mxEventSource {
let len = Math.sqrt(dx * dx + dy * dy); let len = Math.sqrt(dx * dx + dy * dy);
if (len == 0) { if (len === 0) {
return; return;
} }
@ -1298,7 +1312,7 @@ class mxConnectionHandler extends mxEventSource {
me.consume(); me.consume();
} else if (!this.isEnabled() || !this.graph.isEnabled()) { } else if (!this.isEnabled() || !this.graph.isEnabled()) {
this.constraintHandler.reset(); this.constraintHandler.reset();
} else if (this.previous != this.currentState && this.edgeState == null) { } else if (this.previous !== this.currentState && this.edgeState == null) {
this.destroyIcons(); this.destroyIcons();
// Sets the cursor on the current shape // Sets the cursor on the current shape
@ -1312,7 +1326,7 @@ class mxConnectionHandler extends mxEventSource {
} }
this.previous = this.currentState; this.previous = this.currentState;
} else if (this.previous == this.currentState && this.currentState != null && this.icons == null && } else if (this.previous === this.currentState && this.currentState != null && this.icons == null &&
!this.graph.isMouseDown) { !this.graph.isMouseDown) {
// Makes sure that no cursors are changed // Makes sure that no cursors are changed
me.consume(); me.consume();
@ -1323,7 +1337,7 @@ class mxConnectionHandler extends mxEventSource {
let target = me.getSource(); let target = me.getSource();
for (let i = 0; i < this.icons.length && !hitsIcon; i++) { for (let i = 0; i < this.icons.length && !hitsIcon; i++) {
hitsIcon = target == this.icons[i].node || target.parentNode == this.icons[i].node; hitsIcon = target === this.icons[i].node || target.parentNode === this.icons[i].node;
} }
if (!hitsIcon) { if (!hitsIcon) {
@ -1520,8 +1534,8 @@ class mxConnectionHandler extends mxEventSource {
*/ */
checkConstraints = (c1, c2) => { checkConstraints = (c1, c2) => {
return (c1 == null || c2 == null || c1.point == null || c2.point == null || return (c1 == null || c2 == null || c1.point == null || c2.point == null ||
!c1.point.equals(c2.point) || c1.dx != c2.dx || c1.dy != c2.dy || !c1.point.equals(c2.point) || c1.dx !== c2.dx || c1.dy !== c2.dy ||
c1.perimeter != c2.perimeter); c1.perimeter !== c2.perimeter);
}; };
/** /**
@ -1555,12 +1569,12 @@ class mxConnectionHandler extends mxEventSource {
// Inserts the edge if no validation error exists and if constraints differ // Inserts the edge if no validation error exists and if constraints differ
if (this.error == null && (source == null || target == null || if (this.error == null && (source == null || target == null ||
source != target || this.checkConstraints(c1, c2))) { source !== target || this.checkConstraints(c1, c2))) {
this.connect(source, target, me.getEvent(), me.getCell()); this.connect(source, target, me.getEvent(), me.getCell());
} else { } else {
// Selects the source terminal for self-references // Selects the source terminal for self-references
if (this.previous != null && this.marker.validState != null && if (this.previous != null && this.marker.validState != null &&
this.previous.cell == this.marker.validState.cell) { this.previous.cell === this.marker.validState.cell) {
this.graph.selectCellForEvent(this.marker.source, me.getEvent()); this.graph.selectCellForEvent(this.marker.source, me.getEvent());
} }
@ -1721,8 +1735,8 @@ class mxConnectionHandler extends mxEventSource {
let parent = this.graph.getDefaultParent(); let parent = this.graph.getDefaultParent();
if (source != null && target != null && if (source != null && target != null &&
model.getParent(source) == model.getParent(target) && model.getParent(source) === model.getParent(target) &&
model.getParent(model.getParent(source)) != model.getRoot()) { model.getParent(model.getParent(source)) !== model.getRoot()) {
parent = model.getParent(source); parent = model.getParent(source);
if ((source.geometry != null && source.geometry.relative) && if ((source.geometry != null && source.geometry.relative) &&
@ -1761,11 +1775,11 @@ class mxConnectionHandler extends mxEventSource {
let tmp = source; let tmp = source;
while (tmp.parent != null && tmp.geometry != null && while (tmp.parent != null && tmp.geometry != null &&
tmp.geometry.relative && tmp.parent != edge.parent) { tmp.geometry.relative && tmp.parent !== edge.parent) {
tmp = this.graph.model.getParent(tmp); tmp = this.graph.model.getParent(tmp);
} }
if (tmp != null && tmp.parent != null && tmp.parent == edge.parent) { if (tmp != null && tmp.parent != null && tmp.parent === edge.parent) {
model.add(parent, edge, tmp.parent.getIndex(tmp)); model.add(parent, edge, tmp.parent.getIndex(tmp));
} }
} }

59
src/mxgraph/handler/mxEdgeHandler.js
View File

@ -3,6 +3,15 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxCellMarker from "./mxCellMarker";
import mxPoint from "../util/mxPoint";
import mxConstants from "../util/mxConstants";
import mxUtils from "../examples/map-background/leaflet";
import mxImageShape from "../shape/mxImageShape";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxConnectionConstraint from "../view/mxConnectionConstraint";
import mxEvent from "../util/mxEvent";
import mxConstraintHandler from "./mxConstraintHandler";
class mxEdgeHandler { class mxEdgeHandler {
/** /**
@ -265,7 +274,7 @@ class mxEdgeHandler {
// for the initial configuration and preview // for the initial configuration and preview
this.abspoints = this.getSelectionPoints(this.state); this.abspoints = this.getSelectionPoints(this.state);
this.shape = this.createSelectionShape(this.abspoints); this.shape = this.createSelectionShape(this.abspoints);
this.shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? this.shape.dialect = (this.graph.dialect !== mxConstants.DIALECT_SVG) ?
mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG; mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG;
this.shape.init(this.graph.getView().getOverlayPane()); this.shape.init(this.graph.getView().getOverlayPane());
this.shape.pointerEvents = false; this.shape.pointerEvents = false;
@ -274,7 +283,7 @@ class mxEdgeHandler {
// Updates preferHtml // Updates preferHtml
this.preferHtml = this.state.text != null && this.preferHtml = this.state.text != null &&
this.state.text.node.parentNode == this.graph.container; this.state.text.node.parentNode === this.graph.container;
if (!this.preferHtml) { if (!this.preferHtml) {
// Checks source terminal // Checks source terminal
@ -282,7 +291,7 @@ class mxEdgeHandler {
if (sourceState != null) { if (sourceState != null) {
this.preferHtml = sourceState.text != null && this.preferHtml = sourceState.text != null &&
sourceState.text.node.parentNode == this.graph.container; sourceState.text.node.parentNode === this.graph.container;
} }
if (!this.preferHtml) { if (!this.preferHtml) {
@ -291,7 +300,7 @@ class mxEdgeHandler {
if (targetState != null) { if (targetState != null) {
this.preferHtml = targetState.text != null && this.preferHtml = targetState.text != null &&
targetState.text.node.parentNode == this.graph.container; targetState.text.node.parentNode === this.graph.container;
} }
} }
} }
@ -337,9 +346,9 @@ class mxEdgeHandler {
*/ */
isVirtualBendsEnabled = (evt) => { isVirtualBendsEnabled = (evt) => {
return this.virtualBendsEnabled && (this.state.style[mxConstants.STYLE_EDGE] == null || return this.virtualBendsEnabled && (this.state.style[mxConstants.STYLE_EDGE] == null ||
this.state.style[mxConstants.STYLE_EDGE] == mxConstants.NONE || this.state.style[mxConstants.STYLE_EDGE] === mxConstants.NONE ||
this.state.style[mxConstants.STYLE_NOEDGESTYLE] == 1) && this.state.style[mxConstants.STYLE_NOEDGESTYLE] === 1) &&
mxUtils.getValue(this.state.style, mxConstants.STYLE_SHAPE, null) != 'arrow'; mxUtils.getValue(this.state.style, mxConstants.STYLE_SHAPE, null) !== 'arrow';
}; };
/** /**
@ -473,7 +482,7 @@ class mxEdgeHandler {
let cell = getCell.apply(this, arguments); let cell = getCell.apply(this, arguments);
// Checks for cell at preview point (with grid) // Checks for cell at preview point (with grid)
if ((cell == self.state.cell || cell == null) && self.currentPoint != null) { if ((cell === self.state.cell || cell == null) && self.currentPoint != null) {
cell = self.graph.getCellAt(self.currentPoint.x, self.currentPoint.y); cell = self.graph.getCellAt(self.currentPoint.x, self.currentPoint.y);
} }
@ -490,7 +499,7 @@ class mxEdgeHandler {
if ((this.graph.isSwimlane(cell) && self.currentPoint != null && if ((this.graph.isSwimlane(cell) && self.currentPoint != null &&
this.graph.hitsSwimlaneContent(cell, self.currentPoint.x, self.currentPoint.y)) || this.graph.hitsSwimlaneContent(cell, self.currentPoint.x, self.currentPoint.y)) ||
(!self.isConnectableCell(cell)) || (cell == self.state.cell || (!self.isConnectableCell(cell)) || (cell === self.state.cell ||
(cell != null && !self.graph.connectableEdges && model.isEdge(cell))) || (cell != null && !self.graph.connectableEdges && model.isEdge(cell))) ||
model.isAncestor(self.state.cell, cell)) { model.isAncestor(self.state.cell, cell)) {
cell = null; cell = null;
@ -550,8 +559,8 @@ class mxEdgeHandler {
for (let i = 0; i < this.abspoints.length; i++) { for (let i = 0; i < this.abspoints.length; i++) {
if (this.isHandleVisible(i)) { if (this.isHandleVisible(i)) {
let source = i == 0; let source = i === 0;
let target = i == this.abspoints.length - 1; let target = i === this.abspoints.length - 1;
let terminal = source || target; let terminal = source || target;
if (terminal || this.graph.isCellBendable(cell)) { if (terminal || this.graph.isCellBendable(cell)) {
@ -625,7 +634,7 @@ class mxEdgeHandler {
let geo = this.graph.getCellGeometry(this.state.cell); let geo = this.graph.getCellGeometry(this.state.cell);
let edgeStyle = (geo != null) ? this.graph.view.getEdgeStyle(this.state, geo.points, source, target) : null; let edgeStyle = (geo != null) ? this.graph.view.getEdgeStyle(this.state, geo.points, source, target) : null;
return edgeStyle != mxEdgeStyle.EntityRelation || index == 0 || index == this.abspoints.length - 1; return edgeStyle !== mxEdgeStyle.EntityRelation || index === 0 || index === this.abspoints.length - 1;
}; };
/** /**
@ -689,7 +698,7 @@ class mxEdgeHandler {
bend.dialect = mxConstants.DIALECT_STRICTHTML; bend.dialect = mxConstants.DIALECT_STRICTHTML;
bend.init(this.graph.container); bend.init(this.graph.container);
} else { } else {
bend.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? bend.dialect = (this.graph.dialect !== mxConstants.DIALECT_SVG) ?
mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG; mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG;
bend.init(this.graph.getView().getOverlayPane()); bend.init(this.graph.getView().getOverlayPane());
} }
@ -853,7 +862,7 @@ class mxEdgeHandler {
if (this.index <= mxEvent.CUSTOM_HANDLE && this.index > mxEvent.VIRTUAL_HANDLE) { if (this.index <= mxEvent.CUSTOM_HANDLE && this.index > mxEvent.VIRTUAL_HANDLE) {
if (this.customHandles != null) { if (this.customHandles != null) {
for (let i = 0; i < this.customHandles.length; i++) { for (let i = 0; i < this.customHandles.length; i++) {
if (i != mxEvent.CUSTOM_HANDLE - this.index) { if (i !== mxEvent.CUSTOM_HANDLE - this.index) {
this.customHandles[i].setVisible(false); this.customHandles[i].setVisible(false);
} }
} }
@ -993,9 +1002,9 @@ class mxEdgeHandler {
// Handles special case where grid is large and connection point is at actual point in which // Handles special case where grid is large and connection point is at actual point in which
// case the outline is not followed as long as we're < gridSize / 2 away from that point // case the outline is not followed as long as we're < gridSize / 2 away from that point
if (this.marker.highlight != null && this.marker.highlight.state != null && if (this.marker.highlight != null && this.marker.highlight.state != null &&
this.marker.highlight.state.cell == this.constraintHandler.currentFocus.cell) { this.marker.highlight.state.cell === this.constraintHandler.currentFocus.cell) {
// Direct repaint needed if cell already highlighted // Direct repaint needed if cell already highlighted
if (this.marker.highlight.shape.stroke != 'transparent') { if (this.marker.highlight.shape.stroke !== 'transparent') {
this.marker.highlight.shape.stroke = 'transparent'; this.marker.highlight.shape.stroke = 'transparent';
this.marker.highlight.repaint(); this.marker.highlight.repaint();
} }
@ -1166,7 +1175,7 @@ class mxEdgeHandler {
(me.isSource(this.marker.highlight.shape) || (me.isSource(this.marker.highlight.shape) ||
(mxEvent.isAltDown(me.getEvent()) && me.getState() != null) || (mxEvent.isAltDown(me.getEvent()) && me.getState() != null) ||
this.marker.highlight.isHighlightAt(clientX, clientY) || this.marker.highlight.isHighlightAt(clientX, clientY) ||
((gridX != clientX || gridY != clientY) && me.getState() == null && ((gridX !== clientX || gridY !== clientY) && me.getState() == null &&
this.marker.highlight.isHighlightAt(gridX, gridY))); this.marker.highlight.isHighlightAt(gridX, gridY)));
}; };
@ -1212,7 +1221,7 @@ class mxEdgeHandler {
this.marker.highlight.repaint(); this.marker.highlight.repaint();
} else if (this.marker.hasValidState()) { } else if (this.marker.hasValidState()) {
this.marker.highlight.shape.stroke = (this.graph.isCellConnectable(me.getCell()) && this.marker.highlight.shape.stroke = (this.graph.isCellConnectable(me.getCell()) &&
this.marker.getValidState() != me.getState()) ? this.marker.getValidState() !== me.getState()) ?
'transparent' : mxConstants.DEFAULT_VALID_COLOR; 'transparent' : mxConstants.DEFAULT_VALID_COLOR;
this.marker.highlight.shape.strokewidth = mxConstants.HIGHLIGHT_STROKEWIDTH / s / s; this.marker.highlight.shape.strokewidth = mxConstants.HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint(); this.marker.highlight.repaint();
@ -1356,7 +1365,7 @@ class mxEdgeHandler {
this.index = null; this.index = null;
// Ignores event if mouse has not been moved // Ignores event if mouse has not been moved
if (me.getX() != this.startX || me.getY() != this.startY) { if (me.getX() !== this.startX || me.getY() !== this.startY) {
let clone = !this.graph.isIgnoreTerminalEvent(me.getEvent()) && this.graph.isCloneEvent(me.getEvent()) && let clone = !this.graph.isIgnoreTerminalEvent(me.getEvent()) && this.graph.isCloneEvent(me.getEvent()) &&
this.cloneEnabled && this.graph.isCellsCloneable(); this.cloneEnabled && this.graph.isCellsCloneable();
@ -1394,8 +1403,8 @@ class mxEdgeHandler {
if (terminal == null && this.marker.hasValidState() && this.marker.highlight != null && if (terminal == null && this.marker.hasValidState() && this.marker.highlight != null &&
this.marker.highlight.shape != null && this.marker.highlight.shape != null &&
this.marker.highlight.shape.stroke != 'transparent' && this.marker.highlight.shape.stroke !== 'transparent' &&
this.marker.highlight.shape.stroke != 'white') { this.marker.highlight.shape.stroke !== 'white') {
terminal = this.marker.validState.cell; terminal = this.marker.validState.cell;
} }
@ -1461,7 +1470,7 @@ class mxEdgeHandler {
this.reset(); this.reset();
// Updates the selection if the edge has been cloned // Updates the selection if the edge has been cloned
if (edge != this.state.cell) { if (edge !== this.state.cell) {
this.graph.setSelectionCell(edge); this.graph.setSelectionCell(edge);
} }
} }
@ -1791,7 +1800,7 @@ class mxEdgeHandler {
* Returns the fillcolor for the handle at the given index. * Returns the fillcolor for the handle at the given index.
*/ */
getHandleFillColor = (index) => { getHandleFillColor = (index) => {
let isSource = index == 0; let isSource = index === 0;
let cell = this.state.cell; let cell = this.state.cell;
let terminal = this.graph.getModel().getTerminal(cell, isSource); let terminal = this.graph.getModel().getTerminal(cell, isSource);
let color = mxConstants.HANDLE_FILLCOLOR; let color = mxConstants.HANDLE_FILLCOLOR;
@ -1941,7 +1950,7 @@ class mxEdgeHandler {
* Returns true if the given custom handle is visible. * Returns true if the given custom handle is visible.
*/ */
isCustomHandleVisible = (handle) => { isCustomHandleVisible = (handle) => {
return !this.graph.isEditing() && this.state.view.graph.getSelectionCount() == 1; return !this.graph.isEditing() && this.state.view.graph.getSelectionCount() === 1;
}; };
/** /**
@ -2150,7 +2159,7 @@ class mxEdgeHandler {
let parent = this.graph.model.getParent(this.state.cell); let parent = this.graph.model.getParent(this.state.cell);
let pstate = this.graph.view.getState(parent); let pstate = this.graph.view.getState(parent);
if (pstate != null && pstate.parentHighlight == this.parentHighlight) { if (pstate != null && pstate.parentHighlight === this.parentHighlight) {
pstate.parentHighlight = null; pstate.parentHighlight = null;
} }

20
src/mxgraph/handler/mxEdgeSegmentHandler.js
View File

@ -42,7 +42,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
*/ */
getPreviewPoints = (point) => { getPreviewPoints = (point) => {
if (this.isSource || this.isTarget) { if (this.isSource || this.isTarget) {
return getPreviewPoints.apply(this, arguments); return super.getPreviewPoints(point);
} else { } else {
let pts = this.getCurrentPoints(); let pts = this.getCurrentPoints();
let last = this.convertPoint(pts[0].clone(), false); let last = this.convertPoint(pts[0].clone(), false);
@ -52,13 +52,13 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
for (let i = 1; i < pts.length; i++) { for (let i = 1; i < pts.length; i++) {
let pt = this.convertPoint(pts[i].clone(), false); let pt = this.convertPoint(pts[i].clone(), false);
if (i == this.index) { if (i === this.index) {
if (Math.round(last.x - pt.x) == 0) { if (Math.round(last.x - pt.x) === 0) {
last.x = point.x; last.x = point.x;
pt.x = point.x; pt.x = point.x;
} }
if (Math.round(last.y - pt.y) == 0) { if (Math.round(last.y - pt.y) === 0) {
last.y = point.y; last.y = point.y;
pt.y = point.y; pt.y = point.y;
} }
@ -97,7 +97,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
* Overridden to perform optimization of the edge style result. * Overridden to perform optimization of the edge style result.
*/ */
updatePreviewState = (edge, point, terminalState, me) => { updatePreviewState = (edge, point, terminalState, me) => {
updatePreviewState.apply(this, arguments); super.updatePreviewState(edge, point, terminalState, me);
// Checks and corrects preview by running edge style again // Checks and corrects preview by running edge style again
if (!this.isSource && !this.isTarget) { if (!this.isSource && !this.isTarget) {
@ -112,8 +112,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
var pt2 = pts[i]; var pt2 = pts[i];
// Merges adjacent segments only if more than 2 to allow for straight edges // Merges adjacent segments only if more than 2 to allow for straight edges
if ((Math.round(pt0.x - pt1.x) != 0 || Math.round(pt1.x - pt2.x) != 0) && if ((Math.round(pt0.x - pt1.x) !== 0 || Math.round(pt1.x - pt2.x) !== 0) &&
(Math.round(pt0.y - pt1.y) != 0 || Math.round(pt1.y - pt2.y) != 0)) { (Math.round(pt0.y - pt1.y) !== 0 || Math.round(pt1.y - pt2.y) !== 0)) {
result.push(this.convertPoint(pt1.clone(), false)); result.push(this.convertPoint(pt1.clone(), false));
} }
@ -219,7 +219,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
} }
} }
edge = connect.apply(this, arguments); edge = super.connect(edge, terminal, isSource, isClone, me);
} finally { } finally {
model.endUpdate(); model.endUpdate();
} }
@ -242,7 +242,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
* Starts the handling of the mouse gesture. * Starts the handling of the mouse gesture.
*/ */
start = (x, y, index) => { start = (x, y, index) => {
start.apply(this, arguments); super.start(x, y, index);
if (this.bends != null && this.bends[index] != null && if (this.bends != null && this.bends[index] != null &&
!this.isSource && !this.isTarget) { !this.isSource && !this.isTarget) {
@ -303,7 +303,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
*/ */
redraw = () => { redraw = () => {
this.refresh(); this.refresh();
redraw.apply(this, arguments); super.redraw();
}; };
/** /**

2
src/mxgraph/io/mxEditorCodec.js
View File

@ -124,7 +124,7 @@ class mxEditorCodec extends mxObjectCodec {
return; return;
} }
decodeChild.apply(this, arguments); super.decodeChild.apply(this, [dec, child, obj]);
}; };
/** /**

2
src/mxgraph/io/mxModelCodec.js
View File

@ -42,7 +42,7 @@ class mxModelCodec extends mxObjectCodec {
if (child.nodeName === 'root') { if (child.nodeName === 'root') {
this.decodeRoot(dec, child, obj); this.decodeRoot(dec, child, obj);
} else { } else {
decodeChild.apply(this, arguments); decodeChild.apply(this, [dec, child, obj]);
} }
}; };

6
src/mxgraph/layout/mxCompositeLayout.js
View File

@ -62,9 +62,9 @@ class mxCompositeLayout extends mxGraphLayout {
*/ */
moveCell = (cell, x, y) => { moveCell = (cell, x, y) => {
if (this.master != null) { if (this.master != null) {
this.master.moveCell.apply(this.master, arguments); this.master.moveCell.apply(this.master, [cell, x, y]);
} else { } else {
this.layouts[0].moveCell.apply(this.layouts[0], arguments); this.layouts[0].moveCell.apply(this.layouts[0], [cell, x, y]);
} }
}; };
@ -80,7 +80,7 @@ class mxCompositeLayout extends mxGraphLayout {
model.beginUpdate(); model.beginUpdate();
try { try {
for (let i = 0; i < this.layouts.length; i++) { for (let i = 0; i < this.layouts.length; i++) {
this.layouts[i].execute.apply(this.layouts[i], arguments); this.layouts[i].execute.apply(this.layouts[i], [parent]);
} }
} finally { } finally {
model.endUpdate(); model.endUpdate();

5
src/mxgraph/layout/mxRadialTreeLayout.js
View File

@ -3,6 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxCompactTreeLayout from "./mxCompactTreeLayout";
class mxRadialTreeLayout extends mxCompactTreeLayout { class mxRadialTreeLayout extends mxCompactTreeLayout {
/** /**
@ -155,7 +156,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
this.edgeRouting = false; this.edgeRouting = false;
//this.horizontal = false; //this.horizontal = false;
execute.apply(this, arguments); super.execute(parent, root);
let bounds = null; let bounds = null;
let rootBounds = this.getVertexBounds(this.root); let rootBounds = this.getVertexBounds(this.root);
@ -253,7 +254,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* rowNum - Integer indicating which row is being processed. * rowNum - Integer indicating which row is being processed.
*/ */
calcRowDims = (row, rowNum) => { calcRowDims = (row, rowNum) => {
if (row == null || row.length == 0) { if (row == null || row.length === 0) {
return; return;
} }

4
src/mxgraph/model/mxGeometry.js
View File

@ -374,8 +374,8 @@ class mxGeometry extends mxRectangle {
* Returns true if the given object equals this geometry. * Returns true if the given object equals this geometry.
*/ */
equals = (obj) => { equals = (obj) => {
return equals.apply(this, arguments) && return super.equals(obj) &&
this.relative == obj.relative && this.relative === obj.relative &&
((this.sourcePoint == null && obj.sourcePoint == null) || (this.sourcePoint != null && this.sourcePoint.equals(obj.sourcePoint))) && ((this.sourcePoint == null && obj.sourcePoint == null) || (this.sourcePoint != null && this.sourcePoint.equals(obj.sourcePoint))) &&
((this.targetPoint == null && obj.targetPoint == null) || (this.targetPoint != null && this.targetPoint.equals(obj.targetPoint))) && ((this.targetPoint == null && obj.targetPoint == null) || (this.targetPoint != null && this.targetPoint.equals(obj.targetPoint))) &&
((this.points == null && obj.points == null) || (this.points != null && mxUtils.equalPoints(this.points, obj.points))) && ((this.points == null && obj.points == null) || (this.points != null && mxUtils.equalPoints(this.points, obj.points))) &&

7
src/mxgraph/shape/mxArrowConnector.js
View File

@ -68,8 +68,7 @@ class mxArrowConnector extends mxShape {
* Overrides mxShape to reset spacing. * Overrides mxShape to reset spacing.
*/ */
resetStyles = () => { resetStyles = () => {
resetStyles.apply(this, arguments); super.resetStyles();
this.arrowSpacing = mxConstants.ARROW_SPACING; this.arrowSpacing = mxConstants.ARROW_SPACING;
}; };
@ -77,7 +76,7 @@ class mxArrowConnector extends mxShape {
* Overrides apply to get smooth transition from default start- and endsize. * Overrides apply to get smooth transition from default start- and endsize.
*/ */
apply = (state) => { apply = (state) => {
apply.apply(this, arguments); super.apply(state);
if (this.style != null) { if (this.style != null) {
this.startSize = mxUtils.getNumber(this.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3; this.startSize = mxUtils.getNumber(this.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3;
@ -91,7 +90,7 @@ class mxArrowConnector extends mxShape {
* Augments the bounding box with the edge width and markers. * Augments the bounding box with the edge width and markers.
*/ */
augmentBoundingBox = (bbox) => { augmentBoundingBox = (bbox) => {
augmentBoundingBox.apply(this, arguments); super.augmentBoundingBox(bbox);
let w = this.getEdgeWidth(); let w = this.getEdgeWidth();

3
src/mxgraph/shape/mxConnector.js
View File

@ -3,6 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxConstants from "../util/mxConstants";
class mxConnector extends mxPolyLine { class mxConnector extends mxPolyLine {
/** /**
@ -39,7 +40,7 @@ class mxConnector extends mxPolyLine {
*/ */
updateBoundingBox = () => { updateBoundingBox = () => {
this.useSvgBoundingBox = this.style != null && this.style[mxConstants.STYLE_CURVED] === 1; this.useSvgBoundingBox = this.style != null && this.style[mxConstants.STYLE_CURVED] === 1;
updateBoundingBox.apply(this, arguments); super.updateBoundingBox();
}; };
/** /**

9
src/mxgraph/shape/mxImageShape.js
View File

@ -4,6 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
class mxImageShape extends mxRectangleShape { class mxImageShape extends mxRectangleShape {
/** /**
* Variable: preserveImageAspect * Variable: preserveImageAspect
@ -70,7 +73,7 @@ class mxImageShape extends mxRectangleShape {
* state - <mxCellState> of the corresponding cell. * state - <mxCellState> of the corresponding cell.
*/ */
apply = (state) => { apply = (state) => {
apply.apply(this, arguments); super.apply(state);
this.fill = null; this.fill = null;
this.stroke = null; this.stroke = null;
@ -139,7 +142,7 @@ class mxImageShape extends mxRectangleShape {
// FlipH/V are implicit via mxShape.updateTransform // FlipH/V are implicit via mxShape.updateTransform
c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false); c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false);
let stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null); stroke = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_BORDER, null);
if (stroke != null) { if (stroke != null) {
c.setShadow(false); c.setShadow(false);
@ -148,7 +151,7 @@ class mxImageShape extends mxRectangleShape {
c.stroke(); c.stroke();
} }
} else { } else {
paintBackground.apply(this, arguments); this.paintBackground(c, x, y, w, h);
} }
}; };

473
src/mxgraph/shape/mxLabel.js
View File

@ -3,241 +3,242 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
/** import mxRectangle from "../util/mxRectangle";
* Class: mxLabel import mxConstants from "../util/mxConstants";
* import mxRectangleShape from "./mxRectangleShape";
* Extends <mxShape> to implement an image shape with a label.
* This shape is registered under <mxConstants.SHAPE_LABEL> in class mxLabel extends mxRectangleShape {
* <mxCellRenderer>. /**
* * Variable: imageSize
* Constructor: mxLabel *
* * Default width and height for the image. Default is
* Constructs a new label shape. * <mxConstants.DEFAULT_IMAGESIZE>.
* */
* Parameters: imageSize = mxConstants.DEFAULT_IMAGESIZE;
*
* bounds - <mxRectangle> that defines the bounds. This is stored in /**
* <mxShape.bounds>. * Variable: spacing
* fill - String that defines the fill color. This is stored in <fill>. *
* stroke - String that defines the stroke color. This is stored in <stroke>. * Default value for image spacing. Default is 2.
* strokewidth - Optional integer that defines the stroke width. Default is */
* 1. This is stored in <strokewidth>. spacing = 2;
*/
function mxLabel(bounds, fill, stroke, strokewidth) { /**
mxRectangleShape.call(this, bounds, fill, stroke, strokewidth); * Variable: indicatorSize
*
* Default width and height for the indicicator. Default is 10.
*/
indicatorSize = 10;
/**
* Variable: indicatorSpacing
*
* Default spacing between image and indicator. Default is 2.
*/
indicatorSpacing = 2;
/**
* Class: mxLabel
*
* Extends <mxShape> to implement an image shape with a label.
* This shape is registered under <mxConstants.SHAPE_LABEL> in
* <mxCellRenderer>.
*
* Constructor: mxLabel
*
* Constructs a new label shape.
*
* Parameters:
*
* bounds - <mxRectangle> that defines the bounds. This is stored in
* <mxShape.bounds>.
* fill - String that defines the fill color. This is stored in <fill>.
* stroke - String that defines the stroke color. This is stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
constructor(bounds, fill, stroke, strokewidth) {
super(bounds, fill, stroke, strokewidth);
}
/**
* Function: init
*
* Initializes the shape and the <indicator>.
*/
init = (container) => {
super.init(container);
if (this.indicatorShape != null) {
this.indicator = new this.indicatorShape();
this.indicator.dialect = this.dialect;
this.indicator.init(this.node);
}
};
/**
* Function: redraw
*
* Reconfigures this shape. This will update the colors of the indicator
* and reconfigure it if required.
*/
redraw = () => {
if (this.indicator != null) {
this.indicator.fill = this.indicatorColor;
this.indicator.stroke = this.indicatorStrokeColor;
this.indicator.gradient = this.indicatorGradientColor;
this.indicator.direction = this.indicatorDirection;
this.indicator.redraw();
}
super.redraw();
};
/**
* Function: isHtmlAllowed
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient and
* no indicator shape.
*/
isHtmlAllowed = () => {
return super.isHtmlAllowed() &&
this.indicatorColor == null && this.indicatorShape == null;
};
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h) => {
this.paintImage(c, x, y, w, h);
this.paintIndicator(c, x, y, w, h);
super.paintForeground(c, x, y, w, h);
};
/**
* Function: paintImage
*
* Generic background painting implementation.
*/
paintImage = (c, x, y, w, h) => {
if (this.image != null) {
let bounds = this.getImageBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.image, false, false, false);
}
};
/**
* Function: getImageBounds
*
* Generic background painting implementation.
*/
getImageBounds = (x, y, w, h) => {
let align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
let valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
let width = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_WIDTH, mxConstants.DEFAULT_IMAGESIZE);
let height = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_HEIGHT, mxConstants.DEFAULT_IMAGESIZE);
let spacing = mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) + 5;
if (align == mxConstants.ALIGN_CENTER) {
x += (w - width) / 2;
} else if (align == mxConstants.ALIGN_RIGHT) {
x += w - width - spacing;
} else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_TOP) {
y += spacing;
} else if (valign == mxConstants.ALIGN_BOTTOM) {
y += h - height - spacing;
} else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: paintIndicator
*
* Generic background painting implementation.
*/
paintIndicator = (c, x, y, w, h) => {
if (this.indicator != null) {
this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
this.indicator.paint(c);
} else if (this.indicatorImage != null) {
let bounds = this.getIndicatorBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.indicatorImage, false, false, false);
}
};
/**
* Function: getIndicatorBounds
*
* Generic background painting implementation.
*/
getIndicatorBounds = (x, y, w, h) => {
let align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
let valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
let width = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_WIDTH, this.indicatorSize);
let height = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_HEIGHT, this.indicatorSize);
let spacing = this.spacing + 5;
if (align == mxConstants.ALIGN_RIGHT) {
x += w - width - spacing;
} else if (align == mxConstants.ALIGN_CENTER) {
x += (w - width) / 2;
} else // default is left
{
x += spacing;
}
if (valign === mxConstants.ALIGN_BOTTOM) {
y += h - height - spacing;
} else if (valign === mxConstants.ALIGN_TOP) {
y += spacing;
} else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: redrawHtmlShape
*
* Generic background painting implementation.
*/
redrawHtmlShape = () => {
super.redrawHtmlShape();
// Removes all children
while (this.node.hasChildNodes()) {
this.node.removeChild(this.node.lastChild);
}
if (this.image != null) {
let node = document.createElement('img');
node.style.position = 'relative';
node.setAttribute('border', '0');
let bounds = this.getImageBounds(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
bounds.x -= this.bounds.x;
bounds.y -= this.bounds.y;
node.style.left = Math.round(bounds.x) + 'px';
node.style.top = Math.round(bounds.y) + 'px';
node.style.width = Math.round(bounds.width) + 'px';
node.style.height = Math.round(bounds.height) + 'px';
node.src = this.image;
this.node.appendChild(node);
}
};
} }
/** export default mxLabel;
* Extends mxShape.
*/
mxUtils.extend(mxLabel, mxRectangleShape);
/**
* Variable: imageSize
*
* Default width and height for the image. Default is
* <mxConstants.DEFAULT_IMAGESIZE>.
*/
imageSize = mxConstants.DEFAULT_IMAGESIZE;
/**
* Variable: spacing
*
* Default value for image spacing. Default is 2.
*/
spacing = 2;
/**
* Variable: indicatorSize
*
* Default width and height for the indicicator. Default is 10.
*/
indicatorSize = 10;
/**
* Variable: indicatorSpacing
*
* Default spacing between image and indicator. Default is 2.
*/
indicatorSpacing = 2;
/**
* Function: init
*
* Initializes the shape and the <indicator>.
*/
init = (container) => {
init.apply(this, arguments);
if (this.indicatorShape != null) {
this.indicator = new this.indicatorShape();
this.indicator.dialect = this.dialect;
this.indicator.init(this.node);
}
};
/**
* Function: redraw
*
* Reconfigures this shape. This will update the colors of the indicator
* and reconfigure it if required.
*/
redraw = () => {
if (this.indicator != null) {
this.indicator.fill = this.indicatorColor;
this.indicator.stroke = this.indicatorStrokeColor;
this.indicator.gradient = this.indicatorGradientColor;
this.indicator.direction = this.indicatorDirection;
this.indicator.redraw();
}
redraw.apply(this, arguments);
};
/**
* Function: isHtmlAllowed
*
* Returns true for non-rounded, non-rotated shapes with no glass gradient and
* no indicator shape.
*/
isHtmlAllowed = () => {
return isHtmlAllowed.apply(this, arguments) &&
this.indicatorColor == null && this.indicatorShape == null;
};
/**
* Function: paintForeground
*
* Generic background painting implementation.
*/
paintForeground = (c, x, y, w, h) => {
this.paintImage(c, x, y, w, h);
this.paintIndicator(c, x, y, w, h);
paintForeground.apply(this, arguments);
};
/**
* Function: paintImage
*
* Generic background painting implementation.
*/
paintImage = (c, x, y, w, h) => {
if (this.image != null) {
let bounds = this.getImageBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.image, false, false, false);
}
};
/**
* Function: getImageBounds
*
* Generic background painting implementation.
*/
getImageBounds = (x, y, w, h) => {
let align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
let valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
let width = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_WIDTH, mxConstants.DEFAULT_IMAGESIZE);
let height = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_HEIGHT, mxConstants.DEFAULT_IMAGESIZE);
let spacing = mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) + 5;
if (align == mxConstants.ALIGN_CENTER) {
x += (w - width) / 2;
} else if (align == mxConstants.ALIGN_RIGHT) {
x += w - width - spacing;
} else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_TOP) {
y += spacing;
} else if (valign == mxConstants.ALIGN_BOTTOM) {
y += h - height - spacing;
} else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: paintIndicator
*
* Generic background painting implementation.
*/
paintIndicator = (c, x, y, w, h) => {
if (this.indicator != null) {
this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
this.indicator.paint(c);
} else if (this.indicatorImage != null) {
let bounds = this.getIndicatorBounds(x, y, w, h);
c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.indicatorImage, false, false, false);
}
};
/**
* Function: getIndicatorBounds
*
* Generic background painting implementation.
*/
getIndicatorBounds = (x, y, w, h) => {
let align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
let valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
let width = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_WIDTH, this.indicatorSize);
let height = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_HEIGHT, this.indicatorSize);
let spacing = this.spacing + 5;
if (align == mxConstants.ALIGN_RIGHT) {
x += w - width - spacing;
} else if (align == mxConstants.ALIGN_CENTER) {
x += (w - width) / 2;
} else // default is left
{
x += spacing;
}
if (valign == mxConstants.ALIGN_BOTTOM) {
y += h - height - spacing;
} else if (valign == mxConstants.ALIGN_TOP) {
y += spacing;
} else // default is middle
{
y += (h - height) / 2;
}
return new mxRectangle(x, y, width, height);
};
/**
* Function: redrawHtmlShape
*
* Generic background painting implementation.
*/
redrawHtmlShape = () => {
redrawHtmlShape.apply(this, arguments);
// Removes all children
while (this.node.hasChildNodes()) {
this.node.removeChild(this.node.lastChild);
}
if (this.image != null) {
let node = document.createElement('img');
node.style.position = 'relative';
node.setAttribute('border', '0');
let bounds = this.getImageBounds(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
bounds.x -= this.bounds.x;
bounds.y -= this.bounds.y;
node.style.left = Math.round(bounds.x) + 'px';
node.style.top = Math.round(bounds.y) + 'px';
node.style.width = Math.round(bounds.width) + 'px';
node.style.height = Math.round(bounds.height) + 'px';
node.src = this.image;
this.node.appendChild(node);
}
};

9
src/mxgraph/shape/mxRectangleShape.js
View File

@ -4,6 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxConstants from "../util/mxConstants";
import mxUtils from "../util/mxUtils";
class mxRectangleShape extends mxShape { class mxRectangleShape extends mxShape {
/** /**
* Class: mxRectangleShape * Class: mxRectangleShape
@ -61,9 +64,9 @@ class mxRectangleShape extends mxShape {
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
} }
if (events || (this.fill != null && this.fill != mxConstants.NONE) || if (events || (this.fill != null && this.fill !== mxConstants.NONE) ||
(this.stroke != null && this.stroke != mxConstants.NONE)) { (this.stroke != null && this.stroke !== mxConstants.NONE)) {
if (!events && (this.fill == null || this.fill == mxConstants.NONE)) { if (!events && (this.fill == null || this.fill === mxConstants.NONE)) {
c.pointerEvents = false; c.pointerEvents = false;
} }

8
src/mxgraph/shape/mxShape.js
View File

@ -736,16 +736,16 @@ class mxShape {
if (c != null && this.outline) { if (c != null && this.outline) {
let stroke = c.stroke; let stroke = c.stroke;
c.stroke = () => { c.stroke = (...args) => {
strokeDrawn = true; strokeDrawn = true;
stroke.apply(this, arguments); stroke.apply(this, args);
}; };
let fillAndStroke = c.fillAndStroke; let fillAndStroke = c.fillAndStroke;
c.fillAndStroke = () => { c.fillAndStroke = (...args) => {
strokeDrawn = true; strokeDrawn = true;
fillAndStroke.apply(this, arguments); fillAndStroke.apply(this, args);
}; };
} }

140
src/mxgraph/shape/mxText.js
View File

@ -4,6 +4,12 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxClient from "../mxClient";
import mxConstants from "../util/mxConstants";
import mxUtils from "../util/mxUtils";
import mxPoint from "../util/mxPoint";
import mxSvgCanvas2D from "../util/mxSvgCanvas2D";
class mxText extends mxShape { class mxText extends mxShape {
/** /**
* Variable: baseSpacingTop * Variable: baseSpacingTop
@ -76,7 +82,7 @@ class mxText extends mxShape {
* This is needed to make sure no clipping is applied to borders. Default is 4 * This is needed to make sure no clipping is applied to borders. Default is 4
* for IE 8 standards mode and 3 for all others. * for IE 8 standards mode and 3 for all others.
*/ */
textWidthPadding = (document.documentMode == 8 && !mxClient.IS_EM) ? 4 : 3; textWidthPadding = 3;
/** /**
* Variable: lastValue * Variable: lastValue
@ -193,7 +199,7 @@ class mxText extends mxShape {
* true if the browser is not in IE8 standards mode. * true if the browser is not in IE8 standards mode.
*/ */
isHtmlAllowed = () => { isHtmlAllowed = () => {
return document.documentMode != 8 || mxClient.IS_EM; return document.documentMode !== 8 || mxClient.IS_EM;
}; };
/** /**
@ -237,31 +243,31 @@ class mxText extends mxShape {
this.clipped, this.getTextRotation(), this.node); this.clipped, this.getTextRotation(), this.node);
} else { } else {
// Checks if text contains HTML markup // Checks if text contains HTML markup
let realHtml = mxUtils.isNode(this.value) || this.dialect == mxConstants.DIALECT_STRICTHTML; let realHtml = mxUtils.isNode(this.value) || this.dialect === mxConstants.DIALECT_STRICTHTML;
// Always renders labels as HTML in VML // Always renders labels as HTML in VML
let fmt = (realHtml || c instanceof mxVmlCanvas2D) ? 'html' : ''; let fmt = (realHtml || c instanceof mxVmlCanvas2D) ? 'html' : '';
let val = this.value; let val = this.value;
if (!realHtml && fmt == 'html') { if (!realHtml && fmt === 'html') {
val = mxUtils.htmlEntities(val, false); val = mxUtils.htmlEntities(val, false);
} }
if (fmt == 'html' && !mxUtils.isNode(this.value)) { if (fmt === 'html' && !mxUtils.isNode(this.value)) {
val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>'); val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>');
} }
// Handles trailing newlines to make sure they are visible in rendering output // Handles trailing newlines to make sure they are visible in rendering output
val = (!mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt == 'html') ? val = (!mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt === 'html') ?
val.replace(/\n/g, '<br/>') : val; val.replace(/\n/g, '<br/>') : val;
let dir = this.textDirection; let dir = this.textDirection;
if (dir == mxConstants.TEXT_DIRECTION_AUTO && !realHtml) { if (dir === mxConstants.TEXT_DIRECTION_AUTO && !realHtml) {
dir = this.getAutoDirection(); dir = this.getAutoDirection();
} }
if (dir != mxConstants.TEXT_DIRECTION_LTR && dir != mxConstants.TEXT_DIRECTION_RTL) { if (dir !== mxConstants.TEXT_DIRECTION_LTR && dir !== mxConstants.TEXT_DIRECTION_RTL) {
dir = null; dir = null;
} }
@ -276,8 +282,8 @@ class mxText extends mxShape {
* Renders the text using the given DOM nodes. * Renders the text using the given DOM nodes.
*/ */
redraw = () => { redraw = () => {
if (this.visible && this.checkBounds() && this.cacheEnabled && this.lastValue == this.value && if (this.visible && this.checkBounds() && this.cacheEnabled && this.lastValue === this.value &&
(mxUtils.isNode(this.value) || this.dialect == mxConstants.DIALECT_STRICTHTML)) { (mxUtils.isNode(this.value) || this.dialect === mxConstants.DIALECT_STRICTHTML)) {
if (this.node.nodeName === 'DIV') { if (this.node.nodeName === 'DIV') {
if (mxClient.IS_SVG) { if (mxClient.IS_SVG) {
this.redrawHtmlShapeWithCss3(); this.redrawHtmlShapeWithCss3();
@ -300,13 +306,13 @@ class mxText extends mxShape {
this.updateBoundingBox(); this.updateBoundingBox();
} else { } else {
// Fallback if canvas does not support updateText (VML) // Fallback if canvas does not support updateText (VML)
redraw.apply(this, arguments); super.redraw();
} }
} }
} else { } else {
redraw.apply(this, arguments); super.redraw();
if (mxUtils.isNode(this.value) || this.dialect == mxConstants.DIALECT_STRICTHTML) { if (mxUtils.isNode(this.value) || this.dialect === mxConstants.DIALECT_STRICTHTML) {
this.lastValue = this.value; this.lastValue = this.value;
} else { } else {
this.lastValue = null; this.lastValue = null;
@ -320,7 +326,7 @@ class mxText extends mxShape {
* Resets all styles. * Resets all styles.
*/ */
resetStyles = () => { resetStyles = () => {
resetStyles.apply(this, arguments); super.resetStyles();
this.color = 'black'; this.color = 'black';
this.align = mxConstants.ALIGN_CENTER; this.align = mxConstants.ALIGN_CENTER;
@ -351,7 +357,7 @@ class mxText extends mxShape {
*/ */
apply = (state) => { apply = (state) => {
let old = this.spacing; let old = this.spacing;
apply.apply(this, arguments); super.apply(state);
if (this.style != null) { if (this.style != null) {
this.fontStyle = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSTYLE, this.fontStyle); this.fontStyle = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSTYLE, this.fontStyle);
@ -428,19 +434,19 @@ class mxText extends mxShape {
let h = (this.style != null) ? mxUtils.getValue(this.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER) : null; let h = (this.style != null) ? mxUtils.getValue(this.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER) : null;
let v = (this.style != null) ? mxUtils.getValue(this.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE) : null; let v = (this.style != null) ? mxUtils.getValue(this.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE) : null;
if (!this.ignoreStringSize && node != null && this.overflow != 'fill' && (!this.clipped || if (!this.ignoreStringSize && node != null && this.overflow !== 'fill' && (!this.clipped ||
!this.ignoreClippedStringSize || h != mxConstants.ALIGN_CENTER || v != mxConstants.ALIGN_MIDDLE)) { !this.ignoreClippedStringSize || h !== mxConstants.ALIGN_CENTER || v !== mxConstants.ALIGN_MIDDLE)) {
let ow = null; let ow = null;
let oh = null; let oh = null;
if (node.ownerSVGElement != null) { if (node.ownerSVGElement != null) {
if (node.firstChild != null && node.firstChild.firstChild != null && if (node.firstChild != null && node.firstChild.firstChild != null &&
node.firstChild.firstChild.nodeName == 'foreignObject') { node.firstChild.firstChild.nodeName === 'foreignObject') {
// Uses second inner DIV for font metrics // Uses second inner DIV for font metrics
node = node.firstChild.firstChild.firstChild.firstChild; node = node.firstChild.firstChild.firstChild.firstChild;
oh = node.offsetHeight * this.scale; oh = node.offsetHeight * this.scale;
if (this.overflow == 'width') { if (this.overflow === 'width') {
ow = this.boundingBox.width; ow = this.boundingBox.width;
} else { } else {
ow = node.offsetWidth * this.scale; ow = node.offsetWidth * this.scale;
@ -452,7 +458,7 @@ class mxText extends mxShape {
// Workaround for bounding box of empty string // Workaround for bounding box of empty string
if (typeof (this.value) == 'string' && mxUtils.trim(this.value) == 0) { if (typeof (this.value) == 'string' && mxUtils.trim(this.value) == 0) {
this.boundingBox = null; this.boundingBox = null;
} else if (b.width == 0 && b.height == 0) { } else if (b.width === 0 && b.height === 0) {
this.boundingBox = null; this.boundingBox = null;
} else { } else {
this.boundingBox = new mxRectangle(b.x, b.y, b.width, b.height); this.boundingBox = new mxRectangle(b.x, b.y, b.width, b.height);
@ -483,7 +489,7 @@ class mxText extends mxShape {
let sizeDiv = node; let sizeDiv = node;
if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName == 'DIV') { if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName === 'DIV') {
sizeDiv = sizeDiv.firstChild; sizeDiv = sizeDiv.firstChild;
} }
@ -502,7 +508,7 @@ class mxText extends mxShape {
} }
if (this.boundingBox != null) { if (this.boundingBox != null) {
if (rot != 0) { if (rot !== 0) {
// Accounts for pre-rotated x and y // Accounts for pre-rotated x and y
let bbox = mxUtils.getBoundingBox(new mxRectangle( let bbox = mxUtils.getBoundingBox(new mxRectangle(
this.margin.x * this.boundingBox.width, this.margin.x * this.boundingBox.width,
@ -560,7 +566,7 @@ class mxText extends mxShape {
* Sets the state of the canvas for drawing the shape. * Sets the state of the canvas for drawing the shape.
*/ */
configureCanvas = (c, x, y, w, h) => { configureCanvas = (c, x, y, w, h) => {
configureCanvas.apply(this, arguments); super.configureCanvas(c, x, y, w, h);
c.setFontColor(this.color); c.setFontColor(this.color);
c.setFontBackgroundColor(this.background); c.setFontBackgroundColor(this.background);
@ -591,7 +597,7 @@ class mxText extends mxShape {
getHtmlValue = () => { getHtmlValue = () => {
let val = this.value; let val = this.value;
if (this.dialect != mxConstants.DIALECT_STRICTHTML) { if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
val = mxUtils.htmlEntities(val, false); val = mxUtils.htmlEntities(val, false);
} }
@ -615,21 +621,21 @@ class mxText extends mxShape {
'font-family: ' + this.family + '; color: ' + this.color + '; line-height: ' + lh + 'font-family: ' + this.family + '; color: ' + this.color + '; line-height: ' + lh +
'; pointer-events: ' + ((this.pointerEvents) ? 'all' : 'none') + '; '; '; pointer-events: ' + ((this.pointerEvents) ? 'all' : 'none') + '; ';
if ((this.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) { if ((this.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
css += 'font-weight: bold; '; css += 'font-weight: bold; ';
} }
if ((this.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) { if ((this.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
css += 'font-style: italic; '; css += 'font-style: italic; ';
} }
let deco = []; let deco = [];
if ((this.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) { if ((this.fontStyle & mxConstants.FONT_UNDERLINE) === mxConstants.FONT_UNDERLINE) {
deco.push('underline'); deco.push('underline');
} }
if ((this.fontStyle & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH) { if ((this.fontStyle & mxConstants.FONT_STRIKETHROUGH) === mxConstants.FONT_STRIKETHROUGH) {
deco.push('line-through'); deco.push('line-through');
} }
@ -685,17 +691,17 @@ class mxText extends mxShape {
(this.border != null) ? mxUtils.htmlEntities(this.border) : null, (this.border != null) ? mxUtils.htmlEntities(this.border) : null,
flex, block, this.scale, (dx, dy, flex, item, block, ofl) => { flex, block, this.scale, (dx, dy, flex, item, block, ofl) => {
let r = this.getTextRotation(); let r = this.getTextRotation();
let tr = ((this.scale != 1) ? 'scale(' + this.scale + ') ' : '') + let tr = ((this.scale !== 1) ? 'scale(' + this.scale + ') ' : '') +
((r != 0) ? 'rotate(' + r + 'deg) ' : '') + ((r !== 0) ? 'rotate(' + r + 'deg) ' : '') +
((this.margin.x != 0 || this.margin.y != 0) ? ((this.margin.x !== 0 || this.margin.y !== 0) ?
'translate(' + (this.margin.x * 100) + '%,' + 'translate(' + (this.margin.x * 100) + '%,' +
(this.margin.y * 100) + '%)' : ''); (this.margin.y * 100) + '%)' : '');
if (tr != '') { if (tr !== '') {
tr = 'transform-origin: 0 0; transform: ' + tr + '; '; tr = 'transform-origin: 0 0; transform: ' + tr + '; ';
} }
if (ofl == '') { if (ofl === '') {
flex += item; flex += item;
item = 'display:inline-block; min-width: 100%; ' + tr; item = 'display:inline-block; min-width: 100%; ' + tr;
} else { } else {
@ -734,7 +740,7 @@ class mxText extends mxShape {
let dx = this.margin.x; let dx = this.margin.x;
let dy = this.margin.y; let dy = this.margin.y;
if (theta != 0) { if (theta !== 0) {
mxUtils.setPrefixedStyle(style, 'transformOrigin', (-dx * 100) + '%' + ' ' + (-dy * 100) + '%'); mxUtils.setPrefixedStyle(style, 'transformOrigin', (-dx * 100) + '%' + ' ' + (-dy * 100) + '%');
mxUtils.setPrefixedStyle(style, 'transform', 'translate(' + (dx * 100) + '%' + ',' + (dy * 100) + '%) ' + mxUtils.setPrefixedStyle(style, 'transform', 'translate(' + (dx * 100) + '%' + ',' + (dy * 100) + '%) ' +
'scale(' + this.scale + ') rotate(' + theta + 'deg)'); 'scale(' + this.scale + ') rotate(' + theta + 'deg)');
@ -744,9 +750,9 @@ class mxText extends mxShape {
'translate(' + (dx * 100) + '%' + ',' + (dy * 100) + '%)'); 'translate(' + (dx * 100) + '%' + ',' + (dy * 100) + '%)');
} }
style.left = Math.round(this.bounds.x - Math.ceil(dx * ((this.overflow != 'fill' && style.left = Math.round(this.bounds.x - Math.ceil(dx * ((this.overflow !== 'fill' &&
this.overflow != 'width') ? 3 : 1))) + 'px'; this.overflow !== 'width') ? 3 : 1))) + 'px';
style.top = Math.round(this.bounds.y - dy * ((this.overflow != 'fill') ? 3 : 1)) + 'px'; style.top = Math.round(this.bounds.y - dy * ((this.overflow !== 'fill') ? 3 : 1)) + 'px';
if (this.opacity < 100) { if (this.opacity < 100) {
style.opacity = this.opacity / 100; style.opacity = this.opacity / 100;
@ -766,7 +772,7 @@ class mxText extends mxShape {
} else { } else {
let val = this.value; let val = this.value;
if (this.dialect != mxConstants.DIALECT_STRICTHTML) { if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
// LATER: Can be cached in updateValue // LATER: Can be cached in updateValue
val = mxUtils.htmlEntities(val, false); val = mxUtils.htmlEntities(val, false);
} }
@ -828,10 +834,10 @@ class mxText extends mxShape {
sizeDiv = td; sizeDiv = td;
if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName == 'DIV') { if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName === 'DIV') {
sizeDiv = sizeDiv.firstChild; sizeDiv = sizeDiv.firstChild;
if (this.wrap && td.style.wordWrap == 'break-word') { if (this.wrap && td.style.wordWrap === 'break-word') {
sizeDiv.style.width = '100%'; sizeDiv.style.width = '100%';
} }
} }
@ -844,7 +850,7 @@ class mxText extends mxShape {
oh = sizeDiv.offsetHeight + 2; oh = sizeDiv.offsetHeight + 2;
} else if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName == 'DIV') { } else if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName === 'DIV') {
sizeDiv = sizeDiv.firstChild; sizeDiv = sizeDiv.firstChild;
oh = sizeDiv.offsetHeight; oh = sizeDiv.offsetHeight;
} }
@ -859,10 +865,10 @@ class mxText extends mxShape {
let h = this.bounds.height / s; let h = this.bounds.height / s;
// Handles special case for live preview with no wrapper DIV and no textDiv // Handles special case for live preview with no wrapper DIV and no textDiv
if (this.overflow == 'fill') { if (this.overflow === 'fill') {
oh = h; oh = h;
ow = w; ow = w;
} else if (this.overflow == 'width') { } else if (this.overflow === 'width') {
oh = sizeDiv.scrollHeight; oh = sizeDiv.scrollHeight;
ow = w; ow = w;
} }
@ -873,7 +879,7 @@ class mxText extends mxShape {
h = oh; h = oh;
if (this.overflow != 'fill' && this.overflow != 'width') { if (this.overflow !== 'fill' && this.overflow !== 'width') {
if (this.clipped) { if (this.clipped) {
ow = Math.min(w, ow); ow = Math.min(w, ow);
} }
@ -912,7 +918,7 @@ class mxText extends mxShape {
let top_fix = (h - h * cos + w * sin) / 2 + real_sin * tx - real_cos * ty; let top_fix = (h - h * cos + w * sin) / 2 + real_sin * tx - real_cos * ty;
let left_fix = (w - w * cos + h * sin) / 2 - real_cos * tx - real_sin * ty; let left_fix = (w - w * cos + h * sin) / 2 - real_cos * tx - real_sin * ty;
if (rad != 0) { if (rad !== 0) {
let f = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + real_cos + ', M12=' + let f = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + real_cos + ', M12=' +
real_sin + ', M21=' + (-real_sin) + ', M22=' + real_cos + ', sizingMethod=\'auto expand\')'; real_sin + ', M21=' + (-real_sin) + ', M22=' + real_cos + ', sizingMethod=\'auto expand\')';
@ -943,17 +949,17 @@ class mxText extends mxShape {
} else { } else {
let val = this.value; let val = this.value;
if (this.dialect != mxConstants.DIALECT_STRICTHTML) { if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
val = mxUtils.htmlEntities(val, false); val = mxUtils.htmlEntities(val, false);
} }
// Handles trailing newlines to make sure they are visible in rendering output // Handles trailing newlines to make sure they are visible in rendering output
val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>'); val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>');
val = (this.replaceLinefeeds) ? val.replace(/\n/g, '<br/>') : val; val = (this.replaceLinefeeds) ? val.replace(/\n/g, '<br/>') : val;
let bg = (this.background != null && this.background != mxConstants.NONE) ? this.background : null; let bg = (this.background != null && this.background !== mxConstants.NONE) ? this.background : null;
let bd = (this.border != null && this.border != mxConstants.NONE) ? this.border : null; let bd = (this.border != null && this.border !== mxConstants.NONE) ? this.border : null;
if (this.overflow == 'fill' || this.overflow == 'width') { if (this.overflow === 'fill' || this.overflow === 'width') {
if (bg != null) { if (bg != null) {
this.node.style.backgroundColor = bg; this.node.style.backgroundColor = bg;
} }
@ -989,11 +995,11 @@ class mxText extends mxShape {
if (divs.length > 0) { if (divs.length > 0) {
let dir = this.textDirection; let dir = this.textDirection;
if (dir == mxConstants.TEXT_DIRECTION_AUTO && this.dialect != mxConstants.DIALECT_STRICTHTML) { if (dir === mxConstants.TEXT_DIRECTION_AUTO && this.dialect !== mxConstants.DIALECT_STRICTHTML) {
dir = this.getAutoDirection(); dir = this.getAutoDirection();
} }
if (dir == mxConstants.TEXT_DIRECTION_LTR || dir == mxConstants.TEXT_DIRECTION_RTL) { if (dir === mxConstants.TEXT_DIRECTION_LTR || dir === mxConstants.TEXT_DIRECTION_RTL) {
divs[divs.length - 1].setAttribute('dir', dir); divs[divs.length - 1].setAttribute('dir', dir);
} else { } else {
divs[divs.length - 1].removeAttribute('dir'); divs[divs.length - 1].removeAttribute('dir');
@ -1016,13 +1022,13 @@ class mxText extends mxShape {
style.verticalAlign = 'top'; style.verticalAlign = 'top';
style.color = this.color; style.color = this.color;
if ((this.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) { if ((this.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
style.fontWeight = 'bold'; style.fontWeight = 'bold';
} else { } else {
style.fontWeight = ''; style.fontWeight = '';
} }
if ((this.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) { if ((this.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
style.fontStyle = 'italic'; style.fontStyle = 'italic';
} else { } else {
style.fontStyle = ''; style.fontStyle = '';
@ -1030,19 +1036,19 @@ class mxText extends mxShape {
let txtDecor = []; let txtDecor = [];
if ((this.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) { if ((this.fontStyle & mxConstants.FONT_UNDERLINE) === mxConstants.FONT_UNDERLINE) {
txtDecor.push('underline'); txtDecor.push('underline');
} }
if ((this.fontStyle & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH) { if ((this.fontStyle & mxConstants.FONT_STRIKETHROUGH) === mxConstants.FONT_STRIKETHROUGH) {
txtDecor.push('line-through'); txtDecor.push('line-through');
} }
style.textDecoration = txtDecor.join(' '); style.textDecoration = txtDecor.join(' ');
if (this.align == mxConstants.ALIGN_CENTER) { if (this.align === mxConstants.ALIGN_CENTER) {
style.textAlign = 'center'; style.textAlign = 'center';
} else if (this.align == mxConstants.ALIGN_RIGHT) { } else if (this.align === mxConstants.ALIGN_RIGHT) {
style.textAlign = 'right'; style.textAlign = 'right';
} else { } else {
style.textAlign = 'left'; style.textAlign = 'left';
@ -1066,11 +1072,11 @@ class mxText extends mxShape {
style.maxHeight = h + 'px'; style.maxHeight = h + 'px';
style.maxWidth = w + 'px'; style.maxWidth = w + 'px';
} else if (this.overflow == 'fill') { } else if (this.overflow === 'fill') {
style.width = (w + 1) + 'px'; style.width = (w + 1) + 'px';
style.height = (h + 1) + 'px'; style.height = (h + 1) + 'px';
style.overflow = 'hidden'; style.overflow = 'hidden';
} else if (this.overflow == 'width') { } else if (this.overflow === 'width') {
style.width = (w + 1) + 'px'; style.width = (w + 1) + 'px';
style.maxHeight = (h + 1) + 'px'; style.maxHeight = (h + 1) + 'px';
style.overflow = 'hidden'; style.overflow = 'hidden';
@ -1081,13 +1087,13 @@ class mxText extends mxShape {
style.whiteSpace = 'normal'; style.whiteSpace = 'normal';
style.width = w + 'px'; style.width = w + 'px';
if (enableWrap && this.overflow != 'fill' && this.overflow != 'width') { if (enableWrap && this.overflow !== 'fill' && this.overflow !== 'width') {
let sizeDiv = node; let sizeDiv = node;
if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName == 'DIV') { if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName === 'DIV') {
sizeDiv = sizeDiv.firstChild; sizeDiv = sizeDiv.firstChild;
if (node.style.wordWrap == 'break-word') { if (node.style.wordWrap === 'break-word') {
sizeDiv.style.width = '100%'; sizeDiv.style.width = '100%';
} }
} }
@ -1095,7 +1101,7 @@ class mxText extends mxShape {
let tmp = sizeDiv.offsetWidth; let tmp = sizeDiv.offsetWidth;
// Workaround for text measuring in hidden containers // Workaround for text measuring in hidden containers
if (tmp == 0) { if (tmp === 0) {
let prev = node.parentNode; let prev = node.parentNode;
node.style.visibility = 'hidden'; node.style.visibility = 'hidden';
document.body.appendChild(node); document.body.appendChild(node);
@ -1135,17 +1141,17 @@ class mxText extends mxShape {
let dx = 0; let dx = 0;
let dy = 0; let dy = 0;
if (this.align == mxConstants.ALIGN_CENTER) { if (this.align === mxConstants.ALIGN_CENTER) {
dx = (this.spacingLeft - this.spacingRight) / 2; dx = (this.spacingLeft - this.spacingRight) / 2;
} else if (this.align == mxConstants.ALIGN_RIGHT) { } else if (this.align === mxConstants.ALIGN_RIGHT) {
dx = -this.spacingRight - this.baseSpacingRight; dx = -this.spacingRight - this.baseSpacingRight;
} else { } else {
dx = this.spacingLeft + this.baseSpacingLeft; dx = this.spacingLeft + this.baseSpacingLeft;
} }
if (this.valign == mxConstants.ALIGN_MIDDLE) { if (this.valign === mxConstants.ALIGN_MIDDLE) {
dy = (this.spacingTop - this.spacingBottom) / 2; dy = (this.spacingTop - this.spacingBottom) / 2;
} else if (this.valign == mxConstants.ALIGN_BOTTOM) { } else if (this.valign === mxConstants.ALIGN_BOTTOM) {
dy = -this.spacingBottom - this.baseSpacingBottom; dy = -this.spacingBottom - this.baseSpacingBottom;
} else { } else {

12
src/mxgraph/util/mxAbstractCanvas2D.js
View File

@ -190,16 +190,16 @@ class mxAbstractCanvas2D {
* *
* Adds the given operation to the path. * Adds the given operation to the path.
*/ */
mxAbstractCanvas2addOp = () => { mxAbstractCanvas2addOp = (...args) => {
if (this.path != null) { if (this.path != null) {
this.path.push(arguments[0]); this.path.push(args[0]);
if (arguments.length > 2) { if (args.length > 2) {
let s = this.state; let s = this.state;
for (let i = 2; i < arguments.length; i += 2) { for (let i = 2; i < args.length; i += 2) {
this.lastX = arguments[i - 1]; this.lastX = args[i - 1];
this.lastY = arguments[i]; this.lastY = args[i];
this.path.push(this.format((this.lastX + s.dx) * s.scale)); this.path.push(this.format((this.lastX + s.dx) * s.scale));
this.path.push(this.format((this.lastY + s.dy) * s.scale)); this.path.push(this.format((this.lastY + s.dy) * s.scale));

1
src/mxgraph/util/mxAnimation.js
View File

@ -6,6 +6,7 @@
import mxUtils from "./mxUtils"; import mxUtils from "./mxUtils";
import mxEventSource from "./mxEventSource"; import mxEventSource from "./mxEventSource";
import mxEventObject from "./mxEventObject"; import mxEventObject from "./mxEventObject";
import mxEvent from "./mxEvent";
class mxAnimation extends mxEventSource { class mxAnimation extends mxEventSource {
/** /**

4
src/mxgraph/util/mxDragSource.js
View File

@ -651,13 +651,13 @@ class mxDragSource {
* implementation uses <mxGraph.getCellAt>. * implementation uses <mxGraph.getCellAt>.
*/ */
drop = (graph, evt, dropTarget, x, y) => { drop = (graph, evt, dropTarget, x, y) => {
this.dropHandler.apply(this, arguments); this.dropHandler(graph, evt, dropTarget, x, y);
// Had to move this to after the insert because it will // Had to move this to after the insert because it will
// affect the scrollbars of the window in IE to try and // affect the scrollbars of the window in IE to try and
// make the complete container visible. // make the complete container visible.
// LATER: Should be made optional. // LATER: Should be made optional.
if (graph.container.style.visibility != 'hidden') { if (graph.container.style.visibility !== 'hidden') {
graph.container.focus(); graph.container.focus();
} }
}; };

6
src/mxgraph/util/mxEffects.js
View File

@ -3,6 +3,8 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxUtils from "./mxUtils";
let mxEffects = { let mxEffects = {
/** /**
* Class: mxEffects * Class: mxEffects
@ -56,7 +58,7 @@ let mxEffects = {
if (state != null) { if (state != null) {
isRequired = true; isRequired = true;
if (change.constructor != mxGeometryChange || graph.model.isEdge(change.cell)) { if (change.constructor !== mxGeometryChange || graph.model.isEdge(change.cell)) {
mxUtils.setOpacity(state.shape.node, 100 * step / maxStep); mxUtils.setOpacity(state.shape.node, 100 * step / maxStep);
} else { } else {
let scale = graph.getView().scale; let scale = graph.getView().scale;
@ -67,7 +69,7 @@ let mxEffects = {
let sx = (change.geometry.width - change.previous.width) * scale; let sx = (change.geometry.width - change.previous.width) * scale;
let sy = (change.geometry.height - change.previous.height) * scale; let sy = (change.geometry.height - change.previous.height) * scale;
if (step == 0) { if (step === 0) {
state.x -= dx; state.x -= dx;
state.y -= dy; state.y -= dy;
state.width -= sx; state.width -= sx;

8
src/mxgraph/util/mxEventObject.js
View File

@ -47,13 +47,13 @@ class mxEventObject {
* new mxEventObject("eventName", key1, val1, .., keyN, valN) * new mxEventObject("eventName", key1, val1, .., keyN, valN)
* (end) * (end)
*/ */
constructor(name) { constructor(name, ...args) {
this.name = name; this.name = name;
this.properties = []; this.properties = [];
for (let i = 1; i < arguments.length; i += 2) { for (let i = 0; i < args.length; i += 2) {
if (arguments[i + 1] != null) { if (args[i + 1] != null) {
this.properties[arguments[i]] = arguments[i + 1]; this.properties[args[i]] = args[i + 1];
} }
} }
}; };

4
src/mxgraph/util/mxImageExport.js
View File

@ -53,13 +53,13 @@ class mxImageExport {
drawState = (state, canvas) => { drawState = (state, canvas) => {
if (state != null) { if (state != null) {
this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => { this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => {
this.drawCellState.apply(this, arguments); this.drawCellState(state, canvas);
})); }));
// Paints the overlays // Paints the overlays
if (this.includeOverlays) { if (this.includeOverlays) {
this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => { this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => {
this.drawOverlays.apply(this, arguments); this.drawOverlays(state, canvas);
})); }));
} }
} }

8
src/mxgraph/util/mxLog.js
View File

@ -284,7 +284,7 @@ let mxLog = {
* mxLog.debug('Hello, World!'); * mxLog.debug('Hello, World!');
* (end) * (end)
*/ */
debug: () => { debug: function() {
if (mxLog.DEBUG) { if (mxLog.DEBUG) {
mxLog.writeln.apply(this, arguments); mxLog.writeln.apply(this, arguments);
} }
@ -302,7 +302,7 @@ let mxLog = {
* mxLog.warn('Hello, World!'); * mxLog.warn('Hello, World!');
* (end) * (end)
*/ */
warn: () => { warn: function() {
if (mxLog.WARN) { if (mxLog.WARN) {
mxLog.writeln.apply(this, arguments); mxLog.writeln.apply(this, arguments);
} }
@ -313,7 +313,7 @@ let mxLog = {
* *
* Adds the specified strings to the console. * Adds the specified strings to the console.
*/ */
write: () => { write: function() {
let string = ''; let string = '';
for (let i = 0; i < arguments.length; i++) { for (let i = 0; i < arguments.length; i++) {
@ -346,7 +346,7 @@ let mxLog = {
* Adds the specified strings to the console, appending a linefeed at the * Adds the specified strings to the console, appending a linefeed at the
* end of each string. * end of each string.
*/ */
writeln: () => { writeln: function() {
let string = ''; let string = '';
for (let i = 0; i < arguments.length; i++) { for (let i = 0; i < arguments.length; i++) {

2
src/mxgraph/util/mxMorphing.js
View File

@ -95,7 +95,7 @@ class mxMorphing extends mxAnimation {
* Animation step. * Animation step.
*/ */
updateAnimation = () => { updateAnimation = () => {
updateAnimation.apply(this, arguments); super.updateAnimation();
let move = new mxCellStatePreview(this.graph); let move = new mxCellStatePreview(this.graph);
if (this.cells != null) { if (this.cells != null) {

70
src/mxgraph/util/mxSvgCanvas2D.js
View File

@ -369,7 +369,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Returns any offsets for rendering pixels. * Returns any offsets for rendering pixels.
*/ */
mxSvgCanvas2reset = () => { mxSvgCanvas2reset = () => {
mxAbstractCanvas2reset.apply(this, arguments); this.mxAbstractCanvas2reset();
this.gradients = []; this.gradients = [];
}; };
@ -426,10 +426,10 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let s = this.state; let s = this.state;
if (text != null && s.fontSize > 0) { if (text != null && s.fontSize > 0) {
let dy = (valign == mxConstants.ALIGN_TOP) ? 1 : let dy = (valign === mxConstants.ALIGN_TOP) ? 1 :
(valign == mxConstants.ALIGN_BOTTOM) ? 0 : 0.3; (valign === mxConstants.ALIGN_BOTTOM) ? 0 : 0.3;
let anchor = (align == mxConstants.ALIGN_RIGHT) ? 'end' : let anchor = (align === mxConstants.ALIGN_RIGHT) ? 'end' :
(align == mxConstants.ALIGN_LEFT) ? 'start' : (align === mxConstants.ALIGN_LEFT) ? 'start' :
'middle'; 'middle';
let alt = this.createElement('text'); let alt = this.createElement('text');
@ -440,7 +440,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
alt.setAttribute('font-size', Math.round(s.fontSize) + 'px'); alt.setAttribute('font-size', Math.round(s.fontSize) + 'px');
// Text-anchor start is default in SVG // Text-anchor start is default in SVG
if (anchor != 'start') { if (anchor !== 'start') {
alt.setAttribute('text-anchor', anchor); alt.setAttribute('text-anchor', anchor);
} }
@ -448,17 +448,17 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
alt.setAttribute('font-weight', 'bold'); alt.setAttribute('font-weight', 'bold');
} }
if ((s.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) { if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
alt.setAttribute('font-style', 'italic'); alt.setAttribute('font-style', 'italic');
} }
let txtDecor = []; let txtDecor = [];
if ((s.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) { if ((s.fontStyle & mxConstants.FONT_UNDERLINE) === mxConstants.FONT_UNDERLINE) {
txtDecor.push('underline'); txtDecor.push('underline');
} }
if ((s.fontStyle & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH) { if ((s.fontStyle & mxConstants.FONT_STRIKETHROUGH) === mxConstants.FONT_STRIKETHROUGH) {
txtDecor.push('line-through'); txtDecor.push('line-through');
} }
@ -481,11 +481,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*/ */
mxSvgCanvas2createGradientId = (start, end, alpha1, alpha2, direction) => { mxSvgCanvas2createGradientId = (start, end, alpha1, alpha2, direction) => {
// Removes illegal characters from gradient ID // Removes illegal characters from gradient ID
if (start.charAt(0) == '#') { if (start.charAt(0) === '#') {
start = start.substring(1); start = start.substring(1);
} }
if (end.charAt(0) == '#') { if (end.charAt(0) === '#') {
end = end.substring(1); end = end.substring(1);
} }
@ -499,16 +499,16 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
if (direction == null || direction == mxConstants.DIRECTION_SOUTH) { if (direction == null || direction == mxConstants.DIRECTION_SOUTH) {
dir = 's'; dir = 's';
} else if (direction == mxConstants.DIRECTION_EAST) { } else if (direction === mxConstants.DIRECTION_EAST) {
dir = 'e'; dir = 'e';
} else { } else {
let tmp = start; let tmp = start;
start = end; start = end;
end = tmp; end = tmp;
if (direction == mxConstants.DIRECTION_NORTH) { if (direction === mxConstants.DIRECTION_NORTH) {
dir = 's'; dir = 's';
} else if (direction == mxConstants.DIRECTION_WEST) { } else if (direction === mxConstants.DIRECTION_WEST) {
dir = 'e'; dir = 'e';
} }
} }
@ -534,7 +534,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
if (svg != null) { if (svg != null) {
gradient = svg.ownerDocument.getElementById(tmpId); gradient = svg.ownerDocument.getElementById(tmpId);
while (gradient != null && gradient.ownerSVGElement != svg) { while (gradient != null && gradient.ownerSVGElement !== svg) {
tmpId = id + '-' + counter++; tmpId = id + '-' + counter++;
gradient = svg.ownerDocument.getElementById(tmpId); gradient = svg.ownerDocument.getElementById(tmpId);
} }
@ -572,13 +572,13 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
gradient.setAttribute('x2', '0%'); gradient.setAttribute('x2', '0%');
gradient.setAttribute('y2', '0%'); gradient.setAttribute('y2', '0%');
if (direction == null || direction == mxConstants.DIRECTION_SOUTH) { if (direction == null || direction === mxConstants.DIRECTION_SOUTH) {
gradient.setAttribute('y2', '100%'); gradient.setAttribute('y2', '100%');
} else if (direction == mxConstants.DIRECTION_EAST) { } else if (direction === mxConstants.DIRECTION_EAST) {
gradient.setAttribute('x2', '100%'); gradient.setAttribute('x2', '100%');
} else if (direction == mxConstants.DIRECTION_NORTH) { } else if (direction === mxConstants.DIRECTION_NORTH) {
gradient.setAttribute('y1', '100%'); gradient.setAttribute('y1', '100%');
} else if (direction == mxConstants.DIRECTION_WEST) { } else if (direction === mxConstants.DIRECTION_WEST) {
gradient.setAttribute('x1', '100%'); gradient.setAttribute('x1', '100%');
} }
@ -609,7 +609,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let s = this.state; let s = this.state;
if (node != null) { if (node != null) {
if (node.nodeName == 'path') { if (node.nodeName === 'path') {
// Checks if the path is not empty // Checks if the path is not empty
if (this.path != null && this.path.length > 0) { if (this.path != null && this.path.length > 0) {
node.setAttribute('d', this.path.join(' ')); node.setAttribute('d', this.path.join(' '));
@ -622,7 +622,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
this.updateFill(); this.updateFill();
} else if (!this.styleEnabled) { } else if (!this.styleEnabled) {
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=814952 // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=814952
if (node.nodeName == 'ellipse' && mxClient.IS_FF) { if (node.nodeName === 'ellipse' && mxClient.IS_FF) {
node.setAttribute('fill', 'transparent'); node.setAttribute('fill', 'transparent');
} else { } else {
node.setAttribute('fill', 'none'); node.setAttribute('fill', 'none');
@ -689,7 +689,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let id = this.getSvgGradient(String(s.fillColor), String(s.gradientColor), let id = this.getSvgGradient(String(s.fillColor), String(s.gradientColor),
s.gradientFillAlpha, s.gradientAlpha, s.gradientDirection); s.gradientFillAlpha, s.gradientAlpha, s.gradientDirection);
if (this.root.ownerDocument == document && this.useAbsoluteIds) { if (this.root.ownerDocument === document && this.useAbsoluteIds) {
// Workaround for no fill with base tag in page (escape brackets) // Workaround for no fill with base tag in page (escape brackets)
let base = this.getBaseUrl().replace(/([\(\)])/g, '\\$1'); let base = this.getBaseUrl().replace(/([\(\)])/g, '\\$1');
this.node.setAttribute('fill', 'url(' + base + '#' + id + ')'); this.node.setAttribute('fill', 'url(' + base + '#' + id + ')');
@ -727,11 +727,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let sw = this.getCurrentStrokeWidth(); let sw = this.getCurrentStrokeWidth();
if (sw != 1) { if (sw !== 1) {
this.node.setAttribute('stroke-width', sw); this.node.setAttribute('stroke-width', sw);
} }
if (this.node.nodeName == 'path') { if (this.node.nodeName === 'path') {
this.updateStrokeAttributes(); this.updateStrokeAttributes();
} }
@ -750,7 +750,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let s = this.state; let s = this.state;
// Linejoin miter is default in SVG // Linejoin miter is default in SVG
if (s.lineJoin != null && s.lineJoin != 'miter') { if (s.lineJoin != null && s.lineJoin !== 'miter') {
this.node.setAttribute('stroke-linejoin', s.lineJoin); this.node.setAttribute('stroke-linejoin', s.lineJoin);
} }
@ -758,18 +758,18 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// flat is called butt in SVG // flat is called butt in SVG
let value = s.lineCap; let value = s.lineCap;
if (value == 'flat') { if (value === 'flat') {
value = 'butt'; value = 'butt';
} }
// Linecap butt is default in SVG // Linecap butt is default in SVG
if (value != 'butt') { if (value !== 'butt') {
this.node.setAttribute('stroke-linecap', value); this.node.setAttribute('stroke-linecap', value);
} }
} }
// Miterlimit 10 is default in our document // Miterlimit 10 is default in our document
if (s.miterLimit != null && (!this.styleEnabled || s.miterLimit != 10)) { if (s.miterLimit != null && (!this.styleEnabled || s.miterLimit !== 10)) {
this.node.setAttribute('stroke-miterlimit', s.miterLimit); this.node.setAttribute('stroke-miterlimit', s.miterLimit);
} }
}; };
@ -822,11 +822,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let s = this.state; let s = this.state;
// Firefox uses transparent for no fill in ellipses // Firefox uses transparent for no fill in ellipses
if (shadow.getAttribute('fill') != 'none' && (!mxClient.IS_FF || shadow.getAttribute('fill') != 'transparent')) { if (shadow.getAttribute('fill') !== 'none' && (!mxClient.IS_FF || shadow.getAttribute('fill') !== 'transparent')) {
shadow.setAttribute('fill', s.shadowColor); shadow.setAttribute('fill', s.shadowColor);
} }
if (shadow.getAttribute('stroke') != 'none') { if (shadow.getAttribute('stroke') !== 'none') {
shadow.setAttribute('stroke', s.shadowColor); shadow.setAttribute('stroke', s.shadowColor);
} }
@ -852,7 +852,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Workaround for implicit namespace handling in HTML5 export, IE adds NS1 namespace so use code below // Workaround for implicit namespace handling in HTML5 export, IE adds NS1 namespace so use code below
// in all IE versions except quirks mode. KNOWN: Adds xlink namespace to each image tag in output. // in all IE versions except quirks mode. KNOWN: Adds xlink namespace to each image tag in output.
if (node.setAttributeNS == null || (this.root.ownerDocument != document)) { if (node.setAttributeNS == null || (this.root.ownerDocument !== document)) {
node.setAttribute('xlink:href', link); node.setAttribute('xlink:href', link);
} else { } else {
node.setAttributeNS(mxConstants.NS_XLINK, 'xlink:href', link); node.setAttributeNS(mxConstants.NS_XLINK, 'xlink:href', link);
@ -869,7 +869,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Sets the rotation of the canvas. Note that rotation cannot be concatenated. * Sets the rotation of the canvas. Note that rotation cannot be concatenated.
*/ */
mxSvgCanvas2rotate = (theta, flipH, flipV, cx, cy) => { mxSvgCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
if (theta != 0 || flipH || flipV) { if (theta !== 0 || flipH || flipV) {
let s = this.state; let s = this.state;
cx += s.dx; cx += s.dx;
cy += s.dy; cy += s.dy;
@ -883,7 +883,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Rotation state is part of the AffineTransform in state.transform // Rotation state is part of the AffineTransform in state.transform
if (flipH && flipV) { if (flipH && flipV) {
theta += 180; theta += 180;
} else if (flipH != flipV) { } else if (flipH !== flipV) {
let tx = (flipH) ? cx : 0; let tx = (flipH) ? cx : 0;
let sx = (flipH) ? -1 : 1; let sx = (flipH) ? -1 : 1;
@ -899,7 +899,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
theta *= -1; theta *= -1;
} }
if (theta != 0) { if (theta !== 0) {
s.transform += 'rotate(' + this.format(theta) + ',' + this.format(cx) + ',' + this.format(cy) + ')'; s.transform += 'rotate(' + this.format(theta) + ',' + this.format(cx) + ',' + this.format(cy) + ')';
} }
@ -915,7 +915,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Extends superclass to create path. * Extends superclass to create path.
*/ */
mxSvgCanvas2begin = () => { mxSvgCanvas2begin = () => {
mxAbstractCanvas2begin.apply(this, arguments); this.mxAbstractCanvas2begin();
this.node = this.createElement('path'); this.node = this.createElement('path');
}; };

15
src/mxgraph/util/mxUtils.js
View File

@ -3,6 +3,9 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxEffects from "./mxEffects";
import mxXmlRequest from "./mxXmlRequest";
let mxUtils = { let mxUtils = {
/** /**
* Class: mxUtils * Class: mxUtils
@ -159,11 +162,11 @@ let mxUtils = {
* function to the specified scope. Inside funct, the "this" keyword * function to the specified scope. Inside funct, the "this" keyword
* becomes a reference to that scope. * becomes a reference to that scope.
*/ */
bind: (scope, funct) => { /*bind: (scope, funct) => {
return () => { return () => {
return funct.apply(scope, arguments); return funct.apply(scope, arguments);
}; };
}, },*/
/** /**
* Function: eval * Function: eval
@ -1237,7 +1240,7 @@ let mxUtils = {
if (headers) { if (headers) {
req.setRequestHeaders = (request, params) => { req.setRequestHeaders = (request, params) => {
setRequestHeaders.apply(this, arguments); setRequestHeaders.apply(this, [url, onload, onerror, binary, timeout, ontimeout, headers]);
for (var key in headers) { for (var key in headers) {
request.setRequestHeader(key, headers[key]); request.setRequestHeader(key, headers[key]);
@ -2630,7 +2633,7 @@ let mxUtils = {
*/ */
animateChanges: (graph, changes) => { animateChanges: (graph, changes) => {
// LATER: Deprecated, remove this function // LATER: Deprecated, remove this function
mxEffects.animateChanges.apply(this, arguments); mxEffects.animateChanges.apply(this, [graph, changes]);
}, },
/** /**
@ -2640,7 +2643,7 @@ let mxUtils = {
* will be removed later. * will be removed later.
*/ */
cascadeOpacity: (graph, cell, opacity) => { cascadeOpacity: (graph, cell, opacity) => {
mxEffects.cascadeOpacity.apply(this, arguments); mxEffects.cascadeOpacity.apply(this, [graph, cell, opacity]);
}, },
/** /**
@ -2650,7 +2653,7 @@ let mxUtils = {
* will be removed later. * will be removed later.
*/ */
fadeOut: (node, from, remove, step, delay, isEnabled) => { fadeOut: (node, from, remove, step, delay, isEnabled) => {
mxEffects.fadeOut.apply(this, arguments); mxEffects.fadeOut.apply(this, [node, from, remove, step, delay, isEnabled]);
}, },
/** /**

129
src/mxgraph/util/mxXmlCanvas2D.js
View File

@ -3,6 +3,8 @@
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
*/ */
import mxAbstractCanvas2D from "./mxAbstractCanvas2D";
import mxConstants from "./mxConstants";
class mxXmlCanvas2D extends mxAbstractCanvas2D { class mxXmlCanvas2D extends mxAbstractCanvas2D {
/** /**
@ -117,9 +119,8 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2save = () => { mxXmlCanvas2save = () => {
if (this.compressed) { if (this.compressed) {
mxAbstractCanvas2save.apply(this, arguments); this.mxAbstractCanvas2save();
} }
this.root.appendChild(this.createElement('save')); this.root.appendChild(this.createElement('save'));
}; };
@ -130,9 +131,8 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2restore = () => { mxXmlCanvas2restore = () => {
if (this.compressed) { if (this.compressed) {
mxAbstractCanvas2restore.apply(this, arguments); this.mxAbstractCanvas2restore();
} }
this.root.appendChild(this.createElement('restore')); this.root.appendChild(this.createElement('restore'));
}; };
@ -185,7 +185,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy) => { mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
let elem = this.createElement('rotate'); let elem = this.createElement('rotate');
if (theta != 0 || flipH || flipV) { if (theta !== 0 || flipH || flipV) {
elem.setAttribute('theta', this.format(theta)); elem.setAttribute('theta', this.format(theta));
elem.setAttribute('flipH', (flipH) ? '1' : '0'); elem.setAttribute('flipH', (flipH) ? '1' : '0');
elem.setAttribute('flipV', (flipV) ? '1' : '0'); elem.setAttribute('flipV', (flipV) ? '1' : '0');
@ -207,11 +207,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setAlpha = (value) => { mxXmlCanvas2setAlpha = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.alpha == value) { if (this.state.alpha === value) {
return; return;
} }
this.mxAbstractCanvas2setAlpha.apply(value);
mxAbstractCanvas2setAlpha.apply(this, arguments);
} }
let elem = this.createElement('alpha'); let elem = this.createElement('alpha');
@ -231,11 +230,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setFillAlpha = (value) => { mxXmlCanvas2setFillAlpha = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.fillAlpha == value) { if (this.state.fillAlpha === value) {
return; return;
} }
this.mxAbstractCanvas2setFillAlpha(value);
mxAbstractCanvas2setFillAlpha.apply(this, arguments);
} }
let elem = this.createElement('fillalpha'); let elem = this.createElement('fillalpha');
@ -255,11 +253,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setStrokeAlpha = (value) => { mxXmlCanvas2setStrokeAlpha = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.strokeAlpha == value) { if (this.state.strokeAlpha === value) {
return; return;
} }
this.mxAbstractCanvas2setStrokeAlpha(value);
mxAbstractCanvas2setStrokeAlpha.apply(this, arguments);
} }
let elem = this.createElement('strokealpha'); let elem = this.createElement('strokealpha');
@ -277,16 +274,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Hexadecimal representation of the color or 'none'. * value - Hexadecimal representation of the color or 'none'.
*/ */
mxXmlCanvas2setFillColor = (value) => { mxXmlCanvas2setFillColor = (value) => {
if (value == mxConstants.NONE) { if (value === mxConstants.NONE) {
value = null; value = null;
} }
if (this.compressed) { if (this.compressed) {
if (this.state.fillColor == value) { if (this.state.fillColor === value) {
return; return;
} }
this.mxAbstractCanvas2setFillColor(value);
mxAbstractCanvas2setFillColor.apply(this, arguments);
} }
let elem = this.createElement('fillcolor'); let elem = this.createElement('fillcolor');
@ -316,7 +312,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => { mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
if (color1 != null && color2 != null) { if (color1 != null && color2 != null) {
mxAbstractCanvas2setGradient.apply(this, arguments); this.mxAbstractCanvas2setGradient(color1, color2, x, y, w, h, direction, alpha1, alpha2);
let elem = this.createElement('gradient'); let elem = this.createElement('gradient');
elem.setAttribute('c1', color1); elem.setAttribute('c1', color1);
@ -353,16 +349,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Hexadecimal representation of the color or 'none'. * value - Hexadecimal representation of the color or 'none'.
*/ */
mxXmlCanvas2setStrokeColor = (value) => { mxXmlCanvas2setStrokeColor = (value) => {
if (value == mxConstants.NONE) { if (value === mxConstants.NONE) {
value = null; value = null;
} }
if (this.compressed) { if (this.compressed) {
if (this.state.strokeColor == value) { if (this.state.strokeColor === value) {
return; return;
} }
this.mxAbstractCanvas2setStrokeColor(value);
mxAbstractCanvas2setStrokeColor.apply(this, arguments);
} }
let elem = this.createElement('strokecolor'); let elem = this.createElement('strokecolor');
@ -381,11 +376,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setStrokeWidth = (value) => { mxXmlCanvas2setStrokeWidth = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.strokeWidth == value) { if (this.state.strokeWidth === value) {
return; return;
} }
this.mxAbstractCanvas2setStrokeWidth(value);
mxAbstractCanvas2setStrokeWidth.apply(this, arguments);
} }
let elem = this.createElement('strokewidth'); let elem = this.createElement('strokewidth');
@ -406,11 +400,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setDashed = (value, fixDash) => { mxXmlCanvas2setDashed = (value, fixDash) => {
if (this.compressed) { if (this.compressed) {
if (this.state.dashed == value) { if (this.state.dashed === value) {
return; return;
} }
this.mxAbstractCanvas2setDashed(value, fixDash);
mxAbstractCanvas2setDashed.apply(this, arguments);
} }
let elem = this.createElement('dashed'); let elem = this.createElement('dashed');
@ -437,11 +430,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setDashPattern = (value) => { mxXmlCanvas2setDashPattern = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.dashPattern == value) { if (this.state.dashPattern === value) {
return; return;
} }
this.mxAbstractCanvas2setDashPattern(value);
mxAbstractCanvas2setDashPattern.apply(this, arguments);
} }
let elem = this.createElement('dashpattern'); let elem = this.createElement('dashpattern');
@ -461,11 +453,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setLineCap = (value) => { mxXmlCanvas2setLineCap = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.lineCap == value) { if (this.state.lineCap === value) {
return; return;
} }
this.mxAbstractCanvas2setLineCap(value);
mxAbstractCanvas2setLineCap.apply(this, arguments);
} }
let elem = this.createElement('linecap'); let elem = this.createElement('linecap');
@ -485,11 +476,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setLineJoin = (value) => { mxXmlCanvas2setLineJoin = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.lineJoin == value) { if (this.state.lineJoin === value) {
return; return;
} }
this.mxAbstractCanvas2setLineJoin(value);
mxAbstractCanvas2setLineJoin.apply(this, arguments);
} }
let elem = this.createElement('linejoin'); let elem = this.createElement('linejoin');
@ -508,11 +498,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setMiterLimit = (value) => { mxXmlCanvas2setMiterLimit = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.miterLimit == value) { if (this.state.miterLimit === value) {
return; return;
} }
this.mxAbstractCanvas2setMiterLimit(value);
mxAbstractCanvas2setMiterLimit.apply(this, arguments);
} }
let elem = this.createElement('miterlimit'); let elem = this.createElement('miterlimit');
@ -531,16 +520,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setFontColor = (value) => { mxXmlCanvas2setFontColor = (value) => {
if (this.textEnabled) { if (this.textEnabled) {
if (value == mxConstants.NONE) { if (value === mxConstants.NONE) {
value = null; value = null;
} }
if (this.compressed) { if (this.compressed) {
if (this.state.fontColor == value) { if (this.state.fontColor === value) {
return; return;
} }
this.mxAbstractCanvas2setFontColor(value);
mxAbstractCanvas2setFontColor.apply(this, arguments);
} }
let elem = this.createElement('fontcolor'); let elem = this.createElement('fontcolor');
@ -560,16 +548,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setFontBackgroundColor = (value) => { mxXmlCanvas2setFontBackgroundColor = (value) => {
if (this.textEnabled) { if (this.textEnabled) {
if (value == mxConstants.NONE) { if (value === mxConstants.NONE) {
value = null; value = null;
} }
if (this.compressed) { if (this.compressed) {
if (this.state.fontBackgroundColor == value) { if (this.state.fontBackgroundColor === value) {
return; return;
} }
this.mxAbstractCanvas2setFontBackgroundColor(value);
mxAbstractCanvas2setFontBackgroundColor.apply(this, arguments);
} }
let elem = this.createElement('fontbackgroundcolor'); let elem = this.createElement('fontbackgroundcolor');
@ -589,16 +576,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setFontBorderColor = (value) => { mxXmlCanvas2setFontBorderColor = (value) => {
if (this.textEnabled) { if (this.textEnabled) {
if (value == mxConstants.NONE) { if (value === mxConstants.NONE) {
value = null; value = null;
} }
if (this.compressed) { if (this.compressed) {
if (this.state.fontBorderColor == value) { if (this.state.fontBorderColor === value) {
return; return;
} }
this.mxAbstractCanvas2setFontBorderColor(value);
mxAbstractCanvas2setFontBorderColor.apply(this, arguments);
} }
let elem = this.createElement('fontbordercolor'); let elem = this.createElement('fontbordercolor');
@ -619,11 +605,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
mxXmlCanvas2setFontSize = (value) => { mxXmlCanvas2setFontSize = (value) => {
if (this.textEnabled) { if (this.textEnabled) {
if (this.compressed) { if (this.compressed) {
if (this.state.fontSize == value) { if (this.state.fontSize === value) {
return; return;
} }
this.mxAbstractCanvas2setFontSize(value);
mxAbstractCanvas2setFontSize.apply(this, arguments);
} }
let elem = this.createElement('fontsize'); let elem = this.createElement('fontsize');
@ -645,11 +630,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
mxXmlCanvas2setFontFamily = (value) => { mxXmlCanvas2setFontFamily = (value) => {
if (this.textEnabled) { if (this.textEnabled) {
if (this.compressed) { if (this.compressed) {
if (this.state.fontFamily == value) { if (this.state.fontFamily === value) {
return; return;
} }
this.mxAbstractCanvas2setFontFamily(value);
mxAbstractCanvas2setFontFamily.apply(this, arguments);
} }
let elem = this.createElement('fontfamily'); let elem = this.createElement('fontfamily');
@ -675,11 +659,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
} }
if (this.compressed) { if (this.compressed) {
if (this.state.fontStyle == value) { if (this.state.fontStyle === value) {
return; return;
} }
this.mxAbstractCanvas2setFontStyle.apply(value);
mxAbstractCanvas2setFontStyle.apply(this, arguments);
} }
let elem = this.createElement('fontstyle'); let elem = this.createElement('fontstyle');
@ -699,11 +682,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setShadow = (value) => { mxXmlCanvas2setShadow = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.shadow == value) { if (this.state.shadow === value) {
return; return;
} }
this.mxAbstractCanvas2setShadow(value);
mxAbstractCanvas2setShadow.apply(this, arguments);
} }
let elem = this.createElement('shadow'); let elem = this.createElement('shadow');
@ -722,15 +704,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setShadowColor = (value) => { mxXmlCanvas2setShadowColor = (value) => {
if (this.compressed) { if (this.compressed) {
if (value == mxConstants.NONE) { if (value === mxConstants.NONE) {
value = null; value = null;
} }
if (this.state.shadowColor == value) { if (this.state.shadowColor === value) {
return; return;
} }
mxAbstractCanvas2setShadowColor.apply(this, arguments); this.mxAbstractCanvas2setShadowColor(value);
} }
let elem = this.createElement('shadowcolor'); let elem = this.createElement('shadowcolor');
@ -750,17 +732,15 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setShadowAlpha = (value) => { mxXmlCanvas2setShadowAlpha = (value) => {
if (this.compressed) { if (this.compressed) {
if (this.state.shadowAlpha == value) { if (this.state.shadowAlpha === value) {
return; return;
} }
this.mxAbstractCanvas2setShadowAlpha(value);
mxAbstractCanvas2setShadowAlpha.apply(this, arguments);
} }
let elem = this.createElement('shadowalpha'); let elem = this.createElement('shadowalpha');
elem.setAttribute('alpha', value); elem.setAttribute('alpha', value);
this.root.appendChild(elem); this.root.appendChild(elem);
}; };
/** /**
@ -775,11 +755,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*/ */
mxXmlCanvas2setShadowOffset = (dx, dy) => { mxXmlCanvas2setShadowOffset = (dx, dy) => {
if (this.compressed) { if (this.compressed) {
if (this.state.shadowDx == dx && this.state.shadowDy == dy) { if (this.state.shadowDx === dx && this.state.shadowDy === dy) {
return; return;
} }
this.mxAbstractCanvas2setShadowOffset(dx, dy);
mxAbstractCanvas2setShadowOffset.apply(this, arguments);
} }
let elem = this.createElement('shadowoffset'); let elem = this.createElement('shadowoffset');

26
src/mxgraph/view/mxGraph.js
View File

@ -4029,14 +4029,15 @@ class mxGraph extends mxEventSource {
* relative - Optional boolean that specifies if the geometry is relative. * relative - Optional boolean that specifies if the geometry is relative.
* Default is false. * Default is false.
*/ */
insertVertex = (parent, id, value, insertVertex = (...args) => {
x, y, width, height, let parent, id, value,
style, relative) => { x, y, width, height,
style, relative;
if (arguments.length === 1) { if (args.length === 1) {
// If only a single parameter, treat as an object // If only a single parameter, treat as an object
// This syntax can be more readable // This syntax can be more readable
let params = arguments[0]; let params = args[0];
parent = params.parent; parent = params.parent;
id = params.id; id = params.id;
value = params.value; value = params.value;
@ -4048,6 +4049,11 @@ class mxGraph extends mxEventSource {
style = params.style; style = params.style;
relative = params.relative; relative = params.relative;
} else {
// Otherwise treat as arguments
[parent, id, value,
x, y, width, height,
style, relative] = args;
} }
let vertex = this.createVertex( let vertex = this.createVertex(
@ -4096,18 +4102,22 @@ class mxGraph extends mxEventSource {
* target - <mxCell> that defines the target of the edge. * target - <mxCell> that defines the target of the edge.
* style - Optional string that defines the cell style. * style - Optional string that defines the cell style.
*/ */
insertEdge = (parent, id, value, source, target, style) => { insertEdge = (...args) => {
let parent, id, value, source, target, style;
if (arguments.length === 1) { if (args.length === 1) {
// If only a single parameter, treat as an object // If only a single parameter, treat as an object
// This syntax can be more readable // This syntax can be more readable
let params = arguments[0]; let params = args[0];
parent = params.parent; parent = params.parent;
id = params.id; id = params.id;
value = params.value; value = params.value;
source = params.source; source = params.source;
target = params.target; target = params.target;
style = params.style; style = params.style;
} else {
// otherwise treat as individual arguments
[parent, id, value, source, target, style] = args;
} }
let edge = this.createEdge(parent, id, value, source, target, style); let edge = this.createEdge(parent, id, value, source, target, style);

33
src/mxgraph/view/mxOutline.js
View File

@ -10,6 +10,7 @@ import mxRectangle from "../util/mxRectangle";
import mxRectangleShape from "../shape/mxRectangleShape"; import mxRectangleShape from "../shape/mxRectangleShape";
import mxMouseEvent from "FIXME"; import mxMouseEvent from "FIXME";
import mxGraph from "./mxGraph"; import mxGraph from "./mxGraph";
import mxImageShape from "../shape/mxImageShape";
class mxOutline { class mxOutline {
/** /**
@ -182,7 +183,7 @@ class mxOutline {
let outlineGraphModelChanged = this.outline.graphModelChanged; let outlineGraphModelChanged = this.outline.graphModelChanged;
this.outline.graphModelChanged = mxUtils.bind(this, (changes) => { this.outline.graphModelChanged = mxUtils.bind(this, (changes) => {
if (!this.suspended && this.outline != null) { if (!this.suspended && this.outline != null) {
outlineGraphModelChanged.apply(this.outline, arguments); outlineGraphModelChanged.apply(this.outline, [changes]);
} }
}); });
@ -197,11 +198,11 @@ class mxOutline {
this.outline.labelsVisible = this.labelsVisible; this.outline.labelsVisible = this.labelsVisible;
this.outline.setEnabled(false); this.outline.setEnabled(false);
this.updateHandler = mxUtils.bind(this, (sender, evt) => { this.updateHandler = (sender, evt) => {
if (!this.suspended && !this.active) { if (!this.suspended && !this.active) {
this.update(); this.update();
} }
}); };
// Updates the scale of the outline after a change of the main graph // Updates the scale of the outline after a change of the main graph
this.source.getModel().addListener(mxEvent.CHANGE, this.updateHandler); this.source.getModel().addListener(mxEvent.CHANGE, this.updateHandler);
@ -218,18 +219,18 @@ class mxOutline {
// Updates blue rectangle on scroll // Updates blue rectangle on scroll
mxEvent.addListener(this.source.container, 'scroll', this.updateHandler); mxEvent.addListener(this.source.container, 'scroll', this.updateHandler);
this.panHandler = mxUtils.bind(this, (sender) => { this.panHandler = (sender, evt) => {
if (this.updateOnPan) { if (this.updateOnPan) {
this.updateHandler.apply(this, arguments); this.updateHandler.apply(this, [sender, evt]);
} }
}); };
this.source.addListener(mxEvent.PAN, this.panHandler); this.source.addListener(mxEvent.PAN, this.panHandler);
// Refreshes the graph in the outline after a refresh of the main graph // Refreshes the graph in the outline after a refresh of the main graph
this.refreshHandler = mxUtils.bind(this, (sender) => { this.refreshHandler = (sender) => {
this.outline.setStylesheet(this.source.getStylesheet()); this.outline.setStylesheet(this.source.getStylesheet());
this.outline.refresh(); this.outline.refresh();
}); };
this.source.addListener(mxEvent.REFRESH, this.refreshHandler); this.source.addListener(mxEvent.REFRESH, this.refreshHandler);
// Creates the blue rectangle for the viewport // Creates the blue rectangle for the viewport
@ -419,14 +420,14 @@ class mxOutline {
let scale = (isNaN(outlineScale)) ? this.minScale : Math.max(this.minScale, outlineScale); let scale = (isNaN(outlineScale)) ? this.minScale : Math.max(this.minScale, outlineScale);
if (scale > 0) { if (scale > 0) {
if (this.outline.getView().scale != scale) { if (this.outline.getView().scale !== scale) {
this.outline.getView().scale = scale; this.outline.getView().scale = scale;
revalidate = true; revalidate = true;
} }
let navView = this.outline.getView(); let navView = this.outline.getView();
if (navView.currentRoot != this.source.getView().currentRoot) { if (navView.currentRoot !== this.source.getView().currentRoot) {
navView.setCurrentRoot(this.source.getView().currentRoot); navView.setCurrentRoot(this.source.getView().currentRoot);
} }
@ -448,7 +449,7 @@ class mxOutline {
ty = ty - unscaledGraphBounds.y; ty = ty - unscaledGraphBounds.y;
} }
if (navView.translate.x != tx || navView.translate.y != ty) { if (navView.translate.x !== tx || navView.translate.y !== ty) {
navView.translate.x = tx; navView.translate.x = tx;
navView.translate.y = ty; navView.translate.y = ty;
revalidate = true; revalidate = true;
@ -474,21 +475,21 @@ class mxOutline {
let b = this.selectionBorder.bounds; let b = this.selectionBorder.bounds;
if (b.x != this.bounds.x || b.y != this.bounds.y || b.width != this.bounds.width || b.height != this.bounds.height) { if (b.x !== this.bounds.x || b.y !== this.bounds.y || b.width !== this.bounds.width || b.height !== this.bounds.height) {
this.selectionBorder.bounds = this.bounds; this.selectionBorder.bounds = this.bounds;
this.selectionBorder.redraw(); this.selectionBorder.redraw();
} }
// Updates the bounds of the zoom handle at the bottom right // Updates the bounds of the zoom handle at the bottom right
let b = this.sizer.bounds; b = this.sizer.bounds;
var b2 = new mxRectangle(this.bounds.x + this.bounds.width - b.width / 2, var b2 = new mxRectangle(this.bounds.x + this.bounds.width - b.width / 2,
this.bounds.y + this.bounds.height - b.height / 2, b.width, b.height); this.bounds.y + this.bounds.height - b.height / 2, b.width, b.height);
if (b.x != b2.x || b.y != b2.y || b.width != b2.width || b.height != b2.height) { if (b.x !== b2.x || b.y !== b2.y || b.width !== b2.width || b.height !== b2.height) {
this.sizer.bounds = b2; this.sizer.bounds = b2;
// Avoids update of visibility in redraw for VML // Avoids update of visibility in redraw for VML
if (this.sizer.node.style.visibility != 'hidden') { if (this.sizer.node.style.visibility !== 'hidden') {
this.sizer.redraw(); this.sizer.redraw();
} }
} }
@ -576,7 +577,7 @@ class mxOutline {
b.width, b.height); b.width, b.height);
// Avoids update of visibility in redraw for VML // Avoids update of visibility in redraw for VML
if (this.sizer.node.style.visibility != 'hidden') { if (this.sizer.node.style.visibility !== 'hidden') {
this.sizer.redraw(); this.sizer.redraw();
} }

2
src/mxgraph/view/mxPrintPreview.js
View File

@ -911,7 +911,7 @@ class mxPrintPreview {
} }
} }
redraw.apply(this, arguments); redraw.apply(this, [state, force, rendering]); // CHECK ME!!!
}; };
} }

9
src/mxgraph/view/mxTemporaryCellStates.js
View File

@ -65,24 +65,23 @@ class mxTemporaryCellStates {
c.setLink(link); c.setLink(link);
} }
oldPaint.apply(this, arguments); oldPaint.apply(this, [c]);
if (link != null) { if (link != null) {
c.setLink(null); c.setLink(null);
} }
}; };
self.oldDoRedrawShape.apply(view.graph.cellRenderer, arguments); self.oldDoRedrawShape.apply(view.graph.cellRenderer, [state]);
state.shape.paint = oldPaint; state.shape.paint = oldPaint;
}; };
} }
// Overrides validateCellState to ignore invisible cells // Overrides validateCellState to ignore invisible cells
view.validateCellState = (cell, resurse) => { view.validateCellState = (cell, recurse) => {
if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell)) { if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell)) {
return self.oldValidateCellState.apply(view, arguments); return self.oldValidateCellState.apply(view, [cell, recurse]);
} }
return null; return null;
}; };

65
src/pages/index.js
View File

@ -1,65 +1,10 @@
import Head from 'next/head' import Head from 'next/head'
import styles from '../styles/Home.module.css' import styles from '../styles/Home.module.css'
import HelloWorld from "./HelloWorld";
export default function Home() { export default function Home() {
return ( return <>
<div className={styles.container}> <HelloWorld />
<Head> </>;
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
)
} }