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

fixed import and init errors

development
mcyph 2021-03-21 21:08:11 +11:00
parent 9e9281fa82
commit 099acfd05b
31 changed files with 523 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -307,8 +307,8 @@ class mxEdgeHandler {
// Creates bends for the non-routed absolute points
// or bends that don't correspond to points
if (this.graph.getSelectionCount() < maxCells ||
maxCells <= 0) {
if (this.graph.getSelectionCount() < this.maxCells ||
this.maxCells <= 0) {
this.bends = this.createBends();
if (this.isVirtualBendsEnabled()) {

13
src/mxgraph/handler/mxGraphHandler.js
View File

@ -7,6 +7,13 @@
import mxClient from "../mxClient";
import mxEvent from "../util/mxEvent";
import mxUtils from "../util/mxUtils";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxGuide from "../util/mxGuide";
import mxPoint from "../util/mxPoint";
import mxConstants from "../util/mxConstants";
import mxDictionary from "../util/mxDictionary";
import mxCellHighlight from "./mxCellHighlight";
import mxRectangle from "../util/mxRectangle";
class mxGraphHandler {
/**
@ -286,13 +293,13 @@ class mxGraphHandler {
this.graph.addListener(mxEvent.REFRESH, this.refreshHandler);
this.keyHandler = (e) => {
if (this.graph.container != null && this.graph.container.style.visibility != 'hidden' &&
if (this.graph.container != null && this.graph.container.style.visibility !== 'hidden' &&
this.first != null && !this.suspended) {
let clone = this.graph.isCloneEvent(e) &&
this.graph.isCellsCloneable() &&
this.isCloneEnabled();
if (clone != this.cloning) {
if (clone !== this.cloning) {
this.cloning = clone;
this.checkPreview();
this.updatePreview();
@ -715,7 +722,7 @@ class mxGraphHandler {
// Makes sure to use either VML or SVG shapes in order to implement
// event-transparency on the background area of the rectangle since
// HTML shapes do not let mouseevents through even when transparent
shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ?
shape.dialect = (this.graph.dialect !== mxConstants.DIALECT_SVG) ?
mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
shape.init(this.graph.getView().getOverlayPane());
shape.pointerEvents = false;

3
src/mxgraph/handler/mxSelectionCellsHandler.js
View File

@ -7,6 +7,7 @@ import mxEventSource from "../util/mxEventSource";
import mxDictionary from "../util/mxDictionary";
import mxEventObject from "../util/mxEventObject";
import mxEvent from "../util/mxEvent";
import mxUtils from "../util/mxUtils";
class mxSelectionCellsHandler extends mxEventSource {
/**
@ -165,7 +166,7 @@ class mxSelectionCellsHandler extends mxEventSource {
let handler = oldHandlers.remove(tmp[i]);
if (handler != null) {
if (handler.state != state) {
if (handler.state !== state) {
handler.destroy();
handler = null;
} else if (!this.isHandlerActive(handler)) {

1
src/mxgraph/handler/mxTooltipHandler.js
View File

@ -3,6 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEvent from "../util/mxEvent";
class mxTooltipHandler {
/**

61
src/mxgraph/handler/mxVertexHandler.js
View File

@ -3,6 +3,13 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxRectangle from "../util/mxRectangle";
import mxConstants from "../util/mxConstants";
import mxEvent from "../util/mxEvent";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxImageShape from "../shape/mxImageShape";
import mxEllipse from "../shape/mxEllipse";
import mxPoint from "../util/mxPoint";
class mxVertexHandler {
/**
@ -197,7 +204,7 @@ class mxVertexHandler {
this.bounds = new mxRectangle(this.selectionBounds.x, this.selectionBounds.y, this.selectionBounds.width, this.selectionBounds.height);
this.selectionBorder = this.createSelectionShape(this.bounds);
// VML dialect required here for event transparency in IE
this.selectionBorder.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
this.selectionBorder.dialect = (this.graph.dialect !== mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
this.selectionBorder.pointerEvents = false;
this.selectionBorder.rotation = Number(this.state.style[mxConstants.STYLE_ROTATION] || '0');
this.selectionBorder.init(this.graph.getView().getOverlayPane());
@ -208,7 +215,7 @@ class mxVertexHandler {
}
// Adds the sizer handles
if (maxCells <= 0 || this.graph.getSelectionCount() < maxCells) {
if (this.maxCells <= 0 || this.graph.getSelectionCount() < this.maxCells) {
let resizable = this.graph.isCellResizable(this.state.cell);
this.sizers = [];
@ -269,7 +276,7 @@ class mxVertexHandler {
*/
isRotationHandleVisible = () => {
return this.graph.isEnabled() && this.rotationEnabled && this.graph.isCellRotatable(this.state.cell) &&
(maxCells <= 0 || this.graph.getSelectionCount() < maxCells);
(this.maxCells <= 0 || this.graph.getSelectionCount() < this.maxCells);
};
/**
@ -278,7 +285,7 @@ class mxVertexHandler {
* Returns true if the aspect ratio if the cell should be maintained.
*/
isConstrainedEvent = (me) => {
return mxEvent.isShiftDown(me.getEvent()) || this.state.style[mxConstants.STYLE_ASPECT] == 'fixed';
return mxEvent.isShiftDown(me.getEvent()) || this.state.style[mxConstants.STYLE_ASPECT] === 'fixed';
};
/**
@ -449,7 +456,7 @@ class mxVertexHandler {
shape.preserveImageAspect = false;
return shape;
} else if (index == mxEvent.ROTATION_HANDLE) {
} else if (index === mxEvent.ROTATION_HANDLE) {
return new mxEllipse(bounds, fillColor || mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR);
} else {
return new mxRectangleShape(bounds, fillColor || mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR);
@ -620,9 +627,9 @@ class mxVertexHandler {
if (this.livePreviewActive) {
this.hideSizers();
if (index == mxEvent.ROTATION_HANDLE) {
if (index === mxEvent.ROTATION_HANDLE) {
this.rotationShape.node.style.display = '';
} else if (index == mxEvent.LABEL_HANDLE) {
} else if (index === mxEvent.LABEL_HANDLE) {
this.labelShape.node.style.display = '';
} else if (this.sizers != null && this.sizers[index] != null) {
this.sizers[index].node.style.display = '';
@ -779,10 +786,10 @@ class mxVertexHandler {
this.customHandles[mxEvent.CUSTOM_HANDLE - this.index].positionChanged();
}
}
} else if (this.index == mxEvent.LABEL_HANDLE) {
} else if (this.index === mxEvent.LABEL_HANDLE) {
this.moveLabel(me);
} else {
if (this.index == mxEvent.ROTATION_HANDLE) {
if (this.index === mxEvent.ROTATION_HANDLE) {
this.rotateVertex(me);
} else {
this.resizeVertex(me);
@ -1142,11 +1149,11 @@ class mxVertexHandler {
this.customHandles[mxEvent.CUSTOM_HANDLE - index].positionChanged();
}
}
} else if (index == mxEvent.ROTATION_HANDLE) {
} else if (index === mxEvent.ROTATION_HANDLE) {
if (this.currentAlpha != null) {
let delta = this.currentAlpha - (this.state.style[mxConstants.STYLE_ROTATION] || 0);
if (delta != 0) {
if (delta !== 0) {
this.rotateCell(this.state.cell, delta);
}
} else {
@ -1219,7 +1226,7 @@ class mxVertexHandler {
* angle - Angle in degrees.
*/
rotateCell = (cell, angle, parent) => {
if (angle != 0) {
if (angle !== 0) {
let model = this.graph.getModel();
if (model.isVertex(cell) || model.isEdge(cell)) {
@ -1260,7 +1267,7 @@ class mxVertexHandler {
*/
reset = () => {
if (this.sizers != null && this.index != null && this.sizers[this.index] != null &&
this.sizers[this.index].node.style.display == 'none') {
this.sizers[this.index].node.style.display === 'none') {
this.sizers[this.index].node.style.display = '';
}
@ -1330,7 +1337,7 @@ class mxVertexHandler {
let geo = this.graph.model.getGeometry(cell);
if (geo != null) {
if (index == mxEvent.LABEL_HANDLE) {
if (index === mxEvent.LABEL_HANDLE) {
let alpha = -mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0');
let cos = Math.cos(alpha);
let sin = Math.sin(alpha);
@ -1353,7 +1360,7 @@ class mxVertexHandler {
} else if (this.unscaledBounds != null) {
let scale = this.graph.view.scale;
if (this.childOffsetX != 0 || this.childOffsetY != 0) {
if (this.childOffsetX !== 0 || this.childOffsetY !== 0) {
this.moveChildren(cell, Math.round(this.childOffsetX / scale), Math.round(this.childOffsetY / scale));
}
@ -1479,7 +1486,7 @@ class mxVertexHandler {
}
}
if (index == 0 || index == 3 || index == 5 /* Left */) {
if (index === 0 || index === 3 || index === 5 /* Left */) {
left += dx;
if (gridEnabled) {
@ -1487,7 +1494,7 @@ class mxVertexHandler {
} else {
left = Math.round(left / scale) * scale;
}
} else if (index == 2 || index == 4 || index == 7 /* Right */) {
} else if (index === 2 || index === 4 || index === 7 /* Right */) {
right += dx;
if (gridEnabled) {
@ -1506,13 +1513,13 @@ class mxVertexHandler {
if (geo != null) {
let aspect = geo.width / geo.height;
if (index == 1 || index == 2 || index == 7 || index == 6) {
if (index === 1 || index === 2 || index === 7 || index === 6) {
width = height * aspect;
} else {
height = width / aspect;
}
if (index == 0) {
if (index === 0) {
left = right - width;
top = bottom - height;
}
@ -1646,7 +1653,7 @@ class mxVertexHandler {
this.horizontalOffset = padding.x;
this.verticalOffset = padding.y;
if (this.horizontalOffset != 0 || this.verticalOffset != 0) {
if (this.horizontalOffset !== 0 || this.verticalOffset !== 0) {
s = new mxRectangle(s.x, s.y, s.width, s.height);
s.x -= this.horizontalOffset / 2;
@ -1790,7 +1797,7 @@ class mxVertexHandler {
* Returns true if the given custom handle is visible.
*/
isCustomHandleVisible = (handle) => {
return !this.graph.isEditing() && this.state.view.graph.getSelectionCount() == 1;
return !this.graph.isEditing() && this.state.view.graph.getSelectionCount() === 1;
};
/**
@ -1827,13 +1834,13 @@ class mxVertexHandler {
if (this.graph.model.isVertex(parent) && visible) {
let b = this.parentHighlight.bounds;
if (pstate != null && (b.x != pstate.x || b.y != pstate.y ||
b.width != pstate.width || b.height != pstate.height)) {
if (pstate != null && (b.x !== pstate.x || b.y !== pstate.y ||
b.width !== pstate.width || b.height !== pstate.height)) {
this.parentHighlight.bounds = mxRectangle.fromRectangle(pstate);
this.parentHighlight.redraw();
}
} else {
if (pstate != null && pstate.parentHighlight == this.parentHighlight) {
if (pstate != null && pstate.parentHighlight === this.parentHighlight) {
pstate.parentHighlight = null;
}
@ -1845,7 +1852,7 @@ class mxVertexHandler {
pstate.parentHighlight == null) {
this.parentHighlight = this.createParentHighlightShape(pstate);
// VML dialect required here for event transparency in IE
this.parentHighlight.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
this.parentHighlight.dialect = (this.graph.dialect !== mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
this.parentHighlight.pointerEvents = false;
this.parentHighlight.rotation = Number(pstate.style[mxConstants.STYLE_ROTATION] || '0');
this.parentHighlight.init(this.graph.getView().getOverlayPane());
@ -1867,7 +1874,7 @@ class mxVertexHandler {
if (this.preview != null) {
this.preview.bounds = this.bounds;
if (this.preview.node.parentNode == this.graph.container) {
if (this.preview.node.parentNode === this.graph.container) {
this.preview.bounds.width = Math.max(0, this.preview.bounds.width - 1);
this.preview.bounds.height = Math.max(0, this.preview.bounds.height - 1);
}
@ -1919,7 +1926,7 @@ class mxVertexHandler {
let parent = this.graph.model.getParent(this.state.cell);
let pstate = this.graph.view.getState(parent);
if (pstate != null && pstate.parentHighlight == this.parentHighlight) {
if (pstate != null && pstate.parentHighlight === this.parentHighlight) {
pstate.parentHighlight = null;
}

9
src/mxgraph/model/mxCell.js
View File

@ -4,6 +4,9 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
class mxCell {
/**
* Variable: id
@ -683,7 +686,7 @@ class mxCell {
let userObject = this.getValue();
return (userObject != null &&
userObject.nodeType == mxConstants.NODETYPE_ELEMENT && userObject.hasAttribute) ?
userObject.nodeType === mxConstants.NODETYPE_ELEMENT && userObject.hasAttribute) ?
userObject.hasAttribute(name) : userObject.getAttribute(name) != null;
};
@ -703,7 +706,7 @@ class mxCell {
let userObject = this.getValue();
let val = (userObject != null &&
userObject.nodeType == mxConstants.NODETYPE_ELEMENT) ?
userObject.nodeType === mxConstants.NODETYPE_ELEMENT) ?
userObject.getAttribute(name) : null;
return (val != null) ? val : defaultValue;
@ -723,7 +726,7 @@ class mxCell {
let userObject = this.getValue();
if (userObject != null &&
userObject.nodeType == mxConstants.NODETYPE_ELEMENT) {
userObject.nodeType === mxConstants.NODETYPE_ELEMENT) {
userObject.setAttribute(name, value);
}
};

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

@ -6,6 +6,7 @@
import mxConstants from "../util/mxConstants";
import mxPolyline from "./mxPolyline";
import mxUtils from "../util/mxUtils";
import mxMarker from "./mxMarker";
class mxConnector extends mxPolyline {
/**

74
src/mxgraph/shape/mxMarker.js
View File

@ -3,42 +3,42 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
let mxMarker =
{
/**
* Class: mxMarker
*
* A static class that implements all markers for VML and SVG using a
* registry. NOTE: The signatures in this class will change.
*
* Variable: markers
*
* Maps from markers names to functions to paint the markers.
*/
markers: [],
import mxConstants from "../util/mxConstants";
/**
* Function: addMarker
*
* Adds a factory method that updates a given endpoint and returns a
* function to paint the marker onto the given canvas.
*/
addMarker: (type, funct) => {
mxMarker.markers[type] = funct;
},
let mxMarker = {
/**
* Class: mxMarker
*
* A static class that implements all markers for VML and SVG using a
* registry. NOTE: The signatures in this class will change.
*
* Variable: markers
*
* Maps from markers names to functions to paint the markers.
*/
markers: [],
/**
* Function: createMarker
*
* Returns a function to paint the given marker.
*/
createMarker: (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
let funct = mxMarker.markers[type];
/**
* Function: addMarker
*
* Adds a factory method that updates a given endpoint and returns a
* function to paint the marker onto the given canvas.
*/
addMarker: (type, funct) => {
mxMarker.markers[type] = funct;
},
return (funct != null) ? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) : null;
}
/**
* Function: createMarker
*
* Returns a function to paint the given marker.
*/
createMarker: (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
let funct = mxMarker.markers[type];
};
return (funct != null) ? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) : null;
}
};
/**
* Adds the classic and block marker factory method.
@ -61,7 +61,7 @@ let mxMarker =
pt.x -= endOffsetX;
pt.y -= endOffsetY;
let f = (type != mxConstants.ARROW_CLASSIC && type != mxConstants.ARROW_CLASSIC_THIN) ? 1 : 3 / 4;
let f = (type !== mxConstants.ARROW_CLASSIC && type !== mxConstants.ARROW_CLASSIC_THIN) ? 1 : 3 / 4;
pe.x += -unitX * f - endOffsetX;
pe.y += -unitY * f - endOffsetY;
@ -70,7 +70,7 @@ let mxMarker =
canvas.moveTo(pt.x, pt.y);
canvas.lineTo(pt.x - unitX - unitY / widthFactor, pt.y - unitY + unitX / widthFactor);
if (type == mxConstants.ARROW_CLASSIC || type == mxConstants.ARROW_CLASSIC_THIN) {
if (type === mxConstants.ARROW_CLASSIC || type === mxConstants.ARROW_CLASSIC_THIN) {
canvas.lineTo(pt.x - unitX * 3 / 4, pt.y - unitY * 3 / 4);
}
@ -148,7 +148,7 @@ let mxMarker =
// only half the strokewidth is processed ). Or 0.9862 for thin diamond.
// Note these values and the tk variable below are dependent, update
// both together (saves trig hard coding it).
let swFactor = (type == mxConstants.ARROW_DIAMOND) ? 0.7071 : 0.9862;
let swFactor = (type === mxConstants.ARROW_DIAMOND) ? 0.7071 : 0.9862;
let endOffsetX = unitX * sw * swFactor;
let endOffsetY = unitY * sw * swFactor;
@ -163,7 +163,7 @@ let mxMarker =
pe.y += -unitY - endOffsetY;
// thickness factor for diamond
let tk = ((type == mxConstants.ARROW_DIAMOND) ? 2 : 3.4);
let tk = ((type === mxConstants.ARROW_DIAMOND) ? 2 : 3.4);
return () => {
canvas.begin();
@ -184,3 +184,5 @@ let mxMarker =
mxMarker.addMarker('diamond', diamond);
mxMarker.addMarker('diamondThin', diamond);
})();
export default mxMarker;

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

@ -5,6 +5,7 @@
*/
import mxShape from "./mxShape";
import mxConstants from "../util/mxConstants";
import mxUtils from "../util/mxUtils";
class mxPolyline extends mxShape {
/**
@ -66,7 +67,7 @@ class mxPolyline extends mxShape {
*
* Paints the line shape.
*/
paintEdgeShape = (c, pts) => {
paintEdgeShape(c, pts) {
let prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke';

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

@ -8,6 +8,7 @@ import mxUtils from "../util/mxUtils";
import mxConstants from "../util/mxConstants";
import mxPoint from "../util/mxPoint";
import mxSvgCanvas2D from "../util/mxSvgCanvas2D";
import mxEvent from "../util/mxEvent";
class mxShape {
/**
@ -352,7 +353,7 @@ class mxShape {
*
* Creates and returns the SVG node(s) to represent this shape.
*/
redraw = () => {
redraw() {
this.updateBoundsFromPoints();
if (this.visible && this.checkBounds()) {
@ -831,7 +832,7 @@ class mxShape {
*
* Sets the state of the canvas for drawing the shape.
*/
configureCanvas = (c, x, y, w, h) => {
configureCanvas(c, x, y, w, h) {
let dash = null;
if (this.style != null) {
@ -1068,7 +1069,7 @@ class mxShape {
*
* Resets all styles.
*/
resetStyles = () => {
resetStyles() {
this.initStyles();
this.spacing = 0;
@ -1123,7 +1124,7 @@ class mxShape {
*
* state - <mxCellState> of the corresponding cell.
*/
apply = (state) => {
apply(state) {
this.state = state;
this.style = state.style;
@ -1222,7 +1223,7 @@ class mxShape {
* Updates the <boundingBox> for this shape using <createBoundingBox> and
* <augmentBoundingBox> and stores the result in <boundingBox>.
*/
updateBoundingBox = () => {
updateBoundingBox() {
// Tries to get bounding box from SVG subsystem
// LATER: Use getBoundingClientRect for fallback in VML
if (this.useSvgBoundingBox && this.node != null && this.node.ownerSVGElement != null) {
@ -1280,7 +1281,7 @@ class mxShape {
*
* Augments the bounding box with the strokewidth and shadow offsets.
*/
augmentBoundingBox = (bbox) => {
augmentBoundingBox(bbox) {
if (this.isShadow) {
bbox.width += Math.ceil(mxConstants.SHADOW_OFFSET_X * this.scale);
bbox.height += Math.ceil(mxConstants.SHADOW_OFFSET_Y * this.scale);

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

@ -247,7 +247,7 @@ class mxText extends mxShape {
let realHtml = mxUtils.isNode(this.value) || this.dialect === mxConstants.DIALECT_STRICTHTML;
// Always renders labels as HTML in VML
let fmt = (realHtml || c instanceof mxVmlCanvas2D) ? 'html' : '';
let fmt = realHtml ? 'html' : '';
let val = this.value;
if (!realHtml && fmt === 'html') {

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

@ -14,92 +14,92 @@ class mxAbstractCanvas2D {
*
* Holds the current state.
*/
mxAbstractCanvas2state = null;
state = null;
/**
* Variable: states
*
* Stack of states.
*/
mxAbstractCanvas2states = null;
states = null;
/**
* Variable: path
*
* Holds the current path as an array.
*/
mxAbstractCanvas2path = null;
path = null;
/**
* Variable: rotateHtml
*
* Switch for rotation of HTML. Default is false.
*/
mxAbstractCanvas2rotateHtml = true;
rotateHtml = true;
/**
* Variable: lastX
*
* Holds the last x coordinate.
*/
mxAbstractCanvas2lastX = 0;
lastX = 0;
/**
* Variable: lastY
*
* Holds the last y coordinate.
*/
mxAbstractCanvas2lastY = 0;
lastY = 0;
/**
* Variable: moveOp
*
* Contains the string used for moving in paths. Default is 'M'.
*/
mxAbstractCanvas2moveOp = 'M';
moveOp = 'M';
/**
* Variable: lineOp
*
* Contains the string used for moving in paths. Default is 'L'.
*/
mxAbstractCanvas2lineOp = 'L';
lineOp = 'L';
/**
* Variable: quadOp
*
* Contains the string used for quadratic paths. Default is 'Q'.
*/
mxAbstractCanvas2quadOp = 'Q';
quadOp = 'Q';
/**
* Variable: curveOp
*
* Contains the string used for bezier curves. Default is 'C'.
*/
mxAbstractCanvas2curveOp = 'C';
curveOp = 'C';
/**
* Variable: closeOp
*
* Holds the operator for closing curves. Default is 'Z'.
*/
mxAbstractCanvas2closeOp = 'Z';
closeOp = 'Z';
/**
* Variable: pointerEvents
*
* Boolean value that specifies if events should be handled. Default is false.
*/
mxAbstractCanvas2pointerEvents = false;
pointerEvents = false;
/**
* Class: mxAbstractCanvas2D
* Class: D
*
* Base class for all canvases. A description of the public API is available in <mxXmlCanvas2D>.
* All color values of <mxConstants.NONE> will be converted to null in the state.
*
* Constructor: mxAbstractCanvas2D
* Constructor: D
*
* Constructs a new abstract canvas.
*/
@ -109,8 +109,8 @@ class mxAbstractCanvas2D {
*
* Holds the <mxUrlConverter> to convert image URLs.
*/
this.converter = this.mxAbstractCanvas2createUrlConverter();
this.mxAbstractCanvas2reset();
this.converter = this.createUrlConverter();
this.reset();
};
/**
@ -118,7 +118,7 @@ class mxAbstractCanvas2D {
*
* Create a new <mxUrlConverter> and returns it.
*/
mxAbstractCanvas2createUrlConverter = () => {
createUrlConverter = () => {
return new mxUrlConverter();
};
@ -127,8 +127,8 @@ class mxAbstractCanvas2D {
*
* Resets the state of this canvas.
*/
mxAbstractCanvas2reset = () => {
this.state = this.mxAbstractCanvas2createState();
reset() {
this.state = this.createState();
this.states = [];
};
@ -137,7 +137,7 @@ class mxAbstractCanvas2D {
*
* Creates the state of the this canvas.
*/
mxAbstractCanvas2createState = () => {
createState = () => {
return {
dx: 0,
dy: 0,
@ -180,7 +180,7 @@ class mxAbstractCanvas2D {
*
* Rounds all numbers to integers.
*/
mxAbstractCanvas2format = (value) => {
format = (value) => {
return Math.round(parseFloat(value));
};
@ -189,7 +189,7 @@ class mxAbstractCanvas2D {
*
* Adds the given operation to the path.
*/
mxAbstractCanvas2addOp = (...args) => {
addOp = (...args) => {
if (this.path != null) {
this.path.push(args[0]);
@ -200,8 +200,8 @@ class mxAbstractCanvas2D {
this.lastX = args[i - 1];
this.lastY = args[i];
this.path.push(this.mxAbstractCanvas2format((this.lastX + s.dx) * s.scale));
this.path.push(this.mxAbstractCanvas2format((this.lastY + s.dy) * s.scale));
this.path.push(this.format((this.lastX + s.dx) * s.scale));
this.path.push(this.format((this.lastY + s.dy) * s.scale));
}
}
}
@ -212,7 +212,7 @@ class mxAbstractCanvas2D {
*
* Rotates the given point and returns the result as an <mxPoint>.
*/
mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy) => {
rotatePoint = (x, y, theta, cx, cy) => {
let rad = theta * (Math.PI / 180);
return mxUtils.getRotatedPoint(new mxPoint(x, y), Math.cos(rad),
@ -224,7 +224,7 @@ class mxAbstractCanvas2D {
*
* Saves the current state.
*/
mxAbstractCanvas2save = () => {
save = () => {
this.states.push(this.state);
this.state = mxUtils.clone(this.state);
};
@ -234,7 +234,7 @@ class mxAbstractCanvas2D {
*
* Restores the current state.
*/
mxAbstractCanvas2restore = () => {
restore = () => {
if (this.states.length > 0) {
this.state = this.states.pop();
}
@ -245,7 +245,7 @@ class mxAbstractCanvas2D {
*
* Sets the current link. Hook for subclassers.
*/
mxAbstractCanvas2setLink = (link) => {
setLink = (link) => {
// nop
};
@ -254,7 +254,7 @@ class mxAbstractCanvas2D {
*
* Scales the current state.
*/
mxAbstractCanvas2scale = (value) => {
scale = (value) => {
this.state.scale *= value;
this.state.strokeWidth *= value;
};
@ -264,7 +264,7 @@ class mxAbstractCanvas2D {
*
* Translates the current state.
*/
mxAbstractCanvas2translate = (dx, dy) => {
translate = (dx, dy) => {
this.state.dx += dx;
this.state.dy += dy;
};
@ -274,7 +274,7 @@ class mxAbstractCanvas2D {
*
* Rotates the current state.
*/
mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
rotate = (theta, flipH, flipV, cx, cy) => {
// nop
};
@ -283,7 +283,7 @@ class mxAbstractCanvas2D {
*
* Sets the current alpha.
*/
mxAbstractCanvas2setAlpha = (value) => {
setAlpha = (value) => {
this.state.alpha = value;
};
@ -292,7 +292,7 @@ class mxAbstractCanvas2D {
*
* Sets the current solid fill alpha.
*/
mxAbstractCanvas2setFillAlpha = (value) => {
setFillAlpha = (value) => {
this.state.fillAlpha = value;
};
@ -301,7 +301,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke alpha.
*/
mxAbstractCanvas2setStrokeAlpha = (value) => {
setStrokeAlpha = (value) => {
this.state.strokeAlpha = value;
};
@ -310,7 +310,7 @@ class mxAbstractCanvas2D {
*
* Sets the current fill color.
*/
mxAbstractCanvas2setFillColor = (value) => {
setFillColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -324,7 +324,7 @@ class mxAbstractCanvas2D {
*
* Sets the current gradient.
*/
mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
let s = this.state;
s.fillColor = color1;
s.gradientFillAlpha = (alpha1 != null) ? alpha1 : 1;
@ -338,7 +338,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke color.
*/
mxAbstractCanvas2setStrokeColor = (value) => {
setStrokeColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -351,7 +351,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke width.
*/
mxAbstractCanvas2setStrokeWidth = (value) => {
setStrokeWidth = (value) => {
this.state.strokeWidth = value;
};
@ -360,7 +360,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables dashed lines.
*/
mxAbstractCanvas2setDashed = (value, fixDash) => {
setDashed = (value, fixDash) => {
this.state.dashed = value;
this.state.fixDash = fixDash;
};
@ -370,7 +370,7 @@ class mxAbstractCanvas2D {
*
* Sets the current dash pattern.
*/
mxAbstractCanvas2setDashPattern = (value) => {
setDashPattern = (value) => {
this.state.dashPattern = value;
};
@ -379,7 +379,7 @@ class mxAbstractCanvas2D {
*
* Sets the current line cap.
*/
mxAbstractCanvas2setLineCap = (value) => {
setLineCap = (value) => {
this.state.lineCap = value;
};
@ -388,7 +388,7 @@ class mxAbstractCanvas2D {
*
* Sets the current line join.
*/
mxAbstractCanvas2setLineJoin = (value) => {
setLineJoin = (value) => {
this.state.lineJoin = value;
};
@ -397,7 +397,7 @@ class mxAbstractCanvas2D {
*
* Sets the current miter limit.
*/
mxAbstractCanvas2setMiterLimit = (value) => {
setMiterLimit = (value) => {
this.state.miterLimit = value;
};
@ -406,7 +406,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font color.
*/
mxAbstractCanvas2setFontColor = (value) => {
setFontColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -419,7 +419,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font background color.
*/
mxAbstractCanvas2setFontBackgroundColor = (value) => {
setFontBackgroundColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -432,7 +432,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font border color.
*/
mxAbstractCanvas2setFontBorderColor = (value) => {
setFontBorderColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -445,7 +445,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font size.
*/
mxAbstractCanvas2setFontSize = (value) => {
setFontSize = (value) => {
this.state.fontSize = parseFloat(value);
};
@ -454,7 +454,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font family.
*/
mxAbstractCanvas2setFontFamily = (value) => {
setFontFamily = (value) => {
this.state.fontFamily = value;
};
@ -463,7 +463,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font style.
*/
mxAbstractCanvas2setFontStyle = (value) => {
setFontStyle = (value) => {
if (value == null) {
value = 0;
}
@ -476,7 +476,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadow = (enabled) => {
setShadow = (enabled) => {
this.state.shadow = enabled;
};
@ -485,7 +485,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadowColor = (value) => {
setShadowColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -498,7 +498,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadowAlpha = (value) => {
setShadowAlpha = (value) => {
this.state.shadowAlpha = value;
};
@ -507,7 +507,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
mxAbstractCanvas2setShadowOffset = (dx, dy) => {
setShadowOffset = (dx, dy) => {
this.state.shadowDx = dx;
this.state.shadowDy = dy;
};
@ -517,7 +517,7 @@ class mxAbstractCanvas2D {
*
* Starts a new path.
*/
mxAbstractCanvas2begin = () => {
begin() {
this.lastX = 0;
this.lastY = 0;
this.path = [];
@ -528,8 +528,8 @@ class mxAbstractCanvas2D {
*
* Moves the current path the given coordinates.
*/
mxAbstractCanvas2moveTo = (x, y) => {
this.mxAbstractCanvas2addOp(this.mxAbstractCanvas2moveOp, x, y);
moveTo = (x, y) => {
this.addOp(this.moveOp, x, y);
};
/**
@ -537,8 +537,8 @@ class mxAbstractCanvas2D {
*
* Draws a line to the given coordinates. Uses moveTo with the op argument.
*/
mxAbstractCanvas2lineTo = (x, y) => {
this.mxAbstractCanvas2addOp(this.mxAbstractCanvas2lineOp, x, y);
lineTo = (x, y) => {
this.addOp(this.lineOp, x, y);
};
/**
@ -546,8 +546,8 @@ class mxAbstractCanvas2D {
*
* Adds a quadratic curve to the current path.
*/
mxAbstractCanvas2quadTo = (x1, y1, x2, y2) => {
this.mxAbstractCanvas2addOp(this.mxAbstractCanvas2quadOp, x1, y1, x2, y2);
quadTo = (x1, y1, x2, y2) => {
this.addOp(this.quadOp, x1, y1, x2, y2);
};
/**
@ -555,8 +555,8 @@ class mxAbstractCanvas2D {
*
* Adds a bezier curve to the current path.
*/
mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3) => {
this.mxAbstractCanvas2addOp(this.mxAbstractCanvas2curveOp, x1, y1, x2, y2, x3, y3);
curveTo = (x1, y1, x2, y2, x3, y3) => {
this.addOp(this.curveOp, x1, y1, x2, y2, x3, y3);
};
/**
@ -565,12 +565,12 @@ class mxAbstractCanvas2D {
* Adds the given arc to the current path. This is a synthetic operation that
* is broken down into curves.
*/
mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y) => {
arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y) => {
let curves = mxUtils.arcToCurves(this.lastX, this.lastY, rx, ry, angle, largeArcFlag, sweepFlag, x, y);
if (curves != null) {
for (let i = 0; i < curves.length; i += 6) {
this.mxAbstractCanvas2curveTo(curves[i], curves[i + 1], curves[i + 2],
this.curveTo(curves[i], curves[i + 1], curves[i + 2],
curves[i + 3], curves[i + 4], curves[i + 5]);
}
}
@ -581,8 +581,8 @@ class mxAbstractCanvas2D {
*
* Closes the current path.
*/
mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3) => {
this.mxAbstractCanvas2addOp(this.mxAbstractCanvas2closeOp);
close = (x1, y1, x2, y2, x3, y3) => {
this.addOp(this.closeOp);
};
/**
@ -590,7 +590,7 @@ class mxAbstractCanvas2D {
*
* Empty implementation for backwards compatibility. This will be removed.
*/
mxAbstractCanvas2end = () => {
end = () => {
};
}

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

@ -58,7 +58,7 @@ class mxAnimation extends mxEventSource {
*/
startAnimation = () => {
if (this.thread == null) {
this.thread = window.setInterval(mxUtils.bind(this, this.updateAnimation), this.delay);
this.thread = window.setInterval(this.updateAnimation.bind(this), this.delay);
}
};

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

@ -100,11 +100,11 @@ class mxAutoSaveManager extends mxEventSource {
super();
// Notifies the manager of a change
this.changeHandler = mxUtils.bind(this, (sender, evt) => {
this.changeHandler = (sender, evt) => {
if (this.isEnabled()) {
this.graphModelChanged(evt.getProperty('edit').changes);
}
});
};
this.setGraph(graph);
};

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

@ -162,9 +162,9 @@ class mxDragSource {
this.dropHandler = dropHandler;
// Handles a drag gesture on the element
mxEvent.addGestureListeners(element, mxUtils.bind(this, (evt) => {
mxEvent.addGestureListeners(element, (evt) => {
this.mouseDown(evt);
}));
});
// Prevents native drag and drop
mxEvent.addListener(element, 'dragstart', (evt) => {
@ -324,8 +324,8 @@ class mxDragSource {
mouseDown = (evt) => {
if (this.enabled && !mxEvent.isConsumed(evt) && this.mouseMoveHandler == null) {
this.startDrag(evt);
this.mouseMoveHandler = mxUtils.bind(this, this.mouseMove);
this.mouseUpHandler = mxUtils.bind(this, this.mouseUp);
this.mouseMoveHandler = this.mouseMove.bind(this);
this.mouseUpHandler = this.mouseUp.bind(this);
mxEvent.addGestureListeners(document, null, this.mouseMoveHandler, this.mouseUpHandler);
if (mxClient.IS_TOUCH && !mxEvent.isMouseEvent(evt)) {

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

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

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

@ -3,6 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEvent from "./mxEvent";
class mxMouseEvent {
/**

16
src/mxgraph/util/mxPanningManager.js
View File

@ -57,30 +57,30 @@ class mxPanningManager {
},
mouseMove: (sender, me) => {
},
mouseUp: mxUtils.bind(this, (sender, me) => {
mouseUp: (sender, me) => {
if (this.active) {
this.stop();
}
})
}
};
graph.addMouseListener(this.mouseListener);
this.mouseUpListener = mxUtils.bind(this, () => {
this.mouseUpListener = () => {
if (this.active) {
this.stop();
}
});
};
// Stops scrolling on every mouseup anywhere in the document
mxEvent.addListener(document, 'mouseup', this.mouseUpListener);
let createThread = mxUtils.bind(this, () => {
let createThread = () => {
this.scrollbars = mxUtils.hasScrollbars(graph.container);
this.scrollLeft = graph.container.scrollLeft;
this.scrollTop = graph.container.scrollTop;
return window.setInterval(mxUtils.bind(this, () => {
return window.setInterval(() => {
this.tdx -= this.dx;
this.tdy -= this.dy;
@ -95,8 +95,8 @@ class mxPanningManager {
} else {
graph.panGraph(this.getDx(), this.getDy());
}
}), this.delay);
});
}, this.delay);
};
this.isActive = () => {
return active;

16
src/mxgraph/util/mxPopupMenu.js
View File

@ -243,7 +243,7 @@ class mxPopupMenu extends mxEventSource {
let currentSelection = null;
mxEvent.addGestureListeners(tr,
mxUtils.bind(this, (evt) => {
(evt) => {
this.eventReceiver = tr;
if (parent.activeRow != tr && parent.activeRow != parent) {
@ -258,8 +258,8 @@ class mxPopupMenu extends mxEventSource {
}
mxEvent.consume(evt);
}),
mxUtils.bind(this, (evt) => {
},
(evt) => {
if (parent.activeRow != tr && parent.activeRow != parent) {
if (parent.activeRow != null && parent.activeRow.div.parentNode != null) {
this.hideSubmenu(parent);
@ -275,8 +275,8 @@ class mxPopupMenu extends mxEventSource {
if (!noHover) {
tr.className = 'mxPopupMenuItemHover';
}
}),
mxUtils.bind(this, (evt) => {
},
(evt) => {
// EventReceiver avoids clicks on a submenu item
// which has just been shown in the mousedown
if (this.eventReceiver == tr) {
@ -303,15 +303,15 @@ class mxPopupMenu extends mxEventSource {
this.eventReceiver = null;
mxEvent.consume(evt);
})
}
);
// Resets hover style because TR in IE doesn't have hover
if (!noHover) {
mxEvent.addListener(tr, 'mouseout',
mxUtils.bind(this, (evt) => {
(evt) => {
tr.className = 'mxPopupMenuItem';
})
}
);
}
}

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

@ -164,7 +164,7 @@ class mxRectangle extends mxPoint {
*
* Returns true if the given object equals this rectangle.
*/
equals = (obj) => {
equals(obj) {
return obj != null && obj.x == this.x && obj.y == this.y &&
obj.width == this.width && obj.height == this.height;
};

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

@ -5,31 +5,18 @@
*/
import mxUtils from "./mxUtils";
import mxClient from "../mxClient";
import mxConstants from "./mxConstants";
import mxRectangle from "./mxRectangle";
import mxAbstractCanvas2D from "./mxAbstractCanvas2D";
/**
* Capability check for DOM parser and checks if base tag is used.
*/
/*
let mxSvgCanvas2useDomParser = typeof DOMParser === 'function' && typeof XMLSerializer === 'function';
if (mxSvgCanvas2useDomParser) {
// Checks using a generic test text if the parsing actually works. This is a workaround
// for older browsers where the capability check returns true but the parsing fails.
try {
let doc = new DOMParser().parseFromString('test text', 'text/html');
mxSvgCanvas2useDomParser = doc != null;
} catch (e) {
mxSvgCanvas2useDomParser = false;
}
}
// Activates workaround for gradient ID resolution if base tag is used.
let mxSvgCanvas2useAbsoluteIds = !mxClient.IS_CHROMEAPP &&
!mxClient.IS_EDGE && document.getElementsByTagName('base').length > 0;
*/
let useAbsoluteIds = (
typeof DOMParser === 'function' &&
!mxClient.IS_CHROMEAPP &&
!mxClient.IS_EDGE &&
document.getElementsByTagName('base').length > 0
);
class mxSvgCanvas2D extends mxAbstractCanvas2D {
/**
@ -37,7 +24,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Holds the current DOM node.
*/
mxSvgCanvas2node = null;
node = null;
/**
* Variable: matchHtmlAlignment
@ -45,21 +32,21 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Specifies if plain text output should match the vertical HTML alignment.
* Defaul is true.
*/
mxSvgCanvas2matchHtmlAlignment = true;
matchHtmlAlignment = true;
/**
* Variable: textEnabled
*
* Specifies if text output should be enabled. Default is true.
*/
mxSvgCanvas2textEnabled = true;
textEnabled = true;
/**
* Variable: foEnabled
*
* Specifies if use of foreignObject for HTML markup is allowed. Default is true.
*/
mxSvgCanvas2foEnabled = true;
foEnabled = true;
/**
* Variable: foAltText
@ -68,63 +55,63 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* documents. Default is '[Object]'. If this is set to null then no fallback
* text is added to the exported document.
*/
mxSvgCanvas2foAltText = '[Object]';
foAltText = '[Object]';
/**
* Variable: foOffset
*
* Offset to be used for foreignObjects.
*/
mxSvgCanvas2foOffset = 0;
foOffset = 0;
/**
* Variable: textOffset
*
* Offset to be used for text elements.
*/
mxSvgCanvas2textOffset = 0;
textOffset = 0;
/**
* Variable: imageOffset
*
* Offset to be used for image elements.
*/
mxSvgCanvas2imageOffset = 0;
imageOffset = 0;
/**
* Variable: strokeTolerance
*
* Adds transparent paths for strokes.
*/
mxSvgCanvas2strokeTolerance = 0;
strokeTolerance = 0;
/**
* Variable: minStrokeWidth
*
* Minimum stroke width for output.
*/
mxSvgCanvas2minStrokeWidth = 1;
minStrokeWidth = 1;
/**
* Variable: refCount
*
* Local counter for references in SVG export.
*/
mxSvgCanvas2refCount = 0;
refCount = 0;
/**
* Variable: lineHeightCorrection
*
* Correction factor for <mxConstants.LINE_HEIGHT> in HTML output. Default is 1.
*/
mxSvgCanvas2lineHeightCorrection = 1;
lineHeightCorrection = 1;
/**
* Variable: pointerEventsValue
*
* Default value for active pointer events. Default is all.
*/
mxSvgCanvas2pointerEventsValue = 'all';
pointerEventsValue = 'all';
/**
* Variable: fontMetricsPadding
@ -132,7 +119,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Padding to be added for text that is not wrapped to account for differences
* in font metrics on different platforms in pixels. Default is 10.
*/
mxSvgCanvas2fontMetricsPadding = 10;
fontMetricsPadding = 10;
/**
* Variable: cacheOffsetSize
@ -140,10 +127,10 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Specifies if offsetWidth and offsetHeight should be cached. Default is true.
* This is used to speed up repaint of text in <updateText>.
*/
mxSvgCanvas2cacheOffsetSize = true;
cacheOffsetSize = true;
/**
* Class: mxSvgCanvas2D
* Class: D
*
* Extends <mxAbstractCanvas2D> to implement a canvas for SVG. This canvas writes all
* calls as SVG output to the given SVG root node.
@ -170,7 +157,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* svgDoc.appendChild(root);
*
* let svgCanvas = new mxSvgCanvas2D(root);
* let svgCanvas = new D(root);
* (end)
*
* A description of the public API is available in <mxXmlCanvas2D>.
@ -183,7 +170,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Or set the respective attribute in the SVG element directly.
*
* Constructor: mxSvgCanvas2D
* Constructor: D
*
* Constructs a new SVG canvas.
*
@ -228,11 +215,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let svg = null;
// Adds optional defs section for export
if (root.ownerDocument != document) {
if (root.ownerDocument !== document) {
let node = root;
// Finds owner SVG element in XML DOM
while (node != null && node.nodeName != 'svg') {
while (node != null && node.nodeName !== 'svg') {
node = node.parentNode;
}
@ -269,8 +256,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Updates existing DOM nodes for text rendering.
*/
static createCss = (w, h, align, valign, wrap, overflow, clip, bg, border, flex, block, s, callback) => {
let item = 'box-sizing: border-box; font-size: 0; text-align: ' + ((align == mxConstants.ALIGN_LEFT) ? 'left' :
((align == mxConstants.ALIGN_RIGHT) ? 'right' : 'center')) + '; ';
let item = 'box-sizing: border-box; font-size: 0; text-align: ' + ((align === mxConstants.ALIGN_LEFT) ? 'left' :
((align === mxConstants.ALIGN_RIGHT) ? 'right' : 'center')) + '; ';
let pt = mxUtils.getAlignmentAsPoint(align, valign);
let ofl = 'overflow: hidden; ';
let fw = 'width: 1px; ';
@ -282,12 +269,12 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
fw = 'width: ' + Math.round(w) + 'px; ';
item += 'max-height: ' + Math.round(h) + 'px; ';
dy = 0;
} else if (overflow == 'fill') {
} else if (overflow === 'fill') {
fw = 'width: ' + Math.round(w) + 'px; ';
fh = 'height: ' + Math.round(h) + 'px; ';
block += 'width: 100%; height: 100%; ';
item += fw + fh;
} else if (overflow == 'width') {
} else if (overflow === 'width') {
fw = 'width: ' + Math.round(w) + 'px; ';
block += 'width: 100%; ';
item += fw;
@ -321,7 +308,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
block += 'white-space: normal; word-wrap: ' + mxConstants.WORD_WRAP + '; ';
fw = 'width: ' + Math.round(w) + 'px; ';
if (ofl != '' && overflow != 'fill') {
if (ofl != '' && overflow !== 'fill') {
dy = 0;
}
} else {
@ -340,7 +327,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Rounds all numbers to 2 decimal points.
*/
mxSvgCanvas2format = (value) => {
format = (value) => {
return parseFloat(parseFloat(value).toFixed(2));
};
@ -352,7 +339,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* workaround for the fact that window.location.search is empty if there is
* no search string behind the question mark.
*/
mxSvgCanvas2getBaseUrl = () => {
getBaseUrl = () => {
let href = window.location.href;
let hash = href.lastIndexOf('#');
@ -368,8 +355,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Returns any offsets for rendering pixels.
*/
mxSvgCanvas2reset = () => {
this.mxAbstractCanvas2reset();
reset = () => {
super.reset();
this.gradients = [];
};
@ -378,7 +365,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates the optional style section.
*/
mxSvgCanvas2createStyle = (x) => {
createStyle = (x) => {
let style = this.createElement('style');
style.setAttribute('type', 'text/css');
mxUtils.write(style, 'svg{font-family:' + mxConstants.DEFAULT_FONTFAMILY +
@ -393,7 +380,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2createElement = (tagName, namespace) => {
createElement = (tagName, namespace) => {
if (this.root.ownerDocument.createElementNS != null) {
return this.root.ownerDocument.createElementNS(namespace || mxConstants.NS_SVG, tagName);
} else {
@ -412,7 +399,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Returns the alternate text string for the given foreignObject.
*/
mxSvgCanvas2getAlternateText = (fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation) => {
getAlternateText = (fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation) => {
return (str != null) ? this.foAltText : null;
};
@ -421,7 +408,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Returns the alternate content for the given foreignObject.
*/
mxSvgCanvas2createAlternateContent = (fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation) => {
createAlternateContent = (fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation) => {
let text = this.getAlternateText(fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation);
let s = this.state;
@ -444,7 +431,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
alt.setAttribute('text-anchor', anchor);
}
if ((s.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) {
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
alt.setAttribute('font-weight', 'bold');
}
@ -479,7 +466,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2createGradientId = (start, end, alpha1, alpha2, direction) => {
createGradientId = (start, end, alpha1, alpha2, direction) => {
// Removes illegal characters from gradient ID
if (start.charAt(0) === '#') {
start = start.substring(1);
@ -497,7 +484,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
// Wrong gradient directions possible?
let dir = null;
if (direction == null || direction == mxConstants.DIRECTION_SOUTH) {
if (direction == null || direction === mxConstants.DIRECTION_SOUTH) {
dir = 's';
} else if (direction === mxConstants.DIRECTION_EAST) {
dir = 'e';
@ -521,7 +508,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2getSvgGradient = (start, end, alpha1, alpha2, direction) => {
getSvgGradient = (start, end, alpha1, alpha2, direction) => {
let id = this.createGradientId(start, end, alpha1, alpha2, direction);
let gradient = this.gradients[id];
@ -565,7 +552,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates the given SVG gradient.
*/
mxSvgCanvas2createSvgGradient = (start, end, alpha1, alpha2, direction) => {
createSvgGradient = (start, end, alpha1, alpha2, direction) => {
let gradient = this.createElement('linearGradient');
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '0%');
@ -604,7 +591,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2addNode = (filled, stroked) => {
addNode = (filled, stroked) => {
let node = this.node;
let s = this.state;
@ -661,9 +648,9 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
// Removes invisible nodes from output if they don't handle events
if ((node.nodeName != 'rect' && node.nodeName != 'path' && node.nodeName != 'ellipse') ||
(node.getAttribute('fill') != 'none' && node.getAttribute('fill') != 'transparent') ||
node.getAttribute('stroke') != 'none' || node.getAttribute('pointer-events') != 'none') {
if ((node.nodeName !== 'rect' && node.nodeName !== 'path' && node.nodeName !== 'ellipse') ||
(node.getAttribute('fill') !== 'none' && node.getAttribute('fill') !== 'transparent') ||
node.getAttribute('stroke') !== 'none' || node.getAttribute('pointer-events') !== 'none') {
// LATER: Update existing DOM for performance
this.root.appendChild(node);
}
@ -677,7 +664,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Transfers the stroke attributes from <state> to <node>.
*/
mxSvgCanvas2updateFill = () => {
updateFill = () => {
let s = this.state;
if (s.alpha < 1 || s.fillAlpha < 1) {
@ -689,7 +676,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let id = this.getSvgGradient(String(s.fillColor), String(s.gradientColor),
s.gradientFillAlpha, s.gradientAlpha, s.gradientDirection);
if (this.root.ownerDocument === document && this.useAbsoluteIds) {
if (this.root.ownerDocument === document && useAbsoluteIds) {
// Workaround for no fill with base tag in page (escape brackets)
let base = this.getBaseUrl().replace(/([\(\)])/g, '\\$1');
this.node.setAttribute('fill', 'url(' + base + '#' + id + ')');
@ -707,7 +694,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Returns the current stroke width (>= 1), ie. max(1, this.format(this.state.strokeWidth * this.state.scale)).
*/
mxSvgCanvas2getCurrentStrokeWidth = () => {
getCurrentStrokeWidth = () => {
return Math.max(this.minStrokeWidth, Math.max(0.01, this.format(this.state.strokeWidth * this.state.scale)));
};
@ -716,7 +703,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Transfers the stroke attributes from <state> to <node>.
*/
mxSvgCanvas2updateStroke = () => {
updateStroke = () => {
let s = this.state;
this.node.setAttribute('stroke', String(s.strokeColor).toLowerCase());
@ -746,7 +733,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Transfers the stroke attributes from <state> to <node>.
*/
mxSvgCanvas2updateStrokeAttributes = () => {
updateStrokeAttributes = () => {
let s = this.state;
// Linejoin miter is default in SVG
@ -779,7 +766,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates the SVG dash pattern for the given state.
*/
mxSvgCanvas2createDashPattern = (scale) => {
createDashPattern = (scale) => {
let pat = [];
if (typeof (this.state.dashPattern) === 'string') {
@ -800,7 +787,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates a hit detection tolerance shape for the given node.
*/
mxSvgCanvas2createTolerance = (node) => {
createTolerance = (node) => {
let tol = node.cloneNode(true);
let sw = parseFloat(tol.getAttribute('stroke-width') || 1) + this.strokeTolerance;
tol.setAttribute('pointer-events', 'stroke');
@ -817,7 +804,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates a shadow for the given node.
*/
mxSvgCanvas2createShadow = (node) => {
createShadow = (node) => {
let shadow = node.cloneNode(true);
let s = this.state;
@ -842,7 +829,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Experimental implementation for hyperlinks.
*/
mxSvgCanvas2setLink = (link) => {
setLink = (link) => {
if (link == null) {
this.root = this.originalRoot;
} else {
@ -868,7 +855,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Sets the rotation of the canvas. Note that rotation cannot be concatenated.
*/
mxSvgCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
rotate = (theta, flipH, flipV, cx, cy) => {
if (theta !== 0 || flipH || flipV) {
let s = this.state;
cx += s.dx;
@ -914,8 +901,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Extends superclass to create path.
*/
mxSvgCanvas2begin = () => {
this.mxAbstractCanvas2begin();
begin = () => {
super.begin();
this.node = this.createElement('path');
};
@ -924,7 +911,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2rect = (x, y, w, h) => {
rect = (x, y, w, h) => {
let s = this.state;
let n = this.createElement('rect');
n.setAttribute('x', this.format((x + s.dx) * s.scale));
@ -940,7 +927,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2roundrect = (x, y, w, h, dx, dy) => {
roundrect = (x, y, w, h, dx, dy) => {
this.rect(x, y, w, h);
if (dx > 0) {
@ -957,7 +944,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2ellipse = (x, y, w, h) => {
ellipse = (x, y, w, h) => {
let s = this.state;
let n = this.createElement('ellipse');
// No rounding for consistent output with 1.x
@ -973,7 +960,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2image = (x, y, w, h, src, aspect, flipH, flipV) => {
image = (x, y, w, h, src, aspect, flipH, flipV) => {
src = this.converter.convert(src);
// LATER: Add option for embedding images as base64.
@ -1044,46 +1031,20 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Converts the given HTML string to XHTML.
*/
mxSvgCanvas2convertHtml = (val) => {
if (this.useDomParser) {
let doc = new DOMParser().parseFromString(val, 'text/html');
convertHtml = (val) => {
let doc = new DOMParser().parseFromString(val, 'text/html');
if (doc != null) {
val = new XMLSerializer().serializeToString(doc.body);
if (doc != null) {
val = new XMLSerializer().serializeToString(doc.body);
// Extracts body content from DOM
if (val.substring(0, 5) == '<body') {
val = val.substring(val.indexOf('>', 5) + 1);
}
if (val.substring(val.length - 7, val.length) == '</body>') {
val = val.substring(0, val.length - 7);
}
}
} else if (document.implementation != null && document.implementation.createDocument != null) {
let xd = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
let xb = xd.createElement('body');
xd.documentElement.appendChild(xb);
let div = document.createElement('div');
div.innerHTML = val;
let child = div.firstChild;
while (child != null) {
let next = child.nextSibling;
xb.appendChild(xd.adoptNode(child));
child = next;
// Extracts body content from DOM
if (val.substring(0, 5) === '<body') {
val = val.substring(val.indexOf('>', 5) + 1);
}
return xb.innerHTML;
} else {
let ta = document.createElement('textarea');
// Handles special HTML entities < and > and double escaping
// and converts unclosed br, hr and img tags to XHTML
// LATER: Convert all unclosed tags
ta.innerHTML = val.replace(/&amp;/g, '&amp;amp;').replace(/&#60;/g, '&amp;lt;').replace(/&#62;/g, '&amp;gt;').replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
val = ta.value.replace(/&/g, '&amp;').replace(/&amp;lt;/g, '&lt;').replace(/&amp;gt;/g, '&gt;').replace(/&amp;amp;/g, '&amp;').replace(/<br>/g, '<br />').replace(/<hr>/g, '<hr />').replace(/(<img[^>]+)>/gm, "$1 />");
if (val.substring(val.length - 7, val.length) === '</body>') {
val = val.substring(0, val.length - 7);
}
}
return val;
@ -1094,7 +1055,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2createDiv = (str) => {
createDiv = (str) => {
let val = str;
if (!mxUtils.isNode(val)) {
@ -1109,7 +1070,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
var div3 = div2.cloneNode(false);
// Creates a copy for export
if (this.root.ownerDocument != document) {
if (this.root.ownerDocument !== document) {
div2.appendChild(val.cloneNode(true));
} else {
div2.appendChild(val);
@ -1137,7 +1098,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
/**
* Updates existing DOM nodes for text rendering. LATER: Merge common parts with text function below.
*/
mxSvgCanvas2updateText = (x, y, w, h, align, valign, wrap, overflow, clip, rotation, node) => {
updateText = (x, y, w, h, align, valign, wrap, overflow, clip, rotation, node) => {
if (node != null && node.firstChild != null && node.firstChild.firstChild != null) {
this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, node.firstChild);
}
@ -1148,7 +1109,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates a foreignObject for the given string and adds it to the given root.
*/
mxSvgCanvas2addForeignObject = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir, div, root) => {
addForeignObject = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir, div, root) => {
let group = this.createElement('g');
let fo = this.createElement('foreignObject');
@ -1157,7 +1118,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
fo.setAttribute('pointer-events', 'none');
// Import needed for older versions of IE
if (div.ownerDocument != document) {
if (div.ownerDocument !== document) {
div = mxUtils.importNodeImplementation(fo.ownerDocument, div, true);
}
@ -1167,7 +1128,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, group);
// Alternate content if foreignObject not supported
if (this.root.ownerDocument != document) {
if (this.root.ownerDocument !== document) {
let alt = this.createAlternateContent(fo, x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation);
if (alt != null) {
@ -1185,18 +1146,18 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
/**
* Updates existing DOM nodes for text rendering.
*/
mxSvgCanvas2updateTextNodes = (x, y, w, h, align, valign, wrap, overflow, clip, rotation, g) => {
updateTextNodes = (x, y, w, h, align, valign, wrap, overflow, clip, rotation, g) => {
let s = this.state.scale;
mxSvgCanvas2D.createCss(w + 2, h, align, valign, wrap, overflow, clip,
D.createCss(w + 2, h, align, valign, wrap, overflow, clip,
(this.state.fontBackgroundColor != null) ? this.state.fontBackgroundColor : null,
(this.state.fontBorderColor != null) ? this.state.fontBorderColor : null,
'display: flex; align-items: unsafe ' +
((valign == mxConstants.ALIGN_TOP) ? 'flex-start' :
((valign == mxConstants.ALIGN_BOTTOM) ? 'flex-end' : 'center')) + '; ' +
'justify-content: unsafe ' + ((align == mxConstants.ALIGN_LEFT) ? 'flex-start' :
((align == mxConstants.ALIGN_RIGHT) ? 'flex-end' : 'center')) + '; ',
this.getTextCss(), s, mxUtils.bind(this, (dx, dy, flex, item, block) => {
((valign === mxConstants.ALIGN_TOP) ? 'flex-start' :
((valign === mxConstants.ALIGN_BOTTOM) ? 'flex-end' : 'center')) + '; ' +
'justify-content: unsafe ' + ((align === mxConstants.ALIGN_LEFT) ? 'flex-start' :
((align === mxConstants.ALIGN_RIGHT) ? 'flex-end' : 'center')) + '; ',
this.getTextCss(), s, (dx, dy, flex, item, block) => {
x += this.state.dx;
y += this.state.dy;
@ -1205,8 +1166,8 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let box = div.firstChild;
let text = box.firstChild;
let r = ((this.rotateHtml) ? this.state.rotation : 0) + ((rotation != null) ? rotation : 0);
let t = ((this.foOffset != 0) ? 'translate(' + this.foOffset + ' ' + this.foOffset + ')' : '') +
((s != 1) ? 'scale(' + s + ')' : '');
let t = ((this.foOffset !== 0) ? 'translate(' + this.foOffset + ' ' + this.foOffset + ')' : '') +
((s !== 1) ? 'scale(' + s + ')' : '');
text.setAttribute('style', block);
box.setAttribute('style', item);
@ -1232,22 +1193,22 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
div.setAttribute('style', flex + 'margin-left: ' + Math.round(x + dx) + 'px;');
t += ((r != 0) ? ('rotate(' + r + ' ' + x + ' ' + y + ')') : '');
t += ((r !== 0) ? ('rotate(' + r + ' ' + x + ' ' + y + ')') : '');
// Output allows for reflow but Safari cannot use absolute position,
// transforms or opacity. https://bugs.webkit.org/show_bug.cgi?id=23113
if (t != '') {
if (t !== '') {
g.setAttribute('transform', t);
} else {
g.removeAttribute('transform');
}
if (this.state.alpha != 1) {
if (this.state.alpha !== 1) {
g.setAttribute('opacity', this.state.alpha);
} else {
g.removeAttribute('opacity');
}
}));
});
};
/**
@ -1255,7 +1216,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Private helper function to create SVG elements
*/
mxSvgCanvas2getTextCss = () => {
getTextCss = () => {
let s = this.state;
let lh = (mxConstants.ABSOLUTE_LINE_HEIGHT) ? (s.fontSize * mxConstants.LINE_HEIGHT) + 'px' :
(mxConstants.LINE_HEIGHT * this.lineHeightCorrection);
@ -1263,21 +1224,21 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
'font-family: ' + s.fontFamily + '; color: ' + s.fontColor + '; line-height: ' + lh +
'; pointer-events: ' + ((this.pointerEvents) ? this.pointerEventsValue : 'none') + '; ';
if ((s.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) {
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
css += 'font-weight: bold; ';
}
if ((s.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) {
if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
css += 'font-style: italic; ';
}
let deco = [];
if ((s.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) {
if ((s.fontStyle & mxConstants.FONT_UNDERLINE) === mxConstants.FONT_UNDERLINE) {
deco.push('underline');
}
if ((s.fontStyle & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH) {
if ((s.fontStyle & mxConstants.FONT_STRIKETHROUGH) === mxConstants.FONT_STRIKETHROUGH) {
deco.push('line-through');
}
@ -1296,11 +1257,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* foreignObject is supported and <foEnabled> is true. (This means IE9 and later
* does currently not support HTML text as part of shapes.)
*/
mxSvgCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir) => {
text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir) => {
if (this.textEnabled && str != null) {
rotation = (rotation != null) ? rotation : 0;
if (this.foEnabled && format == 'html') {
if (this.foEnabled && format === 'html') {
let div = this.createDiv(str);
// Ignores invalid XHTML labels
@ -1324,7 +1285,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Creates a clip for the given coordinates.
*/
mxSvgCanvas2createClip = (x, y, w, h) => {
createClip = (x, y, w, h) => {
x = Math.round(x);
y = Math.round(y);
w = Math.round(w);
@ -1360,7 +1321,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Paints the given text. Possible values for format are empty string for
* plain text and html for HTML markup.
*/
mxSvgCanvas2plainText = (x, y, w, h, str, align, valign, wrap, overflow, clip, rotation, dir) => {
plainText = (x, y, w, h, str, align, valign, wrap, overflow, clip, rotation, dir) => {
rotation = (rotation != null) ? rotation : 0;
let s = this.state;
let size = s.fontSize;
@ -1374,7 +1335,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
// Non-rotated text
if (rotation != 0) {
if (rotation !== 0) {
tr += 'rotate(' + rotation + ',' + this.format(x * s.scale) + ',' + this.format(y * s.scale) + ')';
}
@ -1386,16 +1347,16 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let cx = x;
let cy = y;
if (align == mxConstants.ALIGN_CENTER) {
if (align === mxConstants.ALIGN_CENTER) {
cx -= w / 2;
} else if (align == mxConstants.ALIGN_RIGHT) {
} else if (align === mxConstants.ALIGN_RIGHT) {
cx -= w;
}
if (overflow != 'fill') {
if (valign == mxConstants.ALIGN_MIDDLE) {
if (overflow !== 'fill') {
if (valign === mxConstants.ALIGN_MIDDLE) {
cy -= h / 2;
} else if (valign == mxConstants.ALIGN_BOTTOM) {
} else if (valign === mxConstants.ALIGN_BOTTOM) {
cy -= h;
}
}
@ -1410,7 +1371,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
this.root.appendChild(c);
}
if (!mxClient.IS_CHROMEAPP && !mxClient.IS_EDGE && this.root.ownerDocument == document) {
if (!mxClient.IS_CHROMEAPP && !mxClient.IS_EDGE && this.root.ownerDocument === document) {
// Workaround for potential base tag
let base = this.getBaseUrl().replace(/([\(\)])/g, '\\$1');
node.setAttribute('clip-path', 'url(' + base + '#' + c.getAttribute('id') + ')');
@ -1420,16 +1381,16 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
// Default is left
let anchor = (align == mxConstants.ALIGN_RIGHT) ? 'end' :
(align == mxConstants.ALIGN_CENTER) ? 'middle' :
let anchor = (align === mxConstants.ALIGN_RIGHT) ? 'end' :
(align === mxConstants.ALIGN_CENTER) ? 'middle' :
'start';
// Text-anchor start is default in SVG
if (anchor != 'start') {
if (anchor !== 'start') {
node.setAttribute('text-anchor', anchor);
}
if (!this.styleEnabled || size != mxConstants.DEFAULT_FONTSIZE) {
if (!this.styleEnabled || size !== mxConstants.DEFAULT_FONTSIZE) {
node.setAttribute('font-size', (size * s.scale) + 'px');
}
@ -1447,15 +1408,15 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let cy = y + size - 1;
if (valign == mxConstants.ALIGN_MIDDLE) {
if (overflow == 'fill') {
if (valign === mxConstants.ALIGN_MIDDLE) {
if (overflow === 'fill') {
cy -= h / 2;
} else {
let dy = ((this.matchHtmlAlignment && clip && h > 0) ? Math.min(textHeight, h) : textHeight) / 2;
cy -= dy;
}
} else if (valign == mxConstants.ALIGN_BOTTOM) {
if (overflow == 'fill') {
} else if (valign === mxConstants.ALIGN_BOTTOM) {
if (overflow === 'fill') {
cy -= h;
} else {
let dy = (this.matchHtmlAlignment && clip && h > 0) ? Math.min(textHeight, h) : textHeight;
@ -1479,7 +1440,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
this.root.appendChild(node);
this.addTextBackground(node, str, x, y, w, (overflow == 'fill') ? h : textHeight, align, valign, overflow);
this.addTextBackground(node, str, x, y, w, (overflow === 'fill') ? h : textHeight, align, valign, overflow);
};
/**
@ -1488,30 +1449,30 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
* Updates the text properties for the given node. (NOTE: For this to work in
* IE, the given node must be a text or tspan element.)
*/
mxSvgCanvas2updateFont = (node) => {
updateFont = (node) => {
let s = this.state;
node.setAttribute('fill', s.fontColor);
if (!this.styleEnabled || s.fontFamily != mxConstants.DEFAULT_FONTFAMILY) {
if (!this.styleEnabled || s.fontFamily !== mxConstants.DEFAULT_FONTFAMILY) {
node.setAttribute('font-family', s.fontFamily);
}
if ((s.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) {
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
node.setAttribute('font-weight', 'bold');
}
if ((s.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) {
if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
node.setAttribute('font-style', 'italic');
}
let txtDecor = [];
if ((s.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) {
if ((s.fontStyle & mxConstants.FONT_UNDERLINE) === mxConstants.FONT_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');
}
@ -1525,27 +1486,27 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Background color and border
*/
mxSvgCanvas2addTextBackground = (node, str, x, y, w, h, align, valign, overflow) => {
addTextBackground = (node, str, x, y, w, h, align, valign, overflow) => {
let s = this.state;
if (s.fontBackgroundColor != null || s.fontBorderColor != null) {
let bbox = null;
if (overflow == 'fill' || overflow == 'width') {
if (align == mxConstants.ALIGN_CENTER) {
if (overflow === 'fill' || overflow === 'width') {
if (align === mxConstants.ALIGN_CENTER) {
x -= w / 2;
} else if (align == mxConstants.ALIGN_RIGHT) {
} else if (align === mxConstants.ALIGN_RIGHT) {
x -= w;
}
if (valign == mxConstants.ALIGN_MIDDLE) {
if (valign === mxConstants.ALIGN_MIDDLE) {
y -= h / 2;
} else if (valign == mxConstants.ALIGN_BOTTOM) {
} else if (valign === mxConstants.ALIGN_BOTTOM) {
y -= h;
}
bbox = new mxRectangle((x + 1) * s.scale, y * s.scale, (w - 2) * s.scale, (h + 2) * s.scale);
} else if (node.getBBox != null && this.root.ownerDocument == document) {
} else if (node.getBBox != null && this.root.ownerDocument === document) {
// Uses getBBox only if inside document for correct size
try {
bbox = node.getBBox();
@ -1555,7 +1516,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
}
}
if (bbox == null || bbox.width == 0 || bbox.height == 0) {
if (bbox == null || bbox.width === 0 || bbox.height === 0) {
// Computes size if not in document or no getBBox available
let div = document.createElement('div');
@ -1568,11 +1529,11 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
div.style.visibility = 'hidden';
div.style.display = 'inline-block';
if ((s.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) {
if ((s.fontStyle & mxConstants.FONT_BOLD) === mxConstants.FONT_BOLD) {
div.style.fontWeight = 'bold';
}
if ((s.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) {
if ((s.fontStyle & mxConstants.FONT_ITALIC) === mxConstants.FONT_ITALIC) {
div.style.fontStyle = 'italic';
}
@ -1584,15 +1545,15 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
let h = div.offsetHeight;
div.parentNode.removeChild(div);
if (align == mxConstants.ALIGN_CENTER) {
if (align === mxConstants.ALIGN_CENTER) {
x -= w / 2;
} else if (align == mxConstants.ALIGN_RIGHT) {
} else if (align === mxConstants.ALIGN_RIGHT) {
x -= w;
}
if (valign == mxConstants.ALIGN_MIDDLE) {
if (valign === mxConstants.ALIGN_MIDDLE) {
y -= h / 2;
} else if (valign == mxConstants.ALIGN_BOTTOM) {
} else if (valign === mxConstants.ALIGN_BOTTOM) {
y -= h;
}
@ -1612,7 +1573,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
n.setAttribute('stroke-width', sw);
// Workaround for crisp rendering - only required if not exporting
if (this.root.ownerDocument == document && mxUtils.mod(sw, 2) == 1) {
if (this.root.ownerDocument === document && mxUtils.mod(sw, 2) === 1) {
n.setAttribute('transform', 'translate(0.5, 0.5)');
}
@ -1626,7 +1587,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Paints the outline of the current path.
*/
mxSvgCanvas2stroke = () => {
stroke = () => {
this.addNode(false, true);
};
@ -1635,7 +1596,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Fills the current path.
*/
mxSvgCanvas2fill = () => {
fill = () => {
this.addNode(true, false);
};
@ -1644,7 +1605,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
*
* Fills and paints the outline of the current path.
*/
mxSvgCanvas2fillAndStroke = () => {
fillAndStroke = () => {
this.addNode(true, true);
};
}

22
src/mxgraph/util/mxToolbar.js
View File

@ -117,17 +117,17 @@ class mxToolbar extends mxEventSource {
}
}
let mouseHandler = mxUtils.bind(this, (evt) => {
let mouseHandler = (evt) => {
if (pressedIcon != null) {
img.setAttribute('src', icon);
} else {
img.style.backgroundColor = '';
}
});
};
// Highlights the toolbar item with a gray background
// while it is being clicked with the mouse
mxEvent.addGestureListeners(img, mxUtils.bind(this, (evt) => {
mxEvent.addGestureListeners(img, (evt) => {
if (pressedIcon != null) {
img.setAttribute('src', pressedIcon);
} else {
@ -169,7 +169,7 @@ class mxToolbar extends mxEventSource {
}
}
}
}), null, mouseHandler);
}, null, mouseHandler);
mxEvent.addListener(img, 'mouseout', mouseHandler);
@ -277,7 +277,7 @@ class mxToolbar extends mxEventSource {
img.setAttribute('title', title);
}
mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt) => {
mxEvent.addListener(img, 'click', (evt) => {
let tmp = this.selectedMode.altIcon;
if (tmp != null) {
@ -293,7 +293,7 @@ class mxToolbar extends mxEventSource {
this.selectedMode = img;
let tmp = img.altIcon;
tmp = img.altIcon;
if (tmp != null) {
img.altIcon = img.getAttribute('src');
@ -304,7 +304,7 @@ class mxToolbar extends mxEventSource {
this.fireEvent(new mxEventObject(mxEvent.SELECT));
funct();
}));
});
this.container.appendChild(img);
@ -344,15 +344,15 @@ class mxToolbar extends mxEventSource {
}
if (this.enabled && toggle) {
mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt) => {
mxEvent.addListener(img, 'click', (evt) => {
this.selectMode(img, funct);
this.noReset = false;
}));
});
mxEvent.addListener(img, 'dblclick', mxUtils.bind(this, (evt) => {
mxEvent.addListener(img, 'dblclick', (evt) => {
this.selectMode(img, funct);
this.noReset = true;
}));
});
if (this.defaultMode == null) {
this.defaultMode = img;

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

@ -7,6 +7,9 @@ import mxEffects from "./mxEffects";
import mxXmlRequest from "./mxXmlRequest";
import mxClient from "../mxClient";
import mxConstants from "./mxConstants";
import mxObjectIdentity from "./mxObjectIdentity";
import mxPoint from "./mxPoint";
import mxDictionary from "./mxDictionary";
let mxUtils = {
/**
@ -165,9 +168,7 @@ let mxUtils = {
* becomes a reference to that scope.
*/
bind: (scope, funct) => {
return () => {
return funct.apply(scope, arguments);
};
return funct.bind(scope);
},
/**
@ -1578,37 +1579,6 @@ let mxUtils = {
return typeof (value) == 'number' && isNaN(value);
},
/**
* Function: extend
*
* Assigns a copy of the superclass prototype to the subclass prototype.
* Note that this does not call the constructor of the superclass at this
* point, the superclass constructor should be called explicitely in the
* subclass constructor. Below is an example.
*
* (code)
* MyGraph = (container, model, renderHint, stylesheet)=>
* {
* mxGraph.call(this, container, model, renderHint, stylesheet);
* }
*
* mxUtils.extend(MyGraph, mxGraph);
* (end)
*
* Parameters:
*
* ctor - Constructor of the subclass.
* superCtor - Constructor of the superclass.
*/
extend: (ctor, superCtor) => {
let f = () => {
};
f.prototype = superCtor.prototype;
ctor.prototype = new f();
constructor = ctor;
},
/**
* Function: toString
*

41
src/mxgraph/util/mxWindow.js
View File

@ -8,6 +8,7 @@ import mxRectangle from "./mxRectangle";
import mxEventObject from "./mxEventObject";
import mxEventSource from "./mxEventSource";
import mxUtils from "./mxUtils";
import mxEvent from "./mxEvent";
class mxWindow extends mxEventSource {
/**
@ -364,9 +365,9 @@ class mxWindow extends mxEventSource {
this.div.appendChild(this.table);
// Puts the window on top of other windows when clicked
let activator = mxUtils.bind(this, (evt) => {
let activator = (evt) => {
this.activate();
});
};
mxEvent.addGestureListeners(this.title, activator);
mxEvent.addGestureListeners(this.table, activator);
@ -502,7 +503,7 @@ class mxWindow extends mxEventSource {
let width = null;
let height = null;
let start = mxUtils.bind(this, (evt) => {
let start = (evt) => {
// LATER: pointerdown starting on border of resize does start
// the drag operation but does not fire consecutive events via
// one of the listeners below (does pan instead).
@ -516,11 +517,11 @@ class mxWindow extends mxEventSource {
mxEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.RESIZE_START, 'event', evt));
mxEvent.consume(evt);
});
};
// Adds a temporary pair of listeners to intercept
// the gesture event in the document
let dragHandler = mxUtils.bind(this, (evt) => {
let dragHandler = (evt) => {
if (startX != null && startY != null) {
let dx = mxEvent.getClientX(evt) - startX;
let dy = mxEvent.getClientY(evt) - startY;
@ -530,9 +531,9 @@ class mxWindow extends mxEventSource {
this.fireEvent(new mxEventObject(mxEvent.RESIZE, 'event', evt));
mxEvent.consume(evt);
}
});
};
let dropHandler = mxUtils.bind(this, (evt) => {
let dropHandler = (evt) => {
if (startX != null && startY != null) {
startX = null;
startY = null;
@ -540,7 +541,7 @@ class mxWindow extends mxEventSource {
this.fireEvent(new mxEventObject(mxEvent.RESIZE_END, 'event', evt));
mxEvent.consume(evt);
}
});
};
mxEvent.addGestureListeners(this.resize, start, dragHandler, dropHandler);
this.div.appendChild(this.resize);
@ -612,7 +613,7 @@ class mxWindow extends mxEventSource {
let maxDisplay = null;
let height = null;
let funct = mxUtils.bind(this, (evt) => {
let funct = (evt) => {
this.activate();
if (!minimized) {
@ -661,7 +662,7 @@ class mxWindow extends mxEventSource {
}
mxEvent.consume(evt);
});
};
mxEvent.addGestureListeners(this.minimize, funct);
};
@ -699,7 +700,7 @@ class mxWindow extends mxEventSource {
let width = null;
let minDisplay = null;
let funct = mxUtils.bind(this, (evt) => {
let funct = (evt) => {
this.activate();
if (this.maximize.style.display != 'none') {
@ -774,7 +775,7 @@ class mxWindow extends mxEventSource {
mxEvent.consume(evt);
}
});
};
mxEvent.addGestureListeners(this.maximize, funct);
mxEvent.addListener(this.title, 'dblclick', funct);
@ -789,7 +790,7 @@ class mxWindow extends mxEventSource {
this.title.style.cursor = 'move';
mxEvent.addGestureListeners(this.title,
mxUtils.bind(this, (evt) => {
(evt) => {
let startX = mxEvent.getClientX(evt);
let startY = mxEvent.getClientY(evt);
let x = this.getX();
@ -797,24 +798,24 @@ class mxWindow extends mxEventSource {
// Adds a temporary pair of listeners to intercept
// the gesture event in the document
let dragHandler = mxUtils.bind(this, (evt) => {
let dragHandler = (evt) => {
let dx = mxEvent.getClientX(evt) - startX;
let dy = mxEvent.getClientY(evt) - startY;
this.setLocation(x + dx, y + dy);
this.fireEvent(new mxEventObject(mxEvent.MOVE, 'event', evt));
mxEvent.consume(evt);
});
};
let dropHandler = mxUtils.bind(this, (evt) => {
let dropHandler = (evt) => {
mxEvent.removeGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.MOVE_END, 'event', evt));
mxEvent.consume(evt);
});
};
mxEvent.addGestureListeners(document, null, dragHandler, dropHandler);
this.fireEvent(new mxEventObject(mxEvent.MOVE_START, 'event', evt));
mxEvent.consume(evt);
}));
});
// Disables built-in pan and zoom in IE10 and later
if (mxClient.IS_POINTER) {
@ -868,7 +869,7 @@ class mxWindow extends mxEventSource {
this.buttons.appendChild(this.closeImg);
mxEvent.addGestureListeners(this.closeImg,
mxUtils.bind(this, (evt) => {
(evt) => {
this.fireEvent(new mxEventObject(mxEvent.CLOSE, 'event', evt));
if (this.destroyOnClose) {
@ -878,7 +879,7 @@ class mxWindow extends mxEventSource {
}
mxEvent.consume(evt);
}));
});
};
/**

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

@ -5,6 +5,7 @@
*/
import mxAbstractCanvas2D from "./mxAbstractCanvas2D";
import mxConstants from "./mxConstants";
import mxUtils from "./mxUtils";
class mxXmlCanvas2D extends mxAbstractCanvas2D {
/**
@ -12,7 +13,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Specifies if text output should be enabled. Default is true.
*/
mxXmlCanvas2textEnabled = true;
textEnabled = true;
/**
* Variable: compressed
@ -20,10 +21,10 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* Specifies if the output should be compressed by removing redundant calls.
* Default is true.
*/
mxXmlCanvas2compressed = true;
compressed = true;
/**
* Class: mxXmlCanvas2D
* Class: D
*
* Base class for all canvases. The following methods make up the public
* interface of the canvas 2D for all painting in mxGraph:
@ -44,7 +45,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* a synthetic method, meaning that it is turned into a sequence of curves by
* default. Subclassers may add native support for arcs.
*
* Constructor: mxXmlCanvas2D
* Constructor: D
*
* Constructs a new abstract canvas.
*/
@ -67,7 +68,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Writes the rendering defaults to <root>:
*/
mxXmlCanvas2writeDefaults = () => {
writeDefaults = () => {
var elem;
// Writes font defaults
@ -99,7 +100,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Returns a formatted number with 2 decimal places.
*/
mxXmlCanvas2format = (value) => {
format = (value) => {
return parseFloat(parseFloat(value).toFixed(2));
};
@ -108,7 +109,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Creates the given element using the owner document of <root>.
*/
mxXmlCanvas2createElement = (name) => {
createElement = (name) => {
return this.root.ownerDocument.createElement(name);
};
@ -117,9 +118,9 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Saves the drawing state.
*/
mxXmlCanvas2save = () => {
save = () => {
if (this.compressed) {
this.mxAbstractCanvas2save();
super.save();
}
this.root.appendChild(this.createElement('save'));
};
@ -129,9 +130,9 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Restores the drawing state.
*/
mxXmlCanvas2restore = () => {
restore = () => {
if (this.compressed) {
this.mxAbstractCanvas2restore();
super.restore();
}
this.root.appendChild(this.createElement('restore'));
};
@ -145,7 +146,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* scale - Number that represents the scale where 1 is equal to 100%.
*/
mxXmlCanvas2scale = (value) => {
scale = (value) => {
let elem = this.createElement('scale');
elem.setAttribute('scale', value);
this.root.appendChild(elem);
@ -161,7 +162,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* dx - Number that specifies the horizontal translation.
* dy - Number that specifies the vertical translation.
*/
mxXmlCanvas2translate = (dx, dy) => {
translate = (dx, dy) => {
let elem = this.createElement('translate');
elem.setAttribute('dx', this.format(dx));
elem.setAttribute('dy', this.format(dy));
@ -182,7 +183,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* cx - Number that represents the x-coordinate of the rotation center.
* cy - Number that represents the y-coordinate of the rotation center.
*/
mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
rotate = (theta, flipH, flipV, cx, cy) => {
let elem = this.createElement('rotate');
if (theta !== 0 || flipH || flipV) {
@ -205,12 +206,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setAlpha = (value) => {
setAlpha = (value) => {
if (this.compressed) {
if (this.state.alpha === value) {
return;
}
this.mxAbstractCanvas2setAlpha.apply(value);
super.setAlpha(value);
}
let elem = this.createElement('alpha');
@ -228,12 +229,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Number that represents the new fill alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setFillAlpha = (value) => {
setFillAlpha = (value) => {
if (this.compressed) {
if (this.state.fillAlpha === value) {
return;
}
this.mxAbstractCanvas2setFillAlpha(value);
super.setFillAlpha(value);
}
let elem = this.createElement('fillalpha');
@ -251,12 +252,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Number that represents the new stroke alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setStrokeAlpha = (value) => {
setStrokeAlpha = (value) => {
if (this.compressed) {
if (this.state.strokeAlpha === value) {
return;
}
this.mxAbstractCanvas2setStrokeAlpha(value);
super.setStrokeAlpha(value);
}
let elem = this.createElement('strokealpha');
@ -273,7 +274,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFillColor = (value) => {
setFillColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -282,7 +283,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
if (this.state.fillColor === value) {
return;
}
this.mxAbstractCanvas2setFillColor(value);
super.setFillColor(value);
}
let elem = this.createElement('fillcolor');
@ -310,9 +311,9 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* alpha2 - Optional alpha of the end color. Default is 1. Possible values
* are between 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
if (color1 != null && color2 != null) {
this.mxAbstractCanvas2setGradient(color1, color2, x, y, w, h, direction, alpha1, alpha2);
super.setGradient(color1, color2, x, y, w, h, direction, alpha1, alpha2);
let elem = this.createElement('gradient');
elem.setAttribute('c1', color1);
@ -348,7 +349,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setStrokeColor = (value) => {
setStrokeColor = (value) => {
if (value === mxConstants.NONE) {
value = null;
}
@ -357,7 +358,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
if (this.state.strokeColor === value) {
return;
}
this.mxAbstractCanvas2setStrokeColor(value);
super.setStrokeColor(value);
}
let elem = this.createElement('strokecolor');
@ -374,12 +375,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Numeric representation of the stroke width.
*/
mxXmlCanvas2setStrokeWidth = (value) => {
setStrokeWidth = (value) => {
if (this.compressed) {
if (this.state.strokeWidth === value) {
return;
}
this.mxAbstractCanvas2setStrokeWidth(value);
super.setStrokeWidth(value);
}
let elem = this.createElement('strokewidth');
@ -398,12 +399,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Boolean that specifies if the stroke width should be ignored
* for the dash pattern. Default is false.
*/
mxXmlCanvas2setDashed = (value, fixDash) => {
setDashed = (value, fixDash) => {
if (this.compressed) {
if (this.state.dashed === value) {
return;
}
this.mxAbstractCanvas2setDashed(value, fixDash);
super.setDashed(value, fixDash);
}
let elem = this.createElement('dashed');
@ -428,12 +429,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* between the dashes. The lengths are relative to the line width - a length
* of 1 is equals to the line width.
*/
mxXmlCanvas2setDashPattern = (value) => {
setDashPattern = (value) => {
if (this.compressed) {
if (this.state.dashPattern === value) {
return;
}
this.mxAbstractCanvas2setDashPattern(value);
super.setDashPattern(value);
}
let elem = this.createElement('dashpattern');
@ -451,12 +452,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - String that represents the line cap. Possible values are flat, round
* and square.
*/
mxXmlCanvas2setLineCap = (value) => {
setLineCap = (value) => {
if (this.compressed) {
if (this.state.lineCap === value) {
return;
}
this.mxAbstractCanvas2setLineCap(value);
super.setLineCap(value);
}
let elem = this.createElement('linecap');
@ -474,12 +475,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - String that represents the line join. Possible values are miter,
* round and bevel.
*/
mxXmlCanvas2setLineJoin = (value) => {
setLineJoin = (value) => {
if (this.compressed) {
if (this.state.lineJoin === value) {
return;
}
this.mxAbstractCanvas2setLineJoin(value);
super.setLineJoin(value);
}
let elem = this.createElement('linejoin');
@ -496,12 +497,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Number that represents the miter limit.
*/
mxXmlCanvas2setMiterLimit = (value) => {
setMiterLimit = (value) => {
if (this.compressed) {
if (this.state.miterLimit === value) {
return;
}
this.mxAbstractCanvas2setMiterLimit(value);
super.setMiterLimit(value);
}
let elem = this.createElement('miterlimit');
@ -518,7 +519,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFontColor = (value) => {
setFontColor = (value) => {
if (this.textEnabled) {
if (value === mxConstants.NONE) {
value = null;
@ -528,7 +529,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
if (this.state.fontColor === value) {
return;
}
this.mxAbstractCanvas2setFontColor(value);
super.setFontColor(value);
}
let elem = this.createElement('fontcolor');
@ -546,7 +547,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFontBackgroundColor = (value) => {
setFontBackgroundColor = (value) => {
if (this.textEnabled) {
if (value === mxConstants.NONE) {
value = null;
@ -556,7 +557,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
if (this.state.fontBackgroundColor === value) {
return;
}
this.mxAbstractCanvas2setFontBackgroundColor(value);
super.setFontBackgroundColor(value);
}
let elem = this.createElement('fontbackgroundcolor');
@ -574,7 +575,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setFontBorderColor = (value) => {
setFontBorderColor = (value) => {
if (this.textEnabled) {
if (value === mxConstants.NONE) {
value = null;
@ -584,7 +585,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
if (this.state.fontBorderColor === value) {
return;
}
this.mxAbstractCanvas2setFontBorderColor(value);
super.setFontBorderColor(value);
}
let elem = this.createElement('fontbordercolor');
@ -602,13 +603,13 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Numeric representation of the font size.
*/
mxXmlCanvas2setFontSize = (value) => {
setFontSize = (value) => {
if (this.textEnabled) {
if (this.compressed) {
if (this.state.fontSize === value) {
return;
}
this.mxAbstractCanvas2setFontSize(value);
super.setFontSize(value);
}
let elem = this.createElement('fontsize');
@ -627,13 +628,13 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - String representation of the font family. This handles the same
* values as the CSS font-family property.
*/
mxXmlCanvas2setFontFamily = (value) => {
setFontFamily = (value) => {
if (this.textEnabled) {
if (this.compressed) {
if (this.state.fontFamily === value) {
return;
}
this.mxAbstractCanvas2setFontFamily(value);
super.setFontFamily(value);
}
let elem = this.createElement('fontfamily');
@ -652,7 +653,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Numeric representation of the font family. This is the sum of the
* font styles from <mxConstants>.
*/
mxXmlCanvas2setFontStyle = (value) => {
setFontStyle = (value) => {
if (this.textEnabled) {
if (value == null) {
value = 0;
@ -662,7 +663,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
if (this.state.fontStyle === value) {
return;
}
this.mxAbstractCanvas2setFontStyle.apply(value);
super.setFontStyle(value);
}
let elem = this.createElement('fontstyle');
@ -680,12 +681,12 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Boolean that specifies if shadows should be enabled.
*/
mxXmlCanvas2setShadow = (value) => {
setShadow = (value) => {
if (this.compressed) {
if (this.state.shadow === value) {
return;
}
this.mxAbstractCanvas2setShadow(value);
super.setShadow(value);
}
let elem = this.createElement('shadow');
@ -702,7 +703,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* value - Hexadecimal representation of the color or 'none'.
*/
mxXmlCanvas2setShadowColor = (value) => {
setShadowColor = (value) => {
if (this.compressed) {
if (value === mxConstants.NONE) {
value = null;
@ -730,7 +731,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* value - Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
mxXmlCanvas2setShadowAlpha = (value) => {
setShadowAlpha = (value) => {
if (this.compressed) {
if (this.state.shadowAlpha === value) {
return;
@ -753,7 +754,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* dx - Number that represents the horizontal offset of the shadow.
* dy - Number that represents the vertical offset of the shadow.
*/
mxXmlCanvas2setShadowOffset = (dx, dy) => {
setShadowOffset = (dx, dy) => {
if (this.compressed) {
if (this.state.shadowDx === dx && this.state.shadowDy === dy) {
return;
@ -780,7 +781,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* w - Number that represents the width of the rectangle.
* h - Number that represents the height of the rectangle.
*/
mxXmlCanvas2rect = (x, y, w, h) => {
rect = (x, y, w, h) => {
let elem = this.createElement('rect');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -803,7 +804,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* dx - Number that represents the horizontal rounding.
* dy - Number that represents the vertical rounding.
*/
mxXmlCanvas2roundrect = (x, y, w, h, dx, dy) => {
roundrect = (x, y, w, h, dx, dy) => {
let elem = this.createElement('roundrect');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -826,7 +827,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* w - Number that represents the width of the ellipse.
* h - Number that represents the height of the ellipse.
*/
mxXmlCanvas2ellipse = (x, y, w, h) => {
ellipse = (x, y, w, h) => {
let elem = this.createElement('ellipse');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -851,7 +852,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* flipH - Boolean indicating if the image should be flipped horizontally.
* flipV - Boolean indicating if the image should be flipped vertically.
*/
mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV) => {
image = (x, y, w, h, src, aspect, flipH, flipV) => {
src = this.converter.convert(src);
// LATER: Add option for embedding images as base64.
@ -872,7 +873,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Starts a new path and puts it into the drawing buffer.
*/
mxXmlCanvas2begin = () => {
begin = () => {
this.root.appendChild(this.createElement('begin'));
this.lastX = 0;
this.lastY = 0;
@ -888,7 +889,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* x - Number that represents the x-coordinate of the point.
* y - Number that represents the y-coordinate of the point.
*/
mxXmlCanvas2moveTo = (x, y) => {
moveTo = (x, y) => {
let elem = this.createElement('move');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -907,7 +908,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* x - Number that represents the x-coordinate of the endpoint.
* y - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2lineTo = (x, y) => {
lineTo = (x, y) => {
let elem = this.createElement('line');
elem.setAttribute('x', this.format(x));
elem.setAttribute('y', this.format(y));
@ -928,7 +929,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* x2 - Number that represents the x-coordinate of the endpoint.
* y2 - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2quadTo = (x1, y1, x2, y2) => {
quadTo = (x1, y1, x2, y2) => {
let elem = this.createElement('quad');
elem.setAttribute('x1', this.format(x1));
elem.setAttribute('y1', this.format(y1));
@ -953,7 +954,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* x3 - Number that represents the x-coordinate of the endpoint.
* y3 - Number that represents the y-coordinate of the endpoint.
*/
mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3) => {
curveTo = (x1, y1, x2, y2, x3, y3) => {
let elem = this.createElement('curve');
elem.setAttribute('x1', this.format(x1));
elem.setAttribute('y1', this.format(y1));
@ -971,7 +972,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Closes the current path.
*/
mxXmlCanvas2close = () => {
close = () => {
this.root.appendChild(this.createElement('close'));
};
@ -1000,7 +1001,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
* rotation - Number that specifies the angle of the rotation around the anchor point of the text.
* dir - Optional string that specifies the text direction. Possible values are rtl and lrt.
*/
mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir) => {
text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir) => {
if (this.textEnabled && str != null) {
if (mxUtils.isNode(str)) {
str = mxUtils.getOuterHtml(str);
@ -1054,7 +1055,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Paints the outline of the current drawing buffer.
*/
mxXmlCanvas2stroke = () => {
stroke = () => {
this.root.appendChild(this.createElement('stroke'));
};
@ -1063,7 +1064,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Fills the current drawing buffer.
*/
mxXmlCanvas2fill = () => {
fill = () => {
this.root.appendChild(this.createElement('fill'));
};
@ -1072,7 +1073,7 @@ class mxXmlCanvas2D extends mxAbstractCanvas2D {
*
* Fills the current drawing buffer and its outline.
*/
mxXmlCanvas2fillAndStroke = () => {
fillAndStroke = () => {
this.root.appendChild(this.createElement('fillstroke'));
};
}

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

@ -291,12 +291,12 @@ class mxXmlRequest {
if (this.request != null) {
if (onload != null) {
this.request.onreadystatechange = mxUtils.bind(this, () => {
this.request.onreadystatechange = () => {
if (this.isReady()) {
onload(this);
this.request.onreadystatechange = null;
}
});
};
}
this.request.open(this.method, this.url, this.async,

6
src/mxgraph/view/mxCellRenderer.js
View File

@ -25,6 +25,12 @@ import mxUtils from "../util/mxUtils";
import mxRectangle from "../util/mxRectangle";
import mxStencilRegistry from "../shape/mxStencilRegistry";
import mxEvent from "../util/mxEvent";
import mxClient from "../mxClient";
import mxMouseEvent from "../util/mxMouseEvent";
import mxDictionary from "../util/mxDictionary";
import mxEventObject from "../util/mxEventObject";
import mxPoint from "../util/mxPoint";
import mxShape from "../shape/mxShape";
class mxCellRenderer {
/**

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

@ -46,7 +46,6 @@ import mxStyleChange from "../model/atomic_changes/mxStyleChange";
import mxTerminalChange from "../model/atomic_changes/mxTerminalChange";
import mxValueChange from "../model/atomic_changes/mxValueChange";
class mxGraph extends mxEventSource {
/**
* Variable: mouseListeners
@ -11268,7 +11267,7 @@ class mxGraph extends mxEventSource {
// Searches for rectangles using method if native hit detection is disabled on shape
if (me.getCell() == null && this.isMouseDown && evtName === mxEvent.MOUSE_MOVE) {
me.state = this.view.getState(this.getCellAt(pt.x, pt.y, null, null, null, (state) => {
return state.shape == null || state.shape.paintBackground !== paintBackground ||
return state.shape == null || state.shape.paintBackground !== this.paintBackground ||
mxUtils.getValue(state.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1' ||
(state.shape.fill != null && state.shape.fill !== mxConstants.NONE);
}));
@ -11318,7 +11317,7 @@ class mxGraph extends mxEventSource {
this.mouseMoveRedirect = null;
this.mouseUpRedirect = null;
this.eventSource = null;
} else if (!mxClient.IS_GC && this.eventSource != null && me.getSource() != this.eventSource) {
} else if (!mxClient.IS_GC && this.eventSource != null && me.getSource() !== this.eventSource) {
result = true;
} else if (mxClient.IS_TOUCH && evtName === mxEvent.MOUSE_DOWN &&
!mouseEvent && !mxEvent.isPenEvent(me.getEvent())) {

57
src/mxgraph/view/mxGraphSelectionModel.js
View File

@ -8,6 +8,9 @@ import mxUndoableEdit from "../util/mxUndoableEdit";
import mxEventSource from "../util/mxEventSource";
import mxEventObject from "../util/mxEventObject";
import mxClient from "../mxClient";
import mxUtils from "../util/mxUtils";
import mxSelectionChange from "./mxSelectionChange";
import mxEvent from "../util/mxEvent";
class mxGraphSelectionModel extends mxEventSource {
/**
@ -17,7 +20,7 @@ class mxGraphSelectionModel extends mxEventSource {
* If the resource for this key does not exist then the value is used as
* the status message. Default is 'done'.
*/
doneResource = (mxClient.language != 'none') ? 'done' : '';
doneResource = (mxClient.language !== 'none') ? 'done' : '';
/**
* Variable: updatingSelectionResource
@ -26,7 +29,7 @@ class mxGraphSelectionModel extends mxEventSource {
* being updated. If the resource for this key does not exist then the
* value is used as the status message. Default is 'updatingSelection'.
*/
updatingSelectionResource = (mxClient.language != 'none') ? 'updatingSelection' : '';
updatingSelectionResource = (mxClient.language !== 'none') ? 'updatingSelection' : '';
/**
* Variable: graph
@ -344,56 +347,6 @@ class mxGraphSelectionModel extends mxEventSource {
}
}
};
/**
* Class: mxSelectionChange
*
* Action to change the current root in a view.
*
* Constructor: mxCurrentRootChange
*
* Constructs a change of the current root in the given view.
*/
mxSelectionChange = (selectionModel, added, removed) => {
this.selectionModel = selectionModel;
this.added = (added != null) ? added.slice() : null;
this.removed = (removed != null) ? removed.slice() : null;
};
/**
* Function: execute
*
* Changes the current root of the view.
*/
execute = () => {
var t0 = mxLog.enter('mxSelectionChange.execute');
window.status = mxResources.get(
this.selectionModel.updatingSelectionResource) ||
this.selectionModel.updatingSelectionResource;
if (this.removed != null) {
for (let i = 0; i < this.removed.length; i++) {
this.selectionModel.cellRemoved(this.removed[i]);
}
}
if (this.added != null) {
for (let i = 0; i < this.added.length; i++) {
this.selectionModel.cellAdded(this.added[i]);
}
}
let tmp = this.added;
this.added = this.removed;
this.removed = tmp;
window.status = mxResources.get(this.selectionModel.doneResource) ||
this.selectionModel.doneResource;
mxLog.leave('mxSelectionChange.execute', t0);
this.selectionModel.fireEvent(new mxEventObject(mxEvent.CHANGE,
'added', this.added, 'removed', this.removed));
};
}
export default mxGraphSelectionModel;

3
src/mxgraph/view/mxGraphView.js
View File

@ -816,7 +816,6 @@ class mxGraphView extends mxEventSource {
state.setVisibleTerminalState(this.validateCellState(this.getVisibleTerminal(cell, true), false), true);
state.setVisibleTerminalState(this.validateCellState(this.getVisibleTerminal(cell, false), false), false);
alert(state);
this.updateCellState(state);
// Repaint happens immediately after the cell is validated
@ -856,8 +855,6 @@ class mxGraphView extends mxEventSource {
* state - <mxCellState> to be updated.
*/
updateCellState = (state) => {
alert("STATE:"+state);
alert(state.absoluteOffset)
state.absoluteOffset.x = 0;
state.absoluteOffset.y = 0;
state.origin.x = 0;

58
src/mxgraph/view/mxSelectionChange.js Normal file
View File

@ -0,0 +1,58 @@
import mxEventObject from "../util/mxEventObject";
import mxResources from "../util/mxResources";
import mxLog from "../util/mxLog";
import mxEvent from "../util/mxEvent";
class mxSelectionChange {
/**
* Class: mxSelectionChange
*
* Action to change the current root in a view.
*
* Constructor: mxCurrentRootChange
*
* Constructs a change of the current root in the given view.
*/
constructor(selectionModel, added, removed) {
this.selectionModel = selectionModel;
this.added = (added != null) ? added.slice() : null;
this.removed = (removed != null) ? removed.slice() : null;
};
/**
* Function: execute
*
* Changes the current root of the view.
*/
execute = () => {
var t0 = mxLog.enter('mxSelectionChange.execute');
window.status = mxResources.get(
this.selectionModel.updatingSelectionResource) ||
this.selectionModel.updatingSelectionResource;
if (this.removed != null) {
for (let i = 0; i < this.removed.length; i++) {
this.selectionModel.cellRemoved(this.removed[i]);
}
}
if (this.added != null) {
for (let i = 0; i < this.added.length; i++) {
this.selectionModel.cellAdded(this.added[i]);
}
}
let tmp = this.added;
this.added = this.removed;
this.removed = tmp;
window.status = mxResources.get(this.selectionModel.doneResource) ||
this.selectionModel.doneResource;
mxLog.leave('mxSelectionChange.execute', t0);
this.selectionModel.fireEvent(new mxEventObject(mxEvent.CHANGE,
'added', this.added, 'removed', this.removed));
};
}
export default mxSelectionChange;