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

bugfix for geometry properties not being modified in e.g. translate()

development
mcyph 2021-03-23 11:13:09 +11:00
parent 978b0eb111
commit ff2f1c49ce
6 changed files with 119 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
* <mxGraphModel.setGeometry>.
*/
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 - <mxPoint> 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 &&

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

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

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

@ -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 {
/**

24
src/mxgraph/util/mxPoint.js
View File

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

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

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

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

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