From ff2f1c49ce42014a095679220bea5d7807c933e5 Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Tue, 23 Mar 2021 11:13:09 +1100 Subject: [PATCH] bugfix for geometry properties not being modified in e.g. translate() --- src/mxgraph/model/mxGeometry.js | 75 ++++++++++++++++++--------- src/mxgraph/shape/mxArrowConnector.js | 20 +++---- src/mxgraph/shape/mxText.js | 1 + src/mxgraph/util/mxPoint.js | 24 +++++++++ src/mxgraph/util/mxUtils.js | 13 +++-- src/mxgraph/view/mxGraph.js | 58 +++++++++------------ 6 files changed, 119 insertions(+), 72 deletions(-) diff --git a/src/mxgraph/model/mxGeometry.js b/src/mxgraph/model/mxGeometry.js index 0e18ce9c6..38fa6b661 100644 --- a/src/mxgraph/model/mxGeometry.js +++ b/src/mxgraph/model/mxGeometry.js @@ -6,6 +6,7 @@ import mxPoint from '../util/mxPoint'; import mxRectangle from '../util/mxRectangle'; +import mxUtils from '../util/mxUtils'; class mxGeometry extends mxRectangle { /** @@ -162,7 +163,7 @@ class mxGeometry extends mxRectangle { * calling this method and setting the geometry of the cell using * . */ - swap = () => { + swap() { if (this.alternateBounds != null) { const old = new mxRectangle(this.x, this.y, this.width, this.height); @@ -186,7 +187,7 @@ class mxGeometry extends mxRectangle { * isSource - Boolean that specifies if the source or target point * should be returned. */ - getTerminalPoint = isSource => { + getTerminalPoint(isSource) { return isSource ? this.sourcePoint : this.targetPoint; }; @@ -202,7 +203,7 @@ class mxGeometry extends mxRectangle { * isSource - Boolean that specifies if the source or target point * should be set. */ - setTerminalPoint = (point, isSource) => { + setTerminalPoint(point, isSource) { if (isSource) { this.sourcePoint = point; } else { @@ -225,7 +226,7 @@ class mxGeometry extends mxRectangle { * angle - Number that specifies the rotation angle in degrees. * cx - that specifies the center of the rotation. */ - rotate = (angle, cx) => { + rotate(angle, cx) { const rad = mxUtils.toRadians(angle); const cos = Math.cos(rad); const sin = Math.sin(rad); @@ -265,6 +266,30 @@ class mxGeometry extends mxRectangle { } }; + get width() { + return this._width || 0; + } + + set width(width) { + width = parseFloat(width); + if (Number.isNaN(width)) { + throw new Error('Invalid width supplied'); + } + this._width = width; + } + + get height() { + return this._height || 0; + } + + set height(height) { + height = parseFloat(height); + if (Number.isNaN(height)) { + throw new Error('Invalid height supplied'); + } + this._height = height; + } + /** * Function: translate * @@ -279,34 +304,34 @@ class mxGeometry extends mxRectangle { * dx - Number that specifies the x-coordinate of the translation. * dy - Number that specifies the y-coordinate of the translation. */ - translate = (dx, dy) => { + translate(dx, dy) { dx = parseFloat(dx); dy = parseFloat(dy); // Translates the geometry if (!this.relative) { - this.x = parseFloat(this.x) + dx; - this.y = parseFloat(this.y) + dy; + this.x = this.x + dx; + this.y = this.y + dy; } // Translates the source point if (this.sourcePoint != null) { - this.sourcePoint.x = parseFloat(this.sourcePoint.x) + dx; - this.sourcePoint.y = parseFloat(this.sourcePoint.y) + dy; + this.sourcePoint.x = this.sourcePoint.x + dx; + this.sourcePoint.y = this.sourcePoint.y + dy; } // Translates the target point if (this.targetPoint != null) { - this.targetPoint.x = parseFloat(this.targetPoint.x) + dx; - this.targetPoint.y = parseFloat(this.targetPoint.y) + dy; + this.targetPoint.x = this.targetPoint.x + dx; + this.targetPoint.y = this.targetPoint.y + dy; } // Translate the control points if (this.TRANSLATE_CONTROL_POINTS && this.points != null) { for (let i = 0; i < this.points.length; i += 1) { if (this.points[i] != null) { - this.points[i].x = parseFloat(this.points[i].x) + dx; - this.points[i].y = parseFloat(this.points[i].y) + dy; + this.points[i].x = this.points[i].x + dx; + this.points[i].y = this.points[i].y + dy; } } } @@ -327,43 +352,43 @@ class mxGeometry extends mxRectangle { * sy - Number that specifies the vertical scale factor. * fixedAspect - Optional boolean to keep the aspect ratio fixed. */ - scale = (sx, sy, fixedAspect) => { + scale(sx, sy, fixedAspect) { sx = parseFloat(sx); sy = parseFloat(sy); // Translates the source point if (this.sourcePoint != null) { - this.sourcePoint.x = parseFloat(this.sourcePoint.x) * sx; - this.sourcePoint.y = parseFloat(this.sourcePoint.y) * sy; + this.sourcePoint.x = this.sourcePoint.x * sx; + this.sourcePoint.y = this.sourcePoint.y * sy; } // Translates the target point if (this.targetPoint != null) { - this.targetPoint.x = parseFloat(this.targetPoint.x) * sx; - this.targetPoint.y = parseFloat(this.targetPoint.y) * sy; + this.targetPoint.x = this.targetPoint.x * sx; + this.targetPoint.y = this.targetPoint.y * sy; } // Translate the control points if (this.points != null) { for (let i = 0; i < this.points.length; i += 1) { if (this.points[i] != null) { - this.points[i].x = parseFloat(this.points[i].x) * sx; - this.points[i].y = parseFloat(this.points[i].y) * sy; + this.points[i].x = this.points[i].x * sx; + this.points[i].y = this.points[i].y * sy; } } } // Translates the geometry if (!this.relative) { - this.x = parseFloat(this.x) * sx; - this.y = parseFloat(this.y) * sy; + this.x = this.x * sx; + this.y = this.y * sy; if (fixedAspect) { sy = sx = Math.min(sx, sy); } - this.width = parseFloat(this.width) * sx; - this.height = parseFloat(this.height) * sy; + this.width = this.width * sx; + this.height = this.height * sy; } }; @@ -372,7 +397,7 @@ class mxGeometry extends mxRectangle { * * Returns true if the given object equals this geometry. */ - equals = obj => { + equals(obj) { return ( super.equals(obj) && this.relative === obj.relative && diff --git a/src/mxgraph/shape/mxArrowConnector.js b/src/mxgraph/shape/mxArrowConnector.js index 6b326109a..21a413a86 100644 --- a/src/mxgraph/shape/mxArrowConnector.js +++ b/src/mxgraph/shape/mxArrowConnector.js @@ -159,8 +159,8 @@ class mxArrowConnector extends mxShape { while ( i0 < pts.length - 1 && - pts[i0].x == pts[0].x && - pts[i0].y == pts[0].y + pts[i0].x === pts[0].x && + pts[i0].y === pts[0].y ) { i0++; } @@ -169,7 +169,7 @@ class mxArrowConnector extends mxShape { const dy = pts[i0].y - pts[0].y; const dist = Math.sqrt(dx * dx + dy * dy); - if (dist == 0) { + if (dist === 0) { return; } @@ -249,7 +249,7 @@ class mxArrowConnector extends mxShape { dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); - if (dist1 != 0) { + if (dist1 !== 0) { nx1 = dx1 / dist1; ny1 = dy1 / dist1; @@ -262,7 +262,7 @@ class mxArrowConnector extends mxShape { const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2); - if (dist2 != 0) { + if (dist2 !== 0) { nx2 /= dist2; ny2 /= dist2; @@ -272,7 +272,7 @@ class mxArrowConnector extends mxShape { Math.min(this.strokewidth / 200 + 0.04, 0.35) ); const angleFactor = - pos != 0 && isRounded + pos !== 0 && isRounded ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06); @@ -281,7 +281,7 @@ class mxArrowConnector extends mxShape { const inX = pts[i + 1].x - (ny2 * edgeWidth) / 2 / angleFactor; const inY = pts[i + 1].y + (nx2 * edgeWidth) / 2 / angleFactor; - if (pos == 0 || !isRounded) { + if (pos === 0 || !isRounded) { // If the two segments are aligned, or if we're not drawing curved sections between segments // just draw straight to the intersection point c.lineTo(outX, outY); @@ -291,7 +291,7 @@ class mxArrowConnector extends mxShape { c.lineTo(x, y); }); })(inX, inY); - } else if (pos == -1) { + } else if (pos === -1) { const c1x = inX + ny * edgeWidth; const c1y = inY - nx * edgeWidth; const c2x = inX + ny1 * edgeWidth; @@ -526,7 +526,7 @@ class mxArrowConnector extends mxShape { this.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE - ) != mxConstants.NONE + ) !== mxConstants.NONE ); }; @@ -541,7 +541,7 @@ class mxArrowConnector extends mxShape { this.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE - ) != mxConstants.NONE + ) !== mxConstants.NONE ); }; } diff --git a/src/mxgraph/shape/mxText.js b/src/mxgraph/shape/mxText.js index e1326afe5..7cd971a62 100644 --- a/src/mxgraph/shape/mxText.js +++ b/src/mxgraph/shape/mxText.js @@ -10,6 +10,7 @@ import mxUtils from '../util/mxUtils'; import mxPoint from '../util/mxPoint'; import mxSvgCanvas2D from '../util/mxSvgCanvas2D'; import mxShape from './mxShape'; +import mxRectangle from "../util/mxRectangle"; class mxText extends mxShape { /** diff --git a/src/mxgraph/util/mxPoint.js b/src/mxgraph/util/mxPoint.js index f3ad4dd24..50227ced0 100644 --- a/src/mxgraph/util/mxPoint.js +++ b/src/mxgraph/util/mxPoint.js @@ -39,6 +39,30 @@ class mxPoint { } } + get x() { + return this._x || 0; + } + + set x(x) { + x = parseFloat(x); + if (Number.isNaN(x)) { + throw new Error('Invalid x supplied'); + } + this._x = x; + } + + get y() { + return this._y || 0; + } + + set y(y) { + y = parseFloat(y); + if (Number.isNaN(y)) { + throw new Error('Invalid y supplied'); + } + this._y = y; + } + /** * Function: equals * diff --git a/src/mxgraph/util/mxUtils.js b/src/mxgraph/util/mxUtils.js index aa3068caa..d3131452e 100644 --- a/src/mxgraph/util/mxUtils.js +++ b/src/mxgraph/util/mxUtils.js @@ -10,6 +10,15 @@ import mxConstants from './mxConstants'; import mxObjectIdentity from './mxObjectIdentity'; import mxPoint from './mxPoint'; import mxDictionary from './mxDictionary'; +import mxCellPath from '../model/mxCellPath'; +import mxRectangle from './mxRectangle'; +import mxTemporaryCellStates from '../view/mxTemporaryCellStates'; +import mxCodec from '../io/mxCodec'; +import mxWindow from './mxWindow'; +import mxResources from './mxResources'; +import mxEvent from './mxEvent'; +import mxDragSource from './mxDragSource'; +import mxLog from './mxLog'; const mxUtils = { /** @@ -216,7 +225,6 @@ const mxUtils = { findNode: (node, attr, value) => { if (node.nodeType === mxConstants.NODETYPE_ELEMENT) { const tmp = node.getAttribute(attr); - if (tmp != null && tmp == value) { return node; } @@ -226,14 +234,11 @@ const mxUtils = { while (node != null) { const result = mxUtils.findNode(node, attr, value); - if (result != null) { return result; } - node = node.nextSibling; } - return null; }, diff --git a/src/mxgraph/view/mxGraph.js b/src/mxgraph/view/mxGraph.js index fe7dbd5a3..dc26edd30 100644 --- a/src/mxgraph/view/mxGraph.js +++ b/src/mxgraph/view/mxGraph.js @@ -6047,6 +6047,8 @@ class mxGraph extends mxEventSource { dy = dy != null ? dy : 0; clone = clone != null ? clone : false; + //alert(`moveCells: ${cells} ${dx} ${dy} ${clone} ${target}`) + if (cells != null && (dx !== 0 || dy !== 0 || clone || target != null)) { // Removes descendants with ancestors in cells to avoid multiple moving cells = this.model.getTopmostCells(cells); @@ -6149,18 +6151,12 @@ class mxGraph extends mxEventSource { this.fireEvent( new mxEventObject( mxEvent.MOVE_CELLS, - 'cells', - cells, - 'dx', - dx, - 'dy', - dy, - 'clone', - clone, - 'target', - target, - 'event', - evt + 'cells', cells, + 'dx', dx, + 'dy', dy, + 'clone', clone, + 'target', target, + 'event', evt ) ); } finally { @@ -6205,14 +6201,10 @@ class mxGraph extends mxEventSource { this.fireEvent( new mxEventObject( mxEvent.CELLS_MOVED, - 'cells', - cells, - 'dx', - dx, - 'dy', - dy, - 'disconnect', - disconnect + 'cells', cells, + 'dx', dx, + 'dy', dy, + 'disconnect', disconnect ) ); } finally { @@ -6228,24 +6220,24 @@ class mxGraph extends mxEventSource { * translated geometry in the model as an atomic change. */ translateCell = (cell, dx, dy) => { - let geo = this.model.getGeometry(cell); + let geometry = this.model.getGeometry(cell); - if (geo != null) { + if (geometry != null) { dx = parseFloat(dx); dy = parseFloat(dy); - geo = geo.clone(); - geo.translate(dx, dy); + geometry = geometry.clone(); + geometry.translate(dx, dy); if ( - !geo.relative && + !geometry.relative && this.model.isVertex(cell) && !this.isAllowNegativeCoordinates() ) { - geo.x = Math.max(0, parseFloat(geo.x)); - geo.y = Math.max(0, parseFloat(geo.y)); + geometry.x = Math.max(0, geometry.x); + geometry.y = Math.max(0, geometry.y); } - if (geo.relative && !this.model.isEdge(cell)) { + if (geometry.relative && !this.model.isEdge(cell)) { const parent = this.model.getParent(cell); let angle = 0; @@ -6268,15 +6260,15 @@ class mxGraph extends mxEventSource { dy = pt.y; } - if (geo.offset == null) { - geo.offset = new mxPoint(dx, dy); + if (geometry.offset == null) { + geometry.offset = new mxPoint(dx, dy); } else { - geo.offset.x = parseFloat(geo.offset.x) + dx; - geo.offset.y = parseFloat(geo.offset.y) + dy; + geometry.offset.x = parseFloat(geometry.offset.x) + dx; + geometry.offset.y = parseFloat(geometry.offset.y) + dy; } } - this.model.setGeometry(cell, geo); + this.model.setGeometry(cell, geometry); } };