diff --git a/src/mxgraph/io/mxChildChangeCodec.js b/src/mxgraph/io/mxChildChangeCodec.js index b290a1986..58bcd8da6 100644 --- a/src/mxgraph/io/mxChildChangeCodec.js +++ b/src/mxgraph/io/mxChildChangeCodec.js @@ -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; } diff --git a/src/mxgraph/io/mxDefaultKeyHandlerCodec.js b/src/mxgraph/io/mxDefaultKeyHandlerCodec.js index 157d3c661..4a4ce69df 100644 --- a/src/mxgraph/io/mxDefaultKeyHandlerCodec.js +++ b/src/mxgraph/io/mxDefaultKeyHandlerCodec.js @@ -75,11 +75,9 @@ class mxDefaultKeyHandlerCodec extends mxObjectCodec { into.bindAction(as, action, control); } - node = node.nextSibling; } } - return into; } } diff --git a/src/mxgraph/util/mxWindow.js b/src/mxgraph/util/mxWindow.js index 98f57e6d5..a7f3083e9 100644 --- a/src/mxgraph/util/mxWindow.js +++ b/src/mxgraph/util/mxWindow.js @@ -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 { diff --git a/src/mxgraph/view/mxCellRenderer.js b/src/mxgraph/view/mxCellRenderer.js index 8dbd61560..087266e87 100644 --- a/src/mxgraph/view/mxCellRenderer.js +++ b/src/mxgraph/view/mxCellRenderer.js @@ -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); diff --git a/src/mxgraph/view/mxCellStatePreview.js b/src/mxgraph/view/mxCellStatePreview.js index 7d084e03b..87244ac5a 100644 --- a/src/mxgraph/view/mxCellStatePreview.js +++ b/src/mxgraph/view/mxCellStatePreview.js @@ -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) && diff --git a/src/mxgraph/view/mxEdgeStyle.js b/src/mxgraph/view/mxEdgeStyle.js index 907d63119..9b6f11120 100644 --- a/src/mxgraph/view/mxEdgeStyle.js +++ b/src/mxgraph/view/mxEdgeStyle.js @@ -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); } diff --git a/src/mxgraph/view/mxGraph.js b/src/mxgraph/view/mxGraph.js index 63e9327b8..3ad4f693f 100644 --- a/src/mxgraph/view/mxGraph.js +++ b/src/mxgraph/view/mxGraph.js @@ -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 . */ - 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); diff --git a/src/mxgraph/view/mxGraphView.js b/src/mxgraph/view/mxGraphView.js index 259ce2751..1e5acddcb 100644 --- a/src/mxgraph/view/mxGraphView.js +++ b/src/mxgraph/view/mxGraphView.js @@ -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; } diff --git a/src/mxgraph/view/mxPerimeter.js b/src/mxgraph/view/mxPerimeter.js index b1b3655a9..94485e8c7 100644 --- a/src/mxgraph/view/mxPerimeter.js +++ b/src/mxgraph/view/mxPerimeter.js @@ -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); } diff --git a/src/mxgraph/view/mxPrintPreview.js b/src/mxgraph/view/mxPrintPreview.js index 5fabbf4c4..54da5208f 100644 --- a/src/mxgraph/view/mxPrintPreview.js +++ b/src/mxgraph/view/mxPrintPreview.js @@ -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); } diff --git a/src/mxgraph/view/mxSelectionChange.js b/src/mxgraph/view/mxSelectionChange.js index 321756961..e32bf7bdf 100644 --- a/src/mxgraph/view/mxSelectionChange.js +++ b/src/mxgraph/view/mxSelectionChange.js @@ -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); } } diff --git a/src/mxgraph/view/mxStylesheet.js b/src/mxgraph/view/mxStylesheet.js index 6c5866ff1..ae344ebf1 100644 --- a/src/mxgraph/view/mxStylesheet.js +++ b/src/mxgraph/view/mxStylesheet.js @@ -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 = {}; diff --git a/src/mxgraph/view/mxSwimlaneManager.js b/src/mxgraph/view/mxSwimlaneManager.js index 8a001285a..82bbebf60 100644 --- a/src/mxgraph/view/mxSwimlaneManager.js +++ b/src/mxgraph/view/mxSwimlaneManager.js @@ -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(); diff --git a/src/mxgraph/view/mxTemporaryCellStates.js b/src/mxgraph/view/mxTemporaryCellStates.js index c72b89a19..20031c926 100644 --- a/src/mxgraph/view/mxTemporaryCellStates.js +++ b/src/mxgraph/view/mxTemporaryCellStates.js @@ -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()); } } diff --git a/src/pages/backgrounds/ExtendCanvas.js b/src/pages/backgrounds/ExtendCanvas.js index 8f6a1c02c..3a8984296 100644 --- a/src/pages/backgrounds/ExtendCanvas.js +++ b/src/pages/backgrounds/ExtendCanvas.js @@ -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; diff --git a/src/pages/connections/index.js b/src/pages/connections/index.js index e8cfc94b3..8e3e6280b 100644 --- a/src/pages/connections/index.js +++ b/src/pages/connections/index.js @@ -12,11 +12,11 @@ export default function _Connections() { return ( } /> - } /> + {/*} /> } /> } /> } /> - } /> + } />*/} ); } diff --git a/src/pages/icons_images/HoverIcons.js b/src/pages/icons_images/HoverIcons.js index 5a48fc65e..57f885c76 100644 --- a/src/pages/icons_images/HoverIcons.js +++ b/src/pages/icons_images/HoverIcons.js @@ -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, + }); + }); } } diff --git a/src/styles/globals.css b/src/styles/globals.css index ce5eb641b..ad10b5925 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -40,4 +40,5 @@ a { padding: 3px 7px; box-shadow: 0px -1px 1px purple; font-weight: bold; + outline: 0px 0px 1px 0px #ddd }