bugfix for sizer rectangle handles growing on click

development
mcyph 2021-03-22 21:19:25 +11:00
parent 697353449a
commit 28957e8c97
12 changed files with 141 additions and 114 deletions

View File

@ -294,7 +294,7 @@ class mxDefaultPopupMenu {
conditions.nocell = cell == null;
conditions.ncells = editor.graph.getSelectionCount() > 1;
conditions.notRoot =
model.getRoot() != model.getParent(editor.graph.getDefaultParent());
model.getRoot() !== model.getParent(editor.graph.getDefaultParent());
conditions.cell = cell != null;
const isCell = cell != null && editor.graph.getSelectionCount() === 1;

View File

@ -29,6 +29,9 @@ import mxEvent from '../util/mxEvent';
import mxRootChange from '../model/atomic_changes/mxRootChange';
import mxValueChange from '../model/atomic_changes/mxValueChange';
import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange';
import mxPrintPreview from "../view/mxPrintPreview";
import mxClipboard from "../util/mxClipboard";
import mxLog from "../util/mxLog";
/**
* Installs the required language resources at class
@ -1729,9 +1732,9 @@ class mxEditor extends mxEventSource {
if (
change instanceof mxRootChange ||
(change instanceof mxValueChange &&
change.cell == this.graph.model.root) ||
change.cell === this.graph.model.root) ||
(change instanceof mxCellAttributeChange &&
change.cell == this.graph.model.root)
change.cell === this.graph.model.root)
) {
this.fireEvent(new mxEventObject(mxEvent.ROOT));
break;

View File

@ -402,7 +402,7 @@ class mxCellMarker extends mxEventSource {
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = () => {
destroy() {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getModel().removeListener(this.resetHandler);
this.highlight.destroy();

View File

@ -3,6 +3,7 @@
* Copyright (c) 2006-2015, Gaudenz Alder
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxCellMarker from "./mxCellMarker";
class mxCellTracker extends mxCellMarker {
/**
@ -123,7 +124,7 @@ class mxCellTracker extends mxCellMarker {
this.destroyed = true;
this.graph.removeMouseListener(this);
destroy.apply(this);
super.destroy();
}
};
}

View File

@ -913,7 +913,7 @@ class mxConnectionHandler extends mxEventSource {
this.constraintHandler.currentConstraint !== null) ||
(this.previous !== null &&
this.error === null &&
(this.icons === null || (this.icons !== null && this.icon !== null)))
(this.icons === null || this.icon !== null))
);
};
@ -923,7 +923,7 @@ class mxConnectionHandler extends mxEventSource {
* Handles the event by initiating a new connection.
*/
mouseDown = (sender, me) => {
this.mouseDownCounter++;
this.mouseDownCounter += 1;
if (
this.isEnabled() &&
@ -1627,7 +1627,7 @@ class mxConnectionHandler extends mxEventSource {
);
const rad = -theta * (Math.PI / 180);
if (theta != 0) {
if (theta !== 0) {
next = mxUtils.getRotatedPoint(
new mxPoint(next.x, next.y),
Math.cos(rad),
@ -1644,7 +1644,7 @@ class mxConnectionHandler extends mxEventSource {
);
if (tmp != null) {
if (theta != 0) {
if (theta !== 0) {
tmp = mxUtils.getRotatedPoint(
new mxPoint(tmp.x, tmp.y),
Math.cos(-rad),
@ -1696,7 +1696,7 @@ class mxConnectionHandler extends mxEventSource {
* Adds the waypoint for the given event to <waypoints>.
*/
addWaypointForEvent = me => {
const point = mxUtils.convertPoint(
let point = mxUtils.convertPoint(
this.graph.container,
me.getX(),
me.getY()
@ -1714,7 +1714,7 @@ class mxConnectionHandler extends mxEventSource {
}
const { scale } = this.graph.view;
const point = new mxPoint(
point = new mxPoint(
this.graph.snap(me.getGraphX() / scale) * scale,
this.graph.snap(me.getGraphY() / scale) * scale
);
@ -2010,7 +2010,7 @@ class mxConnectionHandler extends mxEventSource {
model.setGeometry(edge, this.edgeState.cell.geometry);
}
const parent = model.getParent(source);
parent = model.getParent(source);
// Inserts edge before source
if (this.isInsertBefore(edge, source, target, evt, dropTarget)) {

View File

@ -223,7 +223,7 @@ class mxConstraintHandler {
if (
cell == null &&
point != null &&
(me.getGraphX() != point.x || me.getGraphY() != point.y)
(me.getGraphX() !== point.x || me.getGraphY() !== point.y)
) {
cell = this.graph.getCellAt(point.x, point.y);
}

View File

@ -1105,43 +1105,41 @@ class mxEdgeHandler {
let overrideY = false;
if (tt > 0 && this.isSnapToTerminalsEvent(me)) {
function snapToPoint(pt) {
const snapToPoint = pt => {
if (pt != null) {
const { x } = pt;
if (Math.abs(point.x - x) < tt) {
point.x = x;
overrideX = true;
}
const { y } = pt;
if (Math.abs(point.y - y) < tt) {
point.y = y;
overrideY = true;
}
}
}
};
// Temporary function
function snapToTerminal(terminal) {
const snapToTerminal = terminal => {
if (terminal != null) {
snapToPoint.call(
this,
snapToPoint(
new mxPoint(
view.getRoutingCenterX(terminal),
view.getRoutingCenterY(terminal)
)
);
}
}
};
snapToTerminal.call(this, this.state.getVisibleTerminalState(true));
snapToTerminal.call(this, this.state.getVisibleTerminalState(false));
snapToTerminal(this.state.getVisibleTerminalState(true));
snapToTerminal(this.state.getVisibleTerminalState(false));
if (this.state.absolutePoints != null) {
for (let i = 0; i < this.state.absolutePoints.length; i += 1) {
snapToPoint.call(this, this.state.absolutePoints[i]);
snapToPoint(this.state.absolutePoints[i]);
}
}
}
@ -1339,7 +1337,7 @@ class mxEdgeHandler {
}
}
function checkRemove(idx, tmp) {
const checkRemove = (idx, tmp) => {
if (
idx > 0 &&
idx < abs.length - 1 &&
@ -1355,7 +1353,7 @@ class mxEdgeHandler {
points.splice(idx - 1, 1);
result = points;
}
}
};
// LATER: Check if other points can be removed if a segment is made straight
checkRemove(this.index, pt);

View File

@ -210,7 +210,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
*/
connect = (edge, terminal, isSource, isClone, me) => {
const model = this.graph.getModel();
const geo = model.getGeometry(edge);
let geo = model.getGeometry(edge);
let result = null;
// Merges adjacent edge segments
@ -240,7 +240,7 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
model.beginUpdate();
try {
if (result != null) {
let geo = model.getGeometry(edge);
geo = model.getGeometry(edge);
if (geo != null) {
geo = geo.clone();
@ -374,8 +374,8 @@ class mxEdgeSegmentHandler extends mxElbowEdgeHandler {
for (let i = 0; i < pts.length - 1; i += 1) {
if (this.bends[i + 1] != null) {
const p0 = pts[i];
const pe = pts[i + 1];
p0 = pts[i];
pe = pts[i + 1];
const pt = new mxPoint(
p0.x + (pe.x - p0.x) / 2,
p0.y + (pe.y - p0.y) / 2

View File

@ -834,12 +834,12 @@ class mxGraphHandler {
return (
state.cell != null &&
((!this.cloning && this.isCellMoving(state.cell)) ||
(state.cell != (this.target || parent) &&
(state.cell !== (this.target || parent) &&
!ignore &&
!connected.get(state) &&
(this.target == null ||
this.graph.model.getChildCount(this.target) >= 2) &&
p != (this.target || parent)))
p !== (this.target || parent)))
);
};
}
@ -954,7 +954,7 @@ class mxGraphHandler {
* Returns true if the given cell is a valid drop target.
*/
isValidDropTarget = (target, me) => {
return this.graph.model.getParent(this.cell) != target;
return this.graph.model.getParent(this.cell) !== target;
};
/**
@ -1040,7 +1040,7 @@ class mxGraphHandler {
let highlight = false;
if (state != null && (clone || this.isValidDropTarget(target, me))) {
if (this.target != target) {
if (this.target !== target) {
this.target = target;
this.setHighlightColor(mxConstants.DROP_TARGET_COLOR);
}
@ -1052,7 +1052,7 @@ class mxGraphHandler {
if (
this.connectOnDrop &&
cell != null &&
this.cells.length == 1 &&
this.cells.length === 1 &&
graph.getModel().isVertex(cell) &&
graph.isCellConnectable(cell)
) {
@ -1104,7 +1104,7 @@ class mxGraphHandler {
this.checkPreview();
if (this.currentDx != delta.x || this.currentDy != delta.y) {
if (this.currentDx !== delta.x || this.currentDy !== delta.y) {
this.currentDx = delta.x;
this.currentDy = delta.y;
this.updatePreview();
@ -1198,7 +1198,7 @@ class mxGraphHandler {
const realState = this.graph.view.getState(state.cell);
// Checks if cell was removed or replaced
if (realState != state) {
if (realState !== state) {
state.destroy();
if (realState != null) {
@ -1273,7 +1273,7 @@ class mxGraphHandler {
}
// Resets the handler if everything was removed
if (states.length == 0) {
if (states.length === 0) {
this.reset();
} else {
// Redraws connected edges
@ -1454,7 +1454,7 @@ class mxGraphHandler {
if (
state.control != null &&
state.control.node != null &&
state.control.node.style.visibility == 'hidden'
state.control.node.style.visibility === 'hidden'
) {
state.control.node.style.visibility = '';
}
@ -1487,7 +1487,7 @@ class mxGraphHandler {
* force - Forces an update of the handler regardless of the last used value.
*/
setHandlesVisibleForCells = (cells, visible, force) => {
if (force || this.handlesVisible != visible) {
if (force || this.handlesVisible !== visible) {
this.handlesVisible = visible;
for (let i = 0; i < cells.length; i += 1) {
@ -1655,7 +1655,7 @@ class mxGraphHandler {
mxUtils.getValue(pState.style, mxConstants.STYLE_ROTATION) || 0
);
if (alpha != 0) {
if (alpha !== 0) {
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
const cx = new mxPoint(pState.getCenterX(), pState.getCenterY());
@ -1760,7 +1760,7 @@ class mxGraphHandler {
(this.graph.model.isEdge(state.cell) ||
this.graph.model.isVertex(state.cell)) &&
this.graph.isCellDeletable(state.cell) &&
this.graph.model.getChildCount(state.cell) == 0 &&
this.graph.model.getChildCount(state.cell) === 0 &&
this.graph.isTransparentState(state)
);
};

View File

@ -10,6 +10,7 @@ import mxImageShape from "../shape/mxImageShape";
import mxRectangle from "../util/mxRectangle";
import mxRectangleShape from "../shape/mxRectangleShape";
import mxConstants from "../util/mxConstants";
import mxEvent from "../util/mxEvent";
class mxHandle {
/**

View File

@ -973,7 +973,7 @@ class mxVertexHandler {
let dx = this.state.x + this.state.width / 2 - point.x;
let dy = this.state.y + this.state.height / 2 - point.y;
this.currentAlpha =
dx != 0 ? (Math.atan(dy / dx) * 180) / Math.PI + 90 : dy < 0 ? 180 : 0;
dx !== 0 ? (Math.atan(dy / dx) * 180) / Math.PI + 90 : dy < 0 ? 180 : 0;
if (dx > 0) {
this.currentAlpha -= 180;
@ -1952,61 +1952,52 @@ class mxVertexHandler {
);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const da = Math.round((alpha * 4) / Math.PI);
const ct = new mxPoint(s.getCenterX(), s.getCenterY());
let pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct);
this.moveSizerTo(this.sizers[0], pt.x, pt.y);
this.sizers[0].setCursor(crs[mxUtils.mod(0 + da, crs.length)]);
pt.x = cx;
pt.y = s.y;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[1], pt.x, pt.y);
this.sizers[1].setCursor(crs[mxUtils.mod(1 + da, crs.length)]);
pt.x = r;
pt.y = s.y;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[2], pt.x, pt.y);
this.sizers[2].setCursor(crs[mxUtils.mod(2 + da, crs.length)]);
pt.x = s.x;
pt.y = cy;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[3], pt.x, pt.y);
this.sizers[3].setCursor(crs[mxUtils.mod(7 + da, crs.length)]);
pt.x = r;
pt.y = cy;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[4], pt.x, pt.y);
this.sizers[4].setCursor(crs[mxUtils.mod(3 + da, crs.length)]);
pt.x = s.x;
pt.y = b;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[5], pt.x, pt.y);
this.sizers[5].setCursor(crs[mxUtils.mod(6 + da, crs.length)]);
pt.x = cx;
pt.y = b;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[6], pt.x, pt.y);
this.sizers[6].setCursor(crs[mxUtils.mod(5 + da, crs.length)]);
pt.x = r;
pt.y = b;
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
this.moveSizerTo(this.sizers[7], pt.x, pt.y);
this.sizers[7].setCursor(crs[mxUtils.mod(4 + da, crs.length)]);

View File

@ -9,6 +9,17 @@ import mxConstants from '../util/mxConstants';
import mxPoint from '../util/mxPoint';
import mxSvgCanvas2D from '../util/mxSvgCanvas2D';
import mxEvent from '../util/mxEvent';
import mxClient from "../mxClient";
const toBool = i => {
if (i === 0) return false;
if (i === 1) return true;
if (i === '0') return false;
if (i === '1') return true;
if (String(i).toLowerCase() === 'true') return true;
if (String(i).toLowerCase() === 'false') return false;
return !!i;
};
class mxShape {
/**
@ -151,7 +162,7 @@ class mxShape {
* Allows to use the SVG bounding box in SVG. Default is false for performance
* reasons.
*/
useSvgBoundingBox = false;
useSvgBoundingBox = true;
/**
* Class: mxShape
@ -387,12 +398,12 @@ class mxShape {
const pts = this.points;
if (pts != null && pts.length > 0 && pts[0] != null) {
this.bounds = new mxRectangle(Number(pts[0].x), Number(pts[0].y), 1, 1);
this.bounds = new mxRectangle(Math.round(pts[0].x), Math.round(pts[0].y), 1, 1);
for (let i = 1; i < this.points.length; i += 1) {
if (pts[i] != null) {
this.bounds.add(
new mxRectangle(Number(pts[i].x), Number(pts[i].y), 1, 1)
new mxRectangle(Math.round(pts[i].x), Math.round(pts[i].y), 1, 1)
);
}
}
@ -412,7 +423,7 @@ class mxShape {
mxConstants.STYLE_DIRECTION,
mxConstants.DIRECTION_EAST
);
let bounds = rect;
let bounds = rect.clone();
// Normalizes argument for getLabelMargins hook
if (
@ -423,18 +434,20 @@ class mxShape {
this.state.text.isPaintBoundsInverted()
) {
bounds = bounds.clone();
const tmp = bounds.width;
bounds.width = bounds.height;
bounds.height = tmp;
[bounds.width, bounds.height] = [bounds.height, bounds.width];
}
const m = this.getLabelMargins(bounds);
let labelMargins = this.getLabelMargins(bounds);
if (m != null) {
let flipH =
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPH, false) == '1';
let flipV =
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPV, false) == '1';
if (labelMargins != null) {
labelMargins = labelMargins.copy();
let flipH = toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPH, false)
);
let flipV = toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPV, false)
);
// Handles special case for vertical labels
if (
@ -442,20 +455,27 @@ class mxShape {
this.state.text != null &&
this.state.text.isPaintBoundsInverted()
) {
let tmp = m.x;
m.x = m.height;
m.height = m.width;
m.width = m.y;
m.y = tmp;
const tmp = labelMargins.x;
labelMargins.x = labelMargins.height;
labelMargins.height = labelMargins.width;
labelMargins.width = labelMargins.y;
labelMargins.y = tmp;
tmp = flipH;
flipH = flipV;
flipV = tmp;
[flipH, flipV] = [flipV, flipH];
}
return mxUtils.getDirectedBounds(rect, m, this.style, flipH, flipV);
const r = mxUtils.getDirectedBounds(
rect,
labelMargins,
this.style,
flipH,
flipV
);
alert(JSON.stringify(r))
return r;
}
alert(JSON.stringify(rect))
return rect;
};
@ -477,14 +497,14 @@ class mxShape {
*/
checkBounds = () => {
return (
!isNaN(this.scale) &&
isFinite(this.scale) &&
!Number.isNaN(this.scale) &&
Number.isFinite(this.scale) &&
this.scale > 0 &&
this.bounds != null &&
!isNaN(this.bounds.x) &&
!isNaN(this.bounds.y) &&
!isNaN(this.bounds.width) &&
!isNaN(this.bounds.height) &&
!Number.isNaN(this.bounds.x) &&
!Number.isNaN(this.bounds.y) &&
!Number.isNaN(this.bounds.width) &&
!Number.isNaN(this.bounds.height) &&
this.bounds.width > 0 &&
this.bounds.height > 0
);
@ -506,7 +526,7 @@ class mxShape {
this.paint(canvas);
this.afterPaint(canvas);
if (this.node != canvas.root) {
if (this.node !== canvas.root) {
// Forces parsing in IE8 standards mode - slow! avoid
this.node.insertAdjacentHTML('beforeend', canvas.root.outerHTML);
}
@ -880,8 +900,9 @@ class mxShape {
c.setDashed(
this.isDashed,
this.style != null
? mxUtils.getValue(this.style, mxConstants.STYLE_FIX_DASH, false) ===
1
? toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FIX_DASH, false)
)
: false
);
}
@ -952,8 +973,13 @@ class mxShape {
if (
!this.outline ||
this.style == null ||
mxUtils.getValue(this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) ===
toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_BACKGROUND_OUTLINE,
0
) === false
)
) {
c.setShadow(false);
this.paintForeground(c, x, y, w, h);
@ -989,9 +1015,7 @@ class mxShape {
getArcSize = (w, h) => {
let r = 0;
if (
mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1'
) {
if (toBool(mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0))) {
r = Math.min(
w / 2,
Math.min(
@ -1004,12 +1028,13 @@ class mxShape {
)
);
} else {
const f =
const f = parseFloat(
mxUtils.getValue(
this.style,
mxConstants.STYLE_ARCSIZE,
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100
) / 100;
) / 100
);
r = Math.min(w * f, h * f);
}
@ -1085,7 +1110,7 @@ class mxShape {
if (
rounded &&
(dx != 0 || dy != 0) &&
(dx !== 0 || dy !== 0) &&
(exclude == null || mxUtils.indexOf(exclude, i - 1) < 0)
) {
// Draws a line from the last point to the current
@ -1131,7 +1156,7 @@ class mxShape {
}
pt = tmp;
i++;
i += 1;
}
if (close) {
@ -1282,17 +1307,21 @@ class mxShape {
mxConstants.STYLE_DIRECTION,
this.direction
);
this.flipH =
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPH, 0) === 1;
this.flipV =
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPV, 0) === 1;
this.flipH = toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPH, 0)
);
this.flipV = toBool(
mxUtils.getValue(this.style, mxConstants.STYLE_FLIPV, 0)
);
// Legacy support for stencilFlipH/V
if (this.stencil != null) {
this.flipH =
mxUtils.getValue(this.style, 'stencilFlipH', 0) === 1 || this.flipH;
this.flipV =
mxUtils.getValue(this.style, 'stencilFlipV', 0) === 1 || this.flipV;
this.flipH = toBool(
mxUtils.getValue(this.style, 'stencilFlipH', 0) || this.flipH
);
this.flipV =toBool(
mxUtils.getValue(this.style, 'stencilFlipV', 0) || this.flipV
);
}
if (
@ -1304,35 +1333,37 @@ class mxShape {
this.flipV = tmp;
}
this.isShadow =
this.isShadow = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_SHADOW,
this.isShadow
) === 1;
this.isDashed =
));
this.isDashed = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_DASHED,
this.isDashed
) === 1;
this.isRounded =
));
this.isRounded = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_ROUNDED,
this.isRounded
) === 1;
this.glass =
mxUtils.getValue(this.style, mxConstants.STYLE_GLASS, this.glass) === 1;
));
this.glass = toBool(
mxUtils.getValue(
this.style,
mxConstants.STYLE_GLASS,
this.glass
));
if (this.fill === mxConstants.NONE) {
this.fill = null;
}
if (this.gradient === mxConstants.NONE) {
this.gradient = null;
}
if (this.stroke === mxConstants.NONE) {
this.stroke = null;
}
@ -1415,7 +1446,7 @@ class mxShape {
this.augmentBoundingBox(bbox);
const rot = this.getShapeRotation();
if (rot != 0) {
if (rot !== 0) {
bbox = mxUtils.getBoundingBox(bbox, rot);
}
}
@ -1491,8 +1522,10 @@ class mxShape {
getTextRotation = () => {
let rot = this.getRotation();
if (mxUtils.getValue(this.style, mxConstants.STYLE_HORIZONTAL, 1) != 1) {
rot += verticalTextRotation;
if (
!toBool(mxUtils.getValue(this.style, mxConstants.STYLE_HORIZONTAL, 1))
) {
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
}
return rot;
@ -1561,7 +1594,7 @@ class mxShape {
if (gradient != null) {
gradient.mxRefCount = (gradient.mxRefCount || 0) - 1;
if (gradient.mxRefCount == 0 && gradient.parentNode != null) {
if (gradient.mxRefCount === 0 && gradient.parentNode != null) {
gradient.parentNode.removeChild(gradient);
}
}