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

cleanups and import fixes

development
mcyph 2021-03-27 17:52:29 +11:00
parent 34a0fcbc81
commit 6fdf9f24cb
18 changed files with 459 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/mxgraph/io/mxChildChangeCodec.js
View File

@ -7,6 +7,8 @@
import mxChildChange from '../model/atomic_changes/mxChildChange';
import mxObjectCodec from './mxObjectCodec';
import mxCodecRegistry from './mxCodecRegistry';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
class mxChildChangeCodec extends mxObjectCodec {
/**
@ -47,7 +49,6 @@ class mxChildChangeCodec extends mxObjectCodec {
if (attr === 'child' && (!isWrite || obj.model.contains(obj.previous))) {
return true;
}
return mxUtils.indexOf(this.idrefs, attr) >= 0;
}

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

@ -75,11 +75,9 @@ class mxDefaultKeyHandlerCodec extends mxObjectCodec {
into.bindAction(as, action, control);
}
node = node.nextSibling;
}
}
return into;
}
}

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

@ -485,7 +485,7 @@ class mxWindow extends mxEventSource {
*/
isResizable() {
if (this.resize != null) {
return this.resize.style.display != 'none';
return this.resize.style.display !== 'none';
}
return false;
@ -732,7 +732,7 @@ class mxWindow extends mxEventSource {
const funct = evt => {
this.activate();
if (this.maximize.style.display != 'none') {
if (this.maximize.style.display !== 'none') {
if (!maximized) {
maximized = true;
@ -767,7 +767,7 @@ class mxWindow extends mxEventSource {
const style = mxUtils.getCurrentStyle(this.contentWrapper);
if (style.overflow == 'auto' || this.resize != null) {
if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${this.div.offsetHeight -
this.title.offsetHeight -
this.contentHeightCorrection}px`;
@ -791,7 +791,7 @@ class mxWindow extends mxEventSource {
const style = mxUtils.getCurrentStyle(this.contentWrapper);
if (style.overflow == 'auto' || this.resize != null) {
if (style.overflow === 'auto' || this.resize != null) {
this.contentWrapper.style.height = `${this.div.offsetHeight -
this.title.offsetHeight -
this.contentHeightCorrection}px`;
@ -959,7 +959,7 @@ class mxWindow extends mxEventSource {
*/
isVisible() {
if (this.div != null) {
return this.div.style.display != 'none';
return this.div.style.display !== 'none';
}
return false;
@ -975,7 +975,7 @@ class mxWindow extends mxEventSource {
* visible - Boolean indicating if the window should be made visible.
*/
setVisible(visible) {
if (this.div != null && this.isVisible() != visible) {
if (this.div != null && this.isVisible() !== visible) {
if (visible) {
this.show();
} else {

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

@ -322,19 +322,19 @@ class mxCellRenderer {
* the respective color on the shape.
*/
resolveColor(state, field, key) {
const shape = key == mxConstants.STYLE_FONTCOLOR ? state.text : state.shape;
const shape = key === mxConstants.STYLE_FONTCOLOR ? state.text : state.shape;
if (shape != null) {
const { graph } = state.view;
const value = shape[field];
let referenced = null;
if (value == 'inherit') {
if (value === 'inherit') {
referenced = graph.model.getParent(state.cell);
} else if (value == 'swimlane') {
} else if (value === 'swimlane') {
shape[field] =
key == mxConstants.STYLE_STROKECOLOR ||
key == mxConstants.STYLE_FONTCOLOR
key === mxConstants.STYLE_STROKECOLOR ||
key === mxConstants.STYLE_FONTCOLOR
? '#000000'
: '#ffffff';
@ -346,17 +346,17 @@ class mxCellRenderer {
referenced = graph.getSwimlane(referenced);
key = graph.swimlaneIndicatorColorAttribute;
} else if (value == 'indicated' && state.shape != null) {
} else if (value === 'indicated' && state.shape != null) {
shape[field] = state.shape.indicatorColor;
} else if (
key != mxConstants.STYLE_FILLCOLOR &&
value == mxConstants.STYLE_FILLCOLOR &&
key !== mxConstants.STYLE_FILLCOLOR &&
value === mxConstants.STYLE_FILLCOLOR &&
state.shape != null
) {
shape[field] = state.style[mxConstants.STYLE_FILLCOLOR];
} else if (
key != mxConstants.STYLE_STROKECOLOR &&
value == mxConstants.STYLE_STROKECOLOR &&
key !== mxConstants.STYLE_STROKECOLOR &&
value === mxConstants.STYLE_STROKECOLOR &&
state.shape != null
) {
shape[field] = state.style[mxConstants.STYLE_STROKECOLOR];
@ -368,9 +368,9 @@ class mxCellRenderer {
if (rstate != null) {
const rshape =
key == mxConstants.STYLE_FONTCOLOR ? rstate.text : rstate.shape;
key === mxConstants.STYLE_FONTCOLOR ? rstate.text : rstate.shape;
if (rshape != null && field != 'indicatorColor') {
if (rshape != null && field !== 'indicatorColor') {
shape[field] = rshape[field];
} else {
shape[field] = rstate.style[key];
@ -487,8 +487,8 @@ class mxCellRenderer {
new mxMouseEvent(evt, state)
);
forceGetCell =
graph.dialect != mxConstants.DIALECT_SVG &&
mxEvent.getSource(evt).nodeName == 'IMG';
graph.dialect !== mxConstants.DIALECT_SVG &&
mxEvent.getSource(evt).nodeName === 'IMG';
}
}),
mxUtils.bind(this, evt => {
@ -727,7 +727,7 @@ class mxCellRenderer {
const isForceHtml =
graph.isHtmlLabel(state.cell) &&
mxClient.NO_FO &&
graph.dialect == mxConstants.DIALECT_SVG;
graph.dialect === mxConstants.DIALECT_SVG;
if (isForceHtml) {
control.dialect = mxConstants.DIALECT_PREFERHTML;
@ -847,8 +847,8 @@ class mxCellRenderer {
let result = state;
if (
(graph.dialect != mxConstants.DIALECT_SVG &&
mxEvent.getSource(evt).nodeName == 'IMG') ||
(graph.dialect !== mxConstants.DIALECT_SVG &&
mxEvent.getSource(evt).nodeName === 'IMG') ||
mxClient.IS_TOUCH
) {
const x = mxEvent.getClientX(evt);
@ -1292,7 +1292,7 @@ class mxCellRenderer {
const bounds = shape.overlay.getBounds(state);
if (!state.view.graph.getModel().isEdge(state.cell)) {
if (state.shape != null && rot != 0) {
if (state.shape != null && rot !== 0) {
let cx = bounds.getCenterX();
let cy = bounds.getCenterY();
@ -1313,7 +1313,7 @@ class mxCellRenderer {
if (
forced ||
shape.bounds == null ||
shape.scale != state.view.scale ||
shape.scale !== state.view.scale ||
!shape.bounds.equals(bounds)
) {
shape.bounds = bounds;
@ -1345,9 +1345,9 @@ class mxCellRenderer {
if (
forced ||
state.control.scale != s ||
state.control.scale !== s ||
!state.control.bounds.equals(bounds) ||
state.control.rotation != r
state.control.rotation !== r
) {
state.control.rotation = r;
state.control.bounds = bounds;
@ -1386,7 +1386,7 @@ class mxCellRenderer {
cy -= t;
}
if (rot != 0) {
if (rot !== 0) {
const rad = mxUtils.toRadians(rot);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
@ -1439,11 +1439,11 @@ class mxCellRenderer {
for (let i = 0; i < shapes.length; i += 1) {
if (shapes[i] != null && shapes[i].node != null) {
const html =
shapes[i].node.parentNode != state.view.getDrawPane() &&
shapes[i].node.parentNode != state.view.getOverlayPane();
shapes[i].node.parentNode !== state.view.getDrawPane() &&
shapes[i].node.parentNode !== state.view.getOverlayPane();
const temp = html ? htmlNode : node;
if (temp != null && temp.nextSibling != shapes[i].node) {
if (temp != null && temp.nextSibling !== shapes[i].node) {
if (temp.nextSibling == null) {
temp.parentNode.appendChild(shapes[i].node);
} else {
@ -1451,18 +1451,18 @@ class mxCellRenderer {
}
} else if (temp == null) {
// Special case: First HTML node should be first sibling after canvas
if (shapes[i].node.parentNode == state.view.graph.container) {
if (shapes[i].node.parentNode === state.view.graph.container) {
let { canvas } = state.view;
while (
canvas != null &&
canvas.parentNode != state.view.graph.container
canvas.parentNode !== state.view.graph.container
) {
canvas = canvas.parentNode;
}
if (canvas != null && canvas.nextSibling != null) {
if (canvas.nextSibling != shapes[i].node) {
if (canvas.nextSibling !== shapes[i].node) {
shapes[i].node.parentNode.insertBefore(
shapes[i].node,
canvas.nextSibling
@ -1553,7 +1553,7 @@ class mxCellRenderer {
state.shape != null &&
state.shape.style != null &&
state.style != null &&
state.shape.style[mxConstants.STYLE_SHAPE] !=
state.shape.style[mxConstants.STYLE_SHAPE] !==
state.style[mxConstants.STYLE_SHAPE]
) {
state.shape.destroy();
@ -1563,7 +1563,7 @@ class mxCellRenderer {
if (
state.shape == null &&
state.view.graph.container != null &&
state.cell != state.view.currentRoot &&
state.cell !== state.view.currentRoot &&
(model.isVertex(state.cell) || model.isEdge(state.cell))
) {
state.shape = this.createShape(state);

4
src/mxgraph/view/mxCellStatePreview.js
View File

@ -124,7 +124,7 @@ class mxCellStatePreview {
// the first phase so that edge terminal points will
// be updated in the second phase
if (
(dx != 0 || dy != 0) &&
(dx !== 0 || dy !== 0) &&
geo != null &&
(!geo.relative || this.deltas.get(state.cell) != null)
) {
@ -163,7 +163,7 @@ class mxCellStatePreview {
// Moves selection vertices which are relative
if (
(dx != 0 || dy != 0) &&
(dx !== 0 || dy !== 0) &&
geo != null &&
geo.relative &&
model.isVertex(state.cell) &&

71
src/mxgraph/view/mxEdgeStyle.js
View File

@ -8,6 +8,7 @@ import mxUtils from '../util/mxUtils';
import mxPoint from '../util/mxPoint';
import mxCellState from './mxCellState';
import mxConstants from '../util/mxConstants';
import mxRectangle from "../util/mxRectangle";
const mxEdgeStyle = {
/**
@ -203,14 +204,14 @@ const mxEdgeStyle = {
const arr = new mxPoint(xe + dx, ye);
// Adds intermediate points if both go out on same side
if (isSourceLeft == isTargetLeft) {
if (isSourceLeft === isTargetLeft) {
const x = isSourceLeft
? Math.min(x0, xe) - segment
: Math.max(x0, xe) + segment;
result.push(new mxPoint(x, y0));
result.push(new mxPoint(x, ye));
} else if (dep.x < arr.x == isSourceLeft) {
} else if (dep.x < arr.x === isSourceLeft) {
const midY = y0 + (ye - y0) / 2;
result.push(dep);
@ -278,8 +279,8 @@ const mxEdgeStyle = {
);
if (
dir == mxConstants.DIRECTION_NORTH ||
dir == mxConstants.DIRECTION_SOUTH
dir === mxConstants.DIRECTION_NORTH ||
dir === mxConstants.DIRECTION_SOUTH
) {
x = view.getRoutingCenterX(source);
dx = seg;
@ -292,16 +293,16 @@ const mxEdgeStyle = {
if (pt != null) {
x = pt.x;
dy = Math.max(Math.abs(y - pt.y), dy);
} else if (dir == mxConstants.DIRECTION_NORTH) {
} else if (dir === mxConstants.DIRECTION_NORTH) {
y = source.y - 2 * dx;
} else if (dir == mxConstants.DIRECTION_SOUTH) {
} else if (dir === mxConstants.DIRECTION_SOUTH) {
y = source.y + source.height + 2 * dx;
} else if (dir == mxConstants.DIRECTION_EAST) {
} else if (dir === mxConstants.DIRECTION_EAST) {
x = source.x - 2 * dy;
} else {
x = source.x + source.width + 2 * dy;
}
} else if (pt != null) {
} else if (pt !== null) {
x = view.getRoutingCenterX(source);
dx = Math.max(Math.abs(x - pt.x), dy);
y = pt.y;
@ -352,7 +353,7 @@ const mxEdgeStyle = {
target.x + target.width
);
vertical = left == right;
vertical = left === right;
if (!vertical) {
const top = Math.max(source.y, target.y);
@ -361,7 +362,7 @@ const mxEdgeStyle = {
target.y + target.height
);
horizontal = top == bottom;
horizontal = top === bottom;
}
}
}
@ -369,7 +370,7 @@ const mxEdgeStyle = {
if (
!horizontal &&
(vertical ||
state.style[mxConstants.STYLE_ELBOW] == mxConstants.ELBOW_VERTICAL)
state.style[mxConstants.STYLE_ELBOW] === mxConstants.ELBOW_VERTICAL)
) {
mxEdgeStyle.TopToBottom(state, source, target, points, result);
} else {
@ -439,7 +440,7 @@ const mxEdgeStyle = {
result.push(new mxPoint(x, y2));
}
if (result.length == 1) {
if (result.length === 1) {
if (pt != null) {
if (
!mxUtils.contains(target, x, pt.y) &&
@ -515,8 +516,8 @@ const mxEdgeStyle = {
result.push(new mxPoint(x, y));
}
if (result.length == 1) {
if (pt != null && result.length == 1) {
if (result.length === 1) {
if (pt != null && result.length === 1) {
if (
!mxUtils.contains(target, pt.x, y) &&
!mxUtils.contains(source, pt.x, y)
@ -616,7 +617,7 @@ const mxEdgeStyle = {
}
}
if (hints.length == 0) {
if (hints.length === 0) {
return;
}
@ -659,8 +660,8 @@ const mxEdgeStyle = {
// at source and target segments only
for (let i = 0; i < 2; i += 1) {
const fixedVertAlign =
currentPt != null && currentPt.x == currentHint.x;
const fixedHozAlign = currentPt != null && currentPt.y == currentHint.y;
currentPt != null && currentPt.x === currentHint.x;
const fixedHozAlign = currentPt != null && currentPt.y === currentHint.y;
const inHozChan =
currentTerm != null &&
@ -696,9 +697,9 @@ const mxEdgeStyle = {
if (vertChan || hozChan) {
horizontal = hozChan;
if (i == 1) {
if (i === 1) {
// Work back from target end
horizontal = hints.length % 2 == 0 ? hozChan : vertChan;
horizontal = hints.length % 2 === 0 ? hozChan : vertChan;
}
break;
@ -721,7 +722,7 @@ const mxEdgeStyle = {
if (
horizontal &&
((pts[0] != null && pts[0].y != hint.y) ||
((pts[0] != null && pts[0].y !== hint.y) ||
(pts[0] == null &&
source != null &&
(hint.y < source.y || hint.y > source.y + source.height)))
@ -729,7 +730,7 @@ const mxEdgeStyle = {
pushPoint(new mxPoint(pt.x, hint.y));
} else if (
!horizontal &&
((pts[0] != null && pts[0].x != hint.x) ||
((pts[0] != null && pts[0].x !== hint.x) ||
(pts[0] == null &&
source != null &&
(hint.x < source.x || hint.x > source.x + source.width)))
@ -778,7 +779,7 @@ const mxEdgeStyle = {
if (hint != null) {
if (
horizontal &&
((pts[lastInx] != null && pts[lastInx].y != hint.y) ||
((pts[lastInx] != null && pts[lastInx].y !== hint.y) ||
(pts[lastInx] == null &&
target != null &&
(hint.y < target.y || hint.y > target.y + target.height)))
@ -786,7 +787,7 @@ const mxEdgeStyle = {
pushPoint(new mxPoint(pt.x, hint.y));
} else if (
!horizontal &&
((pts[lastInx] != null && pts[lastInx].x != hint.x) ||
((pts[lastInx] != null && pts[lastInx].x !== hint.x) ||
(pts[lastInx] == null &&
target != null &&
(hint.x < target.x || hint.x > target.x + target.width)))
@ -956,7 +957,7 @@ const mxEdgeStyle = {
)
);
if (value == 'auto') {
if (value === 'auto') {
// Computes the automatic jetty size
const type = mxUtils.getValue(
state.style,
@ -964,7 +965,7 @@ const mxEdgeStyle = {
mxConstants.NONE
);
if (type != mxConstants.NONE) {
if (type !== mxConstants.NONE) {
const size = mxUtils.getNumber(
state.style,
isSource ? mxConstants.STYLE_STARTSIZE : mxConstants.STYLE_ENDSIZE,
@ -1094,7 +1095,7 @@ const mxEdgeStyle = {
// console.log('sourceBuffer', sourceBuffer);
// console.log('targetBuffer', targetBuffer);
// Workaround for loop routing within buffer zone
if (source != null && target == source) {
if (source != null && target === source) {
targetBuffer = Math.max(sourceBuffer, targetBuffer);
sourceBuffer = targetBuffer;
}
@ -1150,7 +1151,7 @@ const mxEdgeStyle = {
// console.log('source rotation', rotation);
if (rotation != 0) {
if (rotation !== 0) {
const newRect = mxUtils.getBoundingBox(
new mxRectangle(sourceX, sourceY, sourceWidth, sourceHeight),
rotation
@ -1173,7 +1174,7 @@ const mxEdgeStyle = {
// console.log('target rotation', rotation);
if (rotation != 0) {
if (rotation !== 0) {
const newRect = mxUtils.getBoundingBox(
new mxRectangle(targetX, targetY, targetWidth, targetHeight),
rotation
@ -1232,7 +1233,7 @@ const mxEdgeStyle = {
quad = 3;
// Special case on x = 0 and negative y
if (dx == 0) {
if (dx === 0) {
quad = 2;
}
}
@ -1331,15 +1332,15 @@ const mxEdgeStyle = {
// If the preferred port isn't available, switch it
for (let i = 0; i < 2; i += 1) {
if (dir[i] != 0x0) {
if (dir[i] !== 0x0) {
continue;
}
if ((horPref[i] & portConstraint[i]) == 0) {
if ((horPref[i] & portConstraint[i]) === 0) {
horPref[i] = mxUtils.reversePortConstraints(horPref[i]);
}
if ((vertPref[i] & portConstraint[i]) == 0) {
if ((vertPref[i] & portConstraint[i]) === 0) {
vertPref[i] = mxUtils.reversePortConstraints(vertPref[i]);
}
@ -1391,11 +1392,11 @@ const mxEdgeStyle = {
// If the list contains gaps, compact it
for (let i = 0; i < 2; i += 1) {
if (dir[i] != 0x0) {
if (dir[i] !== 0x0) {
continue;
}
if ((prefOrdering[i][0] & portConstraint[i]) == 0) {
if ((prefOrdering[i][0] & portConstraint[i]) === 0) {
prefOrdering[i][0] = prefOrdering[i][1];
}
@ -1408,7 +1409,7 @@ const mxEdgeStyle = {
dirPref[i] = dirPref[i] << 8;
}
if ((dirPref[i] & 0xf00) == 0) {
if ((dirPref[i] & 0xf00) === 0) {
dirPref[i] = (dirPref[i] & 0xf) | (dirPref[i] >> 8);
}

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

@ -4448,6 +4448,8 @@ class mxGraph extends mxEventSource {
let height;
let style;
let relative;
let geometryClass;
let cellClass;
if (args.length === 1) {
// If only a single parameter, treat as an object
@ -4464,9 +4466,14 @@ class mxGraph extends mxEventSource {
style = params.style;
relative = params.relative;
geometryClass = params.geometryClass;
cellClass = params.cellClass;
} else {
// Otherwise treat as arguments
[parent, id, value, x, y, width, height, style, relative] = args;
[parent, id, value, x, y, width, height, style, relative,
geometryClass, cellClass] = args;
}
const vertex = this.createVertex(
@ -4478,7 +4485,9 @@ class mxGraph extends mxEventSource {
width,
height,
style,
relative
relative,
geometryClass,
cellClass
);
return this.addCell(vertex, parent);
};
@ -4488,13 +4497,15 @@ class mxGraph extends mxEventSource {
*
* Hook method that creates the new vertex for <insertVertex>.
*/
createVertex(parent, id, value, x, y, width, height, style, relative) {
createVertex(parent, id, value, x, y, width, height, style, relative,
geometryClass, cellClass) {
// Creates the geometry for the vertex
const geometry = new mxGeometry(x, y, width, height);
const geometry = new (geometryClass || mxGeometry)(x, y, width, height);
geometry.relative = relative != null ? relative : false;
// Creates the vertex
const vertex = new mxCell(value, geometry, style);
const vertex = new (cellClass || mxCell)(value, geometry, style);
vertex.setId(id);
vertex.setVertex(true);
vertex.setConnectable(true);

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

@ -20,7 +20,7 @@ import mxCellState from './mxCellState';
import mxUndoableEdit from '../util/mxUndoableEdit';
import mxImageShape from '../shape/mxImageShape';
import mxMouseEvent from '../util/mxMouseEvent';
import mxStyleRegistry from "./mxStyleRegistry";
import mxStyleRegistry from './mxStyleRegistry';
class mxGraphView extends mxEventSource {
EMPTY_POINT = new mxPoint();
@ -361,7 +361,7 @@ class mxGraphView extends mxEventSource {
setScale(value) {
const previousScale = this.scale;
if (this.scale != value) {
if (this.scale !== value) {
this.scale = value;
if (this.isEventsEnabled()) {
@ -404,7 +404,7 @@ class mxGraphView extends mxEventSource {
setTranslate(dx, dy) {
const previousTranslate = new mxPoint(this.translate.x, this.translate.y);
if (this.translate.x != dx || this.translate.y != dy) {
if (this.translate.x !== dx || this.translate.y !== dy) {
this.translate.x = dx;
this.translate.y = dy;
@ -642,7 +642,6 @@ class mxGraphView extends mxEventSource {
}
}
}
return bbox;
}
@ -680,7 +679,7 @@ class mxGraphView extends mxEventSource {
if (bg != null) {
if (
this.backgroundImage == null ||
this.backgroundImage.image != bg.src
this.backgroundImage.image !== bg.src
) {
if (this.backgroundImage != null) {
this.backgroundImage.destroy();
@ -821,7 +820,6 @@ class mxGraphView extends mxEventSource {
backgroundImage.bounds.y = this.scale * this.translate.y;
backgroundImage.bounds.width = this.scale * bg.width;
backgroundImage.bounds.height = this.scale * bg.height;
backgroundImage.redraw();
}
@ -854,7 +852,8 @@ class mxGraphView extends mxEventSource {
for (let i = 0; i < childCount; i += 1) {
this.validateCell(
model.getChildAt(cell, i),
visible && (!this.isCellCollapsed(cell) || cell == this.currentRoot)
visible &&
(!this.isCellCollapsed(cell) || cell === this.currentRoot)
);
}
}
@ -892,7 +891,7 @@ class mxGraphView extends mxEventSource {
state.invalidStyle = false;
}
if (cell != this.currentRoot) {
if (cell !== this.currentRoot) {
this.validateCellState(model.getParent(cell), false);
}
@ -908,7 +907,7 @@ class mxGraphView extends mxEventSource {
this.updateCellState(state);
// Repaint happens immediately after the cell is validated
if (cell != this.currentRoot && !state.invalid) {
if (cell !== this.currentRoot && !state.invalid) {
this.graph.cellRenderer.redraw(state, false, this.isRendering());
// Handles changes to invertex paintbounds after update of rendering shape
@ -950,11 +949,11 @@ class mxGraphView extends mxEventSource {
state.origin.y = 0;
state.length = 0;
if (state.cell != this.currentRoot) {
if (state.cell !== this.currentRoot) {
const model = this.graph.getModel();
const pState = this.getState(model.getParent(state.cell));
if (pState != null && pState.cell != this.currentRoot) {
if (pState != null && pState.cell !== this.currentRoot) {
state.origin.x += pState.origin.x;
state.origin.y += pState.origin.y;
}
@ -1038,8 +1037,7 @@ class mxGraphView extends mxEventSource {
const alpha = mxUtils.toRadians(
pState.style[mxConstants.STYLE_ROTATION] || '0'
);
if (alpha != 0) {
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
@ -1050,7 +1048,6 @@ class mxGraphView extends mxEventSource {
state.y = pt.y - state.height / 2;
}
}
this.updateVertexLabelOffset(state);
}
@ -1083,7 +1080,7 @@ class mxGraphView extends mxEventSource {
const pts = state.absolutePoints;
if (
state.cell != this.currentRoot &&
state.cell !== this.currentRoot &&
(pts == null ||
pts.length < 2 ||
pts[0] == null ||
@ -1116,7 +1113,7 @@ class mxGraphView extends mxEventSource {
mxConstants.ALIGN_CENTER
);
if (h == mxConstants.ALIGN_LEFT) {
if (h === mxConstants.ALIGN_LEFT) {
let lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
@ -1130,9 +1127,9 @@ class mxGraphView extends mxEventSource {
}
state.absoluteOffset.x -= lw;
} else if (h == mxConstants.ALIGN_RIGHT) {
} else if (h === mxConstants.ALIGN_RIGHT) {
state.absoluteOffset.x += state.width;
} else if (h == mxConstants.ALIGN_CENTER) {
} else if (h === mxConstants.ALIGN_CENTER) {
const lw = mxUtils.getValue(
state.style,
mxConstants.STYLE_LABEL_WIDTH,
@ -1148,13 +1145,13 @@ class mxGraphView extends mxEventSource {
);
let dx = 0;
if (align == mxConstants.ALIGN_CENTER) {
if (align === mxConstants.ALIGN_CENTER) {
dx = 0.5;
} else if (align == mxConstants.ALIGN_RIGHT) {
} else if (align === mxConstants.ALIGN_RIGHT) {
dx = 1;
}
if (dx != 0) {
if (dx !== 0) {
state.absoluteOffset.x -= (lw * this.scale - state.width) * dx;
}
}
@ -1166,9 +1163,9 @@ class mxGraphView extends mxEventSource {
mxConstants.ALIGN_MIDDLE
);
if (v == mxConstants.ALIGN_TOP) {
if (v === mxConstants.ALIGN_TOP) {
state.absoluteOffset.y -= state.height;
} else if (v == mxConstants.ALIGN_BOTTOM) {
} else if (v === mxConstants.ALIGN_BOTTOM) {
state.absoluteOffset.y += state.height;
}
}
@ -1321,7 +1318,7 @@ class mxGraphView extends mxEventSource {
state != null &&
state.shape != null &&
state.shape.stencil != null &&
state.shape.stencil.aspect == 'fixed'
state.shape.stencil.aspect === 'fixed'
) {
previous = mxRectangle.fromRectangle(state);
const asp = state.shape.stencil.computeAspect(
@ -1445,7 +1442,7 @@ class mxGraphView extends mxEventSource {
) ||
((sc == null || sc.point == null) && (tc == null || tc.point == null)))
) {
return source != null && source == target;
return source != null && source === target;
}
return false;
@ -1470,18 +1467,15 @@ class mxGraphView extends mxEventSource {
// Converts string values to objects
if (typeof edgeStyle === 'string') {
let tmp = mxStyleRegistry.getValue(edgeStyle);
if (tmp == null && this.isAllowEval()) {
tmp = mxUtils.eval(edgeStyle);
}
edgeStyle = tmp;
}
if (typeof edgeStyle === 'function') {
return edgeStyle;
}
return null;
}
@ -1554,7 +1548,7 @@ class mxGraphView extends mxEventSource {
);
const center = new mxPoint(start.getCenterX(), start.getCenterY());
if (alpha != 0) {
if (alpha !== 0) {
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
next = mxUtils.getRotatedPoint(next, cos, sin, center);
@ -1570,9 +1564,9 @@ class mxGraphView extends mxEventSource {
: mxConstants.STYLE_TARGET_PERIMETER_SPACING
] || 0
);
let pt = this.getPerimeterPoint(start, next, alpha == 0 && orth, border);
let pt = this.getPerimeterPoint(start, next, alpha === 0 && orth, border);
if (alpha != 0) {
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
pt = mxUtils.getRotatedPoint(pt, cos, sin, center);
@ -1643,17 +1637,17 @@ class mxGraphView extends mxEventSource {
if (this.graph.model.isVertex(terminal.cell)) {
flipH =
mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPH, 0) == 1;
mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPH, 0) === 1;
flipV =
mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPV, 0) == 1;
mxUtils.getValue(terminal.style, mxConstants.STYLE_FLIPV, 0) === 1;
// Legacy support for stencilFlipH/V
if (terminal.shape != null && terminal.shape.stencil != null) {
flipH =
mxUtils.getValue(terminal.style, 'stencilFlipH', 0) == 1 ||
mxUtils.getValue(terminal.style, 'stencilFlipH', 0) === 1 ||
flipH;
flipV =
mxUtils.getValue(terminal.style, 'stencilFlipV', 0) == 1 ||
mxUtils.getValue(terminal.style, 'stencilFlipV', 0) === 1 ||
flipV;
}
@ -1856,8 +1850,8 @@ class mxGraphView extends mxEventSource {
if (
best != null &&
(!model.contains(best) ||
model.getParent(best) == model.getRoot() ||
best == this.currentRoot)
model.getParent(best) === model.getRoot() ||
best === this.currentRoot)
) {
best = null;
}
@ -1882,7 +1876,7 @@ class mxGraphView extends mxEventSource {
const p0 = points[0];
const pe = points[points.length - 1];
if (p0.x != pe.x || p0.y != pe.y) {
if (p0.x !== pe.x || p0.y !== pe.y) {
const dx = pe.x - p0.x;
const dy = pe.y - p0.y;
state.terminalDistance = Math.sqrt(dx * dx + dy * dy);
@ -1961,7 +1955,7 @@ class mxGraphView extends mxEventSource {
segment = state.segments[index++];
}
const factor = segment == 0 ? 0 : (dist - length) / segment;
const factor = segment === 0 ? 0 : (dist - length) / segment;
const p0 = state.absolutePoints[index - 1];
const pe = state.absolutePoints[index];
@ -1982,8 +1976,8 @@ class mxGraphView extends mxEventSource {
const dx = pe.x - p0.x;
const dy = pe.y - p0.y;
const nx = segment == 0 ? 0 : dy / segment;
const ny = segment == 0 ? 0 : dx / segment;
const nx = segment === 0 ? 0 : dy / segment;
const ny = segment === 0 ? 0 : dx / segment;
x = p0.x + dx * factor + (nx * gy + offsetX) * this.scale;
y = p0.y + dy * factor - (ny * gy - offsetY) * this.scale;
@ -2086,7 +2080,7 @@ class mxGraphView extends mxEventSource {
);
const direction = mxUtils.relativeCcw(p0.x, p0.y, pe.x, pe.y, x, y);
if (direction == -1) {
if (direction === -1) {
yDistance = -yDistance;
}
@ -2367,16 +2361,16 @@ class mxGraphView extends mxEventSource {
const source = mxEvent.getSource(evt);
return (
source == this.graph.container ||
source.parentNode == this.backgroundPane ||
source === this.graph.container ||
source.parentNode === this.backgroundPane ||
(source.parentNode != null &&
source.parentNode.parentNode == this.backgroundPane) ||
source == this.canvas.parentNode ||
source == this.canvas ||
source == this.backgroundPane ||
source == this.drawPane ||
source == this.overlayPane ||
source == this.decoratorPane
source.parentNode.parentNode === this.backgroundPane) ||
source === this.canvas.parentNode ||
source === this.canvas ||
source === this.backgroundPane ||
source === this.drawPane ||
source === this.overlayPane ||
source === this.decoratorPane
);
}
@ -2419,7 +2413,7 @@ class mxGraphView extends mxEventSource {
// Creates the DOM nodes for the respective display dialect
const { graph } = this;
if (graph.dialect == mxConstants.DIALECT_SVG) {
if (graph.dialect === mxConstants.DIALECT_SVG) {
this.createSvg();
} else {
this.createHtml();
@ -2486,7 +2480,7 @@ class mxGraphView extends mxEventSource {
mxUtils.bind(this, evt => {
if (
this.isContainerEvent(evt) &&
(pointerId == null || evt.pointerId == pointerId)
(pointerId == null || evt.pointerId === pointerId)
) {
graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
}
@ -2561,8 +2555,8 @@ class mxGraphView extends mxEventSource {
graph.isMouseDown &&
graph.container != null &&
!this.isContainerEvent(evt) &&
graph.container.style.display != 'none' &&
graph.container.style.visibility != 'hidden' &&
graph.container.style.display !== 'none' &&
graph.container.style.visibility !== 'hidden' &&
!mxEvent.isConsumed(evt)
) {
graph.fireMouseEvent(
@ -2578,8 +2572,8 @@ class mxGraphView extends mxEventSource {
graph.isMouseDown &&
graph.container != null &&
!this.isContainerEvent(evt) &&
graph.container.style.display != 'none' &&
graph.container.style.visibility != 'hidden'
graph.container.style.display !== 'none' &&
graph.container.style.visibility !== 'hidden'
) {
graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
}
@ -2773,7 +2767,7 @@ class mxGraphView extends mxEventSource {
const model = this.view.graph.getModel();
while (tmp != null) {
if (tmp == root) {
if (tmp === root) {
this.isUp = true;
break;
}

98
src/mxgraph/view/mxPerimeter.js
View File

@ -6,7 +6,7 @@
import mxUtils from '../util/mxUtils';
import mxPoint from '../util/mxPoint';
import mxConstants from "../util/mxConstants";
import mxConstants from '../util/mxConstants';
const mxPerimeter = {
/**
@ -158,10 +158,10 @@ const mxPerimeter = {
const dx = parseInt(px - cx);
const dy = parseInt(py - cy);
if (dx == 0 && dy != 0) {
if (dx === 0 && dy !== 0) {
return new mxPoint(cx, cy + (b * dy) / Math.abs(dy));
}
if (dx == 0 && dy == 0) {
if (dx === 0 && dy === 0) {
return new mxPoint(px, py);
}
@ -239,13 +239,13 @@ const mxPerimeter = {
const py = next.y;
// Special case for intersecting the diamond's corners
if (cx == px) {
if (cx === px) {
if (cy > py) {
return new mxPoint(cx, y); // top
}
return new mxPoint(cx, y + h); // bottom
}
if (cy == py) {
if (cy === py) {
if (cx > px) {
return new mxPoint(x, cy); // left
}
@ -287,8 +287,8 @@ const mxPerimeter = {
const direction =
vertex != null ? vertex.style[mxConstants.STYLE_DIRECTION] : null;
const vertical =
direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_SOUTH;
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_SOUTH;
const { x } = bounds;
const { y } = bounds;
@ -302,14 +302,14 @@ const mxPerimeter = {
let corner = new mxPoint(x + w, cy);
let end = new mxPoint(x, y + h);
if (direction == mxConstants.DIRECTION_NORTH) {
if (direction === mxConstants.DIRECTION_NORTH) {
start = end;
corner = new mxPoint(cx, y);
end = new mxPoint(x + w, y + h);
} else if (direction == mxConstants.DIRECTION_SOUTH) {
} else if (direction === mxConstants.DIRECTION_SOUTH) {
corner = new mxPoint(cx, y + h);
end = new mxPoint(x + w, y);
} else if (direction == mxConstants.DIRECTION_WEST) {
} else if (direction === mxConstants.DIRECTION_WEST) {
start = new mxPoint(x + w, y);
corner = new mxPoint(x, cy);
end = new mxPoint(x + w, y + h);
@ -324,8 +324,8 @@ const mxPerimeter = {
let base = false;
if (
direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_WEST
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_WEST
) {
base = alpha > -t && alpha < t;
} else {
@ -345,11 +345,11 @@ const mxPerimeter = {
} else {
result = new mxPoint(start.x, next.y);
}
} else if (direction == mxConstants.DIRECTION_NORTH) {
} else if (direction === mxConstants.DIRECTION_NORTH) {
result = new mxPoint(x + w / 2 + (h * Math.tan(alpha)) / 2, y + h);
} else if (direction == mxConstants.DIRECTION_SOUTH) {
} else if (direction === mxConstants.DIRECTION_SOUTH) {
result = new mxPoint(x + w / 2 - (h * Math.tan(alpha)) / 2, y);
} else if (direction == mxConstants.DIRECTION_WEST) {
} else if (direction === mxConstants.DIRECTION_WEST) {
result = new mxPoint(x + w, y + h / 2 + (w * Math.tan(alpha)) / 2);
} else {
result = new mxPoint(x, y + h / 2 - (w * Math.tan(alpha)) / 2);
@ -361,7 +361,7 @@ const mxPerimeter = {
if (next.y >= y && next.y <= y + h) {
pt.x = vertical
? cx
: direction == mxConstants.DIRECTION_WEST
: direction === mxConstants.DIRECTION_WEST
? x + w
: x;
pt.y = next.y;
@ -369,7 +369,7 @@ const mxPerimeter = {
pt.x = next.x;
pt.y = !vertical
? cy
: direction == mxConstants.DIRECTION_NORTH
: direction === mxConstants.DIRECTION_NORTH
? y + h
: y;
}
@ -450,8 +450,8 @@ const mxPerimeter = {
)
: mxConstants.DIRECTION_EAST;
const vertical =
direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_SOUTH;
direction === mxConstants.DIRECTION_NORTH ||
direction === mxConstants.DIRECTION_SOUTH;
let a = new mxPoint();
let b = new mxPoint();
@ -468,7 +468,7 @@ const mxPerimeter = {
if (orthogonal) {
if (vertical) {
// Special cases where intersects with hexagon corners
if (px == cx) {
if (px === cx) {
if (py <= y) {
return new mxPoint(cx, y);
}
@ -476,27 +476,27 @@ const mxPerimeter = {
return new mxPoint(cx, y + h);
}
} else if (px < x) {
if (py == y + h / 4) {
if (py === y + h / 4) {
return new mxPoint(x, y + h / 4);
}
if (py == y + (3 * h) / 4) {
if (py === y + (3 * h) / 4) {
return new mxPoint(x, y + (3 * h) / 4);
}
} else if (px > x + w) {
if (py == y + h / 4) {
if (py === y + h / 4) {
return new mxPoint(x + w, y + h / 4);
}
if (py == y + (3 * h) / 4) {
if (py === y + (3 * h) / 4) {
return new mxPoint(x + w, y + (3 * h) / 4);
}
} else if (px == x) {
} else if (px === x) {
if (py < cy) {
return new mxPoint(x, y + h / 4);
}
if (py > cy) {
return new mxPoint(x, y + (3 * h) / 4);
}
} else if (px == x + w) {
} else if (px === x + w) {
if (py < cy) {
return new mxPoint(x + w, y + h / 4);
}
@ -504,10 +504,10 @@ const mxPerimeter = {
return new mxPoint(x + w, y + (3 * h) / 4);
}
}
if (py == y) {
if (py === y) {
return new mxPoint(cx, y);
}
if (py == y + h) {
if (py === y + h) {
return new mxPoint(cx, y + h);
}
@ -536,7 +536,7 @@ const mxPerimeter = {
}
} else {
// Special cases where intersects with hexagon corners
if (py == cy) {
if (py === cy) {
if (px <= x) {
return new mxPoint(x, y + h / 2);
}
@ -544,27 +544,27 @@ const mxPerimeter = {
return new mxPoint(x + w, y + h / 2);
}
} else if (py < y) {
if (px == x + w / 4) {
if (px === x + w / 4) {
return new mxPoint(x + w / 4, y);
}
if (px == x + (3 * w) / 4) {
if (px === x + (3 * w) / 4) {
return new mxPoint(x + (3 * w) / 4, y);
}
} else if (py > y + h) {
if (px == x + w / 4) {
if (px === x + w / 4) {
return new mxPoint(x + w / 4, y + h);
}
if (px == x + (3 * w) / 4) {
if (px === x + (3 * w) / 4) {
return new mxPoint(x + (3 * w) / 4, y + h);
}
} else if (py == y) {
} else if (py === y) {
if (px < cx) {
return new mxPoint(x + w / 4, y);
}
if (px > cx) {
return new mxPoint(x + (3 * w) / 4, y);
}
} else if (py == y + h) {
} else if (py === y + h) {
if (px < cx) {
return new mxPoint(x + w / 4, y + h);
}
@ -572,10 +572,10 @@ const mxPerimeter = {
return new mxPoint(x + (3 * w) / 4, y + h);
}
}
if (px == x) {
if (px === x) {
return new mxPoint(x, cy);
}
if (px == x + w) {
if (px === x + w) {
return new mxPoint(x + w, cy);
}
@ -631,22 +631,22 @@ const mxPerimeter = {
const beta = Math.atan2(h / 4, w / 2);
// Special cases where intersects with hexagon corners
if (alpha == beta) {
if (alpha === beta) {
return new mxPoint(x + w, y + Math.floor(0.25 * h));
}
if (alpha == pi2) {
if (alpha === pi2) {
return new mxPoint(x + Math.floor(0.5 * w), y);
}
if (alpha == pi - beta) {
if (alpha === pi - beta) {
return new mxPoint(x, y + Math.floor(0.25 * h));
}
if (alpha == -beta) {
if (alpha === -beta) {
return new mxPoint(x + w, y + Math.floor(0.75 * h));
}
if (alpha == -pi2) {
if (alpha === -pi2) {
return new mxPoint(x + Math.floor(0.5 * w), y + h);
}
if (alpha == -pi + beta) {
if (alpha === -pi + beta) {
return new mxPoint(x, y + Math.floor(0.75 * h));
}
@ -676,22 +676,22 @@ const mxPerimeter = {
const beta = Math.atan2(h / 2, w / 4);
// Special cases where intersects with hexagon corners
if (alpha == beta) {
if (alpha === beta) {
return new mxPoint(x + Math.floor(0.75 * w), y);
}
if (alpha == pi - beta) {
if (alpha === pi - beta) {
return new mxPoint(x + Math.floor(0.25 * w), y);
}
if (alpha == pi || alpha == -pi) {
if (alpha === pi || alpha === -pi) {
return new mxPoint(x, y + Math.floor(0.5 * h));
}
if (alpha == 0) {
if (alpha === 0) {
return new mxPoint(x + w, y + Math.floor(0.5 * h));
}
if (alpha == -beta) {
if (alpha === -beta) {
return new mxPoint(x + Math.floor(0.75 * w), y + h);
}
if (alpha == -pi + beta) {
if (alpha === -pi + beta) {
return new mxPoint(x + Math.floor(0.25 * w), y + h);
}

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

@ -6,6 +6,10 @@
import mxPoint from '../util/mxPoint';
import mxRectangle from '../util/mxRectangle';
import mxTemporaryCellStates from './mxTemporaryCellStates';
import mxEvent from '../util/mxEvent';
import mxClient from '../mxClient';
import mxUtils from '../util/mxUtils';
import mxConstants from '../util/mxConstants';
class mxPrintPreview {
/**
@ -783,7 +787,7 @@ class mxPrintPreview {
try {
// Workaround for ignored clipping in IE 9 standards
// when printing with page breaks and HTML labels.
if (dx != 0 || dy != 0) {
if (dx !== 0 || dy !== 0) {
div.style.position = 'relative';
div.style.width = `${w}px`;
div.style.height = `${h}px`;
@ -889,7 +893,7 @@ class mxPrintPreview {
const overlayPane = view.getOverlayPane();
const realScale = scale;
if (this.graph.dialect == mxConstants.DIALECT_SVG) {
if (this.graph.dialect === mxConstants.DIALECT_SVG) {
view.createSvg();
// Uses CSS transform for scaling
@ -981,7 +985,7 @@ class mxPrintPreview {
const name = tmp.nodeName.toLowerCase();
// Note: Width and height are required in FF 11
if (name == 'svg') {
if (name === 'svg') {
tmp.style.overflow = 'hidden';
tmp.style.position = 'relative';
tmp.style.top = `${this.marginTop}px`;
@ -991,7 +995,7 @@ class mxPrintPreview {
tmp.style.height = '';
}
// Tries to fetch all text labels and only text labels
else if (tmp.style.cursor != 'default' && name != 'div') {
else if (tmp.style.cursor !== 'default' && name !== 'div') {
tmp.parentNode.removeChild(tmp);
}

8
src/mxgraph/view/mxSelectionChange.js
View File

@ -31,14 +31,14 @@ class mxSelectionChange {
this.selectionModel.updatingSelectionResource;
if (this.removed != null) {
for (let i = 0; i < this.removed.length; i += 1) {
this.selectionModel.cellRemoved(this.removed[i]);
for (const removed of this.removed) {
this.selectionModel.cellRemoved(removed);
}
}
if (this.added != null) {
for (let i = 0; i < this.added.length; i += 1) {
this.selectionModel.cellAdded(this.added[i]);
for (const added of this.added) {
this.selectionModel.cellAdded(added);
}
}

4
src/mxgraph/view/mxStylesheet.js
View File

@ -5,7 +5,7 @@
*/
import mxConstants from '../util/mxConstants';
import mxPerimeter from './mxPerimeter';
import mxUtils from "../util/mxUtils";
import mxUtils from '../util/mxUtils';
class mxStylesheet {
/**
@ -204,7 +204,7 @@ class mxStylesheet {
if (name != null && name.length > 0) {
const pairs = name.split(';');
if (style != null && name.charAt(0) != ';') {
if (style != null && name.charAt(0) !== ';') {
style = mxUtils.clone(style);
} else {
style = {};

16
src/mxgraph/view/mxSwimlaneManager.js
View File

@ -4,11 +4,11 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxEventSource from "../util/mxEventSource";
import mxUtils from "../util/mxUtils";
import mxEvent from "../util/mxEvent";
import mxConstants from "../util/mxConstants";
import mxRectangle from "../util/mxRectangle";
import mxEventSource from '../util/mxEventSource';
import mxUtils from '../util/mxUtils';
import mxEvent from '../util/mxEvent';
import mxConstants from '../util/mxConstants';
import mxRectangle from '../util/mxRectangle';
class mxSwimlaneManager extends mxEventSource {
/**
@ -276,7 +276,7 @@ class mxSwimlaneManager extends mxEventSource {
for (let i = 0; i < childCount; i += 1) {
const child = model.getChildAt(parent, i);
if (child != swimlane && !this.isSwimlaneIgnored(child)) {
if (child !== swimlane && !this.isSwimlaneIgnored(child)) {
geo = model.getGeometry(child);
if (geo != null) {
@ -371,8 +371,8 @@ class mxSwimlaneManager extends mxEventSource {
if (geo != null) {
if (
(parentHorizontal && geo.height != h) ||
(!parentHorizontal && geo.width != w)
(parentHorizontal && geo.height !== h) ||
(!parentHorizontal && geo.width !== w)
) {
geo = geo.clone();

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

@ -60,13 +60,10 @@ class mxTemporaryCellStates {
state.shape.paint = c => {
const link = getLinkForCellState(state);
if (link != null) {
c.setLink(link);
}
oldPaint.apply(this, [c]);
if (link != null) {
c.setLink(null);
}
@ -99,14 +96,12 @@ class mxTemporaryCellStates {
const bounds = view.getBoundingBox(
view.validateCellState(view.validateCell(cells[i]))
);
if (bbox == null) {
bbox = bounds;
} else {
bbox.add(bounds);
}
}
view.setGraphBounds(bbox || new mxRectangle());
}
}

291
src/pages/backgrounds/ExtendCanvas.js
View File

@ -37,77 +37,151 @@ class ExtendCanvas extends React.Component {
/>
</>
);
};
}
componentDidMount() {
const config = {
panningHandler: {
ignoreCell: true,
},
};
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);
class MyCustomGraph extends mxGraph {
/**
* Specifies the size of the size for "tiles" to be used for a graph with
* scrollbars but no visible background page. A good value is large
* enough to reduce the number of repaints that is caused for auto-
* translation, which depends on this value, and small enough to give
* a small empty buffer around the graph. Default is 400x400.
*/
scrollTileSize = new mxRectangle(0, 0, 400, 400);
/**
* Specifies the size of the size for "tiles" to be used for a graph with
* scrollbars but no visible background page. A good value is large
* enough to reduce the number of repaints that is caused for auto-
* translation, which depends on this value, and small enough to give
* a small empty buffer around the graph. Default is 400x400.
*/
graph.scrollTileSize = new mxRectangle(0, 0, 400, 400);
/**
* Returns the padding for pages in page view with scrollbars.
*/
graph.getPagePadding = function() {
return new mxPoint(
Math.max(0, Math.round(graph.container.offsetWidth - 34)),
Math.max(0, Math.round(graph.container.offsetHeight - 34))
);
};
/**
* Returns the size of the page format scaled with the page size.
*/
graph.getPageSize = function() {
return this.pageVisible
? new mxRectangle(
0,
0,
this.pageFormat.width * this.pageScale,
this.pageFormat.height * this.pageScale
)
: this.scrollTileSize;
};
/**
* Returns a rectangle describing the position and count of the
* background pages, where x and y are the position of the top,
* left page and width and height are the vertical and horizontal
* page count.
*/
graph.getPageLayout = function() {
const size = this.pageVisible ? this.getPageSize() : this.scrollTileSize;
const bounds = this.getGraphBounds();
if (bounds.width === 0 || bounds.height === 0) {
return new mxRectangle(0, 0, 1, 1);
/**
* Returns the padding for pages in page view with scrollbars.
*/
getPagePadding() {
return new mxPoint(
Math.max(0, Math.round(graph.container.offsetWidth - 34)),
Math.max(0, Math.round(graph.container.offsetHeight - 34))
);
}
// Computes untransformed graph bounds
const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
const w = Math.floor(bounds.width / this.view.scale);
const h = Math.floor(bounds.height / this.view.scale);
/**
* Returns the size of the page format scaled with the page size.
*/
getPageSize() {
return this.pageVisible
? new mxRectangle(
0,
0,
this.pageFormat.width * this.pageScale,
this.pageFormat.height * this.pageScale
)
: this.scrollTileSize;
}
const x0 = Math.floor(x / size.width);
const y0 = Math.floor(y / size.height);
const w0 = Math.ceil((x + w) / size.width) - x0;
const h0 = Math.ceil((y + h) / size.height) - y0;
/**
* Returns a rectangle describing the position and count of the
* background pages, where x and y are the position of the top,
* left page and width and height are the vertical and horizontal
* page count.
*/
getPageLayout() {
const size = this.pageVisible
? this.getPageSize()
: this.scrollTileSize;
const bounds = this.getGraphBounds();
return new mxRectangle(x0, y0, w0, h0);
};
if (bounds.width === 0 || bounds.height === 0) {
return new mxRectangle(0, 0, 1, 1);
}
// Computes untransformed graph bounds
const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
const w = Math.floor(bounds.width / this.view.scale);
const h = Math.floor(bounds.height / this.view.scale);
const x0 = Math.floor(x / size.width);
const y0 = Math.floor(y / size.height);
const w0 = Math.ceil((x + w) / size.width) - x0;
const h0 = Math.ceil((y + h) / size.height) - y0;
return new mxRectangle(x0, y0, w0, h0);
}
getPreferredPageSize(bounds, width, height) {
const pages = this.getPageLayout();
const size = this.getPageSize();
return new mxRectangle(
0,
0,
pages.width * size.width,
pages.height * size.height
);
}
sizeDidChange() {
if (this.container != null && mxUtils.hasScrollbars(this.container)) {
const pages = this.getPageLayout();
const pad = this.getPagePadding();
const size = this.getPageSize();
// Updates the minimum graph size
const minw = Math.ceil(
(2 * pad.x) / this.view.scale + pages.width * size.width
);
const minh = Math.ceil(
(2 * pad.y) / this.view.scale + pages.height * size.height
);
const min = graph.minimumGraphSize;
// LATER: Fix flicker of scrollbar size in IE quirks mode
// after delayed call in window.resize event handler
if (min == null || min.width !== minw || min.height !== minh) {
graph.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
}
// Updates auto-translate to include padding and graph size
const dx = pad.x / this.view.scale - pages.x * size.width;
const dy = pad.y / this.view.scale - pages.y * size.height;
if (
!this.autoTranslate &&
(this.view.translate.x !== dx || this.view.translate.y !== dy)
) {
this.autoTranslate = true;
this.view.x0 = pages.x;
this.view.y0 = pages.y;
// NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
// BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
// SHOULD MOVE TRANSLATE/SCALE TO VIEW.
const tx = graph.view.translate.x;
const ty = graph.view.translate.y;
graph.view.setTranslate(dx, dy);
graph.container.scrollLeft += (dx - tx) * graph.view.scale;
graph.container.scrollTop += (dy - ty) * graph.view.scale;
this.autoTranslate = false;
return;
}
super.sizeDidChange();
}
}
}
// Creates the graph inside the given container
const graph = new MyCustomGraph(this.el);
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);
// Fits the number of background pages to the graph
graph.view.getBackgroundPageBounds = function() {
@ -122,18 +196,6 @@ class ExtendCanvas extends React.Component {
);
};
graph.getPreferredPageSize = function(bounds, width, height) {
const pages = this.getPageLayout();
const size = this.getPageSize();
return new mxRectangle(
0,
0,
pages.width * size.width,
pages.height * size.height
);
};
/**
* Guesses autoTranslate to avoid another repaint (see below).
* Works if only the scale of the graph changes or if pages
@ -159,59 +221,6 @@ class ExtendCanvas extends React.Component {
graphViewValidate.apply(this, arguments);
};
const graphSizeDidChange = graph.sizeDidChange;
graph.sizeDidChange = function() {
if (this.container != null && mxUtils.hasScrollbars(this.container)) {
const pages = this.getPageLayout();
const pad = this.getPagePadding();
const size = this.getPageSize();
// Updates the minimum graph size
const minw = Math.ceil(
(2 * pad.x) / this.view.scale + pages.width * size.width
);
const minh = Math.ceil(
(2 * pad.y) / this.view.scale + pages.height * size.height
);
const min = graph.minimumGraphSize;
// LATER: Fix flicker of scrollbar size in IE quirks mode
// after delayed call in window.resize event handler
if (min == null || min.width !== minw || min.height !== minh) {
graph.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
}
// Updates auto-translate to include padding and graph size
const dx = pad.x / this.view.scale - pages.x * size.width;
const dy = pad.y / this.view.scale - pages.y * size.height;
if (
!this.autoTranslate &&
(this.view.translate.x !== dx || this.view.translate.y !== dy)
) {
this.autoTranslate = true;
this.view.x0 = pages.x;
this.view.y0 = pages.y;
// NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
// BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
// SHOULD MOVE TRANSLATE/SCALE TO VIEW.
const tx = graph.view.translate.x;
const ty = graph.view.translate.y;
graph.view.setTranslate(dx, dy);
graph.container.scrollLeft += (dx - tx) * graph.view.scale;
graph.container.scrollTop += (dy - ty) * graph.view.scale;
this.autoTranslate = false;
return;
}
graphSizeDidChange.apply(this, arguments);
}
};
// Enables rubberband selection
new mxRubberband(graph);
@ -220,15 +229,25 @@ class ExtendCanvas extends React.Component {
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
source: v1,
target: v2,
});
});
// Sets initial scrollbar positions
window.setTimeout(function() {
@ -254,7 +273,7 @@ class ExtendCanvas extends React.Component {
)
);
}, 0);
};
}
}
export default ExtendCanvas;

4
src/pages/connections/index.js
View File

@ -12,11 +12,11 @@ export default function _Connections() {
return (
<PageTabs curPageURL="/connections">
<Preview sourceKey="Anchors" content={<Anchors />} />
<Preview sourceKey="EdgeTolerance" content={<EdgeTolerance />} />
{/*<Preview sourceKey="EdgeTolerance" content={<EdgeTolerance />} />
<Preview sourceKey="FixedPoints" content={<FixedPoints />} />
<Preview sourceKey="HelloPort" content={<HelloPort />} />
<Preview sourceKey="Orthogonal" content={<Orthogonal />} />
<Preview sourceKey="PortRefs" content={<PortRefs />} />
<Preview sourceKey="PortRefs" content={<PortRefs />} />*/}
</PageTabs>
);
}

155
src/pages/icons_images/HoverIcons.js
View File

@ -49,77 +49,85 @@ class HoverIcons extends React.Component {
);
// Defines a new class for all icons
function mxIconSet(state) {
this.images = [];
const { graph } = state.view;
class mxIconSet {
constructor(state) {
this.images = [];
const { graph } = state.view;
// Icon1
let img = mxUtils.createImage('images/copy.png');
img.setAttribute('title', 'Duplicate');
img.style.position = 'absolute';
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
img.style.left = `${state.x + state.width}px`;
img.style.top = `${state.y + state.height}px`;
// Icon1
let img = mxUtils.createImage('images/copy.png');
img.setAttribute('title', 'Duplicate');
Object.assign(img.style, {
cursor: 'pointer',
width: '16px',
height: '16px',
position: 'absolute',
left: `${state.x + state.width}px`,
top: `${state.y + state.height}px`,
});
mxEvent.addGestureListeners(img, evt => {
const s = graph.gridSize;
graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
mxEvent.consume(evt);
this.destroy();
});
mxEvent.addGestureListeners(img, evt => {
const s = graph.gridSize;
graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
mxEvent.consume(evt);
this.destroy();
});
state.view.graph.container.appendChild(img);
this.images.push(img);
state.view.graph.container.appendChild(img);
this.images.push(img);
// Delete
img = mxUtils.createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
img.style.position = 'absolute';
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
img.style.left = `${state.x + state.width}px`;
img.style.top = `${state.y - 16}px`;
// Delete
img = mxUtils.createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
Object.assign(img.style, {
cursor: 'pointer',
width: '16px',
height: '16px',
position: 'absolute',
left: `${state.x + state.width}px`,
top: `${state.y - 16}px`,
});
mxEvent.addGestureListeners(img, evt => {
// Disables dragging the image
mxEvent.consume(evt);
});
mxEvent.addGestureListeners(img, evt => {
// Disables dragging the image
mxEvent.consume(evt);
});
mxEvent.addListener(img, 'click', evt => {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
this.destroy();
});
mxEvent.addListener(img, 'click', evt => {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
this.destroy();
});
state.view.graph.container.appendChild(img);
this.images.push(img);
}
mxIconSet.prototype.destroy = function() {
if (this.images != null) {
for (let i = 0; i < this.images.length; i++) {
const img = this.images[i];
img.parentNode.removeChild(img);
}
state.view.graph.container.appendChild(img);
this.images.push(img);
}
this.images = null;
};
destroy() {
if (this.images != null) {
for (const img of this.images) {
img.parentNode.removeChild(img);
}
}
this.images = null;
}
}
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setConnectable(true);
// Enables rubberband selection
new mxRubberband(graph);
// Defines the tolerance before removing the icons
const iconTolerance = 20;
const ICON_TOLERANCE = 20;
// Shows icons if the mouse is over a cell
graph.addMouseListener({
currentState: null,
currentIconSet: null,
mouseDown(sender, me) {
// Hides icons on mouse down
if (this.currentState != null) {
@ -127,19 +135,19 @@ class HoverIcons extends React.Component {
this.currentState = null;
}
},
mouseMove(sender, me) {
if (
this.currentState != null &&
(me.getState() == this.currentState || me.getState() == null)
(me.getState() === this.currentState || me.getState() == null)
) {
const tol = iconTolerance;
const tol = ICON_TOLERANCE;
const tmp = new mxRectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
2 * tol
);
if (mxUtils.intersects(tmp, this.currentState)) {
return;
}
@ -147,7 +155,7 @@ class HoverIcons extends React.Component {
let tmp = graph.view.getState(me.getCell());
// Ignores everything but vertices
// Ignore everything but vertices
if (
graph.isMouseDown ||
(tmp != null && !graph.getModel().isVertex(tmp.cell))
@ -155,24 +163,26 @@ class HoverIcons extends React.Component {
tmp = null;
}
if (tmp != this.currentState) {
if (tmp !== this.currentState) {
if (this.currentState != null) {
this.dragLeave(me.getEvent(), this.currentState);
}
this.currentState = tmp;
if (this.currentState != null) {
this.dragEnter(me.getEvent(), this.currentState);
}
}
},
mouseUp(sender, me) {},
dragEnter(evt, state) {
if (this.currentIconSet == null) {
this.currentIconSet = new mxIconSet(state);
}
},
dragLeave(evt, state) {
if (this.currentIconSet != null) {
this.currentIconSet.destroy();
@ -181,23 +191,30 @@ class HoverIcons extends React.Component {
},
});
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
source: v1,
target: v2,
});
});
}
}

1
src/styles/globals.css
View File

@ -40,4 +40,5 @@ a {
padding: 3px 7px;
box-shadow: 0px -1px 1px purple;
font-weight: bold;
outline: 0px 0px 1px 0px #ddd
}