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

conversions to typescript and type fixes

development
mcyph 2021-07-12 22:13:45 +10:00
parent 0c6b765cac
commit 92e446acb2
91 changed files with 1348 additions and 1788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/stashed/GraphLayout.js
View File

@ -86,7 +86,7 @@ export default GraphLayout;
// Creates a layout algorithm to be used // Creates a layout algorithm to be used
// with the graph // with the graph
let layout = new mxFastOrganicLayout(graph); let layout = new MxFastOrganicLayout(graph);
// Moves stuff wider apart than usual // Moves stuff wider apart than usual
layout.forceConstant = 80; layout.forceConstant = 80;

10
docs/stashed/Schema.js
View File

@ -57,12 +57,12 @@ export default MYNAMEHERE;
mxConstants.SHADOW_OFFSET_Y = 6; mxConstants.SHADOW_OFFSET_Y = 6;
// Table icon dimensions and position // Table icon dimensions and position
Swimlane.prototype.imageSize = 20; SwimlaneShape.prototype.imageSize = 20;
Swimlane.prototype.imageDx = 16; SwimlaneShape.prototype.imageDx = 16;
Swimlane.prototype.imageDy = 4; SwimlaneShape.prototype.imageDy = 4;
// Changes swimlane icon bounds // Changes swimlane icon bounds
Swimlane.prototype.getImageBounds = function(x, y, w, h) SwimlaneShape.prototype.getImageBounds = function(x, y, w, h)
{ {
return new Rectangle(x + this.imageDx, y + this.imageDy, this.imageSize, this.imageSize); return new Rectangle(x + this.imageDx, y + this.imageDy, this.imageSize, this.imageSize);
}; };
@ -126,7 +126,7 @@ export default MYNAMEHERE;
editor.layoutSwimlanes = true; editor.layoutSwimlanes = true;
editor.createSwimlaneLayout = () => editor.createSwimlaneLayout = () =>
{ {
let layout = new mxStackLayout(this.graph, false); let layout = new StackLayout(this.graph, false);
layout.fill = true; layout.fill = true;
layout.resizeParent = true; layout.resizeParent = true;

2
docs/stashed/grapheditor/www/js/Editor.js
View File

@ -2542,7 +2542,7 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types)
} }
else else
{ {
let pageBreak = new mxPolyline(pts, this.pageBreakColor); let pageBreak = new Polyline(pts, this.pageBreakColor);
pageBreak.dialect = this.dialect; pageBreak.dialect = this.dialect;
pageBreak.isDashed = this.pageBreakDashed; pageBreak.isDashed = this.pageBreakDashed;
pageBreak.pointerEvents = false; pageBreak.pointerEvents = false;

2
docs/stashed/grapheditor/www/js/EditorUi.js
View File

@ -4641,7 +4641,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
layout = graph.layoutManager.getLayout(parent); layout = graph.layoutManager.getLayout(parent);
} }
if (layout != null && layout.constructor == mxStackLayout) if (layout != null && layout.constructor == StackLayout)
{ {
let index = parent.getIndex(cell); let index = parent.getIndex(cell);

130
docs/stashed/grapheditor/www/js/Graph.js
View File

@ -117,8 +117,8 @@ graph.prototype.pageScale = 1;
})(); })();
// Matches label positions of mxGraph 1.x // Matches label positions of mxGraph 1.x
mxText.prototype.baseSpacingTop = 5; TextShape.prototype.baseSpacingTop = 5;
mxText.prototype.baseSpacingBottom = 1; TextShape.prototype.baseSpacingBottom = 1;
// Keeps edges between relative child cells inside parent // Keeps edges between relative child cells inside parent
Model.prototype.ignoreRelativeEdgeParent = false; Model.prototype.ignoreRelativeEdgeParent = false;
@ -1923,7 +1923,7 @@ Graph.prototype.init = function(container)
* *
* Updates the highlight after a change of the model or view. * Updates the highlight after a change of the model or view.
*/ */
mxCellHighlight.prototype.getStrokeWidth = function(state) CellHighlight.prototype.getStrokeWidth = function(state)
{ {
let s = this.strokeWidth; let s = this.strokeWidth;
@ -2360,7 +2360,7 @@ Graph.prototype.initLayoutManager = function()
if (style.childLayout == 'stackLayout') if (style.childLayout == 'stackLayout')
{ {
let stackLayout = new mxStackLayout(this.graph, true); let stackLayout = new StackLayout(this.graph, true);
stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1'; stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1';
stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1'; stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1';
@ -2383,7 +2383,7 @@ Graph.prototype.initLayoutManager = function()
} }
else if (style.childLayout == 'treeLayout') else if (style.childLayout == 'treeLayout')
{ {
let treeLayout = new mxCompactTreeLayout(this.graph); let treeLayout = new CompactTreeLayout(this.graph);
treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1'; treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1';
treeLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1'; treeLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1';
treeLayout.groupPadding = mxUtils.getValue(style, 'parentPadding', 20); treeLayout.groupPadding = mxUtils.getValue(style, 'parentPadding', 20);
@ -2416,11 +2416,11 @@ Graph.prototype.initLayoutManager = function()
} }
else if (style.childLayout == 'circleLayout') else if (style.childLayout == 'circleLayout')
{ {
return new mxCircleLayout(this.graph); return new CircleLayout(this.graph);
} }
else if (style.childLayout == 'organicLayout') else if (style.childLayout == 'organicLayout')
{ {
return new mxFastOrganicLayout(this.graph); return new MxFastOrganicLayout(this.graph);
} }
else if (style.childLayout == 'tableLayout') else if (style.childLayout == 'tableLayout')
{ {
@ -2975,7 +2975,7 @@ Graph.prototype.isCloneConnectSource = function(source)
} }
return this.isTableRow(source) || this.isTableCell(source) || return this.isTableRow(source) || this.isTableCell(source) ||
(layout != null && layout.constructor == mxStackLayout); (layout != null && layout.constructor == StackLayout);
}; };
/** /**
@ -3402,7 +3402,7 @@ Graph.prototype.getCellStyle = function(cell)
{ {
let layout = this.layoutManager.getLayout(parent); let layout = this.layoutManager.getLayout(parent);
if (layout != null && layout.constructor == mxStackLayout) if (layout != null && layout.constructor == StackLayout)
{ {
style.horizontal = !layout.horizontal; style.horizontal = !layout.horizontal;
} }
@ -3421,7 +3421,7 @@ Graph.prototype.updateAlternateBounds = function(cell, geo, willCollapse)
{ {
let layout = this.layoutManager.getLayout(cell.getParent()); let layout = this.layoutManager.getLayout(cell.getParent());
if (layout != null && layout.constructor == mxStackLayout) if (layout != null && layout.constructor == StackLayout)
{ {
if (layout.horizontal) if (layout.horizontal)
{ {
@ -3492,7 +3492,7 @@ Graph.prototype.foldCells = function(collapse, recurse, cells, checkFoldable, ev
} }
} }
else if ((evt == null || !mxEvent.isAltDown(evt)) && else if ((evt == null || !mxEvent.isAltDown(evt)) &&
layout.constructor == mxStackLayout && !layout.resizeLast) layout.constructor == StackLayout && !layout.resizeLast)
{ {
this.resizeParentStacks(parent, layout, dx, dy); this.resizeParentStacks(parent, layout, dx, dy);
} }
@ -3552,7 +3552,7 @@ Graph.prototype.moveSiblings = function(state, parent, dx, dy)
*/ */
Graph.prototype.resizeParentStacks = function(parent, layout, dx, dy) Graph.prototype.resizeParentStacks = function(parent, layout, dx, dy)
{ {
if (this.layoutManager != null && layout != null && layout.constructor == mxStackLayout && !layout.resizeLast) if (this.layoutManager != null && layout != null && layout.constructor == StackLayout && !layout.resizeLast)
{ {
this.model.beginUpdate(); this.model.beginUpdate();
try try
@ -3560,7 +3560,7 @@ Graph.prototype.resizeParentStacks = function(parent, layout, dx, dy)
let dir = layout.horizontal; let dir = layout.horizontal;
// Bubble resize up for all parent stack layouts with same orientation // Bubble resize up for all parent stack layouts with same orientation
while (parent != null && layout != null && layout.constructor == mxStackLayout && while (parent != null && layout != null && layout.constructor == StackLayout &&
layout.horizontal == dir && !layout.resizeLast) layout.horizontal == dir && !layout.resizeLast)
{ {
let pgeo = parent.getGeometry(); let pgeo = parent.getGeometry();
@ -5124,13 +5124,13 @@ Graph.prototype.setTableColumnWidth = function(col, dx, extend)
*/ */
function TableLayout(graph) function TableLayout(graph)
{ {
mxGraphLayout.call(this, graph); GraphLayout.call(this, graph);
}; };
/** /**
* Extends mxGraphLayout. * Extends mxGraphLayout.
*/ */
TableLayout.prototype = new mxStackLayout(); TableLayout.prototype = new StackLayout();
TableLayout.prototype.constructor = TableLayout; TableLayout.prototype.constructor = TableLayout;
/** /**
@ -5578,9 +5578,9 @@ TableLayout.prototype.execute = function(parent)
/** /**
* Overrides painting the actual shape for taking into account jump style. * Overrides painting the actual shape for taking into account jump style.
*/ */
let mxConnectorPaintLine = mxConnector.prototype.paintLine; let mxConnectorPaintLine = Connector.prototype.paintLine;
mxConnector.prototype.paintLine = (c, absPts, rounded) => Connector.prototype.paintLine = (c, absPts, rounded) =>
{ {
// Required for checking dirty state // Required for checking dirty state
this.routedPoints = (this.state != null) ? this.state.routedPoints : null; this.routedPoints = (this.state != null) ? this.state.routedPoints : null;
@ -5790,9 +5790,9 @@ TableLayout.prototype.execute = function(parent)
/** /**
* Adds support for placeholders in text elements of shapes. * Adds support for placeholders in text elements of shapes.
*/ */
let mxStencilEvaluateTextAttribute = Stencil.prototype.evaluateTextAttribute; let mxStencilEvaluateTextAttribute = StencilShape.prototype.evaluateTextAttribute;
Stencil.prototype.evaluateTextAttribute = function(node, attribute, shape) StencilShape.prototype.evaluateTextAttribute = function(node, attribute, shape)
{ {
let result = mxStencilEvaluateTextAttribute.apply(this, arguments); let result = mxStencilEvaluateTextAttribute.apply(this, arguments);
let placeholders = node.getAttribute('placeholders'); let placeholders = node.getAttribute('placeholders');
@ -5827,7 +5827,7 @@ TableLayout.prototype.execute = function(parent)
let stencil = shape.substring(8, shape.length - 1); let stencil = shape.substring(8, shape.length - 1);
let doc = mxUtils.parseXml(Graph.decompress(stencil)); let doc = mxUtils.parseXml(Graph.decompress(stencil));
return new Shape(new Stencil(doc.documentElement)); return new Shape(new StencilShape(doc.documentElement));
} }
catch (e) catch (e)
{ {
@ -5853,41 +5853,41 @@ TableLayout.prototype.execute = function(parent)
* IMPORTANT: For embedded diagrams to work entries must also * IMPORTANT: For embedded diagrams to work entries must also
* be added in EmbedServlet.java. * be added in EmbedServlet.java.
*/ */
StencilRegistry.libraries = {}; StencilShapeRegistry.libraries = {};
/** /**
* Global switch to disable dynamic loading. * Global switch to disable dynamic loading.
*/ */
StencilRegistry.dynamicLoading = true; StencilShapeRegistry.dynamicLoading = true;
/** /**
* Global switch to disable eval for JS (preload all JS instead). * Global switch to disable eval for JS (preload all JS instead).
*/ */
StencilRegistry.allowEval = true; StencilShapeRegistry.allowEval = true;
/** /**
* Stores all package names that have been dynamically loaded. * Stores all package names that have been dynamically loaded.
* Each package is only loaded once. * Each package is only loaded once.
*/ */
StencilRegistry.packages = []; StencilShapeRegistry.packages = [];
// Extends the default stencil registry to add dynamic loading // Extends the default stencil registry to add dynamic loading
StencilRegistry.getStencil = function(name) StencilShapeRegistry.getStencil = function(name)
{ {
let result = StencilRegistry.stencils[name]; let result = StencilShapeRegistry.stencils[name];
if (result == null && mxCellRenderer.defaultShapes[name] == null && StencilRegistry.dynamicLoading) if (result == null && mxCellRenderer.defaultShapes[name] == null && StencilShapeRegistry.dynamicLoading)
{ {
let basename = StencilRegistry.getBasenameForStencil(name); let basename = StencilShapeRegistry.getBasenameForStencil(name);
// Loads stencil files and tries again // Loads stencil files and tries again
if (basename != null) if (basename != null)
{ {
let libs = StencilRegistry.libraries[basename]; let libs = StencilShapeRegistry.libraries[basename];
if (libs != null) if (libs != null)
{ {
if (StencilRegistry.packages[basename] == null) if (StencilShapeRegistry.packages[basename] == null)
{ {
for (let i = 0; i < libs.length; i++) for (let i = 0; i < libs.length; i++)
{ {
@ -5895,13 +5895,13 @@ StencilRegistry.getStencil = function(name)
if (fname.toLowerCase().substring(fname.length - 4, fname.length) == '.xml') if (fname.toLowerCase().substring(fname.length - 4, fname.length) == '.xml')
{ {
StencilRegistry.loadStencilSet(fname, null); StencilShapeRegistry.loadStencilSet(fname, null);
} }
else if (fname.toLowerCase().substring(fname.length - 3, fname.length) == '.js') else if (fname.toLowerCase().substring(fname.length - 3, fname.length) == '.js')
{ {
try try
{ {
if (StencilRegistry.allowEval) if (StencilShapeRegistry.allowEval)
{ {
let req = mxUtils.load(fname); let req = mxUtils.load(fname);
@ -5928,17 +5928,17 @@ StencilRegistry.getStencil = function(name)
} }
} }
StencilRegistry.packages[basename] = 1; StencilShapeRegistry.packages[basename] = 1;
} }
} }
else else
{ {
// Replaces '_-_' with '_' // Replaces '_-_' with '_'
basename = basename.replace('_-_', '_'); basename = basename.replace('_-_', '_');
StencilRegistry.loadStencilSet(STENCIL_PATH + '/' + basename + '.xml', null); StencilShapeRegistry.loadStencilSet(STENCIL_PATH + '/' + basename + '.xml', null);
} }
result = StencilRegistry.stencils[name]; result = StencilShapeRegistry.stencils[name];
} }
} }
@ -5947,7 +5947,7 @@ StencilRegistry.getStencil = function(name)
// Returns the basename for the given stencil or null if no file must be // Returns the basename for the given stencil or null if no file must be
// loaded to render the given stencil. // loaded to render the given stencil.
StencilRegistry.getBasenameForStencil = function(name) StencilShapeRegistry.getBasenameForStencil = function(name)
{ {
let tmp = null; let tmp = null;
@ -5970,12 +5970,12 @@ StencilRegistry.getBasenameForStencil = function(name)
}; };
// Loads the given stencil set // Loads the given stencil set
StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, async) StencilShapeRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, async)
{ {
force = (force != null) ? force : false; force = (force != null) ? force : false;
// Uses additional cache for detecting previous load attempts // Uses additional cache for detecting previous load attempts
let xmlDoc = StencilRegistry.packages[stencilFile]; let xmlDoc = StencilShapeRegistry.packages[stencilFile];
if (force || xmlDoc == null) if (force || xmlDoc == null)
{ {
@ -5987,13 +5987,13 @@ StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, a
{ {
if (async) if (async)
{ {
StencilRegistry.loadStencil(stencilFile, mxUtils.bind(this, function(xmlDoc2) StencilShapeRegistry.loadStencil(stencilFile, mxUtils.bind(this, function(xmlDoc2)
{ {
if (xmlDoc2 != null && xmlDoc2.documentElement != null) if (xmlDoc2 != null && xmlDoc2.documentElement != null)
{ {
StencilRegistry.packages[stencilFile] = xmlDoc2; StencilShapeRegistry.packages[stencilFile] = xmlDoc2;
install = true; install = true;
StencilRegistry.parseStencilSet(xmlDoc2.documentElement, postStencilLoad, install); StencilShapeRegistry.parseStencilSet(xmlDoc2.documentElement, postStencilLoad, install);
} }
})); }));
@ -6001,8 +6001,8 @@ StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, a
} }
else else
{ {
xmlDoc = StencilRegistry.loadStencil(stencilFile); xmlDoc = StencilShapeRegistry.loadStencil(stencilFile);
StencilRegistry.packages[stencilFile] = xmlDoc; StencilShapeRegistry.packages[stencilFile] = xmlDoc;
install = true; install = true;
} }
} }
@ -6017,13 +6017,13 @@ StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, a
if (xmlDoc != null && xmlDoc.documentElement != null) if (xmlDoc != null && xmlDoc.documentElement != null)
{ {
StencilRegistry.parseStencilSet(xmlDoc.documentElement, postStencilLoad, install); StencilShapeRegistry.parseStencilSet(xmlDoc.documentElement, postStencilLoad, install);
} }
} }
}; };
// Loads the given stencil XML file. // Loads the given stencil XML file.
StencilRegistry.loadStencil = function(filename, fn) StencilShapeRegistry.loadStencil = function(filename, fn)
{ {
if (fn != null) if (fn != null)
{ {
@ -6039,16 +6039,16 @@ StencilRegistry.loadStencil = function(filename, fn)
}; };
// Takes array of strings // Takes array of strings
StencilRegistry.parseStencilSets = function(stencils) StencilShapeRegistry.parseStencilSets = function(stencils)
{ {
for (let i = 0; i < stencils.length; i++) for (let i = 0; i < stencils.length; i++)
{ {
StencilRegistry.parseStencilSet(mxUtils.parseXml(stencils[i]).documentElement); StencilShapeRegistry.parseStencilSet(mxUtils.parseXml(stencils[i]).documentElement);
} }
}; };
// Parses the given stencil set // Parses the given stencil set
StencilRegistry.parseStencilSet = function(root, postStencilLoad, install) StencilShapeRegistry.parseStencilSet = function(root, postStencilLoad, install)
{ {
if (root.nodeName == 'stencils') if (root.nodeName == 'stencils')
{ {
@ -6058,7 +6058,7 @@ StencilRegistry.parseStencilSet = function(root, postStencilLoad, install)
{ {
if (shapes.nodeName == 'shapes') if (shapes.nodeName == 'shapes')
{ {
StencilRegistry.parseStencilSet(shapes, postStencilLoad, install); StencilShapeRegistry.parseStencilSet(shapes, postStencilLoad, install);
} }
shapes = shapes.nextSibling; shapes = shapes.nextSibling;
@ -6089,7 +6089,7 @@ StencilRegistry.parseStencilSet = function(root, postStencilLoad, install)
if (install) if (install)
{ {
StencilRegistry.addStencil(packageName + stencilName.toLowerCase(), new Stencil(shape)); StencilShapeRegistry.addStencil(packageName + stencilName.toLowerCase(), new StencilShape(shape));
} }
if (postStencilLoad != null) if (postStencilLoad != null)
@ -6151,8 +6151,8 @@ if (typeof VertexHandler != 'undefined')
}; };
// Ignores all table cells in layouts // Ignores all table cells in layouts
let graphLayoutIsVertexIgnored = mxGraphLayout.prototype.isVertexIgnored; let graphLayoutIsVertexIgnored = GraphLayout.prototype.isVertexIgnored;
mxGraphLayout.prototype.isVertexIgnored = function(vertex) GraphLayout.prototype.isVertexIgnored = function(vertex)
{ {
return graphLayoutIsVertexIgnored.apply(this, arguments) || return graphLayoutIsVertexIgnored.apply(this, arguments) ||
this.graph.isTableRow(vertex) || this.graph.isTableCell(vertex); this.graph.isTableRow(vertex) || this.graph.isTableCell(vertex);
@ -6169,7 +6169,7 @@ if (typeof VertexHandler != 'undefined')
// Overrides highlight shape for connection points // Overrides highlight shape for connection points
ConstraintHandler.prototype.createHighlightShape = function() ConstraintHandler.prototype.createHighlightShape = function()
{ {
let hl = new Ellipse(null, this.highlightColor, this.highlightColor, 0); let hl = new EllipseShape(null, this.highlightColor, this.highlightColor, 0);
hl.opacity = mxConstants.HIGHLIGHT_OPACITY; hl.opacity = mxConstants.HIGHLIGHT_OPACITY;
return hl; return hl;
@ -7068,7 +7068,7 @@ if (typeof VertexHandler != 'undefined')
{ {
let layout = this.layoutManager.getLayout(parent); let layout = this.layoutManager.getLayout(parent);
if (layout != null && layout.constructor == mxStackLayout) if (layout != null && layout.constructor == StackLayout)
{ {
result = false; result = false;
} }
@ -7857,7 +7857,7 @@ if (typeof VertexHandler != 'undefined')
currentState: null, currentState: null,
currentLink: null, currentLink: null,
highlight: (highlight != null && highlight != '' && highlight != mxConstants.NONE) ? highlight: (highlight != null && highlight != '' && highlight != mxConstants.NONE) ?
new mxCellHighlight(graph, highlight, 4) : null, new CellHighlight(graph, highlight, 4) : null,
startX: 0, startX: 0,
startY: 0, startY: 0,
scrollLeft: 0, scrollLeft: 0,
@ -9573,7 +9573,7 @@ if (typeof VertexHandler != 'undefined')
*/ */
mxGuide.prototype.createGuideShape = function(horizontal) mxGuide.prototype.createGuideShape = function(horizontal)
{ {
let guide = new mxPolyline([], mxConstants.GUIDE_COLOR, mxConstants.GUIDE_STROKEWIDTH); let guide = new Polyline([], mxConstants.GUIDE_COLOR, mxConstants.GUIDE_STROKEWIDTH);
return guide; return guide;
}; };
@ -10151,8 +10151,8 @@ if (typeof VertexHandler != 'undefined')
/** /**
* Overridden to allow for shrinking pools when lanes are resized. * Overridden to allow for shrinking pools when lanes are resized.
*/ */
let stackLayoutResizeCell = mxStackLayout.prototype.resizeCell; let stackLayoutResizeCell = StackLayout.prototype.resizeCell;
mxStackLayout.prototype.resizeCell = function(cell, bounds) StackLayout.prototype.resizeCell = function(cell, bounds)
{ {
stackLayoutResizeCell.apply(this, arguments); stackLayoutResizeCell.apply(this, arguments);
let style = this.graph.getCellStyle(cell); let style = this.graph.getCellStyle(cell);
@ -10168,7 +10168,7 @@ if (typeof VertexHandler != 'undefined')
if (style.childLayout == 'stackLayout') if (style.childLayout == 'stackLayout')
{ {
let border = parseFloat(mxUtils.getValue(style, 'stackBorder', mxStackLayout.prototype.border)); let border = parseFloat(mxUtils.getValue(style, 'stackBorder', StackLayout.prototype.border));
let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
let start = this.graph.getActualStartSize(parent); let start = this.graph.getActualStartSize(parent);
geo = geo.clone(); geo = geo.clone();
@ -10191,8 +10191,8 @@ if (typeof VertexHandler != 'undefined')
/** /**
* Shows handle for table instead of rows and cells. * Shows handle for table instead of rows and cells.
*/ */
let selectionCellsHandlerGetHandledSelectionCells = mxSelectionCellsHandler.prototype.getHandledSelectionCells; let selectionCellsHandlerGetHandledSelectionCells = SelectionCellsHandler.prototype.getHandledSelectionCells;
mxSelectionCellsHandler.prototype.getHandledSelectionCells = function() SelectionCellsHandler.prototype.getHandledSelectionCells = function()
{ {
let cells = selectionCellsHandlerGetHandledSelectionCells.apply(this, arguments); let cells = selectionCellsHandlerGetHandledSelectionCells.apply(this, arguments);
let dict = new Dictionary(); let dict = new Dictionary();
@ -10404,7 +10404,7 @@ if (typeof VertexHandler != 'undefined')
let colState = cols[index]; let colState = cols[index];
let nextCol = (index < cols.length - 1) ? cols[index + 1] : null; let nextCol = (index < cols.length - 1) ? cols[index + 1] : null;
let shape = new mxLine(new Rectangle(), mxConstants.NONE, 1, true); let shape = new Line(new Rectangle(), mxConstants.NONE, 1, true);
shape.isDashed = sel.isDashed; shape.isDashed = sel.isDashed;
// Workaround for event handling on overlapping cells with tolerance // Workaround for event handling on overlapping cells with tolerance
@ -10483,7 +10483,7 @@ if (typeof VertexHandler != 'undefined')
{ {
let rowState = rows[index]; let rowState = rows[index];
let shape = new mxLine(new Rectangle(), mxConstants.NONE, 1); let shape = new Line(new Rectangle(), mxConstants.NONE, 1);
shape.isDashed = sel.isDashed; shape.isDashed = sel.isDashed;
shape.svgStrokeTolerance++; shape.svgStrokeTolerance++;
@ -10678,7 +10678,7 @@ if (typeof VertexHandler != 'undefined')
let name = this.state.style.shape; let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null && if (mxCellRenderer.defaultShapes[name] == null &&
StencilRegistry.getStencil(name) == null) StencilShapeRegistry.getStencil(name) == null)
{ {
name = mxConstants.SHAPE_RECTANGLE; name = mxConstants.SHAPE_RECTANGLE;
} }
@ -10940,7 +10940,7 @@ if (typeof VertexHandler != 'undefined')
// Enables connections along the outline, virtual waypoints, parent highlight etc // Enables connections along the outline, virtual waypoints, parent highlight etc
ConnectionHandler.prototype.outlineConnect = true; ConnectionHandler.prototype.outlineConnect = true;
mxCellHighlight.prototype.keepOnTop = true; CellHighlight.prototype.keepOnTop = true;
VertexHandler.prototype.parentHighlightEnabled = true; VertexHandler.prototype.parentHighlightEnabled = true;
mxEdgeHandler.prototype.parentHighlightEnabled = true; mxEdgeHandler.prototype.parentHighlightEnabled = true;

10
docs/stashed/grapheditor/www/js/Menus.js
View File

@ -272,7 +272,7 @@ Menus.prototype.init = function()
if (tmp != null) if (tmp != null)
{ {
let layout = new mxCompactTreeLayout(graph, true); let layout = new CompactTreeLayout(graph, true);
layout.edgeRouting = false; layout.edgeRouting = false;
layout.levelDistance = 30; layout.levelDistance = 30;
@ -311,7 +311,7 @@ Menus.prototype.init = function()
if (tmp != null) if (tmp != null)
{ {
let layout = new mxCompactTreeLayout(graph, false); let layout = new CompactTreeLayout(graph, false);
layout.edgeRouting = false; layout.edgeRouting = false;
layout.levelDistance = 30; layout.levelDistance = 30;
@ -350,7 +350,7 @@ Menus.prototype.init = function()
if (tmp != null) if (tmp != null)
{ {
let layout = new mxRadialTreeLayout(graph, false); let layout = new RadialTreeLayout(graph, false);
layout.levelDistance = 80; layout.levelDistance = 80;
layout.autoRadius = true; layout.autoRadius = true;
@ -378,7 +378,7 @@ Menus.prototype.init = function()
menu.addSeparator(parent); menu.addSeparator(parent);
menu.addItem(Resources.get('organic'), null, utils.bind(this, function() menu.addItem(Resources.get('organic'), null, utils.bind(this, function()
{ {
let layout = new mxFastOrganicLayout(graph); let layout = new MxFastOrganicLayout(graph);
promptSpacing(layout.forceConstant, utils.bind(this, function(newValue) promptSpacing(layout.forceConstant, utils.bind(this, function(newValue)
{ {
@ -404,7 +404,7 @@ Menus.prototype.init = function()
}), parent); }), parent);
menu.addItem(Resources.get('circle'), null, utils.bind(this, function() menu.addItem(Resources.get('circle'), null, utils.bind(this, function()
{ {
let layout = new mxCircleLayout(graph); let layout = new CircleLayout(graph);
this.editorUi.executeLayout(function() this.editorUi.executeLayout(function()
{ {

130
docs/stashed/grapheditor/www/js/Shapes.js
View File

@ -110,10 +110,10 @@
// Table Shape // Table Shape
function TableShape() function TableShape()
{ {
Swimlane.call(this); SwimlaneShape.call(this);
}; };
utils.extend(TableShape, Swimlane); utils.extend(TableShape, SwimlaneShape);
TableShape.prototype.getLabelBounds = function(rect) TableShape.prototype.getLabelBounds = function(rect)
{ {
@ -125,7 +125,7 @@
} }
else else
{ {
return Swimlane.prototype.getLabelBounds.apply(this, arguments); return SwimlaneShape.prototype.getLabelBounds.apply(this, arguments);
} }
}; };
@ -142,7 +142,7 @@
} }
else else
{ {
Swimlane.prototype.paintVertexShape.apply(this, arguments); SwimlaneShape.prototype.paintVertexShape.apply(this, arguments);
c.translate(-x, -y); c.translate(-x, -y);
} }
@ -1353,7 +1353,7 @@
}; };
// Sets default jiggle for diamond // Sets default jiggle for diamond
Rhombus.prototype.defaultJiggle = 2; RhombusShape.prototype.defaultJiggle = 2;
// Overrides to avoid call to rect // Overrides to avoid call to rect
var mxRectangleShapeIsHtmlAllowed0 = RectangleShape.prototype.isHtmlAllowed; var mxRectangleShapeIsHtmlAllowed0 = RectangleShape.prototype.isHtmlAllowed;
@ -1547,7 +1547,7 @@
{ {
Actor.call(this); Actor.call(this);
}; };
utils.extend(CalloutShape, Hexagon); utils.extend(CalloutShape, HexagonShape);
CalloutShape.prototype.size = 30; CalloutShape.prototype.size = 30;
CalloutShape.prototype.position = 0.5; CalloutShape.prototype.position = 0.5;
CalloutShape.prototype.position2 = 0.5; CalloutShape.prototype.position2 = 0.5;
@ -1607,7 +1607,7 @@
{ {
Actor.call(this); Actor.call(this);
}; };
utils.extend(HexagonShape, Hexagon); utils.extend(HexagonShape, HexagonShape);
HexagonShape.prototype.size = 0.25; HexagonShape.prototype.size = 0.25;
HexagonShape.prototype.fixedSize = 20; HexagonShape.prototype.fixedSize = 20;
HexagonShape.prototype.isRoundable = function() HexagonShape.prototype.isRoundable = function()
@ -1653,8 +1653,8 @@
mxCellRenderer.registerShape('plus', PlusShape); mxCellRenderer.registerShape('plus', PlusShape);
// Overrides painting of rhombus shape to allow for double style // Overrides painting of rhombus shape to allow for double style
let mxRhombusPaintVertexShape = Rhombus.prototype.paintVertexShape; let mxRhombusPaintVertexShape = RhombusShape.prototype.paintVertexShape;
Rhombus.prototype.getLabelBounds = function(rect) RhombusShape.prototype.getLabelBounds = function(rect)
{ {
if (this.style.double == 1) if (this.style.double == 1)
{ {
@ -1667,7 +1667,7 @@
return rect; return rect;
}; };
Rhombus.prototype.paintVertexShape = function(c, x, y, w, h) RhombusShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
mxRhombusPaintVertexShape.apply(this, arguments); mxRhombusPaintVertexShape.apply(this, arguments);
@ -1915,12 +1915,12 @@
// UML Entity Shape // UML Entity Shape
function UmlEntityShape() function UmlEntityShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(UmlEntityShape, Ellipse); utils.extend(UmlEntityShape, EllipseShape);
UmlEntityShape.prototype.paintVertexShape = function(c, x, y, w, h) UmlEntityShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
Ellipse.prototype.paintVertexShape.apply(this, arguments); EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.begin(); c.begin();
c.moveTo(x + w / 8, y + h); c.moveTo(x + w / 8, y + h);
@ -2690,9 +2690,9 @@
// State Shapes derives from double ellipse // State Shapes derives from double ellipse
function StateShape() function StateShape()
{ {
DoubleEllipse.call(this); DoubleEllipseShape.call(this);
}; };
utils.extend(StateShape, DoubleEllipse); utils.extend(StateShape, DoubleEllipseShape);
StateShape.prototype.outerStroke = true; StateShape.prototype.outerStroke = true;
StateShape.prototype.paintVertexShape = function(c, x, y, w, h) StateShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
@ -2727,10 +2727,10 @@
// Link shape // Link shape
function LinkShape() function LinkShape()
{ {
mxArrowConnector.call(this); ArrowConnector.call(this);
this.spacing = 0; this.spacing = 0;
}; };
utils.extend(LinkShape, mxArrowConnector); utils.extend(LinkShape, ArrowConnector);
LinkShape.prototype.defaultWidth = 4; LinkShape.prototype.defaultWidth = 4;
LinkShape.prototype.isOpenEnded = function() LinkShape.prototype.isOpenEnded = function()
@ -2754,10 +2754,10 @@
// Generic arrow // Generic arrow
function FlexArrowShape() function FlexArrowShape()
{ {
mxArrowConnector.call(this); ArrowConnector.call(this);
this.spacing = 0; this.spacing = 0;
}; };
utils.extend(FlexArrowShape, mxArrowConnector); utils.extend(FlexArrowShape, ArrowConnector);
FlexArrowShape.prototype.defaultWidth = 10; FlexArrowShape.prototype.defaultWidth = 10;
FlexArrowShape.prototype.defaultArrowWidth = 20; FlexArrowShape.prototype.defaultArrowWidth = 20;
@ -3071,12 +3071,12 @@
// Internal storage // Internal storage
function TapeDataShape() function TapeDataShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(TapeDataShape, Ellipse); utils.extend(TapeDataShape, EllipseShape);
TapeDataShape.prototype.paintVertexShape = function(c, x, y, w, h) TapeDataShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
Ellipse.prototype.paintVertexShape.apply(this, arguments); EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.begin(); c.begin();
c.moveTo(x + w / 2, y + h); c.moveTo(x + w / 2, y + h);
@ -3090,12 +3090,12 @@
// OrEllipseShape // OrEllipseShape
function OrEllipseShape() function OrEllipseShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(OrEllipseShape, Ellipse); utils.extend(OrEllipseShape, EllipseShape);
OrEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h) OrEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
Ellipse.prototype.paintVertexShape.apply(this, arguments); EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.setShadow(false); c.setShadow(false);
c.begin(); c.begin();
@ -3116,12 +3116,12 @@
// SumEllipseShape // SumEllipseShape
function SumEllipseShape() function SumEllipseShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(SumEllipseShape, Ellipse); utils.extend(SumEllipseShape, EllipseShape);
SumEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h) SumEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
Ellipse.prototype.paintVertexShape.apply(this, arguments); EllipseShape.prototype.paintVertexShape.apply(this, arguments);
var s2 = 0.145; var s2 = 0.145;
c.setShadow(false); c.setShadow(false);
@ -3143,12 +3143,12 @@
// SortShape // SortShape
function SortShape() function SortShape()
{ {
Rhombus.call(this); RhombusShape.call(this);
}; };
utils.extend(SortShape, Rhombus); utils.extend(SortShape, RhombusShape);
SortShape.prototype.paintVertexShape = function(c, x, y, w, h) SortShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
Rhombus.prototype.paintVertexShape.apply(this, arguments); RhombusShape.prototype.paintVertexShape.apply(this, arguments);
c.setShadow(false); c.setShadow(false);
c.begin(); c.begin();
@ -3163,9 +3163,9 @@
// CollateShape // CollateShape
function CollateShape() function CollateShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(CollateShape, Ellipse); utils.extend(CollateShape, EllipseShape);
CollateShape.prototype.paintVertexShape = function(c, x, y, w, h) CollateShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
c.begin(); c.begin();
@ -3188,9 +3188,9 @@
// DimensionShape // DimensionShape
function DimensionShape() function DimensionShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(DimensionShape, Ellipse); utils.extend(DimensionShape, EllipseShape);
DimensionShape.prototype.paintVertexShape = function(c, x, y, w, h) DimensionShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
// Arrow size // Arrow size
@ -3223,9 +3223,9 @@
// PartialRectangleShape // PartialRectangleShape
function PartialRectangleShape() function PartialRectangleShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(PartialRectangleShape, Ellipse); utils.extend(PartialRectangleShape, EllipseShape);
PartialRectangleShape.prototype.paintVertexShape = function(c, x, y, w, h) PartialRectangleShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
if (!this.outline) if (!this.outline)
@ -3293,12 +3293,12 @@
// LineEllipseShape // LineEllipseShape
function LineEllipseShape() function LineEllipseShape()
{ {
Ellipse.call(this); EllipseShape.call(this);
}; };
utils.extend(LineEllipseShape, Ellipse); utils.extend(LineEllipseShape, EllipseShape);
LineEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h) LineEllipseShape.prototype.paintVertexShape = function(c, x, y, w, h)
{ {
Ellipse.prototype.paintVertexShape.apply(this, arguments); EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.setShadow(false); c.setShadow(false);
c.begin(); c.begin();
@ -3401,9 +3401,9 @@
// FilledEdge shape // FilledEdge shape
function FilledEdge() function FilledEdge()
{ {
mxConnector.call(this); Connector.call(this);
}; };
utils.extend(FilledEdge, mxConnector); utils.extend(FilledEdge, Connector);
FilledEdge.prototype.origPaintEdgeShape = FilledEdge.prototype.paintEdgeShape; FilledEdge.prototype.origPaintEdgeShape = FilledEdge.prototype.paintEdgeShape;
FilledEdge.prototype.paintEdgeShape = function(c, pts, rounded) FilledEdge.prototype.paintEdgeShape = function(c, pts, rounded)
@ -3462,7 +3462,7 @@
} }
// Registers and defines the custom marker // Registers and defines the custom marker
mxMarker.addMarker('dash', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled) Marker.addMarker('dash', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
let nx = unitX * (size + sw + 1); let nx = unitX * (size + sw + 1);
let ny = unitY * (size + sw + 1); let ny = unitY * (size + sw + 1);
@ -3477,7 +3477,7 @@
}); });
// Registers and defines the custom marker // Registers and defines the custom marker
mxMarker.addMarker('box', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled) Marker.addMarker('box', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
let nx = unitX * (size + sw + 1); let nx = unitX * (size + sw + 1);
let ny = unitY * (size + sw + 1); let ny = unitY * (size + sw + 1);
@ -3508,7 +3508,7 @@
}); });
// Registers and defines the custom marker // Registers and defines the custom marker
mxMarker.addMarker('cross', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled) Marker.addMarker('cross', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
let nx = unitX * (size + sw + 1); let nx = unitX * (size + sw + 1);
let ny = unitY * (size + sw + 1); let ny = unitY * (size + sw + 1);
@ -3552,8 +3552,8 @@
}; };
}; };
mxMarker.addMarker('circle', circleMarker); Marker.addMarker('circle', circleMarker);
mxMarker.addMarker('circlePlus', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled) Marker.addMarker('circlePlus', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
let pt = pe.clone(); let pt = pe.clone();
let fn = circleMarker.apply(this, arguments); let fn = circleMarker.apply(this, arguments);
@ -3574,7 +3574,7 @@
}); });
// Registers and defines the custom marker // Registers and defines the custom marker
mxMarker.addMarker('halfCircle', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled) Marker.addMarker('halfCircle', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
let nx = unitX * (size + sw + 1); let nx = unitX * (size + sw + 1);
let ny = unitY * (size + sw + 1); let ny = unitY * (size + sw + 1);
@ -3593,7 +3593,7 @@
}; };
}); });
mxMarker.addMarker('async', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled) Marker.addMarker('async', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
// The angle of the forward facing arrow sides against the x axis is // The angle of the forward facing arrow sides against the x axis is
// 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for // 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
@ -3670,7 +3670,7 @@
} }
}; };
mxMarker.addMarker('openAsync', createOpenAsyncArrow(2)); Marker.addMarker('openAsync', createOpenAsyncArrow(2));
function arrow(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) function arrow(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
{ {
@ -4553,7 +4553,7 @@
let name = this.state.style.shape; let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null && if (mxCellRenderer.defaultShapes[name] == null &&
StencilRegistry.getStencil(name) == null) StencilShapeRegistry.getStencil(name) == null)
{ {
name = mxConstants.SHAPE_RECTANGLE; name = mxConstants.SHAPE_RECTANGLE;
} }
@ -4595,7 +4595,7 @@
let name = this.state.style.shape; let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null && if (mxCellRenderer.defaultShapes[name] == null &&
StencilRegistry.getStencil(name) == null) StencilShapeRegistry.getStencil(name) == null)
{ {
name = mxConstants.SHAPE_CONNECTOR; name = mxConstants.SHAPE_CONNECTOR;
} }
@ -4818,13 +4818,13 @@
new ConnectionConstraint(new Point(0.5, 1), true), new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(0.75, 1), true), new ConnectionConstraint(new Point(0.75, 1), true),
new ConnectionConstraint(new Point(1, 1), true)]; new ConnectionConstraint(new Point(1, 1), true)];
Ellipse.prototype.constraints = [new ConnectionConstraint(new Point(0, 0), true), new ConnectionConstraint(new Point(1, 0), true), EllipseShape.prototype.constraints = [new ConnectionConstraint(new Point(0, 0), true), new ConnectionConstraint(new Point(1, 0), true),
new ConnectionConstraint(new Point(0, 1), true), new ConnectionConstraint(new Point(1, 1), true), new ConnectionConstraint(new Point(0, 1), true), new ConnectionConstraint(new Point(1, 1), true),
new ConnectionConstraint(new Point(0.5, 0), true), new ConnectionConstraint(new Point(0.5, 1), true), new ConnectionConstraint(new Point(0.5, 0), true), new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(0, 0.5), true), new ConnectionConstraint(new Point(1, 0.5))]; new ConnectionConstraint(new Point(0, 0.5), true), new ConnectionConstraint(new Point(1, 0.5))];
PartialRectangleShape.prototype.constraints = RectangleShape.prototype.constraints; PartialRectangleShape.prototype.constraints = RectangleShape.prototype.constraints;
ImageShape.prototype.constraints = RectangleShape.prototype.constraints; ImageShape.prototype.constraints = RectangleShape.prototype.constraints;
Swimlane.prototype.constraints = RectangleShape.prototype.constraints; SwimlaneShape.prototype.constraints = RectangleShape.prototype.constraints;
PlusShape.prototype.constraints = RectangleShape.prototype.constraints; PlusShape.prototype.constraints = RectangleShape.prototype.constraints;
Label.prototype.constraints = RectangleShape.prototype.constraints; Label.prototype.constraints = RectangleShape.prototype.constraints;
@ -4968,10 +4968,10 @@
InternalStorageShape.prototype.constraints = RectangleShape.prototype.constraints; InternalStorageShape.prototype.constraints = RectangleShape.prototype.constraints;
DataStorageShape.prototype.constraints = RectangleShape.prototype.constraints; DataStorageShape.prototype.constraints = RectangleShape.prototype.constraints;
TapeDataShape.prototype.constraints = Ellipse.prototype.constraints; TapeDataShape.prototype.constraints = EllipseShape.prototype.constraints;
OrEllipseShape.prototype.constraints = Ellipse.prototype.constraints; OrEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
SumEllipseShape.prototype.constraints = Ellipse.prototype.constraints; SumEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
LineEllipseShape.prototype.constraints = Ellipse.prototype.constraints; LineEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
ManualInputShape.prototype.constraints = RectangleShape.prototype.constraints; ManualInputShape.prototype.constraints = RectangleShape.prototype.constraints;
DelayShape.prototype.constraints = RectangleShape.prototype.constraints; DelayShape.prototype.constraints = RectangleShape.prototype.constraints;
@ -5102,21 +5102,21 @@
new ConnectionConstraint(new Point(1, 0.25), true), new ConnectionConstraint(new Point(1, 0.25), true),
new ConnectionConstraint(new Point(1, 0.5), true), new ConnectionConstraint(new Point(1, 0.5), true),
new ConnectionConstraint(new Point(1, 0.75), true)]; new ConnectionConstraint(new Point(1, 0.75), true)];
mxLine.prototype.constraints = [new ConnectionConstraint(new Point(0, 0.5), false), Line.prototype.constraints = [new ConnectionConstraint(new Point(0, 0.5), false),
new ConnectionConstraint(new Point(0.25, 0.5), false), new ConnectionConstraint(new Point(0.25, 0.5), false),
new ConnectionConstraint(new Point(0.75, 0.5), false), new ConnectionConstraint(new Point(0.75, 0.5), false),
new ConnectionConstraint(new Point(1, 0.5), false)]; new ConnectionConstraint(new Point(1, 0.5), false)];
LollipopShape.prototype.constraints = [new ConnectionConstraint(new Point(0.5, 0), false), LollipopShape.prototype.constraints = [new ConnectionConstraint(new Point(0.5, 0), false),
new ConnectionConstraint(new Point(0.5, 1), false)]; new ConnectionConstraint(new Point(0.5, 1), false)];
DoubleEllipse.prototype.constraints = Ellipse.prototype.constraints; DoubleEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
Rhombus.prototype.constraints = Ellipse.prototype.constraints; RhombusShape.prototype.constraints = EllipseShape.prototype.constraints;
Triangle.prototype.constraints = [new ConnectionConstraint(new Point(0, 0.25), true), TriangleShape.prototype.constraints = [new ConnectionConstraint(new Point(0, 0.25), true),
new ConnectionConstraint(new Point(0, 0.5), true), new ConnectionConstraint(new Point(0, 0.5), true),
new ConnectionConstraint(new Point(0, 0.75), true), new ConnectionConstraint(new Point(0, 0.75), true),
new ConnectionConstraint(new Point(0.5, 0), true), new ConnectionConstraint(new Point(0.5, 0), true),
new ConnectionConstraint(new Point(0.5, 1), true), new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(1, 0.5), true)]; new ConnectionConstraint(new Point(1, 0.5), true)];
Hexagon.prototype.constraints = [new ConnectionConstraint(new Point(0.375, 0), true), HexagonShape.prototype.constraints = [new ConnectionConstraint(new Point(0.375, 0), true),
new ConnectionConstraint(new Point(0.5, 0), true), new ConnectionConstraint(new Point(0.5, 0), true),
new ConnectionConstraint(new Point(0.625, 0), true), new ConnectionConstraint(new Point(0.625, 0), true),
new ConnectionConstraint(new Point(0, 0.25), true), new ConnectionConstraint(new Point(0, 0.25), true),
@ -5128,7 +5128,7 @@
new ConnectionConstraint(new Point(0.375, 1), true), new ConnectionConstraint(new Point(0.375, 1), true),
new ConnectionConstraint(new Point(0.5, 1), true), new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(0.625, 1), true)]; new ConnectionConstraint(new Point(0.625, 1), true)];
Cloud.prototype.constraints = [new ConnectionConstraint(new Point(0.25, 0.25), false), CloudShape.prototype.constraints = [new ConnectionConstraint(new Point(0.25, 0.25), false),
new ConnectionConstraint(new Point(0.4, 0.1), false), new ConnectionConstraint(new Point(0.4, 0.1), false),
new ConnectionConstraint(new Point(0.16, 0.55), false), new ConnectionConstraint(new Point(0.16, 0.55), false),
new ConnectionConstraint(new Point(0.07, 0.4), false), new ConnectionConstraint(new Point(0.07, 0.4), false),
@ -5151,7 +5151,7 @@
new ConnectionConstraint(new Point(1, 0.25), true), new ConnectionConstraint(new Point(1, 0.25), true),
new ConnectionConstraint(new Point(1, 0.5), true), new ConnectionConstraint(new Point(1, 0.5), true),
new ConnectionConstraint(new Point(1, 0.75), true)]; new ConnectionConstraint(new Point(1, 0.75), true)];
mxArrow.prototype.constraints = null; Arrow.prototype.constraints = null;
TeeShape.prototype.getConstraints = function(style, w, h) TeeShape.prototype.getConstraints = function(style, w, h)
{ {

6
docs/stashed/grapheditor/www/js/Sidebar.js
View File

@ -2831,7 +2831,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell
let layout = graph.layoutManager.getLayout(targetParent); let layout = graph.layoutManager.getLayout(targetParent);
// LATER: Use parent of parent if valid layout // LATER: Use parent of parent if valid layout
if (layout != null && layout.constructor == mxStackLayout) if (layout != null && layout.constructor == StackLayout)
{ {
validLayout = false; validLayout = false;
} }
@ -4250,7 +4250,7 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig
} }
} }
StencilRegistry.loadStencilSet(stencilFile, utils.bind(this, function(packageName, stencilName, displayName, w, h) StencilShapeRegistry.loadStencilSet(stencilFile, utils.bind(this, function(packageName, stencilName, displayName, w, h)
{ {
if (ignore == null || utils.indexOf(ignore, stencilName) < 0) if (ignore == null || utils.indexOf(ignore, stencilName) < 0)
{ {
@ -4292,7 +4292,7 @@ Sidebar.prototype.addStencilPalette = function(id, title, stencilFile, style, ig
} }
} }
StencilRegistry.loadStencilSet(stencilFile, utils.bind(this, function(packageName, stencilName, displayName, w, h) StencilShapeRegistry.loadStencilSet(stencilFile, utils.bind(this, function(packageName, stencilName, displayName, w, h)
{ {
if (ignore == null || utils.indexOf(ignore, stencilName) < 0) if (ignore == null || utils.indexOf(ignore, stencilName) < 0)
{ {

14
packages/core/src/editor/mxEditor.js
View File

@ -9,9 +9,9 @@ import mxDefaultKeyHandler from './mxDefaultKeyHandler';
import EventSource from '../view/event/EventSource'; import EventSource from '../view/event/EventSource';
import Resources from '../util/Resources'; import Resources from '../util/Resources';
import mxClient from '../mxClient'; import mxClient from '../mxClient';
import mxCompactTreeLayout from '../view/layout/layout/mxCompactTreeLayout'; import CompactTreeLayout from '../view/layout/layout/CompactTreeLayout';
import mxDefaultToolbar from './mxDefaultToolbar'; import mxDefaultToolbar from './mxDefaultToolbar';
import mxStackLayout from '../view/layout/layout/mxStackLayout'; import StackLayout from '../view/layout/layout/StackLayout';
import EventObject from '../view/event/EventObject'; import EventObject from '../view/event/EventObject';
import utils from '../util/Utils'; import utils from '../util/Utils';
import mxCodec from '../util/serialization/mxCodec'; import mxCodec from '../util/serialization/mxCodec';
@ -1733,12 +1733,12 @@ class mxEditor extends EventSource {
/** /**
* Creates the layout instance used to layout the * Creates the layout instance used to layout the
* swimlanes in the diagram. * swimlanes in the diagram.
* @returns mxStackLayout instance * @returns StackLayout instance
*/ */
// createDiagramLayout(): mxStackLayout; // createDiagramLayout(): mxStackLayout;
createDiagramLayout() { createDiagramLayout() {
const gs = this.graph.gridSize; const gs = this.graph.gridSize;
const layout = new mxStackLayout( const layout = new StackLayout(
this.graph, this.graph,
!this.horizontalFlow, !this.horizontalFlow,
this.swimlaneSpacing, this.swimlaneSpacing,
@ -1757,11 +1757,11 @@ class mxEditor extends EventSource {
/** /**
* Creates the layout instance used to layout the * Creates the layout instance used to layout the
* children of each swimlane. * children of each swimlane.
* @returns mxCompactTreeLayout instance * @returns CompactTreeLayout instance
*/ */
// createSwimlaneLayout(): mxCompactTreeLayout; // createSwimlaneLayout(): mxCompactTreeLayout;
createSwimlaneLayout() { createSwimlaneLayout() {
return new mxCompactTreeLayout(this.graph, this.horizontalFlow); return new CompactTreeLayout(this.graph, this.horizontalFlow);
} }
/** /**
@ -1852,7 +1852,7 @@ class mxEditor extends EventSource {
// treeLayout(cell: mxCell, horizontal: boolean): void; // treeLayout(cell: mxCell, horizontal: boolean): void;
treeLayout(cell, horizontal) { treeLayout(cell, horizontal) {
if (cell != null) { if (cell != null) {
const layout = new mxCompactTreeLayout(this.graph, horizontal); const layout = new CompactTreeLayout(this.graph, horizontal);
layout.execute(cell); layout.execute(cell);
} }
} }

168
packages/core/src/index.ts
View File

@ -17,9 +17,9 @@ import mxDefaultPopupMenu from './editor/mxDefaultPopupMenu';
import mxDefaultToolbar from './editor/mxDefaultToolbar'; import mxDefaultToolbar from './editor/mxDefaultToolbar';
import mxEditor from './editor/mxEditor'; import mxEditor from './editor/mxEditor';
import mxCellHighlight from './view/selection/mxCellHighlight'; import CellHighlight from './view/selection/CellHighlight';
import CellMarker from './view/cell/CellMarker'; import CellMarker from './view/cell/CellMarker';
import mxCellTracker from './view/event/mxCellTracker'; import CellTracker from './view/event/CellTracker';
import ConnectionHandler from './view/connection/ConnectionHandler'; import ConnectionHandler from './view/connection/ConnectionHandler';
import ConstraintHandler from './view/connection/ConstraintHandler'; import ConstraintHandler from './view/connection/ConstraintHandler';
import EdgeHandler from './view/cell/edge/EdgeHandler'; import EdgeHandler from './view/cell/edge/EdgeHandler';
@ -31,35 +31,35 @@ import mxKeyHandler from './view/event/mxKeyHandler';
import PanningHandler from './view/panning/PanningHandler'; import PanningHandler from './view/panning/PanningHandler';
import PopupMenuHandler from './view/popups_menus/PopupMenuHandler'; import PopupMenuHandler from './view/popups_menus/PopupMenuHandler';
import RubberBand from './view/selection/RubberBand'; import RubberBand from './view/selection/RubberBand';
import mxSelectionCellsHandler from './view/selection/mxSelectionCellsHandler'; import SelectionCellsHandler from './view/selection/SelectionCellsHandler';
import TooltipHandler from './view/tooltip/TooltipHandler'; import TooltipHandler from './view/tooltip/TooltipHandler';
import VertexHandler from './view/cell/vertex/VertexHandler'; import VertexHandler from './view/cell/vertex/VertexHandler';
import mxCircleLayout from './view/layout/layout/mxCircleLayout'; import CircleLayout from './view/layout/layout/CircleLayout';
import mxCompactTreeLayout from './view/layout/layout/mxCompactTreeLayout'; import CompactTreeLayout from './view/layout/layout/CompactTreeLayout';
import mxCompositeLayout from './view/layout/layout/mxCompositeLayout'; import CompositeLayout from './view/layout/layout/CompositeLayout';
import mxEdgeLabelLayout from './view/layout/layout/mxEdgeLabelLayout'; import EdgeLabelLayout from './view/layout/layout/EdgeLabelLayout';
import mxFastOrganicLayout from './view/layout/layout/mxFastOrganicLayout'; import MxFastOrganicLayout from './view/layout/layout/FastOrganicLayout';
import mxGraphLayout from './view/layout/layout/mxGraphLayout'; import GraphLayout from './view/layout/layout/GraphLayout';
import mxParallelEdgeLayout from './view/layout/layout/mxParallelEdgeLayout'; import ParallelEdgeLayout from './view/layout/layout/ParallelEdgeLayout';
import mxPartitionLayout from './view/layout/layout/mxPartitionLayout'; import PartitionLayout from './view/layout/layout/PartitionLayout';
import mxRadialTreeLayout from './view/layout/layout/mxRadialTreeLayout'; import RadialTreeLayout from './view/layout/layout/RadialTreeLayout';
import mxStackLayout from './view/layout/layout/mxStackLayout'; import StackLayout from './view/layout/layout/StackLayout';
import mxHierarchicalEdgeStyle from './view/layout/layout/hierarchical/mxHierarchicalEdgeStyle'; import HierarchicalEdgeStyle from './view/layout/layout/hierarchical/HierarchicalEdgeStyle';
import mxHierarchicalLayout from './view/layout/layout/hierarchical/mxHierarchicalLayout'; import mxHierarchicalLayout from './view/layout/layout/hierarchical/mxHierarchicalLayout';
import mxSwimlaneLayout from './view/layout/layout/hierarchical/mxSwimlaneLayout'; import SwimlaneLayout from './view/layout/layout/hierarchical/SwimlaneLayout';
import mxGraphAbstractHierarchyCell from './view/layout/layout/hierarchical/model/mxGraphAbstractHierarchyCell'; import MxGraphAbstractHierarchyCell from './view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell';
import mxGraphHierarchyEdge from './view/layout/layout/hierarchical/model/mxGraphHierarchyEdge'; import GraphHierarchyEdge from './view/layout/layout/hierarchical/model/GraphHierarchyEdge';
import mxGraphHierarchyModel from './view/layout/layout/hierarchical/model/mxGraphHierarchyModel'; import GraphHierarchyModel from './view/layout/layout/hierarchical/model/GraphHierarchyModel';
import mxGraphHierarchyNode from './view/layout/layout/hierarchical/model/mxGraphHierarchyNode'; import GraphHierarchyNode from './view/layout/layout/hierarchical/model/GraphHierarchyNode';
import mxSwimlaneModel from './view/layout/layout/hierarchical/model/mxSwimlaneModel'; import SwimlaneModel from './view/layout/layout/hierarchical/model/SwimlaneModel';
import mxCoordinateAssignment from './view/layout/layout/hierarchical/stage/mxCoordinateAssignment'; import CoordinateAssignment from './view/layout/layout/hierarchical/stage/CoordinateAssignment';
import mxHierarchicalLayoutStage from './view/layout/layout/hierarchical/stage/mxHierarchicalLayoutStage'; import MxHierarchicalLayoutStage from './view/layout/layout/hierarchical/stage/HierarchicalLayoutStage';
import mxMedianHybridCrossingReduction from './view/layout/layout/hierarchical/stage/mxMedianHybridCrossingReduction'; import MedianHybridCrossingReduction from './view/layout/layout/hierarchical/stage/MedianHybridCrossingReduction';
import mxMinimumCycleRemover from './view/layout/layout/hierarchical/stage/mxMinimumCycleRemover'; import MinimumCycleRemover from './view/layout/layout/hierarchical/stage/MinimumCycleRemover';
import mxSwimlaneOrdering from './view/layout/layout/hierarchical/stage/mxSwimlaneOrdering'; import mxSwimlaneOrdering from './view/layout/layout/hierarchical/stage/mxSwimlaneOrdering';
import mxCellCodec from './util/serialization/mxCellCodec'; import mxCellCodec from './util/serialization/mxCellCodec';
@ -80,29 +80,29 @@ import mxStylesheetCodec from './util/serialization/mxStylesheetCodec';
import mxTerminalChangeCodec from './util/serialization/mxTerminalChangeCodec'; import mxTerminalChangeCodec from './util/serialization/mxTerminalChangeCodec';
import Actor from './view/geometry/shape/Actor'; import Actor from './view/geometry/shape/Actor';
import Label from './view/geometry/shape/Label'; import Label from './view/geometry/shape/node/LabelShape';
import Shape from './view/geometry/shape/Shape'; import Shape from './view/geometry/shape/Shape';
import Swimlane from './view/geometry/shape/Swimlane'; import SwimlaneShape from './view/geometry/shape/node/SwimlaneShape';
import mxText from './view/geometry/shape/mxText'; import TextShape from './view/geometry/shape/node/TextShape';
import Triangle from './view/geometry/shape/Triangle'; import TriangleShape from './view/geometry/shape/node/TriangleShape';
import mxArrow from './view/geometry/shape/edge/mxArrow'; import Arrow from './view/geometry/shape/edge/Arrow';
import mxArrowConnector from './view/geometry/shape/edge/mxArrowConnector'; import ArrowConnector from './view/geometry/shape/edge/ArrowConnector';
import mxConnector from './view/geometry/shape/edge/mxConnector'; import Connector from './view/geometry/shape/edge/Connector';
import mxLine from './view/geometry/shape/edge/mxLine'; import Line from './view/geometry/shape/edge/Line';
import mxMarker from './view/geometry/shape/edge/mxMarker'; import Marker from './view/geometry/shape/edge/Marker';
import mxPolyline from './view/geometry/shape/edge/mxPolyline'; import Polyline from './view/geometry/shape/edge/Polyline';
import Cloud from './view/geometry/shape/node/Cloud'; import CloudShape from './view/geometry/shape/node/CloudShape';
import Cylinder from './view/geometry/shape/node/Cylinder'; import CylinderShape from './view/geometry/shape/node/CylinderShape';
import DoubleEllipse from './view/geometry/shape/node/DoubleEllipse'; import DoubleEllipseShape from './view/geometry/shape/node/DoubleEllipseShape';
import Ellipse from './view/geometry/shape/node/Ellipse'; import EllipseShape from './view/geometry/shape/node/EllipseShape';
import Hexagon from './view/geometry/shape/node/Hexagon'; import HexagonShape from './view/geometry/shape/node/HexagonShape';
import ImageShape from './view/geometry/shape/node/ImageShape'; import ImageShape from './view/geometry/shape/node/ImageShape';
import RectangleShape from './view/geometry/shape/node/RectangleShape'; import RectangleShape from './view/geometry/shape/node/RectangleShape';
import Rhombus from './view/geometry/shape/node/Rhombus'; import RhombusShape from './view/geometry/shape/node/RhombusShape';
import Stencil from './view/geometry/shape/node/Stencil'; import StencilShape from './view/geometry/shape/node/StencilShape';
import StencilRegistry from './view/geometry/shape/node/StencilRegistry'; import StencilShapeRegistry from './view/geometry/shape/node/StencilShapeRegistry';
import * as mxConstants from './util/Constants'; import * as mxConstants from './util/Constants';
import mxGuide from './util/Guide'; import mxGuide from './util/Guide';
@ -161,7 +161,7 @@ import mxXmlRequest from './util/network/mxXmlRequest';
import mxAutoSaveManager from './util/storage/mxAutoSaveManager'; import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
import mxClipboard from './util/storage/mxClipboard'; import mxClipboard from './util/storage/mxClipboard';
import mxUndoableEdit from './view/model/mxUndoableEdit'; import UndoableEdit from './view/model/UndoableEdit';
import mxUndoManager from './util/mxUndoManager'; import mxUndoManager from './util/mxUndoManager';
import Cell from './view/cell/datatypes/Cell'; import Cell from './view/cell/datatypes/Cell';
@ -210,7 +210,7 @@ export default {
mxDivResizer, mxDivResizer,
mxDragSource: DragSource, mxDragSource: DragSource,
mxToolbar, mxToolbar,
mxUndoableEdit, mxUndoableEdit: UndoableEdit,
mxUndoManager, mxUndoManager,
mxUrlConverter, mxUrlConverter,
mxPanningManager: PanningManager, mxPanningManager: PanningManager,
@ -225,49 +225,49 @@ export default {
mxSvgCanvas2D, mxSvgCanvas2D,
mxGuide, mxGuide,
mxShape: Shape, mxShape: Shape,
mxStencil: Stencil, mxStencil: StencilShape,
mxStencilRegistry: StencilRegistry, mxStencilRegistry: StencilShapeRegistry,
mxMarker, mxMarker: Marker,
mxActor: Actor, mxActor: Actor,
mxCloud: Cloud, mxCloud: CloudShape,
mxRectangleShape: RectangleShape, mxRectangleShape: RectangleShape,
mxEllipse: Ellipse, mxEllipse: EllipseShape,
mxDoubleEllipse: DoubleEllipse, mxDoubleEllipse: DoubleEllipseShape,
mxRhombus: Rhombus, mxRhombus: RhombusShape,
mxPolyline, mxPolyline: Polyline,
mxArrow, mxArrow: Arrow,
mxArrowConnector, mxArrowConnector: ArrowConnector,
mxText, mxText: TextShape,
mxTriangle: Triangle, mxTriangle: TriangleShape,
mxHexagon: Hexagon, mxHexagon: HexagonShape,
mxLine, mxLine: Line,
mxImageShape: ImageShape, mxImageShape: ImageShape,
mxLabel: Label, mxLabel: Label,
mxCylinder: Cylinder, mxCylinder: CylinderShape,
mxConnector, mxConnector: Connector,
mxSwimlane: Swimlane, mxSwimlane: SwimlaneShape,
mxGraphLayout, mxGraphLayout: GraphLayout,
mxStackLayout, mxStackLayout: StackLayout,
mxPartitionLayout, mxPartitionLayout: PartitionLayout,
mxCompactTreeLayout, mxCompactTreeLayout: CompactTreeLayout,
mxRadialTreeLayout, mxRadialTreeLayout: RadialTreeLayout,
mxFastOrganicLayout, mxFastOrganicLayout: MxFastOrganicLayout,
mxCircleLayout, mxCircleLayout: CircleLayout,
mxParallelEdgeLayout, mxParallelEdgeLayout: ParallelEdgeLayout,
mxCompositeLayout, mxCompositeLayout: CompositeLayout,
mxEdgeLabelLayout, mxEdgeLabelLayout: EdgeLabelLayout,
mxGraphAbstractHierarchyCell, mxGraphAbstractHierarchyCell: MxGraphAbstractHierarchyCell,
mxGraphHierarchyNode, mxGraphHierarchyNode: GraphHierarchyNode,
mxGraphHierarchyEdge, mxGraphHierarchyEdge: GraphHierarchyEdge,
mxGraphHierarchyModel, mxGraphHierarchyModel: GraphHierarchyModel,
mxSwimlaneModel, mxSwimlaneModel: SwimlaneModel,
mxHierarchicalLayoutStage, mxHierarchicalLayoutStage: MxHierarchicalLayoutStage,
mxMedianHybridCrossingReduction, mxMedianHybridCrossingReduction: MedianHybridCrossingReduction,
mxMinimumCycleRemover, mxMinimumCycleRemover: MinimumCycleRemover,
mxCoordinateAssignment, mxCoordinateAssignment: CoordinateAssignment,
mxSwimlaneOrdering, mxSwimlaneOrdering,
mxHierarchicalLayout, mxHierarchicalLayout,
mxSwimlaneLayout, mxSwimlaneLayout: SwimlaneLayout,
mxGraphModel: Model, mxGraphModel: Model,
mxCell: Cell, mxCell: Cell,
mxGeometry: Geometry, mxGeometry: Geometry,
@ -295,7 +295,7 @@ export default {
mxPanningHandler: PanningHandler, mxPanningHandler: PanningHandler,
mxPopupMenuHandler: PopupMenuHandler, mxPopupMenuHandler: PopupMenuHandler,
mxCellMarker: CellMarker, mxCellMarker: CellMarker,
mxSelectionCellsHandler, mxSelectionCellsHandler: SelectionCellsHandler,
mxConnectionHandler: ConnectionHandler, mxConnectionHandler: ConnectionHandler,
mxConstraintHandler: ConstraintHandler, mxConstraintHandler: ConstraintHandler,
mxRubberband: RubberBand, mxRubberband: RubberBand,
@ -306,8 +306,8 @@ export default {
mxEdgeSegmentHandler: EdgeSegmentHandler, mxEdgeSegmentHandler: EdgeSegmentHandler,
mxKeyHandler, mxKeyHandler,
mxTooltipHandler: TooltipHandler, mxTooltipHandler: TooltipHandler,
mxCellTracker, mxCellTracker: CellTracker,
mxCellHighlight, mxCellHighlight: CellHighlight,
mxDefaultKeyHandler, mxDefaultKeyHandler,
mxDefaultPopupMenu, mxDefaultPopupMenu,
mxDefaultToolbar, mxDefaultToolbar,

6
packages/core/src/util/Guide.ts
View File

@ -7,7 +7,7 @@
import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './Constants'; import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './Constants';
import Point from '../view/geometry/Point'; import Point from '../view/geometry/Point';
import mxPolyline from '../view/geometry/shape/edge/mxPolyline'; import Polyline from '../view/geometry/shape/edge/Polyline';
import CellState from '../view/cell/datatypes/CellState'; import CellState from '../view/cell/datatypes/CellState';
import Shape from '../view/geometry/shape/Shape'; import Shape from '../view/geometry/shape/Shape';
import Rectangle from '../view/geometry/Rectangle'; import Rectangle from '../view/geometry/Rectangle';
@ -135,9 +135,9 @@ class Guide {
* *
* horizontal - Boolean that specifies which guide should be created. * horizontal - Boolean that specifies which guide should be created.
*/ */
createGuideShape(horizontal: boolean = false): mxPolyline { createGuideShape(horizontal: boolean = false): Polyline {
// TODO: Should vertical guides be supported here?? ============================ // TODO: Should vertical guides be supported here?? ============================
const guide = new mxPolyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH); const guide = new Polyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
guide.isDashed = true; guide.isDashed = true;
return guide; return guide;
} }

8
packages/core/src/view/Graph.ts
View File

@ -12,7 +12,7 @@ import InternalEvent from './event/InternalEvent';
import Rectangle from './geometry/Rectangle'; import Rectangle from './geometry/Rectangle';
import TooltipHandler from './tooltip/TooltipHandler'; import TooltipHandler from './tooltip/TooltipHandler';
import mxClient from '../mxClient'; import mxClient from '../mxClient';
import mxSelectionCellsHandler from './selection/mxSelectionCellsHandler'; import SelectionCellsHandler from './selection/SelectionCellsHandler';
import ConnectionHandler from './connection/ConnectionHandler'; import ConnectionHandler from './connection/ConnectionHandler';
import GraphHandler from './GraphHandler'; import GraphHandler from './GraphHandler';
import PanningHandler from './panning/PanningHandler'; import PanningHandler from './panning/PanningHandler';
@ -141,7 +141,7 @@ class Graph extends EventSource {
container: HTMLElement; container: HTMLElement;
destroyed: boolean = false; destroyed: boolean = false;
tooltipHandler: TooltipHandler | null = null; tooltipHandler: TooltipHandler | null = null;
selectionCellsHandler: mxSelectionCellsHandler | null = null; selectionCellsHandler: SelectionCellsHandler | null = null;
popupMenuHandler: PopupMenuHandler | null = null; popupMenuHandler: PopupMenuHandler | null = null;
connectionHandler: ConnectionHandler | null = null; connectionHandler: ConnectionHandler | null = null;
graphHandler: GraphHandler | null = null; graphHandler: GraphHandler | null = null;
@ -514,8 +514,8 @@ class Graph extends EventSource {
/** /**
* Creates and returns a new {@link TooltipHandler} to be used in this graph. * Creates and returns a new {@link TooltipHandler} to be used in this graph.
*/ */
createSelectionCellsHandler(): mxSelectionCellsHandler { createSelectionCellsHandler(): SelectionCellsHandler {
return new mxSelectionCellsHandler(this); return new SelectionCellsHandler(this);
} }
/** /**

4
packages/core/src/view/GraphHandler.ts
View File

@ -21,7 +21,7 @@ import {
VALID_COLOR, VALID_COLOR,
} from '../util/Constants'; } from '../util/Constants';
import Dictionary from '../util/Dictionary'; import Dictionary from '../util/Dictionary';
import mxCellHighlight from './selection/mxCellHighlight'; import CellHighlight from './selection/CellHighlight';
import Rectangle from './geometry/Rectangle'; import Rectangle from './geometry/Rectangle';
import { import {
getClientX, getClientX,
@ -1067,7 +1067,7 @@ class GraphHandler {
) { ) {
// Highlight is used for highlighting drop targets // Highlight is used for highlighting drop targets
if (this.highlight == null) { if (this.highlight == null) {
this.highlight = new mxCellHighlight( this.highlight = new CellHighlight(
this.graph, this.graph,
DROP_TARGET_COLOR, DROP_TARGET_COLOR,
3 3

1
packages/core/src/view/Outline.ts
View File

@ -303,7 +303,6 @@ class Outline {
* } * }
* ``` * ```
*/ */
// suspended: boolean;
suspended: boolean = false; suspended: boolean = false;
/** /**

6
packages/core/src/view/cell/CellMarker.ts
View File

@ -12,7 +12,7 @@ import {
MAX_HOTSPOT_SIZE, MAX_HOTSPOT_SIZE,
MIN_HOTSPOT_SIZE, MIN_HOTSPOT_SIZE,
} from '../../util/Constants'; } from '../../util/Constants';
import mxCellHighlight from '../selection/mxCellHighlight'; import CellHighlight from '../selection/CellHighlight';
import EventObject from '../event/EventObject'; import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import utils, { intersectsHotspot } from '../../util/Utils'; import utils, { intersectsHotspot } from '../../util/Utils';
@ -75,7 +75,7 @@ class CellMarker extends EventSource {
this.validColor = validColor; this.validColor = validColor;
this.invalidColor = invalidColor; this.invalidColor = invalidColor;
this.hotspot = hotspot; this.hotspot = hotspot;
this.highlight = new mxCellHighlight(graph); this.highlight = new CellHighlight(graph);
} }
/** /**
@ -144,7 +144,7 @@ class CellMarker extends EventSource {
*/ */
markedState: CellState | null = null; markedState: CellState | null = null;
highlight: mxCellHighlight; highlight: CellHighlight;
/** /**
* Function: setEnabled * Function: setEnabled

128
packages/core/src/view/cell/CellRenderer.ts
View File

@ -4,22 +4,22 @@
*/ */
import RectangleShape from '../geometry/shape/node/RectangleShape'; import RectangleShape from '../geometry/shape/node/RectangleShape';
import Ellipse from '../geometry/shape/node/Ellipse'; import EllipseShape from '../geometry/shape/node/EllipseShape';
import Rhombus from '../geometry/shape/node/Rhombus'; import RhombusShape from '../geometry/shape/node/RhombusShape';
import Cylinder from '../geometry/shape/node/Cylinder'; import CylinderShape from '../geometry/shape/node/CylinderShape';
import mxConnector from '../geometry/shape/edge/mxConnector'; import Connector from '../geometry/shape/edge/Connector';
import Actor from '../geometry/shape/Actor'; import Actor from '../geometry/shape/Actor';
import Triangle from '../geometry/shape/Triangle'; import TriangleShape from '../geometry/shape/node/TriangleShape';
import Hexagon from '../geometry/shape/node/Hexagon'; import HexagonShape from '../geometry/shape/node/HexagonShape';
import Cloud from '../geometry/shape/node/Cloud'; import CloudShape from '../geometry/shape/node/CloudShape';
import mxLine from '../geometry/shape/edge/mxLine'; import Line from '../geometry/shape/edge/Line';
import mxArrow from '../geometry/shape/edge/mxArrow'; import Arrow from '../geometry/shape/edge/Arrow';
import mxArrowConnector from '../geometry/shape/edge/mxArrowConnector'; import ArrowConnector from '../geometry/shape/edge/ArrowConnector';
import DoubleEllipse from '../geometry/shape/node/DoubleEllipse'; import DoubleEllipseShape from '../geometry/shape/node/DoubleEllipseShape';
import Swimlane from '../geometry/shape/Swimlane'; import SwimlaneShape from '../geometry/shape/node/SwimlaneShape';
import ImageShape from '../geometry/shape/node/ImageShape'; import ImageShape from '../geometry/shape/node/ImageShape';
import Label from '../geometry/shape/Label'; import Label from '../geometry/shape/node/LabelShape';
import mxText from '../geometry/shape/mxText'; import TextShape from '../geometry/shape/node/TextShape';
import { import {
ALIGN_CENTER, ALIGN_CENTER,
ALIGN_MIDDLE, ALIGN_MIDDLE,
@ -47,9 +47,17 @@ import {
SHAPE_SWIMLANE, SHAPE_SWIMLANE,
SHAPE_TRIANGLE, SHAPE_TRIANGLE,
} from '../../util/Constants'; } from '../../util/Constants';
import utils, {convertPoint, equalPoints, getRotatedPoint, getValue, mod, toRadians} from '../../util/Utils'; import utils, {
convertPoint,
equalEntries,
equalPoints,
getRotatedPoint,
getValue,
mod,
toRadians,
} from '../../util/Utils';
import Rectangle from '../geometry/Rectangle'; import Rectangle from '../geometry/Rectangle';
import StencilRegistry from '../geometry/shape/node/StencilRegistry'; import StencilShapeRegistry from '../geometry/shape/node/StencilShapeRegistry';
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import InternalMouseEvent from '../event/InternalMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
@ -111,7 +119,7 @@ class CellRenderer {
* *
* Defines the default shape for edges. Default is <mxConnector>. * Defines the default shape for edges. Default is <mxConnector>.
*/ */
defaultEdgeShape: typeof Shape = mxConnector; defaultEdgeShape: typeof Shape = Connector;
/** /**
* Variable: defaultVertexShape * Variable: defaultVertexShape
@ -125,7 +133,7 @@ class CellRenderer {
* *
* Defines the default shape for labels. Default is <mxText>. * Defines the default shape for labels. Default is <mxText>.
*/ */
defaultTextShape: typeof mxText = mxText; defaultTextShape: typeof TextShape = TextShape;
/** /**
* Variable: legacyControlPosition * Variable: legacyControlPosition
@ -211,7 +219,7 @@ class CellRenderer {
// Checks if there is a stencil for the name and creates // Checks if there is a stencil for the name and creates
// a shape instance for the stencil if one exists // a shape instance for the stencil if one exists
const stencil = StencilRegistry.getStencil(state.style.shape); const stencil = StencilShapeRegistry.getStencil(state.style.shape);
if (stencil) { if (stencil) {
shape = new Shape(stencil); shape = new Shape(stencil);
@ -359,7 +367,7 @@ class CellRenderer {
} }
referenced = graph.swimlane.getSwimlane(<Cell>referenced); referenced = graph.swimlane.getSwimlane(<Cell>referenced);
key = graph.swimlaneIndicatorColorAttribute; key = graph.swimlane.swimlaneIndicatorColorAttribute;
} else if (value === 'indicated' && state.shape != null) { } else if (value === 'indicated' && state.shape != null) {
// @ts-ignore // @ts-ignore
shape[field] = state.shape.indicatorColor; shape[field] = state.shape.indicatorColor;
@ -491,7 +499,7 @@ class CellRenderer {
// TODO: Add handling for special touch device gestures // TODO: Add handling for special touch device gestures
InternalEvent.addGestureListeners( InternalEvent.addGestureListeners(
state.text.node, state.text.node,
(evt: InternalMouseEvent) => { (evt: MouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.event.fireMouseEvent( graph.event.fireMouseEvent(
InternalEvent.MOUSE_DOWN, InternalEvent.MOUSE_DOWN,
@ -502,7 +510,7 @@ class CellRenderer {
getSource(evt).nodeName === 'IMG'; getSource(evt).nodeName === 'IMG';
} }
}, },
(evt: InternalMouseEvent) => { (evt: MouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.event.fireMouseEvent( graph.event.fireMouseEvent(
InternalEvent.MOUSE_MOVE, InternalEvent.MOUSE_MOVE,
@ -510,7 +518,7 @@ class CellRenderer {
); );
} }
}, },
(evt: InternalMouseEvent) => { (evt: MouseEvent) => {
if (this.isLabelEvent(state, evt)) { if (this.isLabelEvent(state, evt)) {
graph.event.fireMouseEvent( graph.event.fireMouseEvent(
InternalEvent.MOUSE_UP, InternalEvent.MOUSE_UP,
@ -632,8 +640,8 @@ class CellRenderer {
const { graph } = state.view; const { graph } = state.view;
InternalEvent.addListener(shape.node, 'click', (evt: Event) => { InternalEvent.addListener(shape.node, 'click', (evt: Event) => {
if (graph.isEditing()) { if (graph.editing.isEditing()) {
graph.stopEditing(!graph.isInvokesStopCellEditing()); graph.editing.stopEditing(!graph.editing.isInvokesStopCellEditing());
} }
overlay.fireEvent( overlay.fireEvent(
@ -647,7 +655,7 @@ class CellRenderer {
InternalEvent.consume(evt); InternalEvent.consume(evt);
}, },
(evt: Event) => { (evt: Event) => {
graph.fireMouseEvent(InternalEvent.MOUSE_MOVE, new InternalMouseEvent(evt, state)); graph.event.fireMouseEvent(InternalEvent.MOUSE_MOVE, new InternalMouseEvent(evt, state));
} }
); );
@ -726,13 +734,12 @@ class CellRenderer {
* handleEvents - Boolean indicating if mousedown and mousemove should fire events via the graph. * handleEvents - Boolean indicating if mousedown and mousemove should fire events via the graph.
* clickHandler - Optional function to implement clicks on the control. * clickHandler - Optional function to implement clicks on the control.
*/ */
// initControl(state: mxCellState, control: mxShape, handleEvents: boolean, clickHandler?: Function): Element;
initControl( initControl(
state: CellState, state: CellState,
control: Shape, control: Shape,
handleEvents: boolean, handleEvents: boolean,
clickHandler: Function clickHandler: Function
) { ): Element {
const { graph } = state.view; const { graph } = state.view;
// In the special case where the label is in HTML and the display is SVG the image // In the special case where the label is in HTML and the display is SVG the image
@ -826,8 +833,8 @@ class CellRenderer {
* state - <mxCellState> whose shape fired the event. * state - <mxCellState> whose shape fired the event.
* evt - Mouse event which was fired. * evt - Mouse event which was fired.
*/ */
// isShapeEvent(state: mxCellState, evt: MouseEvent); isShapeEvent(state: CellState,
isShapeEvent(state: CellState, evt: InternalMouseEvent | MouseEvent): boolean { evt: InternalMouseEvent | MouseEvent): boolean {
return true; return true;
} }
@ -842,8 +849,8 @@ class CellRenderer {
* state - <mxCellState> whose label fired the event. * state - <mxCellState> whose label fired the event.
* evt - Mouse event which was fired. * evt - Mouse event which was fired.
*/ */
// isLabelEvent(state: mxCellState, evt: MouseEvent): boolean; isLabelEvent(state: CellState,
isLabelEvent(state: CellState, evt: InternalMouseEvent | MouseEvent): boolean { evt: InternalMouseEvent | MouseEvent): boolean {
return true; return true;
} }
@ -856,8 +863,7 @@ class CellRenderer {
* *
* state - <mxCellState> for which the event listeners should be isntalled. * state - <mxCellState> for which the event listeners should be isntalled.
*/ */
// installListeners(state: mxCellState): void; installListeners(state: CellState): void {
installListeners(state: CellState) {
const { graph } = state.view; const { graph } = state.view;
// Workaround for touch devices routing all events for a mouse // Workaround for touch devices routing all events for a mouse
@ -932,8 +938,8 @@ class CellRenderer {
* *
* state - <mxCellState> whose label should be redrawn. * state - <mxCellState> whose label should be redrawn.
*/ */
// redrawLabel(state: mxCellState, forced?: boolean): void; redrawLabel(state: CellState,
redrawLabel(state: CellState, forced: boolean) { forced: boolean): void {
const { graph } = state.view; const { graph } = state.view;
const value = this.getLabelValue(state); const value = this.getLabelValue(state);
const wrapping = graph.isWrapping(state.cell); const wrapping = graph.isWrapping(state.cell);
@ -1029,8 +1035,8 @@ class CellRenderer {
* state - <mxCellState> whose label should be checked. * state - <mxCellState> whose label should be checked.
* shape - <mxText> shape to be checked. * shape - <mxText> shape to be checked.
*/ */
// isTextShapeInvalid(state: mxCellState, shape: mxText): boolean; isTextShapeInvalid(state: CellState,
isTextShapeInvalid(state: CellState, shape: mxText): boolean { shape: TextShape): boolean {
function check(property: string, stylename: string, defaultValue: any) { function check(property: string, stylename: string, defaultValue: any) {
let result = false; let result = false;
@ -1083,8 +1089,7 @@ class CellRenderer {
* *
* shape - <mxText> shape to be redrawn. * shape - <mxText> shape to be redrawn.
*/ */
// redrawLabelShape(shape: mxText): void; redrawLabelShape(shape: TextShape): void {
redrawLabelShape(shape: Shape): void {
shape.redraw(); shape.redraw();
} }
@ -1097,7 +1102,6 @@ class CellRenderer {
* *
* state - <mxCellState> whose label scale should be returned. * state - <mxCellState> whose label scale should be returned.
*/ */
// getTextScale(state: mxCellState): number;
getTextScale(state: CellState): number { getTextScale(state: CellState): number {
return state.view.scale; return state.view.scale;
} }
@ -1111,7 +1115,6 @@ class CellRenderer {
* *
* state - <mxCellState> whose label bounds should be returned. * state - <mxCellState> whose label bounds should be returned.
*/ */
// getLabelBounds(state: mxCellState): mxRectangle;
getLabelBounds(state: CellState): Rectangle { getLabelBounds(state: CellState): Rectangle {
const { graph } = state.view; const { graph } = state.view;
const { scale } = state.view; const { scale } = state.view;
@ -1195,8 +1198,7 @@ class CellRenderer {
* state - <mxCellState> whose label bounds should be rotated. * state - <mxCellState> whose label bounds should be rotated.
* bounds - <mxRectangle> the rectangle to be rotated. * bounds - <mxRectangle> the rectangle to be rotated.
*/ */
// rotateLabelBounds(state: mxCellState, bounds: mxRectangle): void; rotateLabelBounds(state: CellState, bounds: Rectangle): void {
rotateLabelBounds(state: CellState, bounds: Rectangle) {
// @ts-ignore // @ts-ignore
bounds.y -= state.text.margin.y * bounds.height; bounds.y -= state.text.margin.y * bounds.height;
// @ts-ignore // @ts-ignore
@ -1271,7 +1273,8 @@ class CellRenderer {
* *
* state - <mxCellState> whose overlays should be redrawn. * state - <mxCellState> whose overlays should be redrawn.
*/ */
redrawCellOverlays(state: CellState, forced: boolean = false): void { redrawCellOverlays(state: CellState,
forced: boolean = false): void {
this.createCellOverlays(state); this.createCellOverlays(state);
if (state.overlays != null) { if (state.overlays != null) {
@ -1326,8 +1329,8 @@ class CellRenderer {
* *
* state - <mxCellState> whose control should be redrawn. * state - <mxCellState> whose control should be redrawn.
*/ */
// redrawControl(state: mxCellState, forced?: boolean): void; redrawControl(state: CellState,
redrawControl(state: CellState, forced: boolean = false) { forced: boolean = false): void {
const image = state.view.graph.getFoldingImage(state); const image = state.view.graph.getFoldingImage(state);
if (state.control != null && image != null) { if (state.control != null && image != null) {
@ -1361,7 +1364,6 @@ class CellRenderer {
* Returns the bounds to be used to draw the control (folding icon) of the * Returns the bounds to be used to draw the control (folding icon) of the
* given state. * given state.
*/ */
// getControlBounds(state: mxCellState, w: number, h: number): mxRectangle;
getControlBounds( getControlBounds(
state: CellState, state: CellState,
w: number, w: number,
@ -1435,12 +1437,11 @@ class CellRenderer {
* htmlNode - Node in the graph container after which the shapes should be inserted that * htmlNode - Node in the graph container after which the shapes should be inserted that
* will not go into the <drawPane> (eg. HTML labels without foreignObjects). * will not go into the <drawPane> (eg. HTML labels without foreignObjects).
*/ */
// insertStateAfter(state: mxCellState, node: Element, htmlNode: HTMLElement): void;
insertStateAfter( insertStateAfter(
state: CellState, state: CellState,
node: HTMLElement | SVGElement | null, node: HTMLElement | SVGElement | null,
htmlNode: HTMLElement | SVGElement | null htmlNode: HTMLElement | SVGElement | null
) { ): void {
const shapes = this.getShapesForState(state); const shapes = this.getShapesForState(state);
for (let i = 0; i < shapes.length; i += 1) { for (let i = 0; i < shapes.length; i += 1) {
@ -1528,7 +1529,7 @@ class CellRenderer {
*/ */
getShapesForState( getShapesForState(
state: CellState state: CellState
): [Shape | null, mxText | null, Shape | null] { ): [Shape | null, TextShape | null, Shape | null] {
return [state.shape, state.text, state.control]; return [state.shape, state.text, state.control];
} }
@ -1694,7 +1695,6 @@ class CellRenderer {
* *
* Returns true if the given shape must be repainted. * Returns true if the given shape must be repainted.
*/ */
// isShapeInvalid(state: mxCellState, shape: mxShape): boolean;
isShapeInvalid(state: CellState, shape: Shape): boolean { isShapeInvalid(state: CellState, shape: Shape): boolean {
return ( return (
shape.bounds == null || shape.bounds == null ||
@ -1744,24 +1744,24 @@ class CellRenderer {
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_RECTANGLE, RectangleShape); CellRenderer.registerShape(SHAPE_RECTANGLE, RectangleShape);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_ELLIPSE, Ellipse); CellRenderer.registerShape(SHAPE_ELLIPSE, EllipseShape);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_RHOMBUS, Rhombus); CellRenderer.registerShape(SHAPE_RHOMBUS, RhombusShape);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_CYLINDER, mxCylinder); CellRenderer.registerShape(SHAPE_CYLINDER, CylinderShape);
CellRenderer.registerShape(SHAPE_CONNECTOR, mxConnector); CellRenderer.registerShape(SHAPE_CONNECTOR, Connector);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_ACTOR, Actor); CellRenderer.registerShape(SHAPE_ACTOR, Actor);
CellRenderer.registerShape(SHAPE_TRIANGLE, Triangle); CellRenderer.registerShape(SHAPE_TRIANGLE, TriangleShape);
CellRenderer.registerShape(SHAPE_HEXAGON, Hexagon); CellRenderer.registerShape(SHAPE_HEXAGON, HexagonShape);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_CLOUD, Cloud); CellRenderer.registerShape(SHAPE_CLOUD, CloudShape);
CellRenderer.registerShape(SHAPE_LINE, mxLine); CellRenderer.registerShape(SHAPE_LINE, Line);
CellRenderer.registerShape(SHAPE_ARROW, mxArrow); CellRenderer.registerShape(SHAPE_ARROW, Arrow);
CellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, mxArrowConnector); CellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, ArrowConnector);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, DoubleEllipse); CellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, DoubleEllipseShape);
CellRenderer.registerShape(SHAPE_SWIMLANE, Swimlane); CellRenderer.registerShape(SHAPE_SWIMLANE, SwimlaneShape);
// @ts-ignore // @ts-ignore
CellRenderer.registerShape(SHAPE_IMAGE, ImageShape); CellRenderer.registerShape(SHAPE_IMAGE, ImageShape);
CellRenderer.registerShape(SHAPE_LABEL, Label); CellRenderer.registerShape(SHAPE_LABEL, Label);

2
packages/core/src/view/cell/GraphCells.ts
View File

@ -37,7 +37,7 @@ import ImageBundle from '../image/ImageBundle';
import Rectangle from '../geometry/Rectangle'; import Rectangle from '../geometry/Rectangle';
import Dictionary from '../../util/Dictionary'; import Dictionary from '../../util/Dictionary';
import Point from '../geometry/Point'; import Point from '../geometry/Point';
import Label from '../geometry/shape/Label'; import Label from '../geometry/shape/node/LabelShape';
import { htmlEntities } from '../../util/StringUtils'; import { htmlEntities } from '../../util/StringUtils';
import InternalMouseEvent from '../event/InternalMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
import Graph from '../Graph'; import Graph from '../Graph';

4
packages/core/src/view/cell/datatypes/CellState.ts
View File

@ -10,7 +10,7 @@ import Rectangle from '../../geometry/Rectangle';
import Cell from './Cell'; import Cell from './Cell';
import GraphView from '../../view/GraphView'; import GraphView from '../../view/GraphView';
import Shape from '../../geometry/shape/Shape'; import Shape from '../../geometry/shape/Shape';
import mxText from '../../geometry/shape/mxText'; import TextShape from '../../geometry/shape/node/TextShape';
import Dictionary from '../../../util/Dictionary'; import Dictionary from '../../../util/Dictionary';
import type { CellStateStyles } from '../../../types'; import type { CellStateStyles } from '../../../types';
@ -181,7 +181,7 @@ class CellState extends Rectangle {
* Holds the <mxText> that represents the label of the cell. Thi smay be * Holds the <mxText> that represents the label of the cell. Thi smay be
* null if the cell has no label. * null if the cell has no label.
*/ */
text: mxText | null = null; text: TextShape | null = null;
/** /**
* Variable: unscaledWidth * Variable: unscaledWidth

10
packages/core/src/view/cell/vertex/GraphVertex.ts
View File

@ -1,8 +1,14 @@
import Cell from "../datatypes/Cell"; import Cell from "../datatypes/Cell";
import Geometry from "../../geometry/Geometry"; import Geometry from "../../geometry/Geometry";
import CellArray from "../datatypes/CellArray"; import CellArray from "../datatypes/CellArray";
import Graph from '../../Graph';
class GraphVertex { class GraphVertex {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/** /**
* Specifies the return value for vertices in {@link isLabelMovable}. * Specifies the return value for vertices in {@link isLabelMovable}.
@ -115,7 +121,7 @@ class GraphVertex {
relative, relative,
geometryClass geometryClass
); );
return this.addCell(vertex, parent); return this.graph.cell.addCell(vertex, parent);
}; };
/** /**
@ -154,7 +160,7 @@ class GraphVertex {
* @param parent {@link mxCell} whose children should be returned. * @param parent {@link mxCell} whose children should be returned.
*/ */
getChildVertices(parent: Cell): CellArray { getChildVertices(parent: Cell): CellArray {
return this.getChildCells(parent, true, false); return this.graph.cell.getChildCells(parent, true, false);
} }
/***************************************************************************** /*****************************************************************************

6
packages/core/src/view/cell/vertex/VertexHandle.ts
View File

@ -94,8 +94,8 @@ class VertexHandle {
const { scale } = this.graph.view; const { scale } = this.graph.view;
const tr = this.graph.view.translate; const tr = this.graph.view.translate;
let pt = new Point( let pt = new Point(
me.getGraphX() / scale - tr.x, <number>me.getGraphX() / scale - tr.x,
me.getGraphY() / scale - tr.y <number>me.getGraphY() / scale - tr.y
); );
// Center shape on mouse cursor // Center shape on mouse cursor
@ -301,7 +301,7 @@ class VertexHandle {
*/ */
reset(): void { reset(): void {
this.setVisible(true); this.setVisible(true);
this.state.style = this.graph.cells.getCellStyle(this.state.cell); this.state.style = this.graph.cell.getCellStyle(this.state.cell);
this.positionChanged(); this.positionChanged();
} }

6
packages/core/src/view/cell/vertex/VertexHandler.ts
View File

@ -23,7 +23,7 @@ import {
import InternalEvent from '../../event/InternalEvent'; import InternalEvent from '../../event/InternalEvent';
import RectangleShape from '../../geometry/shape/node/RectangleShape'; import RectangleShape from '../../geometry/shape/node/RectangleShape';
import ImageShape from '../../geometry/shape/node/ImageShape'; import ImageShape from '../../geometry/shape/node/ImageShape';
import Ellipse from '../../geometry/shape/node/Ellipse'; import EllipseShape from '../../geometry/shape/node/EllipseShape';
import Point from '../../geometry/Point'; import Point from '../../geometry/Point';
import utils from '../../../util/Utils'; import utils from '../../../util/Utils';
import mxClient from '../../../mxClient'; import mxClient from '../../../mxClient';
@ -262,7 +262,7 @@ class VertexHandler {
if ( if (
resizable || resizable ||
(this.graph.isLabelMovable(this.state.cell) && (this.graph.label.isLabelMovable(this.state.cell) &&
this.state.width >= 2 && this.state.width >= 2 &&
this.state.height >= 2) this.state.height >= 2)
) { ) {
@ -560,7 +560,7 @@ class VertexHandler {
return shape; return shape;
} }
if (index === InternalEvent.ROTATION_HANDLE) { if (index === InternalEvent.ROTATION_HANDLE) {
return new Ellipse( return new EllipseShape(
bounds, bounds,
fillColor || HANDLE_FILLCOLOR, fillColor || HANDLE_FILLCOLOR,
HANDLE_STROKECOLOR HANDLE_STROKECOLOR

4
packages/core/src/view/connection/ConnectionHandler.ts
View File

@ -24,7 +24,7 @@ import InternalMouseEvent from '../event/InternalMouseEvent';
import ImageShape from '../geometry/shape/node/ImageShape'; import ImageShape from '../geometry/shape/node/ImageShape';
import CellMarker from '../cell/CellMarker'; import CellMarker from '../cell/CellMarker';
import ConstraintHandler from './ConstraintHandler'; import ConstraintHandler from './ConstraintHandler';
import mxPolyline from '../geometry/shape/edge/mxPolyline'; import Polyline from '../geometry/shape/edge/Polyline';
import EventSource from '../event/EventSource'; import EventSource from '../event/EventSource';
import Rectangle from '../geometry/Rectangle'; import Rectangle from '../geometry/Rectangle';
import mxLog from '../../util/gui/mxLog'; import mxLog from '../../util/gui/mxLog';
@ -520,7 +520,7 @@ class ConnectionHandler extends EventSource {
const shape = const shape =
this.livePreview && this.edgeState this.livePreview && this.edgeState
? this.graph.cellRenderer.createShape(this.edgeState) ? this.graph.cellRenderer.createShape(this.edgeState)
: new mxPolyline([], INVALID_COLOR); : new Polyline([], INVALID_COLOR);
if (shape && shape.node) { if (shape && shape.node) {
shape.dialect = DIALECT_SVG; shape.dialect = DIALECT_SVG;

4
packages/core/src/view/drag_drop/DragSource.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Rectangle from '../geometry/Rectangle'; import Rectangle from '../geometry/Rectangle';
import mxCellHighlight from '../selection/mxCellHighlight'; import CellHighlight from '../selection/CellHighlight';
import utils from '../../util/Utils'; import utils from '../../util/Utils';
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
@ -546,7 +546,7 @@ class DragSource {
} }
if (this.highlightDropTargets) { if (this.highlightDropTargets) {
this.currentHighlight = new mxCellHighlight(graph, DROP_TARGET_COLOR); this.currentHighlight = new CellHighlight(graph, DROP_TARGET_COLOR);
} }
// Consumes all events in the current graph before they are fired // Consumes all events in the current graph before they are fired

6
packages/core/src/view/editing/CellEditor.ts
View File

@ -25,7 +25,7 @@ import {
LINE_HEIGHT, LINE_HEIGHT,
WORD_WRAP, WORD_WRAP,
} from '../../util/Constants'; } from '../../util/Constants';
import mxText from '../geometry/shape/mxText'; import TextShape from '../geometry/shape/node/TextShape';
import graph from '../Graph'; import graph from '../Graph';
import Cell from '../cell/datatypes/Cell'; import Cell from '../cell/datatypes/Cell';
import InternalMouseEvent from '../event/InternalMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
@ -652,7 +652,7 @@ class CellEditor {
state.style.overflow !== 'width' state.style.overflow !== 'width'
) { ) {
// @ts-ignore // @ts-ignore
const dummy = new mxText(); // FIXME!!!! =================================================================================================== const dummy = new TextShape(); // FIXME!!!! ===================================================================================================
const spacing = parseInt(state.style.spacing || 2) * scale; const spacing = parseInt(state.style.spacing || 2) * scale;
const spacingTop = const spacingTop =
(parseInt(state.style.spacingTop || 0) + dummy.baseSpacingTop) * (parseInt(state.style.spacingTop || 0) + dummy.baseSpacingTop) *
@ -1099,7 +1099,7 @@ class CellEditor {
); );
} else { } else {
// @ts-ignore // @ts-ignore
const dummy = new mxText(); // FIXME!!!! =================================================================================================== const dummy = new TextShape(); // FIXME!!!! ===================================================================================================
const spacing: number = parseInt(state.style.spacing || 0) * scale; const spacing: number = parseInt(state.style.spacing || 0) * scale;
const spacingTop: number = const spacingTop: number =
(parseInt(state.style.spacingTop || 0) + dummy.baseSpacingTop) * scale + (parseInt(state.style.spacingTop || 0) + dummy.baseSpacingTop) * scale +

31
packages/core/src/view/event/mxCellTracker.ts → packages/core/src/view/event/CellTracker.ts
View File

@ -5,6 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import CellMarker from '../cell/CellMarker'; import CellMarker from '../cell/CellMarker';
import InternalMouseEvent from './InternalMouseEvent';
import Graph from '../Graph';
import Cell from '../cell/datatypes/Cell';
/** /**
* Event handler that highlights cells * Event handler that highlights cells
@ -61,29 +64,33 @@ import CellMarker from '../cell/CellMarker';
* }); * });
* ``` * ```
*/ */
class mxCellTracker extends CellMarker { class CellTracker extends CellMarker {
constructor(graph, color, funct) { constructor(
graph: Graph,
color: string,
funct: null | ((me: InternalMouseEvent) => Cell)=null
) {
super(graph, color); super(graph, color);
this.graph.addMouseListener(this); this.graph.event.addMouseListener(this);
if (funct != null) { if (funct != null) {
this.getCell = funct; this.getCell = funct;
} }
} }
destroyed: boolean = false;
/** /**
* Ignores the event. The event is not consumed. * Ignores the event. The event is not consumed.
*/ */
// mouseDown(sender: any, me: mxMouseEvent): void; mouseDown(sender: any, me: InternalMouseEvent): void {}
mouseDown(sender, me) {}
/** /**
* Handles the event by highlighting the cell under the mousepointer if it * Handles the event by highlighting the cell under the mousepointer if it
* is over the hotspot region of the cell. * is over the hotspot region of the cell.
*/ */
// mouseMove(sender: any, me: mxMouseEvent): void; mouseMove(sender: any, me: InternalMouseEvent): void {
mouseMove(sender, me) {
if (this.isEnabled()) { if (this.isEnabled()) {
this.process(me); this.process(me);
} }
@ -92,8 +99,7 @@ class mxCellTracker extends CellMarker {
/** /**
* Handles the event by resetting the highlight. * Handles the event by resetting the highlight.
*/ */
// mouseUp(sender: any, me: mxMouseEvent): void; mouseUp(sender: any, me: InternalMouseEvent): void {}
mouseUp(sender, me) {}
/** /**
* Function: destroy * Function: destroy
@ -102,15 +108,14 @@ class mxCellTracker extends CellMarker {
* normally need to be called. It is called automatically when the window * normally need to be called. It is called automatically when the window
* unloads. * unloads.
*/ */
// destroy(): void; destroy(): void {
destroy() {
if (!this.destroyed) { if (!this.destroyed) {
this.destroyed = true; this.destroyed = true;
this.graph.removeMouseListener(this); this.graph.event.removeMouseListener(this);
super.destroy(); super.destroy();
} }
} }
} }
export default mxCellTracker; export default CellTracker;

6
packages/core/src/view/event/GraphEvents.ts
View File

@ -276,7 +276,7 @@ class GraphEvents {
} }
if (cell != null) { if (cell != null) {
this.selectCellForEvent(cell, evt); this.graph.selection.selectCellForEvent(cell, evt);
} else if (!this.isToggleEvent(evt)) { } else if (!this.isToggleEvent(evt)) {
this.graph.selection.clearSelection(); this.graph.selection.clearSelection();
} }
@ -961,8 +961,8 @@ class GraphEvents {
height = Math.max(height, this.graph.minimumContainerSize.height); height = Math.max(height, this.graph.minimumContainerSize.height);
} }
if (this.resizeContainer) { if (this.graph.resizeContainer) {
this.doResizeContainer(width, height); this.graph.doResizeContainer(width, height);
} }
if (this.preferPageSize || this.pageVisible) { if (this.preferPageSize || this.pageVisible) {

2
packages/core/src/view/geometry/shape/Actor.ts
View File

@ -48,7 +48,6 @@ class Actor extends Shape {
/** /**
* Redirects to redrawPath for subclasses to work. * Redirects to redrawPath for subclasses to work.
*/ */
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape( paintVertexShape(
c: mxSvgCanvas2D, c: mxSvgCanvas2D,
x: number, x: number,
@ -65,7 +64,6 @@ class Actor extends Shape {
/** /**
* Draws the path for this shape. * Draws the path for this shape.
*/ */
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath( redrawPath(
c: mxSvgCanvas2D, c: mxSvgCanvas2D,
x: number, x: number,

6
packages/core/src/view/geometry/shape/Shape.ts
View File

@ -28,7 +28,7 @@ import mxSvgCanvas2D from '../../../util/canvas/mxSvgCanvas2D';
import InternalEvent from '../../event/InternalEvent'; import InternalEvent from '../../event/InternalEvent';
import mxClient from '../../../mxClient'; import mxClient from '../../../mxClient';
import CellState from '../../cell/datatypes/CellState'; import CellState from '../../cell/datatypes/CellState';
import Stencil from './node/Stencil'; import StencilShape from './node/StencilShape';
import CellOverlay from '../../cell/CellOverlay'; import CellOverlay from '../../cell/CellOverlay';
import type { import type {
@ -93,7 +93,7 @@ const toBool = (i: any) => {
* ``` * ```
*/ */
class Shape { class Shape {
constructor(stencil: Stencil | null = null) { constructor(stencil: StencilShape | null = null) {
if (stencil) { if (stencil) {
this.stencil = stencil; this.stencil = stencil;
} }
@ -267,7 +267,7 @@ class Shape {
* *
* Holds the <mxStencil> that defines the shape. * Holds the <mxStencil> that defines the shape.
*/ */
stencil: Stencil | null = null; stencil: StencilShape | null = null;
/** /**
* Variable: svgStrokeTolerance * Variable: svgStrokeTolerance

13
packages/core/src/view/geometry/shape/edge/mxArrow.js → packages/core/src/view/geometry/shape/edge/Arrow.ts
View File

@ -6,13 +6,16 @@
*/ */
import Shape from '../Shape'; import Shape from '../Shape';
import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH } from '../../../../util/Constants'; import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH } from '../../../../util/Constants';
import Rectangle from '../../Rectangle';
import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
import Point from '../../Point';
/** /**
* Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices. * Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices.
* *
* This shape is registered under {@link mxConstants.SHAPE_ARROW} in {@link mxCellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_ARROW} in {@link mxCellRenderer}.
*/ */
class mxArrow extends Shape { class Arrow extends Shape {
constructor(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize) { constructor(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize) {
super(); super();
this.points = points; this.points = points;
@ -27,8 +30,7 @@ class mxArrow extends Shape {
/** /**
* Augments the bounding box with the edge width and markers. * Augments the bounding box with the edge width and markers.
*/ */
// augmentBoundingBox(bbox: mxRectangle): void; augmentBoundingBox(bbox: Rectangle): void {
augmentBoundingBox(bbox) {
super.augmentBoundingBox(bbox); super.augmentBoundingBox(bbox);
const w = Math.max(this.arrowWidth, this.endSize); const w = Math.max(this.arrowWidth, this.endSize);
@ -38,8 +40,7 @@ class mxArrow extends Shape {
/** /**
* Paints the line shape. * Paints the line shape.
*/ */
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void; paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
paintEdgeShape(c, pts) {
// Geometry of arrow // Geometry of arrow
const spacing = ARROW_SPACING; const spacing = ARROW_SPACING;
const width = ARROW_WIDTH; const width = ARROW_WIDTH;
@ -88,4 +89,4 @@ class mxArrow extends Shape {
} }
} }
export default mxArrow; export default Arrow;

91
packages/core/src/view/geometry/shape/edge/mxArrowConnector.js → packages/core/src/view/geometry/shape/edge/ArrowConnector.ts
View File

@ -5,13 +5,12 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Shape from '../Shape'; import Shape from '../Shape';
import { import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH, NONE } from '../../../../util/Constants';
ARROW_SIZE, import utils, { getNumber, getValue, relativeCcw } from '../../../../util/Utils';
ARROW_SPACING, import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
ARROW_WIDTH, import Point from '../../Point';
NONE, import Rectangle from '../../Rectangle';
} from '../../../../util/Constants'; import CellState from '../../../cell/datatypes/CellState';
import utils from '../../../../util/Utils';
/** /**
* Extends {@link Shape} to implement an new rounded arrow shape with support for waypoints and double arrows. The * Extends {@link Shape} to implement an new rounded arrow shape with support for waypoints and double arrows. The
@ -19,7 +18,7 @@ import utils from '../../../../util/Utils';
* *
* This shape is registered under {@link mxConstants.SHAPE_ARROW_CONNECTOR} in {@link mxCellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_ARROW_CONNECTOR} in {@link mxCellRenderer}.
*/ */
class mxArrowConnector extends Shape { class ArrowConnector extends Shape {
constructor(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize) { constructor(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize) {
super(); super();
this.points = points; this.points = points;
@ -36,23 +35,21 @@ class mxArrowConnector extends Shape {
* Allows to use the SVG bounding box in SVG. * Allows to use the SVG bounding box in SVG.
* @defaultValue `false` for performance reasons. * @defaultValue `false` for performance reasons.
*/ */
// useSvgBoundingBox: boolean; useSvgBoundingBox: boolean = true;
useSvgBoundingBox = true;
/** /**
* Function: isRoundable * Function: isRoundable
* *
* Hook for subclassers. * Hook for subclassers.
*/ */
isRoundable() { isRoundable(): boolean {
return true; return true;
} }
/** /**
* Overrides mxShape to reset spacing. * Overrides mxShape to reset spacing.
*/ */
// resetStyles(): void; resetStyles(): void {
resetStyles() {
super.resetStyles(); super.resetStyles();
this.arrowSpacing = ARROW_SPACING; this.arrowSpacing = ARROW_SPACING;
} }
@ -60,23 +57,19 @@ class mxArrowConnector extends Shape {
/** /**
* Overrides apply to get smooth transition from default start- and endsize. * Overrides apply to get smooth transition from default start- and endsize.
*/ */
// apply(state: mxCellState): void; apply(state: CellState): void {
apply(state) {
super.apply(state); super.apply(state);
if (this.style != null) { if (this.style != null) {
this.startSize = this.startSize = getNumber(this.style, 'startSize', ARROW_SIZE / 5) * 3;
utils.getNumber(this.style, 'startSize', ARROW_SIZE / 5) * 3; this.endSize = getNumber(this.style, 'endSize', ARROW_SIZE / 5) * 3;
this.endSize =
utils.getNumber(this.style, 'endSize', ARROW_SIZE / 5) * 3;
} }
} }
/** /**
* Augments the bounding box with the edge width and markers. * Augments the bounding box with the edge width and markers.
*/ */
// augmentBoundingBox(bbox: mxRectangle): void; augmentBoundingBox(bbox: Rectangle): void {
augmentBoundingBox(bbox) {
super.augmentBoundingBox(bbox); super.augmentBoundingBox(bbox);
let w = this.getEdgeWidth(); let w = this.getEdgeWidth();
@ -95,8 +88,7 @@ class mxArrowConnector extends Shape {
/** /**
* Paints the line shape. * Paints the line shape.
*/ */
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void; paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
paintEdgeShape(c, pts) {
// Geometry of arrow // Geometry of arrow
let strokeWidth = this.strokewidth; let strokeWidth = this.strokewidth;
@ -126,11 +118,7 @@ class mxArrowConnector extends Shape {
// Finds first non-overlapping point // Finds first non-overlapping point
let i0 = 1; let i0 = 1;
while ( while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
i0 < pts.length - 1 &&
pts[i0].x === pts[0].x &&
pts[i0].y === pts[0].y
) {
i0++; i0++;
} }
@ -204,7 +192,7 @@ class mxArrowConnector extends Shape {
for (let i = 0; i < pts.length - 2; i += 1) { for (let i = 0; i < pts.length - 2; i += 1) {
// Work out in which direction the line is bending // Work out in which direction the line is bending
const pos = utils.relativeCcw( const pos = relativeCcw(
pts[i].x, pts[i].x,
pts[i].y, pts[i].y,
pts[i + 1].x, pts[i + 1].x,
@ -314,10 +302,7 @@ class mxArrowConnector extends Shape {
false false
); );
} else { } else {
c.lineTo( c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2);
pe.x - spacing * nx1 + orthx / 2,
pe.y - spacing * ny1 + orthy / 2
);
const inStartX = pe.x - spacing * nx1 - orthx / 2; const inStartX = pe.x - spacing * nx1 - orthx / 2;
const inStartY = pe.y - spacing * ny1 - orthy / 2; const inStartY = pe.y - spacing * ny1 - orthy / 2;
@ -402,18 +387,7 @@ class mxArrowConnector extends Shape {
* *
* Paints the marker. * Paints the marker.
*/ */
paintMarker( paintMarker(c, ptX, ptY, nx, ny, size, arrowWidth, edgeWidth, spacing, initialMove) {
c,
ptX,
ptY,
nx,
ny,
size,
arrowWidth,
edgeWidth,
spacing,
initialMove
) {
const widthArrowRatio = edgeWidth / arrowWidth; const widthArrowRatio = edgeWidth / arrowWidth;
const orthx = (edgeWidth * ny) / 2; const orthx = (edgeWidth * ny) / 2;
const orthy = (-edgeWidth * nx) / 2; const orthy = (-edgeWidth * nx) / 2;
@ -442,58 +416,51 @@ class mxArrowConnector extends Shape {
/** /**
* @returns whether the arrow is rounded * @returns whether the arrow is rounded
*/ */
// isArrowRounded(): boolean; isArrowRounded(): boolean {
isArrowRounded() {
return this.isRounded; return this.isRounded;
} }
/** /**
* @returns the width of the start arrow * @returns the width of the start arrow
*/ */
// getStartArrowWidth(): number; getStartArrowWidth(): number {
getStartArrowWidth() {
return ARROW_WIDTH; return ARROW_WIDTH;
} }
/** /**
* @returns the width of the end arrow * @returns the width of the end arrow
*/ */
// getEndArrowWidth(): number; getEndArrowWidth(): number {
getEndArrowWidth() {
return ARROW_WIDTH; return ARROW_WIDTH;
} }
/** /**
* @returns the width of the body of the edge * @returns the width of the body of the edge
*/ */
// getEdgeWidth(): number; getEdgeWidth(): number {
getEdgeWidth() {
return ARROW_WIDTH / 3; return ARROW_WIDTH / 3;
} }
/** /**
* @returns whether the ends of the shape are drawn * @returns whether the ends of the shape are drawn
*/ */
// isOpenEnded(): boolean; isOpenEnded(): boolean {
isOpenEnded() {
return false; return false;
} }
/** /**
* @returns whether the start marker is drawn * @returns whether the start marker is drawn
*/ */
// isMarkerStart(): boolean; isMarkerStart(): boolean {
isMarkerStart() { return getValue(this.style, 'startArrow', NONE) !== NONE;
return utils.getValue(this.style, 'startArrow', NONE) !== NONE;
} }
/** /**
* @returns whether the end marker is drawn * @returns whether the end marker is drawn
*/ */
// isMarkerEnd(): boolean; isMarkerEnd(): boolean {
isMarkerEnd() { return getValue(this.style, 'endArrow', NONE) !== NONE;
return utils.getValue(this.style, 'endArrow', NONE) !== NONE;
} }
} }
export default mxArrowConnector; export default ArrowConnector;

61
packages/core/src/view/geometry/shape/edge/mxConnector.js → packages/core/src/view/geometry/shape/edge/Connector.ts
View File

@ -4,24 +4,24 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import { import { DEFAULT_MARKERSIZE, NONE } from '../../../../util/Constants';
DEFAULT_MARKERSIZE, import Polyline from './Polyline';
NONE, import utils, { getNumber, getValue } from '../../../../util/Utils';
} from '../../../../util/Constants'; import Marker from './Marker';
import mxPolyline from './mxPolyline'; import Point from '../../Point';
import utils from '../../../../util/Utils'; import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
import mxMarker from './mxMarker'; import Rectangle from '../../Rectangle';
/** /**
* Extends {@link mxShape} to implement a connector shape. * Extends {@link mxShape} to implement a connector shape.
* The connector shape allows for arrow heads on either side. * The connector shape allows for arrow heads on either side.
* This shape is registered under {@link mxConstants.SHAPE_CONNECTOR} in {@link mxCellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_CONNECTOR} in {@link mxCellRenderer}.
* *
* @class mxConnector * @class Connector
* @extends {mxPolyline} * @extends {Polyline}
*/ */
class mxConnector extends mxPolyline { class Connector extends Polyline {
constructor(points, stroke, strokewidth) { constructor(points: Point[], stroke: string, strokewidth: number) {
super(points, stroke, strokewidth); super(points, stroke, strokewidth);
} }
@ -29,18 +29,15 @@ class mxConnector extends mxPolyline {
* Updates the <boundingBox> for this shape using <createBoundingBox> * Updates the <boundingBox> for this shape using <createBoundingBox>
* and augmentBoundingBox and stores the result in <boundingBox>. * and augmentBoundingBox and stores the result in <boundingBox>.
*/ */
// updateBoundingBox(): void; updateBoundingBox(): void {
updateBoundingBox() { this.useSvgBoundingBox = this.style != null && this.style.curved === 1;
this.useSvgBoundingBox =
this.style != null && this.style.curved === 1;
super.updateBoundingBox(); super.updateBoundingBox();
} }
/** /**
* Paints the line shape. * Paints the line shape.
*/ */
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void; paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
paintEdgeShape(c, pts) {
// The indirection via functions for markers is needed in // The indirection via functions for markers is needed in
// order to apply the offsets before painting the line and // order to apply the offsets before painting the line and
// paint the markers after painting the line. // paint the markers after painting the line.
@ -66,14 +63,10 @@ class mxConnector extends mxPolyline {
/** /**
* Prepares the marker by adding offsets in pts and returning a function to paint the marker. * Prepares the marker by adding offsets in pts and returning a function to paint the marker.
*/ */
// createMarker(c: mxAbstractCanvas2D, pts: mxPoint[], source: boolean): mxMarker; createMarker(c: mxAbstractCanvas2D, pts: Point[], source: boolean): Marker {
createMarker(c, pts, source) {
let result = null; let result = null;
const n = pts.length; const n = pts.length;
const type = utils.getValue( const type = getValue(this.style, source ? 'startArrow' : 'endArrow');
this.style,
source ? 'startArrow' : 'endArrow'
);
let p0 = source ? pts[1] : pts[n - 2]; let p0 = source ? pts[1] : pts[n - 2];
const pe = source ? pts[0] : pts[n - 1]; const pe = source ? pts[0] : pts[n - 1];
@ -99,7 +92,7 @@ class mxConnector extends mxPolyline {
const unitX = dx / dist; const unitX = dx / dist;
const unitY = dy / dist; const unitY = dy / dist;
const size = utils.getNumber( const size = getNumber(
this.style, this.style,
source ? 'startSize' : 'endSize', source ? 'startSize' : 'endSize',
DEFAULT_MARKERSIZE DEFAULT_MARKERSIZE
@ -109,7 +102,7 @@ class mxConnector extends mxPolyline {
// orthogonal vectors describing the direction of the marker // orthogonal vectors describing the direction of the marker
const filled = this.style[source ? 'startFill' : 'endFill'] !== 0; const filled = this.style[source ? 'startFill' : 'endFill'] !== 0;
result = mxMarker.createMarker( result = Marker.createMarker(
c, c,
this, this,
type, type,
@ -129,28 +122,22 @@ class mxConnector extends mxPolyline {
/** /**
* Augments the bounding box with the strokewidth and shadow offsets. * Augments the bounding box with the strokewidth and shadow offsets.
*/ */
// augmentBoundingBox(bbox: mxRectangle): void; augmentBoundingBox(bbox: Rectangle): void {
augmentBoundingBox(bbox) {
super.augmentBoundingBox(bbox); super.augmentBoundingBox(bbox);
// Adds marker sizes // Adds marker sizes
let size = 0; let size = 0;
if (utils.getValue(this.style, 'startArrow', NONE) !== NONE) { if (getValue(this.style, 'startArrow', NONE) !== NONE) {
size = size = getNumber(this.style, 'startSize', DEFAULT_MARKERSIZE) + 1;
utils.getNumber(this.style, 'startSize', DEFAULT_MARKERSIZE) + 1;
} }
if (utils.getValue(this.style, 'endArrow', NONE) !== NONE) { if (getValue(this.style, 'endArrow', NONE) !== NONE) {
size = size = Math.max(size, getNumber(this.style, 'endSize', DEFAULT_MARKERSIZE)) + 1;
Math.max(
size,
utils.getNumber(this.style, 'endSize', DEFAULT_MARKERSIZE)
) + 1;
} }
bbox.grow(size * this.scale); bbox.grow(size * this.scale);
} }
} }
export default mxConnector; export default Connector;

19
packages/core/src/view/geometry/shape/edge/mxLine.js → packages/core/src/view/geometry/shape/edge/Line.ts
View File

@ -5,15 +5,17 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Shape from '../Shape'; import Shape from '../Shape';
import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
import Rectangle from '../../Rectangle';
/** /**
* Extends {@link Shape} to implement a horizontal line shape. * Extends {@link Shape} to implement a horizontal line shape.
* This shape is registered under {@link mxConstants.SHAPE_LINE} in {@link mxCellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_LINE} in {@link mxCellRenderer}.
* @class mxLine * @class Line
* @extends {Shape} * @extends {Shape}
*/ */
class mxLine extends Shape { class Line extends Shape {
constructor(bounds, stroke, strokewidth, vertical) { constructor(bounds: Rectangle, stroke: string, strokewidth: number, vertical: boolean) {
super(); super();
this.bounds = bounds; this.bounds = bounds;
this.stroke = stroke; this.stroke = stroke;
@ -36,8 +38,13 @@ class mxLine extends Shape {
* @param {number} w * @param {number} w
* @param {number} h * @param {number} h
*/ */
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void; paintVertexShape(
paintVertexShape(c, x, y, w, h) { c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number
): void {
c.begin(); c.begin();
if (this.vertical) { if (this.vertical) {
@ -54,4 +61,4 @@ class mxLine extends Shape {
} }
} }
export default mxLine; export default Line;

93
packages/core/src/view/geometry/shape/edge/mxMarker.js → packages/core/src/view/geometry/shape/edge/Marker.ts
View File

@ -13,9 +13,9 @@ import {
/** /**
* A static class that implements all markers for VML and SVG using a registry. * A static class that implements all markers for VML and SVG using a registry.
* NOTE: The signatures in this class will change. * NOTE: The signatures in this class will change.
* @class mxMarker * @class Marker
*/ */
class mxMarker { class Marker {
/** /**
* Maps from markers names to functions to paint the markers. * Maps from markers names to functions to paint the markers.
* *
@ -30,7 +30,7 @@ class mxMarker {
*/ */
// static addMarker(type: string, funct: Function): void; // static addMarker(type: string, funct: Function): void;
static addMarker(type, funct) { static addMarker(type, funct) {
mxMarker.markers[type] = funct; Marker.markers[type] = funct;
} }
/** /**
@ -38,19 +38,8 @@ class mxMarker {
* *
* Returns a function to paint the given marker. * Returns a function to paint the given marker.
*/ */
static createMarker( static createMarker(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
canvas, const funct = Marker.markers[type];
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) {
const funct = mxMarker.markers[type];
return funct != null return funct != null
? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) ? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
: null; : null;
@ -64,18 +53,7 @@ class mxMarker {
function createArrow(widthFactor) { function createArrow(widthFactor) {
widthFactor = widthFactor != null ? widthFactor : 2; widthFactor = widthFactor != null ? widthFactor : 2;
return ( return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) => {
// The angle of the forward facing arrow sides against the x axis is // The angle of the forward facing arrow sides against the x axis is
// 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for // 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
// only half the strokewidth is processed ). // only half the strokewidth is processed ).
@ -89,8 +67,7 @@ class mxMarker {
pt.x -= endOffsetX; pt.x -= endOffsetX;
pt.y -= endOffsetY; pt.y -= endOffsetY;
const f = const f = type !== ARROW_CLASSIC && type !== ARROW_CLASSIC_THIN ? 1 : 3 / 4;
type !== ARROW_CLASSIC && type !== ARROW_CLASSIC_THIN ? 1 : 3 / 4;
pe.x += -unitX * f - endOffsetX; pe.x += -unitX * f - endOffsetX;
pe.y += -unitY * f - endOffsetY; pe.y += -unitY * f - endOffsetY;
@ -121,26 +98,15 @@ class mxMarker {
}; };
} }
mxMarker.addMarker('classic', createArrow(2)); Marker.addMarker('classic', createArrow(2));
mxMarker.addMarker('classicThin', createArrow(3)); Marker.addMarker('classicThin', createArrow(3));
mxMarker.addMarker('block', createArrow(2)); Marker.addMarker('block', createArrow(2));
mxMarker.addMarker('blockThin', createArrow(3)); Marker.addMarker('blockThin', createArrow(3));
function createOpenArrow(widthFactor) { function createOpenArrow(widthFactor) {
widthFactor = widthFactor != null ? widthFactor : 2; widthFactor = widthFactor != null ? widthFactor : 2;
return ( return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) => {
// The angle of the forward facing arrow sides against the x axis is // The angle of the forward facing arrow sides against the x axis is
// 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for // 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
// only half the strokewidth is processed ). // only half the strokewidth is processed ).
@ -173,10 +139,10 @@ class mxMarker {
}; };
} }
mxMarker.addMarker('open', createOpenArrow(2)); Marker.addMarker('open', createOpenArrow(2));
mxMarker.addMarker('openThin', createOpenArrow(3)); Marker.addMarker('openThin', createOpenArrow(3));
mxMarker.addMarker( Marker.addMarker(
'oval', 'oval',
(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => { (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
const a = size / 2; const a = size / 2;
@ -197,18 +163,7 @@ class mxMarker {
} }
); );
function diamond( function diamond(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) {
// The angle of the forward facing arrow sides against the x axis is // The angle of the forward facing arrow sides against the x axis is
// 45 degrees, 1/sin(45) = 1.4142 / 2 = 0.7071 ( / 2 allows for // 45 degrees, 1/sin(45) = 1.4142 / 2 = 0.7071 ( / 2 allows for
// only half the strokewidth is processed ). Or 0.9862 for thin diamond. // only half the strokewidth is processed ). Or 0.9862 for thin diamond.
@ -234,15 +189,9 @@ class mxMarker {
return () => { return () => {
canvas.begin(); canvas.begin();
canvas.moveTo(pt.x, pt.y); canvas.moveTo(pt.x, pt.y);
canvas.lineTo( canvas.lineTo(pt.x - unitX / 2 - unitY / tk, pt.y + unitX / tk - unitY / 2);
pt.x - unitX / 2 - unitY / tk,
pt.y + unitX / tk - unitY / 2
);
canvas.lineTo(pt.x - unitX, pt.y - unitY); canvas.lineTo(pt.x - unitX, pt.y - unitY);
canvas.lineTo( canvas.lineTo(pt.x - unitX / 2 + unitY / tk, pt.y - unitY / 2 - unitX / tk);
pt.x - unitX / 2 + unitY / tk,
pt.y - unitY / 2 - unitX / tk
);
canvas.close(); canvas.close();
if (filled) { if (filled) {
@ -253,8 +202,8 @@ class mxMarker {
}; };
} }
mxMarker.addMarker('diamond', diamond); Marker.addMarker('diamond', diamond);
mxMarker.addMarker('diamondThin', diamond); Marker.addMarker('diamondThin', diamond);
})(); })();
export default mxMarker; export default Marker;

36
packages/core/src/view/geometry/shape/edge/mxPolyline.js → packages/core/src/view/geometry/shape/edge/Polyline.ts
View File

@ -5,10 +5,10 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Shape from '../Shape'; import Shape from '../Shape';
import { import { LINE_ARCSIZE } from '../../../../util/Constants';
LINE_ARCSIZE, import utils, { getValue } from '../../../../util/Utils';
} from '../../../../util/Constants'; import Point from '../../Point';
import utils from '../../../../util/Utils'; import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
/** /**
* Class: mxPolyline * Class: mxPolyline
@ -30,8 +30,8 @@ import utils from '../../../../util/Utils';
* strokewidth - Optional integer that defines the stroke width. Default is * strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>. * 1. This is stored in <strokewidth>.
*/ */
class mxPolyline extends Shape { class Polyline extends Shape {
constructor(points, stroke, strokewidth) { constructor(points: Point[], stroke: string, strokewidth: number) {
super(); super();
this.points = points; this.points = points;
this.stroke = stroke; this.stroke = stroke;
@ -41,32 +41,28 @@ class mxPolyline extends Shape {
/** /**
* Returns 0. * Returns 0.
*/ */
// getRotation(): number; getRotation(): number {
getRotation() {
return 0; return 0;
} }
/** /**
* Returns 0. * Returns 0.
*/ */
// getShapeRotation(): number; getShapeRotation(): number {
getShapeRotation() {
return 0; return 0;
} }
/** /**
* Returns false. * Returns false.
*/ */
// isPaintBoundsInverted(): boolean; isPaintBoundsInverted(): boolean {
isPaintBoundsInverted() {
return false; return false;
} }
/** /**
* Paints the line shape. * Paints the line shape.
*/ */
// paintEdgeShape(c: mxAbstractCanvas2D, pts: Array<mxPoint>): void; paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
paintEdgeShape(c, pts) {
const prev = c.pointerEventsValue; const prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke'; c.pointerEventsValue = 'stroke';
@ -75,17 +71,14 @@ class mxPolyline extends Shape {
} else { } else {
this.paintCurvedLine(c, pts); this.paintCurvedLine(c, pts);
} }
c.pointerEventsValue = prev; c.pointerEventsValue = prev;
} }
/** /**
* Paints the line shape. * Paints the line shape.
*/ */
// paintLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>, rounded?: boolean): void; paintLine(c: mxAbstractCanvas2D, pts: Point[], rounded?: boolean): void {
paintLine(c, pts, rounded) { const arcSize = getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
const arcSize =
utils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
c.begin(); c.begin();
this.addPoints(c, pts, rounded, arcSize, false); this.addPoints(c, pts, rounded, arcSize, false);
c.stroke(); c.stroke();
@ -94,8 +87,7 @@ class mxPolyline extends Shape {
/** /**
* Paints the line shape. * Paints the line shape.
*/ */
// paintCurvedLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>): void; paintCurvedLine(c: mxAbstractCanvas2D, pts: Point[]): void {
paintCurvedLine(c, pts) {
c.begin(); c.begin();
const pt = pts[0]; const pt = pts[0];
@ -118,4 +110,4 @@ class mxPolyline extends Shape {
} }
} }
export default mxPolyline; export default Polyline;

4
packages/core/src/view/geometry/shape/node/Cloud.ts → packages/core/src/view/geometry/shape/node/CloudShape.ts
View File

@ -13,7 +13,7 @@ import Rectangle from '../../Rectangle';
* *
* This shape is registered under {@link mxConstants.SHAPE_CLOUD} in {@link cellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_CLOUD} in {@link cellRenderer}.
*/ */
class Cloud extends Actor { class CloudShape extends Actor {
constructor( constructor(
bounds: Rectangle, bounds: Rectangle,
fill: string, fill: string,
@ -49,4 +49,4 @@ class Cloud extends Actor {
} }
} }
export default Cloud; export default CloudShape;

4
packages/core/src/view/geometry/shape/node/Cylinder.ts → packages/core/src/view/geometry/shape/node/CylinderShape.ts
View File

@ -16,7 +16,7 @@ import Rectangle from '../../Rectangle';
* *
* This shape is registered under {@link mxConstants.SHAPE_CYLINDER} in {@link cellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_CYLINDER} in {@link cellRenderer}.
*/ */
class Cylinder extends Shape { class CylinderShape extends Shape {
constructor( constructor(
bounds: Rectangle, bounds: Rectangle,
fill: string, fill: string,
@ -116,4 +116,4 @@ class Cylinder extends Shape {
} }
} }
export default Cylinder; export default CylinderShape;

4
packages/core/src/view/geometry/shape/node/DoubleEllipse.ts → packages/core/src/view/geometry/shape/node/DoubleEllipseShape.ts
View File

@ -38,7 +38,7 @@ import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
* }; * };
* ``` * ```
*/ */
class DoubleEllipse extends Shape { class DoubleEllipseShape extends Shape {
strokewidth: number; strokewidth: number;
constructor( constructor(
@ -124,4 +124,4 @@ class DoubleEllipse extends Shape {
} }
} }
export default DoubleEllipse; export default DoubleEllipseShape;

7
packages/core/src/view/geometry/shape/node/Ellipse.ts → packages/core/src/view/geometry/shape/node/EllipseShape.ts
View File

@ -12,7 +12,7 @@ import Rectangle from '../../Rectangle';
* Extends mxShape to implement an ellipse shape. * Extends mxShape to implement an ellipse shape.
* This shape is registered under mxConstants.SHAPE_ELLIPSE in mxCellRenderer. * This shape is registered under mxConstants.SHAPE_ELLIPSE in mxCellRenderer.
*/ */
class Ellipse extends Shape { class EllipseShape extends Shape {
constructor( constructor(
bounds: Rectangle, bounds: Rectangle,
fill: string, fill: string,
@ -29,17 +29,16 @@ class Ellipse extends Shape {
/** /**
* Paints the ellipse shape. * Paints the ellipse shape.
*/ */
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape( paintVertexShape(
c: mxSvgCanvas2D, c: mxSvgCanvas2D,
x: number, x: number,
y: number, y: number,
w: number, w: number,
h: number h: number
) { ): void {
c.ellipse(x, y, w, h); c.ellipse(x, y, w, h);
c.fillAndStroke(); c.fillAndStroke();
} }
} }
export default Ellipse; export default EllipseShape;

14
packages/core/src/view/geometry/shape/node/Hexagon.ts → packages/core/src/view/geometry/shape/node/HexagonShape.ts
View File

@ -6,16 +6,16 @@
*/ */
import Actor from '../Actor'; import Actor from '../Actor';
import Point from '../../Point'; import Point from '../../Point';
import utils from '../../../../util/Utils'; import utils, { getValue } from '../../../../util/Utils';
import { LINE_ARCSIZE } from '../../../../util/Constants'; import { LINE_ARCSIZE } from '../../../../util/Constants';
import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
/** /**
* Implementation of the hexagon shape. * Implementation of the hexagon shape.
* @class Hexagon * @class HexagonShape
* @extends {Actor} * @extends {Actor}
*/ */
class Hexagon extends Actor { class HexagonShape extends Actor {
constructor() { constructor() {
super(); super();
} }
@ -28,10 +28,8 @@ class Hexagon extends Actor {
* @param {number} w * @param {number} w
* @param {number} h * @param {number} h
*/ */
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void; redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number): void {
redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) { const arcSize = getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
const arcSize =
utils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints( this.addPoints(
c, c,
[ [
@ -49,4 +47,4 @@ class Hexagon extends Actor {
} }
} }
export default Hexagon; export default HexagonShape;

8
packages/core/src/view/geometry/shape/Label.js → packages/core/src/view/geometry/shape/node/LabelShape.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Rectangle from '../Rectangle'; import Rectangle from '../../Rectangle';
import { import {
ALIGN_BOTTOM, ALIGN_BOTTOM,
ALIGN_CENTER, ALIGN_CENTER,
@ -13,9 +13,9 @@ import {
ALIGN_RIGHT, ALIGN_RIGHT,
ALIGN_TOP, ALIGN_TOP,
DEFAULT_IMAGESIZE, DEFAULT_IMAGESIZE,
} from '../../../util/Constants'; } from '../../../../util/Constants';
import RectangleShape from './node/RectangleShape'; import RectangleShape from './RectangleShape';
import utils from '../../../util/Utils'; import utils from '../../../../util/Utils';
/** /**
* Class: mxLabel * Class: mxLabel

6
packages/core/src/view/geometry/shape/node/Rhombus.ts → packages/core/src/view/geometry/shape/node/RhombusShape.ts
View File

@ -14,10 +14,10 @@ import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
/** /**
* Extends {@link Shape} to implement a rhombus (aka diamond) shape. * Extends {@link Shape} to implement a rhombus (aka diamond) shape.
* This shape is registered under {@link mxConstants.SHAPE_RHOMBUS} in {@link cellRenderer}. * This shape is registered under {@link mxConstants.SHAPE_RHOMBUS} in {@link cellRenderer}.
* @class Rhombus * @class RhombusShape
* @extends {Shape} * @extends {Shape}
*/ */
class Rhombus extends Shape { class RhombusShape extends Shape {
constructor( constructor(
bounds: Rectangle, bounds: Rectangle,
fill: string, fill: string,
@ -77,4 +77,4 @@ class Rhombus extends Shape {
} }
} }
export default Rhombus; export default RhombusShape;

14
packages/core/src/view/geometry/shape/node/Stencil.ts → packages/core/src/view/geometry/shape/node/StencilShape.ts
View File

@ -17,7 +17,7 @@ import {
NONE, NONE,
RECTANGLE_ROUNDING_FACTOR, RECTANGLE_ROUNDING_FACTOR,
} from '../../../../util/Constants'; } from '../../../../util/Constants';
import StencilRegistry from './StencilRegistry'; import StencilShapeRegistry from './StencilShapeRegistry';
import { getChildNodes, getTextContent } from '../../../../util/DomUtils'; import { getChildNodes, getTextContent } from '../../../../util/DomUtils';
import Point from '../../Point'; import Point from '../../Point';
import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
@ -25,9 +25,9 @@ import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
/** /**
* Implements a generic shape which is based on a XML node as a description. * Implements a generic shape which is based on a XML node as a description.
* *
* @class Stencil * @class StencilShape
*/ */
class Stencil extends Shape { class StencilShape extends Shape {
constructor(desc: Element) { constructor(desc: Element) {
super(); super();
this.desc = desc; this.desc = desc;
@ -182,7 +182,7 @@ class Stencil extends Shape {
let result = this.evaluateAttribute(node, attribute, shape); let result = this.evaluateAttribute(node, attribute, shape);
const loc = node.getAttribute('localized'); const loc = node.getAttribute('localized');
if ((Stencil.defaultLocalized && loc == null) || loc == '1') { if ((StencilShape.defaultLocalized && loc == null) || loc == '1') {
result = Resources.get(result); result = Resources.get(result);
} }
@ -203,7 +203,7 @@ class Stencil extends Shape {
if (result == null) { if (result == null) {
const text = getTextContent(node); const text = getTextContent(node);
if (text != null && Stencil.allowEval) { if (text != null && StencilShape.allowEval) {
const funct = eval(text); const funct = eval(text);
if (typeof funct === 'function') { if (typeof funct === 'function') {
@ -604,7 +604,7 @@ class Stencil extends Shape {
); );
} }
} else if (name === 'include-shape') { } else if (name === 'include-shape') {
const stencil = StencilRegistry.getStencil(node.getAttribute('name')); const stencil = StencilShapeRegistry.getStencil(node.getAttribute('name'));
if (stencil != null) { if (stencil != null) {
const x = x0 + Number(node.getAttribute('x')) * sx; const x = x0 + Number(node.getAttribute('x')) * sx;
@ -678,4 +678,4 @@ class Stencil extends Shape {
} }
} }
export default Stencil; export default StencilShape;

20
packages/core/src/view/geometry/shape/node/StencilRegistry.ts → packages/core/src/view/geometry/shape/node/StencilShapeRegistry.ts
View File

@ -23,40 +23,40 @@
* (end) * (end)
*/ */
import Stencil from './Stencil'; import StencilShape from './StencilShape';
type Stencils = { type Stencils = {
[k: string]: Stencil; [k: string]: StencilShape;
}; };
/** /**
* A singleton class that provides a registry for stencils and the methods * A singleton class that provides a registry for stencils and the methods
* for painting those stencils onto a canvas or into a DOM. * for painting those stencils onto a canvas or into a DOM.
* *
* @class StencilRegistry * @class StencilShapeRegistry
*/ */
class StencilRegistry { class StencilShapeRegistry {
static stencils: Stencils = {}; static stencils: Stencils = {};
/** /**
* Adds the given <mxStencil>. * Adds the given <mxStencil>.
* @static * @static
* @param {string} name * @param {string} name
* @param {Stencil} stencil * @param {StencilShape} stencil
*/ */
static addStencil(name: string, stencil: Stencil) { static addStencil(name: string, stencil: StencilShape) {
StencilRegistry.stencils[name] = stencil; StencilShapeRegistry.stencils[name] = stencil;
} }
/** /**
* Returns the <mxStencil> for the given name. * Returns the <mxStencil> for the given name.
* @static * @static
* @param {string} name * @param {string} name
* @returns {Stencil} * @returns {StencilShape}
*/ */
static getStencil(name: string) { static getStencil(name: string) {
return StencilRegistry.stencils[name]; return StencilShapeRegistry.stencils[name];
} }
} }
export default StencilRegistry; export default StencilShapeRegistry;

14
packages/core/src/view/geometry/shape/Swimlane.js → packages/core/src/view/geometry/shape/node/SwimlaneShape.ts
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Shape from './Shape'; import Shape from '../Shape';
import Rectangle from '../Rectangle'; import Rectangle from '../../Rectangle';
import { import {
DEFAULT_STARTSIZE, DEFAULT_STARTSIZE,
DIRECTION_NORTH, DIRECTION_NORTH,
@ -14,8 +14,8 @@ import {
LINE_ARCSIZE, LINE_ARCSIZE,
NONE, NONE,
RECTANGLE_ROUNDING_FACTOR, RECTANGLE_ROUNDING_FACTOR,
} from '../../../util/Constants'; } from '../../../../util/Constants';
import utils from '../../../util/Utils'; import utils from '../../../../util/Utils';
/** /**
* Extends {@link Shape} to implement a swimlane shape. * Extends {@link Shape} to implement a swimlane shape.
@ -28,10 +28,10 @@ import utils from '../../../util/Utils';
* The {@link 'horizontal'} affects the orientation of this shape, * The {@link 'horizontal'} affects the orientation of this shape,
* not only its label. * not only its label.
* *
* @class Swimlane * @class SwimlaneShape
* @extends {Shape} * @extends {Shape}
*/ */
class Swimlane extends Shape { class SwimlaneShape extends Shape {
constructor(bounds, fill, stroke, strokewidth) { constructor(bounds, fill, stroke, strokewidth) {
super(); super();
this.bounds = bounds; this.bounds = bounds;
@ -457,4 +457,4 @@ class Swimlane extends Shape {
} }
} }
export default Swimlane; export default SwimlaneShape;

225
packages/core/src/view/geometry/shape/mxText.ts → packages/core/src/view/geometry/shape/node/TextShape.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxClient from '../../../mxClient'; import mxClient from '../../../../mxClient';
import { import {
ABSOLUTE_LINE_HEIGHT, ABSOLUTE_LINE_HEIGHT,
ALIGN_BOTTOM, ALIGN_BOTTOM,
@ -27,19 +27,19 @@ import {
TEXT_DIRECTION_LTR, TEXT_DIRECTION_LTR,
TEXT_DIRECTION_RTL, TEXT_DIRECTION_RTL,
WORD_WRAP, WORD_WRAP,
} from '../../../util/Constants'; } from '../../../../util/Constants';
import utils from '../../../util/Utils'; import utils, {
import Point from '../Point'; getAlignmentAsPoint,
import mxSvgCanvas2D from '../../../util/canvas/mxSvgCanvas2D'; getBoundingBox,
import Shape from './Shape'; getValue,
import Rectangle from '../Rectangle'; } from '../../../../util/Utils';
import CellState from '../../cell/datatypes/CellState'; import Point from '../../Point';
import { import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
htmlEntities, import Shape from '../Shape';
replaceTrailingNewlines, import Rectangle from '../../Rectangle';
trim, import CellState from '../../../cell/datatypes/CellState';
} from '../../../util/StringUtils'; import { htmlEntities, replaceTrailingNewlines, trim } from '../../../../util/StringUtils';
import { isNode } from '../../../util/DomUtils'; import { isNode } from '../../../../util/DomUtils';
/** /**
* Extends mxShape to implement a text shape. * Extends mxShape to implement a text shape.
@ -49,10 +49,10 @@ import { isNode } from '../../../util/DomUtils';
* ```javascript * ```javascript
* mxText.prototype.verticalTextRotation = 90; * mxText.prototype.verticalTextRotation = 90;
* ``` * ```
* @class mxText * @class TextShape
* @extends {Shape} * @extends {Shape}
*/ */
class mxText extends Shape { class TextShape extends Shape {
constructor( constructor(
value: string, value: string,
bounds: Rectangle, bounds: Rectangle,
@ -88,8 +88,7 @@ class mxText extends Shape {
this.size = size; this.size = size;
this.fontStyle = fontStyle; this.fontStyle = fontStyle;
this.spacing = parseInt(String(spacing || 2)); this.spacing = parseInt(String(spacing || 2));
this.spacingTop = this.spacingTop = parseInt(String(spacing || 2)) + parseInt(String(spacingTop || 0));
parseInt(String(spacing || 2)) + parseInt(String(spacingTop || 0));
this.spacingRight = this.spacingRight =
parseInt(String(spacing || 2)) + parseInt(String(spacingRight || 0)); parseInt(String(spacing || 2)) + parseInt(String(spacingRight || 0));
this.spacingBottom = this.spacingBottom =
@ -141,7 +140,6 @@ class mxText extends Shape {
* Specifies the spacing to be added to the top spacing. Default is 0. Use the * Specifies the spacing to be added to the top spacing. Default is 0. Use the
* value 5 here to get the same label positions as in mxGraph 1.x. * value 5 here to get the same label positions as in mxGraph 1.x.
*/ */
// baseSpacingTop: number;
baseSpacingTop: number = 0; baseSpacingTop: number = 0;
/** /**
@ -150,7 +148,6 @@ class mxText extends Shape {
* Specifies the spacing to be added to the bottom spacing. Default is 0. Use the * Specifies the spacing to be added to the bottom spacing. Default is 0. Use the
* value 1 here to get the same label positions as in mxGraph 1.x. * value 1 here to get the same label positions as in mxGraph 1.x.
*/ */
// baseSpacingBottom: number;
baseSpacingBottom: number = 0; baseSpacingBottom: number = 0;
/** /**
@ -158,7 +155,6 @@ class mxText extends Shape {
* *
* Specifies the spacing to be added to the left spacing. Default is 0. * Specifies the spacing to be added to the left spacing. Default is 0.
*/ */
// baseSpacingLeft: number;
baseSpacingLeft: number = 0; baseSpacingLeft: number = 0;
/** /**
@ -166,7 +162,6 @@ class mxText extends Shape {
* *
* Specifies the spacing to be added to the right spacing. Default is 0. * Specifies the spacing to be added to the right spacing. Default is 0.
*/ */
// baseSpacingRight: number;
baseSpacingRight: number = 0; baseSpacingRight: number = 0;
/** /**
@ -175,7 +170,6 @@ class mxText extends Shape {
* Specifies if linefeeds in HTML labels should be replaced with BR tags. * Specifies if linefeeds in HTML labels should be replaced with BR tags.
* Default is true. * Default is true.
*/ */
// replaceLinefeeds: boolean;
replaceLinefeeds: boolean = true; replaceLinefeeds: boolean = true;
/** /**
@ -183,7 +177,6 @@ class mxText extends Shape {
* *
* Rotation for vertical text. Default is -90 (bottom to top). * Rotation for vertical text. Default is -90 (bottom to top).
*/ */
// verticalTextRotation: number;
verticalTextRotation: number = -90; verticalTextRotation: number = -90;
/** /**
@ -194,7 +187,6 @@ class mxText extends Shape {
* true, then the bounding box will be set to <bounds>. Default is true. * true, then the bounding box will be set to <bounds>. Default is true.
* <ignoreStringSize> has precedence over this switch. * <ignoreStringSize> has precedence over this switch.
*/ */
// ignoreClippedStringSize: boolean;
ignoreClippedStringSize: boolean = true; ignoreClippedStringSize: boolean = true;
/** /**
@ -204,7 +196,6 @@ class mxText extends Shape {
* boundingBox will not ignore the actual size of the string, otherwise * boundingBox will not ignore the actual size of the string, otherwise
* <bounds> will be used instead. Default is false. * <bounds> will be used instead. Default is false.
*/ */
// ignoreStringSize: boolean;
ignoreStringSize: boolean = false; ignoreStringSize: boolean = false;
/** /**
@ -212,7 +203,6 @@ class mxText extends Shape {
* *
* Contains the last rendered text value. Used for caching. * Contains the last rendered text value. Used for caching.
*/ */
// lastValue: string;
lastValue: string | HTMLElement | SVGGElement | null = null; lastValue: string | HTMLElement | SVGGElement | null = null;
/** /**
@ -220,7 +210,6 @@ class mxText extends Shape {
* *
* Specifies if caching for HTML labels should be enabled. Default is true. * Specifies if caching for HTML labels should be enabled. Default is true.
*/ */
// cacheEnabled: boolean;
cacheEnabled: boolean = true; cacheEnabled: boolean = true;
/** /**
@ -228,7 +217,6 @@ class mxText extends Shape {
* *
* Disables offset in IE9 for crisper image output. * Disables offset in IE9 for crisper image output.
*/ */
// getSvgScreenOffset(): 0 | 0.5;
getSvgScreenOffset(): number { getSvgScreenOffset(): number {
return 0; return 0;
} }
@ -238,7 +226,6 @@ class mxText extends Shape {
* *
* Returns true if the bounds are not null and all of its variables are numeric. * Returns true if the bounds are not null and all of its variables are numeric.
*/ */
// checkBounds(): boolean;
checkBounds(): boolean { checkBounds(): boolean {
return ( return (
!isNaN(this.scale) && !isNaN(this.scale) &&
@ -257,7 +244,6 @@ class mxText extends Shape {
* *
* Generic rendering code. * Generic rendering code.
*/ */
// paint(c: mxAbstractCanvas2D, update?: boolean): void;
paint(c: mxSvgCanvas2D, update: boolean = false): void { paint(c: mxSvgCanvas2D, update: boolean = false): void {
// Scale is passed-through to canvas // Scale is passed-through to canvas
const s = this.scale; const s = this.scale;
@ -285,8 +271,7 @@ class mxText extends Shape {
); );
} else { } else {
// Checks if text contains HTML markup // Checks if text contains HTML markup
const realHtml = const realHtml = isNode(this.value) || this.dialect === DIALECT_STRICTHTML;
isNode(this.value) || this.dialect === DIALECT_STRICTHTML;
// Always renders labels as HTML in VML // Always renders labels as HTML in VML
const fmt = realHtml ? 'html' : ''; const fmt = realHtml ? 'html' : '';
@ -340,7 +325,6 @@ class mxText extends Shape {
* *
* Renders the text using the given DOM nodes. * Renders the text using the given DOM nodes.
*/ */
// redraw(): void;
redraw(): void { redraw(): void {
if ( if (
this.visible && this.visible &&
@ -379,7 +363,6 @@ class mxText extends Shape {
* *
* Resets all styles. * Resets all styles.
*/ */
// resetStyles(): void;
resetStyles(): void { resetStyles(): void {
super.resetStyles(); super.resetStyles();
@ -410,70 +393,35 @@ class mxText extends Shape {
* *
* state - <mxCellState> of the corresponding cell. * state - <mxCellState> of the corresponding cell.
*/ */
// apply(state: mxCellState): void;
apply(state: CellState): void { apply(state: CellState): void {
const old = this.spacing; const old = this.spacing;
super.apply(state); super.apply(state);
if (this.style != null) { if (this.style != null) {
this.fontStyle = this.style.fontStyle || this.fontStyle; this.fontStyle = this.style.fontStyle || this.fontStyle;
this.family = utils.getValue(this.style, 'fontFamily', this.family); this.family = getValue(this.style, 'fontFamily', this.family);
this.size = utils.getValue(this.style, 'fontSize', this.size); this.size = getValue(this.style, 'fontSize', this.size);
this.color = utils.getValue(this.style, 'fontColor', this.color); this.color = getValue(this.style, 'fontColor', this.color);
this.align = utils.getValue(this.style, 'align', this.align); this.align = getValue(this.style, 'align', this.align);
this.valign = utils.getValue(this.style, 'verticalAlign', this.valign); this.valign = getValue(this.style, 'verticalAlign', this.valign);
this.spacing = parseInt( this.spacing = parseInt(getValue(this.style, 'spacing', this.spacing));
utils.getValue(this.style, 'spacing', this.spacing)
);
this.spacingTop = this.spacingTop =
parseInt( parseInt(getValue(this.style, 'spacingTop', this.spacingTop - old)) +
utils.getValue(this.style, 'spacingTop', this.spacingTop - old) this.spacing;
) + this.spacing;
this.spacingRight = this.spacingRight =
parseInt( parseInt(getValue(this.style, 'spacingRight', this.spacingRight - old)) +
utils.getValue( this.spacing;
this.style,
'spacingRight',
this.spacingRight - old
)
) + this.spacing;
this.spacingBottom = this.spacingBottom =
parseInt( parseInt(getValue(this.style, 'spacingBottom', this.spacingBottom - old)) +
utils.getValue( this.spacing;
this.style,
'spacingBottom',
this.spacingBottom - old
)
) + this.spacing;
this.spacingLeft = this.spacingLeft =
parseInt( parseInt(getValue(this.style, 'spacingLeft', this.spacingLeft - old)) +
utils.getValue( this.spacing;
this.style, this.horizontal = getValue(this.style, 'horizontal', this.horizontal);
'spacingLeft', this.background = getValue(this.style, 'backgroundColor', this.background);
this.spacingLeft - old this.border = getValue(this.style, 'labelBorderColor', this.border);
) this.textDirection = getValue(this.style, 'textDirection', DEFAULT_TEXT_DIRECTION);
) + this.spacing; this.opacity = getValue(this.style, 'textOpacity', 100);
this.horizontal = utils.getValue(
this.style,
'horizontal',
this.horizontal
);
this.background = utils.getValue(
this.style,
'backgroundColor',
this.background
);
this.border = utils.getValue(
this.style,
'labelBorderColor',
this.border
);
this.textDirection = utils.getValue(
this.style,
'textDirection',
DEFAULT_TEXT_DIRECTION
);
this.opacity = utils.getValue(this.style, 'textOpacity', 100);
this.updateMargin(); this.updateMargin();
} }
@ -489,8 +437,7 @@ class mxText extends Shape {
* depending on the contents of <value>. This is not invoked for HTML, wrapped * depending on the contents of <value>. This is not invoked for HTML, wrapped
* content or if <value> is a DOM node. * content or if <value> is a DOM node.
*/ */
// getAutoDirection(): string; getAutoDirection(): string {
getAutoDirection() {
// Looks for strong (directional) characters // Looks for strong (directional) characters
const tmp = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec( const tmp = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(
<string>this.value <string>this.value
@ -529,23 +476,16 @@ class mxText extends Shape {
* *
* Updates the <boundingBox> for this shape using the given node and position. * Updates the <boundingBox> for this shape using the given node and position.
*/ */
// updateBoundingBox(): void; updateBoundingBox(): void {
updateBoundingBox() {
let { node } = this; let { node } = this;
this.boundingBox = this.bounds.clone(); this.boundingBox = this.bounds.clone();
const rot = this.getTextRotation(); const rot = this.getTextRotation();
const h = const h =
this.style != null this.style != null ? getValue(this.style, 'labelPosition', ALIGN_CENTER) : null;
? utils.getValue(this.style, 'labelPosition', ALIGN_CENTER)
: null;
const v = const v =
this.style != null this.style != null
? utils.getValue( ? getValue(this.style, 'verticalLabelPosition', ALIGN_MIDDLE)
this.style,
'verticalLabelPosition',
ALIGN_MIDDLE
)
: null; : null;
if ( if (
@ -598,12 +538,7 @@ class mxText extends Shape {
} }
if (ow != null && oh != null) { if (ow != null && oh != null) {
this.boundingBox = new Rectangle( this.boundingBox = new Rectangle(this.bounds.x, this.bounds.y, ow, oh);
this.bounds.x,
this.bounds.y,
ow,
oh
);
} }
} }
@ -613,7 +548,7 @@ class mxText extends Shape {
if (rot !== 0) { if (rot !== 0) {
// Accounts for pre-rotated x and y // Accounts for pre-rotated x and y
const bbox = <Rectangle>( const bbox = <Rectangle>(
utils.getBoundingBox( getBoundingBox(
new Rectangle( new Rectangle(
margin.x * this.boundingBox.width, margin.x * this.boundingBox.width,
margin.y * this.boundingBox.height, margin.y * this.boundingBox.height,
@ -626,10 +561,8 @@ class mxText extends Shape {
); );
this.unrotatedBoundingBox = Rectangle.fromRectangle(this.boundingBox); this.unrotatedBoundingBox = Rectangle.fromRectangle(this.boundingBox);
this.unrotatedBoundingBox.x += this.unrotatedBoundingBox.x += margin.x * this.unrotatedBoundingBox.width;
margin.x * this.unrotatedBoundingBox.width; this.unrotatedBoundingBox.y += margin.y * this.unrotatedBoundingBox.height;
this.unrotatedBoundingBox.y +=
margin.y * this.unrotatedBoundingBox.height;
this.boundingBox.x += bbox.x; this.boundingBox.x += bbox.x;
this.boundingBox.y += bbox.y; this.boundingBox.y += bbox.y;
@ -648,8 +581,7 @@ class mxText extends Shape {
* *
* Returns 0 to avoid using rotation in the canvas via updateTransform. * Returns 0 to avoid using rotation in the canvas via updateTransform.
*/ */
// getShapeRotation(): 0; getShapeRotation(): number {
getShapeRotation() {
return 0; return 0;
} }
@ -658,8 +590,7 @@ class mxText extends Shape {
* *
* Returns the rotation for the text label of the corresponding shape. * Returns the rotation for the text label of the corresponding shape.
*/ */
// getTextRotation(): number; getTextRotation(): number {
getTextRotation() {
return this.state != null && this.state.shape != null return this.state != null && this.state.shape != null
? this.state.shape.getTextRotation() ? this.state.shape.getTextRotation()
: 0; : 0;
@ -671,8 +602,7 @@ class mxText extends Shape {
* Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the * Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the
* horizontal style is false. * horizontal style is false.
*/ */
// isPaintBoundsInverted(): boolean; isPaintBoundsInverted(): boolean {
isPaintBoundsInverted() {
return ( return (
!this.horizontal && !this.horizontal &&
this.state != null && this.state != null &&
@ -686,14 +616,7 @@ class mxText extends Shape {
* *
* Sets the state of the canvas for drawing the shape. * Sets the state of the canvas for drawing the shape.
*/ */
// configureCanvas(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void; configureCanvas(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number): void {
configureCanvas(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number
) {
super.configureCanvas(c, x, y, w, h); super.configureCanvas(c, x, y, w, h);
c.setFontColor(this.color); c.setFontColor(this.color);
@ -730,17 +653,13 @@ class mxText extends Shape {
* Private helper function to create SVG elements * Private helper function to create SVG elements
*/ */
getTextCss() { getTextCss() {
const lh = ABSOLUTE_LINE_HEIGHT const lh = ABSOLUTE_LINE_HEIGHT ? `${this.size * LINE_HEIGHT}px` : LINE_HEIGHT;
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
let css = let css =
`display: inline-block; font-size: ${this.size}px; ` + `display: inline-block; font-size: ${this.size}px; ` +
`font-family: ${this.family}; color: ${ `font-family: ${this.family}; color: ${
this.color this.color
}; line-height: ${lh}; pointer-events: ${ }; line-height: ${lh}; pointer-events: ${this.pointerEvents ? 'all' : 'none'}; `;
this.pointerEvents ? 'all' : 'none'
}; `;
if ((this.fontStyle & FONT_BOLD) === FONT_BOLD) { if ((this.fontStyle & FONT_BOLD) === FONT_BOLD) {
css += 'font-weight: bold; '; css += 'font-weight: bold; ';
@ -772,8 +691,7 @@ class mxText extends Shape {
* *
* Updates the HTML node(s) to reflect the latest bounds and scale. * Updates the HTML node(s) to reflect the latest bounds and scale.
*/ */
// redrawHtmlShape(): void; redrawHtmlShape(): void {
redrawHtmlShape() {
const w = Math.max(0, Math.round(this.bounds.width / this.scale)); const w = Math.max(0, Math.round(this.bounds.width / this.scale));
const h = Math.max(0, Math.round(this.bounds.height / this.scale)); const h = Math.max(0, Math.round(this.bounds.height / this.scale));
const flex = const flex =
@ -855,8 +773,7 @@ class mxText extends Shape {
* *
* Sets the inner HTML of the given element to the <value>. * Sets the inner HTML of the given element to the <value>.
*/ */
// updateInnerHtml(elt: HTMLElement): void; updateInnerHtml(elt: HTMLElement): void {
updateInnerHtml(elt: HTMLElement) {
if (isNode(this.value)) { if (isNode(this.value)) {
// @ts-ignore // @ts-ignore
elt.innerHTML = this.value.outerHTML; elt.innerHTML = this.value.outerHTML;
@ -882,8 +799,7 @@ class mxText extends Shape {
* *
* Updates the HTML node(s) to reflect the latest bounds and scale. * Updates the HTML node(s) to reflect the latest bounds and scale.
*/ */
// updateValue(): void; updateValue(): void {
updateValue() {
const node = <SVGGElement>this.node; const node = <SVGGElement>this.node;
if (isNode(this.value)) { if (isNode(this.value)) {
@ -900,11 +816,8 @@ class mxText extends Shape {
val = replaceTrailingNewlines(val, '<div><br></div>'); val = replaceTrailingNewlines(val, '<div><br></div>');
val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val; val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
const bg = const bg =
this.background != null && this.background !== NONE this.background != null && this.background !== NONE ? this.background : null;
? this.background const bd = this.border != null && this.border !== NONE ? this.border : null;
: null;
const bd =
this.border != null && this.border !== NONE ? this.border : null;
if (this.overflow === 'fill' || this.overflow === 'width') { if (this.overflow === 'fill' || this.overflow === 'width') {
if (bg != null) { if (bg != null) {
@ -928,9 +841,7 @@ class mxText extends Shape {
// Wrapper DIV for background, zoom needed for inline in quirks // Wrapper DIV for background, zoom needed for inline in quirks
// and to measure wrapped font sizes in all browsers // and to measure wrapped font sizes in all browsers
// FIXME: Background size in quirks mode for wrapped text // FIXME: Background size in quirks mode for wrapped text
const lh = ABSOLUTE_LINE_HEIGHT const lh = ABSOLUTE_LINE_HEIGHT ? `${this.size * LINE_HEIGHT}px` : LINE_HEIGHT;
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
val = val =
`<div style="zoom:1;${css}display:inline-block;_display:inline;text-decoration:inherit;` + `<div style="zoom:1;${css}display:inline-block;_display:inline;text-decoration:inherit;` +
`padding-bottom:1px;padding-right:1px;line-height:${lh}">${val}</div>`; `padding-bottom:1px;padding-right:1px;line-height:${lh}">${val}</div>`;
@ -944,10 +855,7 @@ class mxText extends Shape {
if (divs.length > 0) { if (divs.length > 0) {
let dir = this.textDirection; let dir = this.textDirection;
if ( if (dir === TEXT_DIRECTION_AUTO && this.dialect !== DIALECT_STRICTHTML) {
dir === TEXT_DIRECTION_AUTO &&
this.dialect !== DIALECT_STRICTHTML
) {
dir = this.getAutoDirection(); dir = this.getAutoDirection();
} }
@ -965,8 +873,7 @@ class mxText extends Shape {
* *
* Updates the HTML node(s) to reflect the latest bounds and scale. * Updates the HTML node(s) to reflect the latest bounds and scale.
*/ */
// updateFont(node: HTMLElement): void; updateFont(node: HTMLElement | SVGGElement): void {
updateFont(node: HTMLElement | SVGGElement) {
const { style } = node; const { style } = node;
// @ts-ignore // @ts-ignore
@ -1016,8 +923,7 @@ class mxText extends Shape {
* *
* Updates the HTML node(s) to reflect the latest bounds and scale. * Updates the HTML node(s) to reflect the latest bounds and scale.
*/ */
// updateSize(node: HTMLElement, enableWrap: boolean): void; updateSize(node: HTMLElement, enableWrap: boolean = false): void {
updateSize(node: HTMLElement, enableWrap: boolean = false) {
const w = Math.max(0, Math.round(this.bounds.width / this.scale)); const w = Math.max(0, Math.round(this.bounds.width / this.scale));
const h = Math.max(0, Math.round(this.bounds.height / this.scale)); const h = Math.max(0, Math.round(this.bounds.height / this.scale));
const { style } = node; const { style } = node;
@ -1047,10 +953,7 @@ class mxText extends Shape {
if (enableWrap && this.overflow !== 'fill' && this.overflow !== 'width') { if (enableWrap && this.overflow !== 'fill' && this.overflow !== 'width') {
let sizeDiv = node; let sizeDiv = node;
if ( if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName === 'DIV') {
sizeDiv.firstChild != null &&
sizeDiv.firstChild.nodeName === 'DIV'
) {
// @ts-ignore // @ts-ignore
sizeDiv = sizeDiv.firstChild; sizeDiv = sizeDiv.firstChild;
@ -1089,9 +992,8 @@ class mxText extends Shape {
* *
* Returns the spacing as an <mxPoint>. * Returns the spacing as an <mxPoint>.
*/ */
// updateMargin(): void;
updateMargin(): void { updateMargin(): void {
this.margin = utils.getAlignmentAsPoint(this.align, this.valign); this.margin = getAlignmentAsPoint(this.align, this.valign);
} }
/** /**
@ -1099,7 +1001,6 @@ class mxText extends Shape {
* *
* Returns the spacing as an <mxPoint>. * Returns the spacing as an <mxPoint>.
*/ */
// getSpacing(): mxPoint;
getSpacing(): Point { getSpacing(): Point {
let dx = 0; let dx = 0;
let dy = 0; let dy = 0;
@ -1124,4 +1025,4 @@ class mxText extends Shape {
} }
} }
export default mxText; export default TextShape;

20
packages/core/src/view/geometry/shape/Triangle.ts → packages/core/src/view/geometry/shape/node/TriangleShape.ts
View File

@ -5,18 +5,18 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Point from '../Point'; import Point from '../../Point';
import Actor from './Actor'; import Actor from '../Actor';
import utils from '../../../util/Utils'; import utils, { getValue } from '../../../../util/Utils';
import { LINE_ARCSIZE } from '../../../util/Constants'; import { LINE_ARCSIZE } from '../../../../util/Constants';
import mxSvgCanvas2D from '../../../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
/** /**
* Implementation of the triangle shape. * Implementation of the triangle shape.
* @class Triangle * @class TriangleShape
* @extends {Actor} * @extends {Actor}
*/ */
class Triangle extends Actor { class TriangleShape extends Actor {
constructor() { constructor() {
super(); super();
} }
@ -25,7 +25,6 @@ class Triangle extends Actor {
* Adds roundable support. * Adds roundable support.
* @returns {boolean} * @returns {boolean}
*/ */
// isRoundable(): boolean;
isRoundable(): boolean { isRoundable(): boolean {
return true; return true;
} }
@ -38,7 +37,6 @@ class Triangle extends Actor {
* @param {number} w * @param {number} w
* @param {number} h * @param {number} h
*/ */
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath( redrawPath(
c: mxSvgCanvas2D, c: mxSvgCanvas2D,
x: number, x: number,
@ -47,7 +45,7 @@ class Triangle extends Actor {
h: number h: number
): void { ): void {
const arcSize: number = const arcSize: number =
utils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2; getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints( this.addPoints(
c, c,
@ -59,4 +57,4 @@ class Triangle extends Actor {
} }
} }
export default Triangle; export default TriangleShape;

13
packages/core/src/view/image/Image.js → packages/core/src/view/image/Image.ts
View File

@ -15,7 +15,9 @@
* Constructs a new image. * Constructs a new image.
*/ */
class Image { class Image {
constructor(src, width, height) { constructor(src: string,
width: number,
height: number) {
this.src = src; this.src = src;
this.width = width; this.width = width;
this.height = height; this.height = height;
@ -26,24 +28,21 @@ class Image {
* *
* String that specifies the URL of the image. * String that specifies the URL of the image.
*/ */
// src: string; src: string | null = null;
src = null;
/** /**
* Variable: width * Variable: width
* *
* Integer that specifies the width of the image. * Integer that specifies the width of the image.
*/ */
// width: number; width: number | null = null;
width = null;
/** /**
* Variable: height * Variable: height
* *
* Integer that specifies the height of the image. * Integer that specifies the height of the image.
*/ */
// height: number; height: number | null = null;
height = null;
} }
export default Image; export default Image;

12
packages/core/src/view/image/ImageBundle.js → packages/core/src/view/image/ImageBundle.ts
View File

@ -61,16 +61,14 @@ class ImageBundle {
* *
* Maps from keys to images. * Maps from keys to images.
*/ */
// images: { [key: string]: { value: string; fallback: Function } }; images: { [key: string]: { value: string; fallback: Function } } | null = null;
images = null;
/** /**
* Variable: alt * Variable: alt
* *
* Specifies if the fallback representation should be returned. * Specifies if the fallback representation should be returned.
*/ */
// alt: boolean; alt: boolean = null;
alt = null;
/** /**
* Function: putImage * Function: putImage
@ -78,8 +76,7 @@ class ImageBundle {
* Adds the specified entry to the map. The entry is an object with a value and * Adds the specified entry to the map. The entry is an object with a value and
* fallback property as specified in the arguments. * fallback property as specified in the arguments.
*/ */
// putImage(key: string, value: string, fallback: Function): void; putImage(key: string, value: string, fallback: Function): void {
putImage(key, value, fallback) {
this.images[key] = { value, fallback }; this.images[key] = { value, fallback };
} }
@ -90,8 +87,7 @@ class ImageBundle {
* or fallback, depending on <alt>. The fallback is returned if * or fallback, depending on <alt>. The fallback is returned if
* <alt> is true, the value is returned otherwise. * <alt> is true, the value is returned otherwise.
*/ */
// getImage(key: string): string; getImage(key: string): string {
getImage(key) {
let result = null; let result = null;
if (key != null) { if (key != null) {

31
packages/core/src/view/image/ImageExport.js → packages/core/src/view/image/ImageExport.ts
View File

@ -5,6 +5,10 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import CellState from '../cell/datatypes/CellState';
import Shape from '../geometry/shape/Shape';
/** /**
* Creates a new image export instance to be used with an export canvas. Here * Creates a new image export instance to be used with an export canvas. Here
* is an example that uses this class to create an image via a backend using * is an example that uses this class to create an image via a backend using
@ -37,14 +41,12 @@ class ImageExport {
/** /**
* Specifies if overlays should be included in the export. Default is false. * Specifies if overlays should be included in the export. Default is false.
*/ */
// includeOverlays: boolean; includeOverlays: boolean = false;
includeOverlays = false;
/** /**
* Draws the given state and all its descendants to the given canvas. * Draws the given state and all its descendants to the given canvas.
*/ */
// drawState(state: mxCellState, canvas: mxAbstractCanvas2D): void; drawState(state: CellState, canvas: mxAbstractCanvas2D): void {
drawState(state, canvas) {
if (state != null) { if (state != null) {
this.visitStatesRecursive(state, canvas, () => { this.visitStatesRecursive(state, canvas, () => {
this.drawCellState(state, canvas); this.drawCellState(state, canvas);
@ -64,7 +66,7 @@ class ImageExport {
* *
* Visits the given state and all its descendants to the given canvas recursively. * Visits the given state and all its descendants to the given canvas recursively.
*/ */
visitStatesRecursive(state, canvas, visitor) { visitStatesRecursive(state: CellState, canvas: mxAbstractCanvas2D, visitor: Function) {
if (state != null) { if (state != null) {
visitor(state, canvas); visitor(state, canvas);
@ -72,9 +74,7 @@ class ImageExport {
const childCount = state.cell.getChildCount(); const childCount = state.cell.getChildCount();
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
const childState = graph.view.getState( const childState = graph.view.getState(state.cell.getChildAt(i));
state.cell.getChildAt(i)
);
this.visitStatesRecursive(childState, canvas, visitor); this.visitStatesRecursive(childState, canvas, visitor);
} }
} }
@ -83,16 +83,14 @@ class ImageExport {
/** /**
* Returns the link for the given cell state and canvas. This returns null. * Returns the link for the given cell state and canvas. This returns null.
*/ */
// getLinkForCellState(state: mxCellState, canvas: mxAbstractCanvas2D): any; getLinkForCellState(state: CellState, canvas: mxAbstractCanvas2D): any {
getLinkForCellState(state, canvas) {
return null; return null;
} }
/** /**
* Draws the given state to the given canvas. * Draws the given state to the given canvas.
*/ */
// drawCellState(state: mxCellState, canvas: mxAbstractCanvas2D): void; drawCellState(state: CellState, canvas: mxAbstractCanvas2D): void {
drawCellState(state, canvas) {
// Experimental feature // Experimental feature
const link = this.getLinkForCellState(state, canvas); const link = this.getLinkForCellState(state, canvas);
@ -114,8 +112,7 @@ class ImageExport {
* *
* Draws the shape of the given state. * Draws the shape of the given state.
*/ */
// drawShape(state: mxCellState, canvas: mxAbstractCanvas2D): void; drawShape(state: CellState, canvas: mxAbstractCanvas2D): void {
drawShape(state, canvas) {
if (state.shape instanceof Shape && state.shape.checkBounds()) { if (state.shape instanceof Shape && state.shape.checkBounds()) {
canvas.save(); canvas.save();
@ -130,8 +127,7 @@ class ImageExport {
/** /**
* Draws the text of the given state. * Draws the text of the given state.
*/ */
// drawText(state: mxCellState, canvas: mxAbstractCanvas2D): void; drawText(state: CellState, canvas: mxAbstractCanvas2D): void {
drawText(state, canvas) {
if (state.text != null && state.text.checkBounds()) { if (state.text != null && state.text.checkBounds()) {
canvas.save(); canvas.save();
@ -149,8 +145,7 @@ class ImageExport {
* Draws the overlays for the given state. This is called if <includeOverlays> * Draws the overlays for the given state. This is called if <includeOverlays>
* is true. * is true.
*/ */
// drawOverlays(state: mxCellState, canvas: mxAbstractCanvas2D): void; drawOverlays(state: CellState, canvas: mxAbstractCanvas2D): void {
drawOverlays(state, canvas) {
if (state.overlays != null) { if (state.overlays != null) {
state.overlays.visit((id, shape) => { state.overlays.visit((id, shape) => {
if (shape instanceof Shape) { if (shape instanceof Shape) {

31
packages/core/src/view/layout/layout/mxCircleLayout.js → packages/core/src/view/layout/layout/CircleLayout.ts
View File

@ -4,7 +4,10 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import Graph from '../../Graph';
import CellArray from '../../cell/datatypes/CellArray';
import Cell from '../../cell/datatypes/Cell';
/** /**
* Class: mxCircleLayout * Class: mxCircleLayout
@ -29,11 +32,11 @@ import mxGraphLayout from './mxGraphLayout';
* graph - <mxGraph> that contains the cells. * graph - <mxGraph> that contains the cells.
* radius - Optional radius as an int. Default is 100. * radius - Optional radius as an int. Default is 100.
*/ */
class mxCircleLayout extends mxGraphLayout { class CircleLayout extends GraphLayout {
constructor(graph, radius) { constructor(graph: Graph, radius: number = 100) {
super(graph); super(graph);
// mxGraphLayout.call(this, graph); // mxGraphLayout.call(this, graph);
this.radius = radius != null ? radius : 100; this.radius = radius;
} }
/** /**
@ -41,7 +44,7 @@ class mxCircleLayout extends mxGraphLayout {
* *
* Integer specifying the size of the radius. Default is 100. * Integer specifying the size of the radius. Default is 100.
*/ */
radius = null; radius: number;
/** /**
* Variable: moveCircle * Variable: moveCircle
@ -49,7 +52,7 @@ class mxCircleLayout extends mxGraphLayout {
* Boolean specifying if the circle should be moved to the top, * Boolean specifying if the circle should be moved to the top,
* left corner specified by <x0> and <y0>. Default is false. * left corner specified by <x0> and <y0>. Default is false.
*/ */
moveCircle = false; moveCircle: boolean = false;
/** /**
* Variable: x0 * Variable: x0
@ -57,7 +60,7 @@ class mxCircleLayout extends mxGraphLayout {
* Integer specifying the left coordinate of the circle. * Integer specifying the left coordinate of the circle.
* Default is 0. * Default is 0.
*/ */
x0 = 0; x0: number = 0;
/** /**
* Variable: y0 * Variable: y0
@ -65,7 +68,7 @@ class mxCircleLayout extends mxGraphLayout {
* Integer specifying the top coordinate of the circle. * Integer specifying the top coordinate of the circle.
* Default is 0. * Default is 0.
*/ */
y0 = 0; y0: number = 0;
/** /**
* Variable: resetEdges * Variable: resetEdges
@ -73,7 +76,7 @@ class mxCircleLayout extends mxGraphLayout {
* Specifies if all edge points of traversed edges should be removed. * Specifies if all edge points of traversed edges should be removed.
* Default is true. * Default is true.
*/ */
resetEdges = true; resetEdges: boolean = true;
/** /**
* Variable: disableEdgeStyle * Variable: disableEdgeStyle
@ -81,14 +84,14 @@ class mxCircleLayout extends mxGraphLayout {
* Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are * Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are
* modified by the result. Default is true. * modified by the result. Default is true.
*/ */
disableEdgeStyle = true; disableEdgeStyle: boolean = true;
/** /**
* Function: execute * Function: execute
* *
* Implements <mxGraphLayout.execute>. * Implements <mxGraphLayout.execute>.
*/ */
execute(parent) { execute(parent: Cell) {
const model = this.graph.getModel(); const model = this.graph.getModel();
// Moves the vertices to build a circle. Makes sure the // Moves the vertices to build a circle. Makes sure the
@ -153,7 +156,7 @@ class mxCircleLayout extends mxGraphLayout {
* Returns the radius to be used for the given vertex count. Max is the maximum * Returns the radius to be used for the given vertex count. Max is the maximum
* width or height of all vertices in the layout. * width or height of all vertices in the layout.
*/ */
getRadius(count, max) { getRadius(count: number, max: number) {
return Math.max((count * max) / Math.PI, this.radius); return Math.max((count * max) / Math.PI, this.radius);
} }
@ -164,7 +167,7 @@ class mxCircleLayout extends mxGraphLayout {
* of vertices and the given radius. This is called from * of vertices and the given radius. This is called from
* <execute>. * <execute>.
*/ */
circle(vertices, r, left, top) { circle(vertices: CellArray, r: number, left: number, top: number) {
const vertexCount = vertices.length; const vertexCount = vertices.length;
const phi = (2 * Math.PI) / vertexCount; const phi = (2 * Math.PI) / vertexCount;
@ -180,4 +183,4 @@ class mxCircleLayout extends mxGraphLayout {
} }
} }
export default mxCircleLayout; export default CircleLayout;

206
packages/core/src/view/layout/layout/mxCompactTreeLayout.js → packages/core/src/view/layout/layout/CompactTreeLayout.ts
View File

@ -7,17 +7,20 @@
import Dictionary from '../../../util/Dictionary'; import Dictionary from '../../../util/Dictionary';
import Point from '../../geometry/Point'; import Point from '../../geometry/Point';
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import CellPath from '../../cell/datatypes/CellPath'; import CellPath from '../../cell/datatypes/CellPath';
import Rectangle from '../../geometry/Rectangle'; import Rectangle from '../../geometry/Rectangle';
import utils from '../../../util/Utils'; import utils, { sortCells } from '../../../util/Utils';
import WeightedCellSorter from './WeightedCellSorter'; import WeightedCellSorter from './WeightedCellSorter';
import CellArray from '../../cell/datatypes/CellArray';
import Cell from '../../cell/datatypes/Cell';
import Graph from '../../Graph';
/** /**
* @class mxCompactTreeLayout * @class CompactTreeLayout
* @extends {mxGraphLayout} * @extends {GraphLayout}
* *
* Extends {@link mxGraphLayout} to implement a compact tree (Moen) algorithm. This * Extends {@link GraphLayout} to implement a compact tree (Moen) algorithm. This
* layout is suitable for graphs that have no cycles (trees). Vertices that are * layout is suitable for graphs that have no cycles (trees). Vertices that are
* not connected to the tree will be ignored by this layout. * not connected to the tree will be ignored by this layout.
* *
@ -29,34 +32,31 @@ import WeightedCellSorter from './WeightedCellSorter';
* layout.execute(graph.getDefaultParent()); * layout.execute(graph.getDefaultParent());
* ``` * ```
*/ */
class mxCompactTreeLayout extends mxGraphLayout { class CompactTreeLayout extends GraphLayout {
constructor(graph, horizontal, invert) { constructor(graph: Graph, horizontal: boolean = true, invert: boolean = false) {
super(graph); super(graph);
this.horizontal = horizontal != null ? horizontal : true; this.horizontal = horizontal;
this.invert = invert != null ? invert : false; this.invert = invert;
} }
/** /**
* Specifies the orientation of the layout. * Specifies the orientation of the layout.
* @default true * @default true
*/ */
// horizontal: boolean; horizontal: boolean = null;
horizontal = null;
/** /**
* Specifies if edge directions should be inverted. * Specifies if edge directions should be inverted.
* @default false. * @default false.
*/ */
// invert: boolean; invert: boolean = null;
invert = null;
/** /**
* If the parents should be resized to match the width/height of the * If the parents should be resized to match the width/height of the
* children. Default is true. * children. Default is true.
* @default true * @default true
*/ */
// resizeParent: boolean; resizeParent: boolean = true;
resizeParent = true;
/** /**
* Specifies if the parent location should be maintained, so that the * Specifies if the parent location should be maintained, so that the
@ -64,58 +64,50 @@ class mxCompactTreeLayout extends mxGraphLayout {
* the layout. Default is false for backwards compatibility. * the layout. Default is false for backwards compatibility.
* @default false * @default false
*/ */
// maintainParentLocation: boolean; maintainParentLocation: boolean = false;
maintainParentLocation = false;
/** /**
* Padding added to resized parents. * Padding added to resized parents.
* @default 10 * @default 10
*/ */
// groupPadding: boolean; groupPadding: number = 10;
groupPadding = 10;
/** /**
* Top padding added to resized parents. * Top padding added to resized parents.
* @default 0 * @default 0
*/ */
// groupPaddingTop: boolean; groupPaddingTop: number = 0;
groupPaddingTop = 0;
/** /**
* Right padding added to resized parents. * Right padding added to resized parents.
* @default 0 * @default 0
*/ */
// groupPaddingRight: boolean; groupPaddingRight: number = 0;
groupPaddingRight = 0;
/** /**
* Bottom padding added to resized parents. * Bottom padding added to resized parents.
* @default 0 * @default 0
*/ */
// groupPaddingBottom: boolean; groupPaddingBottom: number = 0;
groupPaddingBottom = 0;
/** /**
* Left padding added to resized parents. * Left padding added to resized parents.
* @default 0 * @default 0
*/ */
// groupPaddingLeft: boolean; groupPaddingLeft: number = 0;
groupPaddingLeft = 0;
/** /**
* A set of the parents that need updating based on children * A set of the parents that need updating based on children
* process as part of the layout. * process as part of the layout.
*/ */
// parentsChanged: { [id: string]: mxCell }; parentsChanged: { [id: string]: mxCell } = null;
parentsChanged = null;
/** /**
* Specifies if the tree should be moved to the top, left corner * Specifies if the tree should be moved to the top, left corner
* if it is inside a top-level layer. * if it is inside a top-level layer.
* @default false * @default false
*/ */
// moveTree: boolean; moveTree: boolean = false;
moveTree = false;
/** /**
* Specifies if the tree should be moved to the top, left corner * Specifies if the tree should be moved to the top, left corner
@ -129,81 +121,69 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Holds the levelDistance. * Holds the levelDistance.
* @default 10 * @default 10
*/ */
// levelDistance: number; levelDistance: number = 10;
levelDistance = 10;
/** /**
* Holds the nodeDistance. * Holds the nodeDistance.
* @default 20 * @default 20
*/ */
// nodeDistance: number; nodeDistance: number = 20;
nodeDistance = 20;
/** /**
* Specifies if all edge points of traversed edges should be removed. * Specifies if all edge points of traversed edges should be removed.
* *
* @default true * @default true
*/ */
// resetEdges: boolean; resetEdges: boolean = true;
resetEdges = true;
/** /**
* The preferred horizontal distance between edges exiting a vertex. * The preferred horizontal distance between edges exiting a vertex.
*/ */
// prefHozEdgeSep: boolean; prefHozEdgeSep: number = 5;
prefHozEdgeSep = 5;
/** /**
* The preferred vertical offset between edges exiting a vertex. * The preferred vertical offset between edges exiting a vertex.
*/ */
// prefVertEdgeOff: boolean; prefVertEdgeOff: number = 4;
prefVertEdgeOff = 4;
/** /**
* The minimum distance for an edge jetty from a vertex. * The minimum distance for an edge jetty from a vertex.
*/ */
// minEdgeJetty: boolean; minEdgeJetty: number = 8;
minEdgeJetty = 8;
/** /**
* The size of the vertical buffer in the center of inter-rank channels * The size of the vertical buffer in the center of inter-rank channels
* where edge control points should not be placed. * where edge control points should not be placed.
*/ */
// channelBuffer: boolean; channelBuffer: number = 4;
channelBuffer = 4;
/** /**
* Whether or not to apply the internal tree edge routing. * Whether or not to apply the internal tree edge routing.
*/ */
// edgeRouting: boolean; edgeRouting: boolean = true;
edgeRouting = true;
/** /**
* Specifies if edges should be sorted according to the order of their * Specifies if edges should be sorted according to the order of their
* opposite terminal cell in the model. * opposite terminal cell in the model.
*/ */
// sortEdges: boolean; sortEdges: boolean = false;
sortEdges = false;
/** /**
* Whether or not the tops of cells in each rank should be aligned * Whether or not the tops of cells in each rank should be aligned
* across the rank * across the rank
*/ */
// alignRanks: boolean; alignRanks: boolean = false;
alignRanks = false;
/** /**
* An array of the maximum height of cells (relative to the layout direction) * An array of the maximum height of cells (relative to the layout direction)
* per rank * per rank
*/ */
// maxRankHeight: Array<number>; maxRankHeight: CellArray | null = null;
maxRankHeight = null;
/** /**
* The cell to use as the root of the tree * The cell to use as the root of the tree
*/ */
// root: mxCell; root: Cell | null = null;
root = null;
/** /**
* The internal node representation of the root cell. Do not set directly * The internal node representation of the root cell. Do not set directly
@ -218,24 +198,21 @@ class mxCompactTreeLayout extends mxGraphLayout {
* *
* @param vertex {@link mxCell} whose ignored state should be returned. * @param vertex {@link mxCell} whose ignored state should be returned.
*/ */
// isVertexIgnored(vertex: mxCell): boolean; isVertexIgnored(vertex: Cell): boolean {
isVertexIgnored(vertex) {
return ( return (
super.isVertexIgnored(vertex) || super.isVertexIgnored(vertex) || this.graph.getConnections(vertex).length === 0
this.graph.getConnections(vertex).length === 0
); );
} }
/** /**
* Returns {@link horizontal}. * Returns {@link horizontal}.
*/ */
// isHorizontal(): boolean; isHorizontal(): boolean {
isHorizontal() {
return this.horizontal; return this.horizontal;
} }
/** /**
* Implements {@link mxGraphLayout.execute}. * Implements {@link GraphLayout.execute}.
* *
* If the parent has any connected edges, then it is used as the root of * If the parent has any connected edges, then it is used as the root of
* the tree. Else, {@link mxGraph.findTreeRoots} will be used to find a suitable * the tree. Else, {@link mxGraph.findTreeRoots} will be used to find a suitable
@ -244,21 +221,15 @@ class mxCompactTreeLayout extends mxGraphLayout {
* @param parent {@link mxCell} whose children should be laid out. * @param parent {@link mxCell} whose children should be laid out.
* @param root Optional {@link mxCell} that will be used as the root of the tree. Overrides {@link root} if specified. * @param root Optional {@link mxCell} that will be used as the root of the tree. Overrides {@link root} if specified.
*/ */
// execute(parent: mxCell, root?: mxCell): void; execute(parent: Cell, root?: Cell): void {
execute(parent, root) {
this.parent = parent; this.parent = parent;
const model = this.graph.getModel(); const model = this.graph.getModel();
if (root == null) { if (root == null) {
// Takes the parent as the root if it has outgoing edges // Takes the parent as the root if it has outgoing edges
if ( if (
this.graph.getEdges( this.graph.getEdges(parent, parent.getParent(), this.invert, !this.invert, false)
parent, .length > 0
parent.getParent(),
this.invert,
!this.invert,
false
).length > 0
) { ) {
this.root = parent; this.root = parent;
} }
@ -272,13 +243,8 @@ class mxCompactTreeLayout extends mxGraphLayout {
for (let i = 0; i < roots.length; i += 1) { for (let i = 0; i < roots.length; i += 1) {
if ( if (
!this.isVertexIgnored(roots[i]) && !this.isVertexIgnored(roots[i]) &&
this.graph.getEdges( this.graph.getEdges(roots[i], null, this.invert, !this.invert, false)
roots[i], .length > 0
null,
this.invert,
!this.invert,
false
).length > 0
) { ) {
this.root = roots[i]; this.root = roots[i];
break; break;
@ -395,8 +361,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
/** /**
* Moves the specified node and all of its children by the given amount. * Moves the specified node and all of its children by the given amount.
*/ */
// moveNode(node: any, dx: number, dy: number): void; moveNode(node: any, dx: number, dy: number): void {
moveNode(node, dx, dy) {
node.x += dx; node.x += dx;
node.y += dy; node.y += dy;
this.apply(node); this.apply(node);
@ -412,8 +377,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
/** /**
* Called if {@link sortEdges} is true to sort the array of outgoing edges in place. * Called if {@link sortEdges} is true to sort the array of outgoing edges in place.
*/ */
// sortOutgoingEdges(source: mxCell, edges: Array<mxCell>): void; sortOutgoingEdges(source: Cell, edges: CellArray): void {
sortOutgoingEdges(source, edges) {
const lookup = new Dictionary(); const lookup = new Dictionary();
edges.sort((e1, e2) => { edges.sort((e1, e2) => {
@ -441,12 +405,8 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Stores the maximum height (relative to the layout * Stores the maximum height (relative to the layout
* direction) of cells in each rank * direction) of cells in each rank
*/ */
// findRankHeights(node: any, rank: number): void; findRankHeights(node: any, rank: number): void {
findRankHeights(node, rank) { if (this.maxRankHeight[rank] == null || this.maxRankHeight[rank] < node.height) {
if (
this.maxRankHeight[rank] == null ||
this.maxRankHeight[rank] < node.height
) {
this.maxRankHeight[rank] = node.height; this.maxRankHeight[rank] = node.height;
} }
@ -462,12 +422,8 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Set the cells heights (relative to the layout * Set the cells heights (relative to the layout
* direction) when the tops of each rank are to be aligned * direction) when the tops of each rank are to be aligned
*/ */
// setCellHeights(node: any, rank: number): void; setCellHeights(node: any, rank: number): void {
setCellHeights(node, rank) { if (this.maxRankHeight[rank] != null && this.maxRankHeight[rank] > node.height) {
if (
this.maxRankHeight[rank] != null &&
this.maxRankHeight[rank] > node.height
) {
node.height = this.maxRankHeight[rank]; node.height = this.maxRankHeight[rank];
} }
@ -490,11 +446,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
const id = CellPath.create(cell); const id = CellPath.create(cell);
let node = null; let node = null;
if ( if (cell != null && this.visited[id] == null && !this.isVertexIgnored(cell)) {
cell != null &&
this.visited[id] == null &&
!this.isVertexIgnored(cell)
) {
this.visited[id] = cell; this.visited[id] = cell;
node = this.createNode(cell); node = this.createNode(cell);
@ -556,21 +508,18 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm * Starts the actual compact tree layout algorithm
* at the given node. * at the given node.
*/ */
// layout(node: any): void; layout(node: any): void {
layout(node) { let { child } = node;
if (node != null) {
let { child } = node;
while (child != null) { while (child != null) {
this.layout(child); this.layout(child);
child = child.next; child = child.next;
} }
if (node.child != null) { if (node.child != null) {
this.attachParent(node, this.join(node)); this.attachParent(node, this.join(node));
} else { } else {
this.layoutLeaf(node); this.layoutLeaf(node);
}
} }
} }
@ -578,8 +527,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm * Starts the actual compact tree layout algorithm
* at the given node. * at the given node.
*/ */
// horizontalLayout(node: any, x0: number, y0: number, bounds: mxRectangle): mxRectangle; horizontalLayout(node: any, x0: number, y0: number, bounds: Rectangle): Rectangle {
horizontalLayout(node, x0, y0, bounds) {
node.x += x0 + node.offsetX; node.x += x0 + node.offsetX;
node.y += y0 + node.offsetY; node.y += y0 + node.offsetY;
bounds = this.apply(node, bounds); bounds = this.apply(node, bounds);
@ -591,12 +539,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
let s = child.next; let s = child.next;
while (s != null) { while (s != null) {
bounds = this.horizontalLayout( bounds = this.horizontalLayout(s, node.x + child.offsetX, siblingOffset, bounds);
s,
node.x + child.offsetX,
siblingOffset,
bounds
);
siblingOffset += s.offsetY; siblingOffset += s.offsetY;
s = s.next; s = s.next;
} }
@ -641,8 +584,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm * Starts the actual compact tree layout algorithm
* at the given node. * at the given node.
*/ */
// attachParent(node: any, height: number): void; attachParent(node: any, height: number): void {
attachParent(node, height) {
const x = this.nodeDistance + this.levelDistance; const x = this.nodeDistance + this.levelDistance;
const y2 = (height - node.width) / 2 - this.nodeDistance; const y2 = (height - node.width) / 2 - this.nodeDistance;
const y1 = y2 + node.width + 2 * this.nodeDistance - height; const y1 = y2 + node.width + 2 * this.nodeDistance - height;
@ -667,7 +609,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* at the given node. * at the given node.
*/ */
// layoutLeaf(node: any): void; // layoutLeaf(node: any): void;
layoutLeaf(node) { layoutLeaf(node: any): void {
const dist = 2 * this.nodeDistance; const dist = 2 * this.nodeDistance;
node.contour.upperTail = this.createLine(node.height + dist, 0); node.contour.upperTail = this.createLine(node.height + dist, 0);
@ -684,8 +626,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm * Starts the actual compact tree layout algorithm
* at the given node. * at the given node.
*/ */
// join(node: any): number; join(node: any): number {
join(node) {
const dist = 2 * this.nodeDistance; const dist = 2 * this.nodeDistance;
let { child } = node; let { child } = node;
@ -710,8 +651,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm * Starts the actual compact tree layout algorithm
* at the given node. * at the given node.
*/ */
// merge(p1: any, p2: any): number; merge(p1: any, p2: any): number {
merge(p1, p2) {
let x = 0; let x = 0;
let y = 0; let y = 0;
let total = 0; let total = 0;
@ -757,7 +697,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* at the given node. * at the given node.
*/ */
// offset(p1: number, p2: number, a1: number, a2: number, b1: number, b2: number): number; // offset(p1: number, p2: number, a1: number, a2: number, b1: number, b2: number): number;
offset(p1, p2, a1, a2, b1, b2) { offset(p1: number, p2: number, a1: number, a2: number, b1: number, b2: number): number {
let d = 0; let d = 0;
if (b1 <= p1 || p1 + a1 <= 0) { if (b1 <= p1 || p1 + a1 <= 0) {
@ -849,8 +789,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm * Starts the actual compact tree layout algorithm
* at the given node. * at the given node.
*/ */
// apply(node: any, bounds: mxRectangle): mxRectangle; apply(node: any, bounds: Rectangle): Rectangle {
apply(node, bounds) {
const model = this.graph.getModel(); const model = this.graph.getModel();
const { cell } = node; const { cell } = node;
let g = cell.getGeometry(); let g = cell.getGeometry();
@ -904,8 +843,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* implementation adjusts the group to just fit around the children with * implementation adjusts the group to just fit around the children with
* a padding. * a padding.
*/ */
// adjustParents(): void; adjustParents(): void {
adjustParents() {
const tmp = []; const tmp = [];
for (const id in this.parentsChanged) { for (const id in this.parentsChanged) {
@ -913,7 +851,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
} }
this.arrangeGroups( this.arrangeGroups(
utils.sortCells(tmp, true), sortCells(tmp, true),
this.groupPadding, this.groupPadding,
this.groupPaddingTop, this.groupPaddingTop,
this.groupPaddingRight, this.groupPaddingRight,
@ -1036,4 +974,4 @@ class mxCompactTreeLayout extends mxGraphLayout {
} }
} }
export default mxCompactTreeLayout; export default CompactTreeLayout;

6
packages/core/src/view/layout/layout/mxCompositeLayout.js → packages/core/src/view/layout/layout/CompositeLayout.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
/** /**
* Class: mxCompositeLayout * Class: mxCompositeLayout
@ -34,7 +34,7 @@ import mxGraphLayout from './mxGraphLayout';
* master - Optional layout that handles moves. If no layout is given then * master - Optional layout that handles moves. If no layout is given then
* the first layout of the above array is used to handle moves. * the first layout of the above array is used to handle moves.
*/ */
class mxCompositeLayout extends mxGraphLayout { class CompositeLayout extends GraphLayout {
constructor(graph, layouts, master) { constructor(graph, layouts, master) {
super(graph); super(graph);
this.layouts = layouts; this.layouts = layouts;
@ -90,4 +90,4 @@ class mxCompositeLayout extends mxGraphLayout {
} }
} }
export default mxCompositeLayout; export default CompositeLayout;

27
packages/core/src/view/layout/layout/mxEdgeLabelLayout.js → packages/core/src/view/layout/layout/EdgeLabelLayout.ts
View File

@ -6,8 +6,12 @@
*/ */
import Point from '../../geometry/Point'; import Point from '../../geometry/Point';
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import utils from '../../../util/Utils'; import utils, { intersects } from '../../../util/Utils';
import Cell from '../../cell/datatypes/Cell';
import Graph from '../../Graph';
import CellArray from '../../cell/datatypes/CellArray';
import CellState from '../../cell/datatypes/CellState';
/** /**
* Extends <mxGraphLayout> to implement an edge label layout. This layout * Extends <mxGraphLayout> to implement an edge label layout. This layout
@ -21,16 +25,15 @@ import utils from '../../../util/Utils';
* layout.execute(graph.getDefaultParent()); * layout.execute(graph.getDefaultParent());
* ``` * ```
*/ */
class mxEdgeLabelLayout extends mxGraphLayout { class EdgeLabelLayout extends GraphLayout {
constructor(graph, radius) { constructor(graph: Graph, radius: number) {
super(graph); super(graph);
} }
/** /**
* Implements {@link mxGraphLayout.execute} * Implements {@link GraphLayout.execute}
*/ */
// execute(parent: mxCell): void; execute(parent: Cell): void {
execute(parent) {
const { view } = this.graph; const { view } = this.graph;
const model = this.graph.getModel(); const model = this.graph.getModel();
@ -61,8 +64,7 @@ class mxEdgeLabelLayout extends mxGraphLayout {
* @param v vertexes * @param v vertexes
* @param e edges * @param e edges
*/ */
// placeLabels(v: Array<mxCell>, e: Array<mxCell>): void; placeLabels(v: CellState[], e: CellState[]): void {
placeLabels(v, e) {
const model = this.graph.getModel(); const model = this.graph.getModel();
// Moves the vertices to build a circle. Makes sure the // Moves the vertices to build a circle. Makes sure the
@ -95,12 +97,11 @@ class mxEdgeLabelLayout extends mxGraphLayout {
/** /**
* Places the labels of the given edges. * Places the labels of the given edges.
*/ */
// avoid(edge: mxCell, vertex: mxCell): void; avoid(edge: Cell, vertex: Cell): void {
avoid(edge, vertex) {
const model = this.graph.getModel(); const model = this.graph.getModel();
const labRect = edge.text.boundingBox; const labRect = edge.text.boundingBox;
if (utils.intersects(labRect, vertex)) { if (intersects(labRect, vertex)) {
const dy1 = -labRect.y - labRect.height + vertex.y; const dy1 = -labRect.y - labRect.height + vertex.y;
const dy2 = -labRect.y + vertex.y + vertex.height; const dy2 = -labRect.y + vertex.y + vertex.height;
@ -135,4 +136,4 @@ class mxEdgeLabelLayout extends mxGraphLayout {
} }
} }
export default mxEdgeLabelLayout; export default EdgeLabelLayout;

45
packages/core/src/view/layout/layout/mxFastOrganicLayout.js → packages/core/src/view/layout/layout/FastOrganicLayout.ts
View File

@ -5,7 +5,9 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxObjectIdentity from '../../../util/mxObjectIdentity'; import mxObjectIdentity from '../../../util/mxObjectIdentity';
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import Graph from '../../Graph';
import Cell from '../../cell/datatypes/Cell';
/** /**
* Class: mxFastOrganicLayout * Class: mxFastOrganicLayout
@ -25,46 +27,40 @@ import mxGraphLayout from './mxGraphLayout';
* *
* Constructs a new fast organic layout for the specified graph. * Constructs a new fast organic layout for the specified graph.
*/ */
class mxFastOrganicLayout extends mxGraphLayout { class MxFastOrganicLayout extends GraphLayout {
constructor(graph) { constructor(graph: Graph) {
super(graph); super(graph);
} }
/** /**
* Specifies if the top left corner of the input cells should be the origin of the layout result. Default is true. * Specifies if the top left corner of the input cells should be the origin of the layout result. Default is true.
*/ */
// useInputOrigin: boolean; useInputOrigin: boolean = true;
useInputOrigin = true;
/** /**
* Specifies if all edge points of traversed edges should be removed. Default is true. * Specifies if all edge points of traversed edges should be removed. Default is true.
*/ */
// resetEdges: boolean; resetEdges: boolean = true;
resetEdges = true;
/** /**
* Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true. * Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true.
*/ */
// disableEdgeStyle: boolean; disableEdgeStyle: boolean = true;
disableEdgeStyle = true;
/** /**
* The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of. The value equates to the average radius there is of free space around each node. Default is 50. * The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of. The value equates to the average radius there is of free space around each node. Default is 50.
*/ */
// forceConstant: number; forceConstant: number = 50;
forceConstant = 50;
/** /**
* Cache of <forceConstant>^2 for performance. * Cache of <forceConstant>^2 for performance.
*/ */
// forceConstantSquared: any; forceConstantSquared: any = 0;
forceConstantSquared = 0;
/** /**
* Minimal distance limit. Default is 2. Prevents of dividing by zero. * Minimal distance limit. Default is 2. Prevents of dividing by zero.
*/ */
// minDistanceLimit: number; minDistanceLimit: number = 2;
minDistanceLimit = 2;
/** /**
* Variable: maxDistanceLimit * Variable: maxDistanceLimit
@ -72,41 +68,40 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Maximal distance limit. Default is 500. Prevents of * Maximal distance limit. Default is 500. Prevents of
* dividing by zero. * dividing by zero.
*/ */
maxDistanceLimit = 500; maxDistanceLimit: number = 500;
/** /**
* Cached version of minDistanceLimit squared. * Cached version of minDistanceLimit squared.
*/ */
// minDistanceLimitSquared: number; minDistanceLimitSquared: number = 4;
minDistanceLimitSquared = 4;
/** /**
* Variable: initialTemp * Variable: initialTemp
* *
* Start value of temperature. Default is 200. * Start value of temperature. Default is 200.
*/ */
initialTemp = 200; initialTemp: number = 200;
/** /**
* Variable: temperature * Variable: temperature
* *
* Temperature to limit displacement at later stages of layout. * Temperature to limit displacement at later stages of layout.
*/ */
temperature = 0; temperature: number = 0;
/** /**
* Variable: maxIterations * Variable: maxIterations
* *
* Total number of iterations to run the layout though. * Total number of iterations to run the layout though.
*/ */
maxIterations = 0; maxIterations: number = 0;
/** /**
* Variable: iteration * Variable: iteration
* *
* Current iteration count. * Current iteration count.
*/ */
iteration = 0; iteration: number = 0;
/** /**
* Variable: vertexArray * Variable: vertexArray
@ -189,7 +184,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
* *
* vertex - <mxCell> whose ignored state should be returned. * vertex - <mxCell> whose ignored state should be returned.
*/ */
isVertexIgnored(vertex) { isVertexIgnored(vertex: Cell) {
return ( return (
super.isVertexIgnored(vertex) || super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0 this.graph.getConnections(vertex).length === 0
@ -202,7 +197,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. This operates on all children of the * Implements <mxGraphLayout.execute>. This operates on all children of the
* given parent where <isVertexIgnored> returns false. * given parent where <isVertexIgnored> returns false.
*/ */
execute(parent) { execute(parent: Cell) {
const model = this.graph.getModel(); const model = this.graph.getModel();
this.vertexArray = []; this.vertexArray = [];
let cells = this.graph.getChildVertices(parent); let cells = this.graph.getChildVertices(parent);
@ -539,4 +534,4 @@ class mxFastOrganicLayout extends mxGraphLayout {
} }
} }
export default mxFastOrganicLayout; export default MxFastOrganicLayout;

73
packages/core/src/view/layout/layout/mxGraphLayout.js → packages/core/src/view/layout/layout/GraphLayout.ts
View File

@ -9,9 +9,12 @@ import Dictionary from '../../../util/Dictionary';
import Rectangle from '../../geometry/Rectangle'; import Rectangle from '../../geometry/Rectangle';
import Geometry from '../../geometry/Geometry'; import Geometry from '../../geometry/Geometry';
import Point from '../../geometry/Point'; import Point from '../../geometry/Point';
import Graph from '../../Graph';
import Cell from '../../cell/datatypes/Cell';
import CellArray from '../../cell/datatypes/CellArray';
/** /**
* @class mxGraphLayout * @class GraphLayout
* *
* Base class for all layout algorithms in mxGraph. Main public functions are * Base class for all layout algorithms in mxGraph. Main public functions are
* {@link moveCell} for handling a moved cell within a layouted parent, and {@link execute} for * {@link moveCell} for handling a moved cell within a layouted parent, and {@link execute} for
@ -23,29 +26,26 @@ import Point from '../../geometry/Point';
* {@link mxFastOrganicLayout}, {@link mxParallelEdgeLayout}, {@link mxPartitionLayout}, * {@link mxFastOrganicLayout}, {@link mxParallelEdgeLayout}, {@link mxPartitionLayout},
* {@link mxStackLayout} * {@link mxStackLayout}
*/ */
class mxGraphLayout { class GraphLayout {
constructor(graph) { constructor(graph: Graph) {
this.graph = graph; this.graph = graph;
} }
/** /**
* Reference to the enclosing {@link mxGraph}. * Reference to the enclosing {@link mxGraph}.
*/ */
// graph: mxGraph; graph: Graph = null;
graph = null;
/** /**
* Boolean indicating if the bounding box of the label should be used if * Boolean indicating if the bounding box of the label should be used if
* its available. Default is true. * its available. Default is true.
*/ */
// useBoundingBox: boolean; useBoundingBox: boolean = true;
useBoundingBox = true;
/** /**
* The parent cell of the layout, if any * The parent cell of the layout, if any
*/ */
// parent: mxCell; parent: Cell = null;
parent = null;
/** /**
* Notified when a cell is being moved in a parent that has automatic * Notified when a cell is being moved in a parent that has automatic
@ -59,8 +59,7 @@ class mxGraphLayout {
* @param x X-coordinate of the new cell location. * @param x X-coordinate of the new cell location.
* @param y Y-coordinate of the new cell location. * @param y Y-coordinate of the new cell location.
*/ */
// moveCell(cell: mxCell, x: number, y: number): void; moveCell(cell: Cell, x: number, y: number): void {}
moveCell(cell, x, y) {}
/** /**
* Function: resizeCell * Function: resizeCell
@ -75,21 +74,19 @@ class mxGraphLayout {
* cell - <mxCell> which has been moved. * cell - <mxCell> which has been moved.
* bounds - <mxRectangle> that represents the new cell bounds. * bounds - <mxRectangle> that represents the new cell bounds.
*/ */
resizeCell(cell, bounds) {} resizeCell(cell: Cell, bounds: Rectangle) {}
/** /**
* Executes the layout algorithm for the children of the given parent. * Executes the layout algorithm for the children of the given parent.
* *
* @param parent {@link mxCell} whose children should be layed out. * @param parent {@link mxCell} whose children should be layed out.
*/ */
// execute(parent: mxCell): void; execute(parent: Cell): void {}
execute(parent) {}
/** /**
* Returns the graph that this layout operates on. * Returns the graph that this layout operates on.
*/ */
// getGraph(): mxGraph; getGraph(): Graph {
getGraph() {
return this.graph; return this.graph;
} }
@ -106,8 +103,7 @@ class mxGraphLayout {
* @param source Optional boolean that specifies if the connection is incoming * @param source Optional boolean that specifies if the connection is incoming
* or outgoing. Default is null. * or outgoing. Default is null.
*/ */
// getConstraint(key: string, cell: mxCell, edge?: mxCell, source?: boolean): any; getConstraint(key: string, cell: Cell, edge?: Cell, source?: boolean): any {
getConstraint(key, cell, edge, source) {
return this.graph.getCurrentCellStyle(cell)[key]; return this.graph.getCurrentCellStyle(cell)[key];
} }
@ -138,8 +134,7 @@ class mxGraphLayout {
* null for the first step of the traversal. * null for the first step of the traversal.
* @param visited Optional {@link Dictionary} of cell paths for the visited cells. * @param visited Optional {@link Dictionary} of cell paths for the visited cells.
*/ */
// traverse(vertex: mxCell, directed?: boolean, func?: Function, edge?: mxCell, visited?: mxDictionary): void; traverse(vertex: Cell, directed?: boolean, func?: Function, edge?: Cell, visited?: Dictionary<Cell, boolean>): void {
traverse(vertex, directed, func, edge, visited) {
if (func != null && vertex != null) { if (func != null && vertex != null) {
directed = directed != null ? directed : true; directed = directed != null ? directed : true;
visited = visited || new Dictionary(); visited = visited || new Dictionary();
@ -174,8 +169,7 @@ class mxGraphLayout {
* @param child {@link mxCell} that specifies the child. * @param child {@link mxCell} that specifies the child.
* @param traverseAncestors boolean whether to * @param traverseAncestors boolean whether to
*/ */
// isAncestor(parent: mxCell, child: mxCell, traverseAncestors?: boolean): boolean; isAncestor(parent: Cell, child: Cell, traverseAncestors?: boolean): boolean {
isAncestor(parent, child, traverseAncestors) {
if (!traverseAncestors) { if (!traverseAncestors) {
return child.getParent() === parent; return child.getParent() === parent;
} }
@ -198,9 +192,8 @@ class mxGraphLayout {
* *
* @param cell {@link mxCell} whose movable state should be returned. * @param cell {@link mxCell} whose movable state should be returned.
*/ */
// isVertexMovable(cell: mxCell): boolean; isVertexMovable(cell: Cell): boolean {
isVertexMovable(cell) { return this.graph.cell.isCellMovable(cell);
return this.graph.isCellMovable(cell);
} }
/** /**
@ -209,8 +202,7 @@ class mxGraphLayout {
* *
* @param vertex {@link mxCell} whose ignored state should be returned. * @param vertex {@link mxCell} whose ignored state should be returned.
*/ */
// isVertexIgnored(vertex: mxCell): boolean; isVertexIgnored(vertex: Cell): boolean {
isVertexIgnored(vertex) {
return !vertex.isVertex() || !vertex.isVisible(); return !vertex.isVertex() || !vertex.isVisible();
} }
@ -220,8 +212,7 @@ class mxGraphLayout {
* *
* @param cell {@link mxCell} whose ignored state should be returned. * @param cell {@link mxCell} whose ignored state should be returned.
*/ */
// isEdgeIgnored(edge: mxCell): boolean; isEdgeIgnored(edge: Cell): boolean {
isEdgeIgnored(edge) {
const model = this.graph.getModel(); const model = this.graph.getModel();
return ( return (
@ -235,16 +226,14 @@ class mxGraphLayout {
/** /**
* Disables or enables the edge style of the given edge. * Disables or enables the edge style of the given edge.
*/ */
// setEdgeStyleEnabled(edge: mxCell, value: any): void; setEdgeStyleEnabled(edge: Cell, value: any): void {
setEdgeStyleEnabled(edge, value) {
this.graph.setCellStyles('noEdgeStyle', value ? '0' : '1', [edge]); this.graph.setCellStyles('noEdgeStyle', value ? '0' : '1', [edge]);
} }
/** /**
* Disables or enables orthogonal end segments of the given edge. * Disables or enables orthogonal end segments of the given edge.
*/ */
// setOrthogonalEdge(edge: mxCell, value: any): void; setOrthogonalEdge(edge: Cell, value: any): void {
setOrthogonalEdge(edge, value) {
this.graph.setCellStyles('orthogonal', value ? '1' : '0', [edge]); this.graph.setCellStyles('orthogonal', value ? '1' : '0', [edge]);
} }
@ -252,8 +241,7 @@ class mxGraphLayout {
* Determines the offset of the given parent to the parent * Determines the offset of the given parent to the parent
* of the layout * of the layout
*/ */
// getParentOffset(parent: mxCell): mxPoint; getParentOffset(parent: Cell): Point {
getParentOffset(parent) {
const result = new Point(); const result = new Point();
if (parent != null && parent !== this.parent) { if (parent != null && parent !== this.parent) {
@ -280,8 +268,7 @@ class mxGraphLayout {
* Replaces the array of mxPoints in the geometry of the given edge * Replaces the array of mxPoints in the geometry of the given edge
* with the given array of mxPoints. * with the given array of mxPoints.
*/ */
// setEdgePoints(edge: mxCell, points: Array<mxPoint>): void; setEdgePoints(edge: Cell, points: Point[]): void {
setEdgePoints(edge, points) {
if (edge != null) { if (edge != null) {
const { model } = this.graph; const { model } = this.graph;
let geometry = edge.getGeometry(); let geometry = edge.getGeometry();
@ -320,8 +307,7 @@ class mxGraphLayout {
* @param x Integer that defines the x-coordinate of the new location. * @param x Integer that defines the x-coordinate of the new location.
* @param y Integer that defines the y-coordinate of the new location. * @param y Integer that defines the y-coordinate of the new location.
*/ */
// setVertexLocation(cell: mxCell, x: number, y: number): mxRectangle; setVertexLocation(cell: Cell, x: number, y: number): Rectangle {
setVertexLocation(cell, x, y) {
const model = this.graph.getModel(); const model = this.graph.getModel();
let geometry = cell.getGeometry(); let geometry = cell.getGeometry();
let result = null; let result = null;
@ -381,8 +367,7 @@ class mxGraphLayout {
* Returns an {@link Rectangle} that defines the bounds of the given cell or * Returns an {@link Rectangle} that defines the bounds of the given cell or
* the bounding box if {@link useBoundingBox} is true. * the bounding box if {@link useBoundingBox} is true.
*/ */
// getVertexBounds(cell: mxCell): mxRectangle; getVertexBounds(cell: Cell): Rectangle {
getVertexBounds(cell) {
let geo = cell.getGeometry(); let geo = cell.getGeometry();
// Checks for oversize label bounding box and corrects // Checks for oversize label bounding box and corrects
@ -435,8 +420,8 @@ class mxGraphLayout {
* Shortcut to <mxGraph.updateGroupBounds> with moveGroup set to true. * Shortcut to <mxGraph.updateGroupBounds> with moveGroup set to true.
*/ */
arrangeGroups( arrangeGroups(
cells, cells: CellArray,
border, border: Rectangle,
topBorder, topBorder,
rightBorder, rightBorder,
bottomBorder, bottomBorder,
@ -454,4 +439,4 @@ class mxGraphLayout {
} }
} }
export default mxGraphLayout; export default GraphLayout;

25
packages/core/src/view/layout/layout/mxParallelEdgeLayout.js → packages/core/src/view/layout/layout/ParallelEdgeLayout.ts
View File

@ -6,8 +6,11 @@
*/ */
import Point from '../../geometry/Point'; import Point from '../../geometry/Point';
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import mxObjectIdentity from '../../../util/mxObjectIdentity'; import mxObjectIdentity from '../../../util/mxObjectIdentity';
import Graph from '../../Graph';
import CellArray from '../../cell/datatypes/CellArray';
import Cell from '../../cell/datatypes/Cell';
/** /**
* Class: mxParallelEdgeLayout * Class: mxParallelEdgeLayout
@ -52,8 +55,8 @@ import mxObjectIdentity from '../../../util/mxObjectIdentity';
* *
* Constructs a new parallel edge layout for the specified graph. * Constructs a new parallel edge layout for the specified graph.
*/ */
class mxParallelEdgeLayout extends mxGraphLayout { class ParallelEdgeLayout extends GraphLayout {
constructor(graph) { constructor(graph: Graph) {
super(graph); super(graph);
} }
@ -62,7 +65,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* *
* Defines the spacing between the parallels. Default is 20. * Defines the spacing between the parallels. Default is 20.
*/ */
spacing = 20; spacing: number = 20;
/** /**
* Variable: checkOverlap * Variable: checkOverlap
@ -70,14 +73,14 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* Specifies if only overlapping edges should be considered * Specifies if only overlapping edges should be considered
* parallel. Default is false. * parallel. Default is false.
*/ */
checkOverlap = false; checkOverlap: boolean = false;
/** /**
* Function: execute * Function: execute
* *
* Implements <mxGraphLayout.execute>. * Implements <mxGraphLayout.execute>.
*/ */
execute(parent, cells) { execute(parent: Cell, cells: CellArray) {
const lookup = this.findParallels(parent, cells); const lookup = this.findParallels(parent, cells);
this.graph.model.beginUpdate(); this.graph.model.beginUpdate();
@ -99,7 +102,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* *
* Finds the parallel edges in the given parent. * Finds the parallel edges in the given parent.
*/ */
findParallels(parent, cells) { findParallels(parent: Cell, cells: CellArray) {
const lookup = []; const lookup = [];
const addCell = cell => { const addCell = cell => {
@ -139,7 +142,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* edge direction and is built using the visible terminal of the given * edge direction and is built using the visible terminal of the given
* edge. * edge.
*/ */
getEdgeId(edge) { getEdgeId(edge: Cell) {
const view = this.graph.getView(); const view = this.graph.getView();
// Cannot used cached visible terminal because this could be triggered in BEFORE_UNDO // Cannot used cached visible terminal because this could be triggered in BEFORE_UNDO
@ -177,7 +180,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* *
* Lays out the parallel edges in the given array. * Lays out the parallel edges in the given array.
*/ */
layout(parallels) { layout(parallels: CellArray) {
const edge = parallels[0]; const edge = parallels[0];
const view = this.graph.getView(); const view = this.graph.getView();
const model = this.graph.getModel(); const model = this.graph.getModel();
@ -233,11 +236,11 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* *
* Routes the given edge via the given point. * Routes the given edge via the given point.
*/ */
route(edge, x, y) { route(edge: Cell, x: number, y: number) {
if (this.graph.isCellMovable(edge)) { if (this.graph.isCellMovable(edge)) {
this.setEdgePoints(edge, [new Point(x, y)]); this.setEdgePoints(edge, [new Point(x, y)]);
} }
} }
} }
export default mxParallelEdgeLayout; export default ParallelEdgeLayout;

33
packages/core/src/view/layout/layout/mxPartitionLayout.js → packages/core/src/view/layout/layout/PartitionLayout.ts
View File

@ -6,7 +6,9 @@
*/ */
import Rectangle from '../../geometry/Rectangle'; import Rectangle from '../../geometry/Rectangle';
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import Graph from '../../Graph';
import Cell from '../../cell/datatypes/Cell';
/** /**
* Extends <mxGraphLayout> for partitioning the parent cell vertically or * Extends <mxGraphLayout> for partitioning the parent cell vertically or
@ -25,8 +27,8 @@ import mxGraphLayout from './mxGraphLayout';
* ``` * ```
* @class * @class
*/ */
class mxPartitionLayout extends mxGraphLayout { class PartitionLayout extends GraphLayout {
constructor(graph, horizontal, spacing, border) { constructor(graph: Graph, horizontal: boolean=true, spacing: number=0, border: number=0) {
super(graph); super(graph);
this.horizontal = horizontal != null ? horizontal : true; this.horizontal = horizontal != null ? horizontal : true;
this.spacing = spacing || 0; this.spacing = spacing || 0;
@ -37,47 +39,41 @@ class mxPartitionLayout extends mxGraphLayout {
* Boolean indicating the direction in which the space is partitioned. * Boolean indicating the direction in which the space is partitioned.
* Default is true. * Default is true.
*/ */
// horizontal: boolean; horizontal: boolean;
horizontal = null;
/** /**
* Integer that specifies the absolute spacing in pixels between the * Integer that specifies the absolute spacing in pixels between the
* children. Default is 0. * children. Default is 0.
*/ */
// spacing: number; spacing: number;
spacing = null;
/** /**
* Integer that specifies the absolute inset in pixels for the parent that * Integer that specifies the absolute inset in pixels for the parent that
* contains the children. Default is 0. * contains the children. Default is 0.
*/ */
// border: number; border: number;
border = null;
/** /**
* Boolean that specifies if vertices should be resized. Default is true. * Boolean that specifies if vertices should be resized. Default is true.
*/ */
// resizeVertices: boolean; resizeVertices: boolean = true;
resizeVertices = true;
/** /**
* Returns <horizontal>. * Returns <horizontal>.
*/ */
// isHorizontal(): boolean; isHorizontal(): boolean {
isHorizontal() {
return this.horizontal; return this.horizontal;
} }
/** /**
* Implements {@link mxGraphLayout.moveCell}. * Implements {@link GraphLayout.moveCell}.
* *
* @param {mxCell} cell * @param {mxCell} cell
* @param {number} x * @param {number} x
* @param {number} y * @param {number} y
* @memberof mxPartitionLayout * @memberof mxPartitionLayout
*/ */
// moveCell(cell: mxCell, x: number, y: number): void; moveCell(cell: Cell, x: number, y: number): void {
moveCell(cell, x, y) {
const model = this.graph.getModel(); const model = this.graph.getModel();
const parent = cell.getParent(); const parent = cell.getParent();
@ -115,8 +111,7 @@ class mxPartitionLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. All children where <isVertexIgnored> * Implements <mxGraphLayout.execute>. All children where <isVertexIgnored>
* returns false and <isVertexMovable> returns true are modified. * returns false and <isVertexMovable> returns true are modified.
*/ */
// execute(parent: mxCell): void; execute(parent: Cell): void {
execute(parent) {
const horizontal = this.isHorizontal(); const horizontal = this.isHorizontal();
const model = this.graph.getModel(); const model = this.graph.getModel();
let pgeo = parent.getGeometry(); let pgeo = parent.getGeometry();
@ -209,4 +204,4 @@ class mxPartitionLayout extends mxGraphLayout {
} }
} }
export default mxPartitionLayout; export default PartitionLayout;

59
packages/core/src/view/layout/layout/mxRadialTreeLayout.js → packages/core/src/view/layout/layout/RadialTreeLayout.ts
View File

@ -4,7 +4,10 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxCompactTreeLayout from './mxCompactTreeLayout'; import CompactTreeLayout from './CompactTreeLayout';
import Cell from '../../cell/datatypes/Cell';
import Graph from '../../Graph';
import CellArray from '../../cell/datatypes/CellArray';
/** /**
* Extends {@link mxGraphLayout} to implement a radial tree algorithm. This * Extends {@link mxGraphLayout} to implement a radial tree algorithm. This
@ -17,8 +20,8 @@ import mxCompactTreeLayout from './mxCompactTreeLayout';
* layout.execute(graph.getDefaultParent()); * layout.execute(graph.getDefaultParent());
* ``` * ```
*/ */
class mxRadialTreeLayout extends mxCompactTreeLayout { class RadialTreeLayout extends CompactTreeLayout {
constructor(graph) { constructor(graph: Graph) {
super(graph, false); super(graph, false);
} }
@ -26,89 +29,76 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* The initial offset to compute the angle position. * The initial offset to compute the angle position.
* @default 0.5 * @default 0.5
*/ */
// angleOffset: number; angleOffset: number = 0.5;
angleOffset = 0.5;
/** /**
* The X co-ordinate of the root cell * The X co-ordinate of the root cell
* @default 0 * @default 0
*/ */
// rootx: number; rootx: number = 0;
rootx = 0;
/** /**
* The Y co-ordinate of the root cell * The Y co-ordinate of the root cell
* @default 0 * @default 0
*/ */
// rooty: number; rooty: number = 0;
rooty = 0;
/** /**
* Holds the levelDistance. * Holds the levelDistance.
* @default 120 * @default 120
*/ */
// levelDistance: number; levelDistance: number = 120;
levelDistance = 120;
/** /**
* Holds the nodeDistance. * Holds the nodeDistance.
* @default 10 * @default 10
*/ */
// nodeDistance: number; nodeDistance: number = 10;
nodeDistance = 10;
/** /**
* Specifies if the radios should be computed automatically * Specifies if the radios should be computed automatically
* @default false * @default false
*/ */
// autoRadius: boolean; autoRadius: boolean = false;
autoRadius = false;
/** /**
* Specifies if edges should be sorted according to the order of their * Specifies if edges should be sorted according to the order of their
* opposite terminal cell in the model. * opposite terminal cell in the model.
* @default false * @default false
*/ */
// sortEdges: boolean; sortEdges: boolean = false;
sortEdges = false;
/** /**
* Array of leftmost x coordinate of each row * Array of leftmost x coordinate of each row
*/ */
// rowMinX: Array<number>; rowMinX: number[] = [];
rowMinX = [];
/** /**
* Array of rightmost x coordinate of each row * Array of rightmost x coordinate of each row
*/ */
// rowMaxX: Array<number>; rowMaxX: number[] = [];
rowMaxX = [];
/** /**
* Array of x coordinate of leftmost vertex of each row * Array of x coordinate of leftmost vertex of each row
*/ */
// rowMinCenX: Array<number>; rowMinCenX: number[] = [];
rowMinCenX = [];
/** /**
* Variable: rowMaxCenX * Variable: rowMaxCenX
* *
* Array of x coordinate of rightmost vertex of each row * Array of x coordinate of rightmost vertex of each row
*/ */
// rowMaxCenX: Array<number>; rowMaxCenX: number[] = [];
rowMaxCenX = [];
/** /**
* Array of y deltas of each row behind root vertex, also the radius in the tree * Array of y deltas of each row behind root vertex, also the radius in the tree
*/ */
// rowRadi: Array<number>; rowRadi: number[] = [];
rowRadi = [];
/** /**
* Array of vertices on each row * Array of vertices on each row
*/ */
// row: Array<mxCell>; row: CellArray = new CellArray();
row = [];
/** /**
* Returns a boolean indicating if the given {@link mxCell} should be ignored as a vertex. * Returns a boolean indicating if the given {@link mxCell} should be ignored as a vertex.
@ -116,8 +106,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* @param vertex {@link mxCell} whose ignored state should be returned. * @param vertex {@link mxCell} whose ignored state should be returned.
* @return true if the cell has no connections. * @return true if the cell has no connections.
*/ */
// isVertexIgnored(vertex: mxCell): boolean; isVertexIgnored(vertex: Cell): boolean {
isVertexIgnored(vertex) {
return ( return (
super.isVertexIgnored(vertex) || super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0 this.graph.getConnections(vertex).length === 0
@ -138,8 +127,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* @param parent {@link mxCell} whose children should be laid out. * @param parent {@link mxCell} whose children should be laid out.
* @param root Optional {@link mxCell} that will be used as the root of the tree. * @param root Optional {@link mxCell} that will be used as the root of the tree.
*/ */
// execute(parent: mxCell, root?: mxCell): void; execute(parent: Cell, root: Cell | null = null): void {
execute(parent, root) {
this.parent = parent; this.parent = parent;
this.useBoundingBox = false; this.useBoundingBox = false;
@ -250,8 +238,7 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* @param row Array of internal nodes, the children of which are to be processed. * @param row Array of internal nodes, the children of which are to be processed.
* @param rowNum Integer indicating which row is being processed. * @param rowNum Integer indicating which row is being processed.
*/ */
// calcRowDims(row: Array<number>, rowNum: number): void; calcRowDims(row: number[], rowNum: number): void {
calcRowDims(row, rowNum) {
if (row == null || row.length === 0) { if (row == null || row.length === 0) {
return; return;
} }
@ -303,4 +290,4 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
} }
} }
export default mxRadialTreeLayout; export default RadialTreeLayout;

115
packages/core/src/view/layout/layout/mxStackLayout.js → packages/core/src/view/layout/layout/StackLayout.ts
View File

@ -4,12 +4,16 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphLayout from './mxGraphLayout'; import GraphLayout from './GraphLayout';
import Rectangle from '../../geometry/Rectangle'; import Rectangle from '../../geometry/Rectangle';
import utils from '../../../util/Utils'; import utils, { getNumber } from '../../../util/Utils';
import { import {
DEFAULT_STARTSIZE, DEFAULT_STARTSIZE,
} from '../../../util/Constants'; } from '../../../util/Constants';
import Graph from '../../Graph';
import Cell from '../../cell/datatypes/Cell';
import Geometry from '../../geometry/Geometry';
import CellArray from '../../cell/datatypes/CellArray';
/** /**
* Class: mxStackLayout * Class: mxStackLayout
@ -30,8 +34,15 @@ import {
* Constructs a new stack layout layout for the specified graph, * Constructs a new stack layout layout for the specified graph,
* spacing, orientation and offset. * spacing, orientation and offset.
*/ */
class mxStackLayout extends mxGraphLayout { class StackLayout extends GraphLayout {
constructor(graph, horizontal, spacing, x0, y0, border) { constructor(
graph: Graph,
horizontal: boolean,
spacing: number,
x0: number,
y0: number,
border: number
) {
super(graph); super(graph);
this.horizontal = horizontal != null ? horizontal : true; this.horizontal = horizontal != null ? horizontal : true;
this.spacing = spacing != null ? spacing : 0; this.spacing = spacing != null ? spacing : 0;
@ -43,124 +54,108 @@ class mxStackLayout extends mxGraphLayout {
/** /**
* Specifies the orientation of the layout. * Specifies the orientation of the layout.
*/ */
// horizontal: boolean; horizontal: boolean;
horizontal = null;
/** /**
* Specifies the spacing between the cells. * Specifies the spacing between the cells.
*/ */
// spacing: number; spacing: number;
spacing = null;
/** /**
* Specifies the horizontal origin of the layout. * Specifies the horizontal origin of the layout.
*/ */
// x0: number; x0: number;
x0 = null;
/** /**
* Specifies the vertical origin of the layout. * Specifies the vertical origin of the layout.
*/ */
// y0: number; y0: number;
y0 = null;
/** /**
* Border to be added if fill is true. * Border to be added if fill is true.
*/ */
// border: number; border: number = 0;
border = 0;
/** /**
* Top margin for the child area. * Top margin for the child area.
*/ */
// marginTop: number; marginTop: number = 0;
marginTop = 0;
/** /**
* Top margin for the child area. * Top margin for the child area.
*/ */
// marginLeft: number; marginLeft: number = 0;
marginLeft = 0;
/** /**
* Top margin for the child area. * Top margin for the child area.
*/ */
// marginRight: number; marginRight: number = 0;
marginRight = 0;
/** /**
* Top margin for the child area. * Top margin for the child area.
*/ */
// marginBottom: number; marginBottom: number = 0;
marginBottom = 0;
/** /**
* Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0. * Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.
*/ */
// keepFirstLocation: boolean; keepFirstLocation: boolean = false;
keepFirstLocation = false;
/** /**
* Boolean indicating if dimension should be changed to fill out the parent cell. * Boolean indicating if dimension should be changed to fill out the parent cell.
*/ */
// fill: boolean; fill: boolean = false;
fill = false;
/** /**
* If the parent should be resized to match the width/height of the stack. * If the parent should be resized to match the width/height of the stack.
*/ */
// resizeParent: boolean; resizeParent: boolean = false;
resizeParent = false;
/** /**
* Use maximum of existing value and new value for resize of parent. * Use maximum of existing value and new value for resize of parent.
*/ */
// resizeParentMax: boolean; resizeParentMax: boolean = false;
resizeParentMax = false;
/** /**
* If the last element should be resized to fill out the parent. * If the last element should be resized to fill out the parent.
*/ */
// resizeLast: boolean; resizeLast: boolean = false;
resizeLast = false;
/** /**
* Value at which a new column or row should be created. * Value at which a new column or row should be created.
*/ */
// wrap: boolean; wrap: number | null = null;
wrap = null;
/** /**
* If the strokeWidth should be ignored. * If the strokeWidth should be ignored.
*/ */
// borderCollapse: boolean; borderCollapse: boolean = true;
borderCollapse = true;
/** /**
* If gaps should be allowed in the stack. * If gaps should be allowed in the stack.
*/ */
// allowGaps: boolean; allowGaps: boolean = false;
allowGaps = false;
/** /**
* Grid size for alignment of position and size. * Grid size for alignment of position and size.
*/ */
// gridSize: number; gridSize: number = 0;
gridSize = 0;
/** /**
* Returns horizontal. * Returns horizontal.
*/ */
// isHorizontal(): boolean; isHorizontal(): boolean {
isHorizontal() {
return this.horizontal; return this.horizontal;
} }
/** /**
* Implements mxGraphLayout.moveCell. * Implements mxGraphLayout.moveCell.
*/ */
// moveCell(cell: mxCell, x: number, y: number): void; moveCell(
moveCell(cell, x, y) { cell: Cell,
x: number,
y: number
): void {
const model = this.graph.getModel(); const model = this.graph.getModel();
const parent = cell.getParent(); const parent = cell.getParent();
const horizontal = this.isHorizontal(); const horizontal = this.isHorizontal();
@ -209,8 +204,7 @@ class mxStackLayout extends mxGraphLayout {
/** /**
* Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model. * Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.
*/ */
// getParentSize(): void; getParentSize(parent: Cell): void {
getParentSize(parent) {
const model = this.graph.getModel(); const model = this.graph.getModel();
let pgeo = parent.getGeometry(); let pgeo = parent.getGeometry();
@ -226,18 +220,16 @@ class mxStackLayout extends mxGraphLayout {
const height = this.graph.container.offsetHeight - 1; const height = this.graph.container.offsetHeight - 1;
pgeo = new Rectangle(0, 0, width, height); pgeo = new Rectangle(0, 0, width, height);
} }
return pgeo; return pgeo;
} }
/** /**
* Returns the cells to be layouted. * Returns the cells to be layouted.
*/ */
// getLayoutCells(parent: mxCell): Array<mxCell>; getLayoutCells(parent: Cell): CellArray {
getLayoutCells(parent) {
const model = this.graph.getModel(); const model = this.graph.getModel();
const childCount = parent.getChildCount(); const childCount = parent.getChildCount();
const cells = []; const cells = new CellArray();
for (let i = 0; i < childCount; i += 1) { for (let i = 0; i < childCount; i += 1) {
const child = parent.getChildAt(i); const child = parent.getChildAt(i);
@ -265,15 +257,13 @@ class mxStackLayout extends mxGraphLayout {
: -1; : -1;
}); });
} }
return cells; return cells;
} }
/** /**
* Snaps the given value to the grid size. * Snaps the given value to the grid size.
*/ */
// snap(): void; snap(value): void {
snap(value) {
if (this.gridSize != null && this.gridSize > 0) { if (this.gridSize != null && this.gridSize > 0) {
value = Math.max(value, this.gridSize); value = Math.max(value, this.gridSize);
@ -282,15 +272,13 @@ class mxStackLayout extends mxGraphLayout {
value += mod > this.gridSize / 2 ? this.gridSize - mod : -mod; value += mod > this.gridSize / 2 ? this.gridSize - mod : -mod;
} }
} }
return value; return value;
} }
/** /**
* Implements mxGraphLayout.execute. * Implements mxGraphLayout.execute.
*/ */
// execute(parent: mxCell): void; execute(parent: Cell): void {
execute(parent) {
if (parent != null) { if (parent != null) {
const pgeo = this.getParentSize(parent); const pgeo = this.getParentSize(parent);
const horizontal = this.isHorizontal(); const horizontal = this.isHorizontal();
@ -378,7 +366,7 @@ class mxStackLayout extends mxGraphLayout {
if (!this.borderCollapse) { if (!this.borderCollapse) {
const childStyle = this.graph.getCellStyle(child); const childStyle = this.graph.getCellStyle(child);
sw = utils.getNumber(childStyle, 'strokeWidth', 1); sw = getNumber(childStyle, 'strokeWidth', 1);
} }
if (last != null) { if (last != null) {
@ -492,7 +480,10 @@ class mxStackLayout extends mxGraphLayout {
* child - The given child of <mxCell>. * child - The given child of <mxCell>.
* geo - The specific geometry of <mxGeometry>. * geo - The specific geometry of <mxGeometry>.
*/ */
setChildGeometry(child, geo) { setChildGeometry(
child: Cell,
geo: Geometry
) {
const geo2 = child.getGeometry(); const geo2 = child.getGeometry();
if ( if (
@ -517,7 +508,11 @@ class mxStackLayout extends mxGraphLayout {
* pgeo - The new <mxGeometry> for parent. * pgeo - The new <mxGeometry> for parent.
* last - The last <mxGeometry>. * last - The last <mxGeometry>.
*/ */
updateParentGeometry(parent, pgeo, last) { updateParentGeometry(
parent: Cell,
pgeo: Geometry,
last: Geometry
) {
const horizontal = this.isHorizontal(); const horizontal = this.isHorizontal();
const model = this.graph.getModel(); const model = this.graph.getModel();
@ -552,4 +547,4 @@ class mxStackLayout extends mxGraphLayout {
} }
} }
export default mxStackLayout; export default StackLayout;

8
packages/core/src/view/layout/layout/hierarchical/HierarchicalEdgeStyle.ts Normal file
View File

@ -0,0 +1,8 @@
const HierarchicalEdgeStyle = {
ORTHOGONAL: 1,
POLYLINE: 2,
STRAIGHT: 3,
CURVE: 4,
};
export default HierarchicalEdgeStyle;

108
packages/core/src/view/layout/layout/hierarchical/mxSwimlaneLayout.js → packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts
View File

@ -5,16 +5,19 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphLayout from '../mxGraphLayout'; import GraphLayout from '../GraphLayout';
import { DIRECTION_NORTH } from '../../../../util/Constants'; import { DIRECTION_NORTH } from '../../../../util/Constants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle'; import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
import Dictionary from '../../../../util/Dictionary'; import Dictionary from '../../../../util/Dictionary';
import Rectangle from '../../../geometry/Rectangle'; import Rectangle from '../../../geometry/Rectangle';
import mxSwimlaneModel from './model/mxSwimlaneModel'; import SwimlaneModel from './model/SwimlaneModel';
import mxObjectIdentity from '../../../../util/mxObjectIdentity'; import mxObjectIdentity from '../../../../util/mxObjectIdentity';
import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering'; import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering';
import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction'; import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
import mxCoordinateAssignment from './stage/mxCoordinateAssignment'; import CoordinateAssignment from './stage/CoordinateAssignment';
import Graph from '../../../Graph';
import Cell from '../../../cell/datatypes/Cell';
import CellArray from '../../../cell/datatypes/CellArray';
/** /**
* Class: mxSwimlaneLayout * Class: mxSwimlaneLayout
@ -33,8 +36,8 @@ import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
* deterministic - Optional boolean that specifies if this layout should be * deterministic - Optional boolean that specifies if this layout should be
* deterministic. Default is true. * deterministic. Default is true.
*/ */
class mxSwimlaneLayout extends mxGraphLayout { class SwimlaneLayout extends GraphLayout {
constructor(graph, orientation, deterministic) { constructor(graph: Graph, orientation, deterministic: boolean = true) {
super(graph); super(graph);
this.orientation = orientation != null ? orientation : DIRECTION_NORTH; this.orientation = orientation != null ? orientation : DIRECTION_NORTH;
this.deterministic = deterministic != null ? deterministic : true; this.deterministic = deterministic != null ? deterministic : true;
@ -199,7 +202,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* The style to apply between cell layers to edge segments. * The style to apply between cell layers to edge segments.
* Default is <mxHierarchicalEdgeStyle.POLYLINE>. * Default is <mxHierarchicalEdgeStyle.POLYLINE>.
*/ */
edgeStyle = mxHierarchicalEdgeStyle.POLYLINE; edgeStyle = HierarchicalEdgeStyle.POLYLINE;
/** /**
* Function: getModel * Function: getModel
@ -220,7 +223,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* parent - Parent <mxCell> that contains the children to be laid out. * parent - Parent <mxCell> that contains the children to be laid out.
* swimlanes - Ordered array of swimlanes to be laid out * swimlanes - Ordered array of swimlanes to be laid out
*/ */
execute(parent, swimlanes) { execute(parent: Cell, swimlanes: CellArray): void {
this.parent = parent; this.parent = parent;
const { model } = this.graph; const { model } = this.graph;
this.edgesCache = new Dictionary(); this.edgesCache = new Dictionary();
@ -286,11 +289,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
this.run(parent); this.run(parent);
if (this.resizeParent && !parent.isCollapsed()) { if (this.resizeParent && !parent.isCollapsed()) {
this.graph.updateGroupBounds( this.graph.updateGroupBounds([parent], this.parentBorder, this.moveParent);
[parent],
this.parentBorder,
this.moveParent
);
} }
// Maintaining parent location // Maintaining parent location
@ -318,7 +317,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* all child vertices. * all child vertices.
* *
*/ */
updateGroupBounds() { updateGroupBounds(): void {
// Get all vertices and edge in the layout // Get all vertices and edge in the layout
const cells = []; const cells = [];
const { model } = this; const { model } = this;
@ -351,18 +350,10 @@ class mxSwimlaneLayout extends mxGraphLayout {
const maxChildrenY = bounds.y + geo.y + bounds.height; const maxChildrenY = bounds.y + geo.y + bounds.height;
if (layoutBounds == null) { if (layoutBounds == null) {
layoutBounds = new Rectangle( layoutBounds = new Rectangle(0, childrenY, 0, maxChildrenY - childrenY);
0,
childrenY,
0,
maxChildrenY - childrenY
);
} else { } else {
layoutBounds.y = Math.min(layoutBounds.y, childrenY); layoutBounds.y = Math.min(layoutBounds.y, childrenY);
const maxY = Math.max( const maxY = Math.max(layoutBounds.y + layoutBounds.height, maxChildrenY);
layoutBounds.y + layoutBounds.height,
maxChildrenY
);
layoutBounds.height = maxY - layoutBounds.y; layoutBounds.height = maxY - layoutBounds.y;
} }
} }
@ -391,8 +382,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
newGeo.y = y; newGeo.y = y;
newGeo.width = childBounds[i].width + w + this.interRankCellSpacing / 2; newGeo.width = childBounds[i].width + w + this.interRankCellSpacing / 2;
newGeo.height = newGeo.height = layoutBounds.height + size.height + 2 * this.parentBorder;
layoutBounds.height + size.height + 2 * this.parentBorder;
this.graph.model.setGeometry(lane, newGeo); this.graph.model.setGeometry(lane, newGeo);
this.graph.moveCells(children, -x, geo.y - y); this.graph.moveCells(children, -x, geo.y - y);
@ -414,7 +404,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* parent - <mxCell> whose children should be checked. * parent - <mxCell> whose children should be checked.
* vertices - array of vertices to limit search to * vertices - array of vertices to limit search to
*/ */
findRoots(parent, vertices) { findRoots(parent: Cell, vertices: CellArray) {
const roots = []; const roots = [];
if (parent != null && vertices != null) { if (parent != null && vertices != null) {
@ -480,7 +470,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* cell - <mxCell> whose edges should be returned. * cell - <mxCell> whose edges should be returned.
*/ */
getEdges(cell) { getEdges(cell: Cell): CellArray {
const cachedEdges = this.edgesCache.get(cell); const cachedEdges = this.edgesCache.get(cell);
if (cachedEdges != null) { if (cachedEdges != null) {
@ -503,7 +493,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
} }
edges = edges.concat(model.getEdges(cell, true, true)); edges = edges.concat(model.getEdges(cell, true, true));
const result = []; const result = new CellArray();
for (let i = 0; i < edges.length; i += 1) { for (let i = 0; i < edges.length; i += 1) {
const source = this.getVisibleTerminal(edges[i], true); const source = this.getVisibleTerminal(edges[i], true);
@ -514,11 +504,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
(source !== target && (source !== target &&
((target === cell && ((target === cell &&
(this.parent == null || (this.parent == null ||
this.graph.isValidAncestor( this.graph.isValidAncestor(source, this.parent, this.traverseAncestors))) ||
source,
this.parent,
this.traverseAncestors
))) ||
(source === cell && (source === cell &&
(this.parent == null || (this.parent == null ||
this.graph.isValidAncestor( this.graph.isValidAncestor(
@ -546,7 +532,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* edge - <mxCell> whose edges should be returned. * edge - <mxCell> whose edges should be returned.
* source - Boolean that specifies whether the source or target terminal is to be returned * source - Boolean that specifies whether the source or target terminal is to be returned
*/ */
getVisibleTerminal(edge, source) { getVisibleTerminal(edge: Cell, source: Cell): Cell {
let terminalCache = this.edgesTargetTermCache; let terminalCache = this.edgesTargetTermCache;
if (source) { if (source) {
@ -590,7 +576,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* routing changes made. It runs each stage of the layout that has been * routing changes made. It runs each stage of the layout that has been
* created. * created.
*/ */
run(parent) { run(parent: Cell): void {
// Separate out unconnected hierarchies // Separate out unconnected hierarchies
const hierarchyVertices = []; const hierarchyVertices = [];
const allVertexSet = Object(); const allVertexSet = Object();
@ -685,13 +671,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
tmp.push(allVertexSet[key]); tmp.push(allVertexSet[key]);
} }
this.model = new mxSwimlaneModel( this.model = new SwimlaneModel(this, tmp, this.roots, parent, this.tightenToSource);
this,
tmp,
this.roots,
parent,
this.tightenToSource
);
this.cycleStage(parent); this.cycleStage(parent);
this.layeringStage(); this.layeringStage();
@ -705,7 +685,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* Creates an array of descendant cells * Creates an array of descendant cells
*/ */
filterDescendants(cell, result) { filterDescendants(cell: Cell, result: { [key: string]: Cell }) {
const { model } = this.graph; const { model } = this.graph;
if ( if (
@ -742,11 +722,10 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* cell - <mxCell> that represents the port. * cell - <mxCell> that represents the port.
*/ */
isPort(cell) { isPort(cell: Cell): boolean {
if (cell.geometry.relative) { if (cell.geometry.relative) {
return true; return true;
} }
return false; return false;
} }
@ -762,10 +741,9 @@ class mxSwimlaneLayout extends mxGraphLayout {
* target - * target -
* directed - * directed -
*/ */
getEdgesBetween(source, target, directed) { getEdgesBetween(source: Cell, target: Cell, directed: boolean = false) {
directed = directed != null ? directed : false;
const edges = this.getEdges(source); const edges = this.getEdges(source);
const result = []; const result = new CellArray();
// Checks if the edge is connected to the correct // Checks if the edge is connected to the correct
// cell and returns the first match // cell and returns the first match
@ -780,7 +758,6 @@ class mxSwimlaneLayout extends mxGraphLayout {
result.push(edges[i]); result.push(edges[i]);
} }
} }
return result; return result;
} }
@ -802,10 +779,10 @@ class mxSwimlaneLayout extends mxGraphLayout {
* swimlaneIndex - the laid out order index of the swimlane vertex is contained in * swimlaneIndex - the laid out order index of the swimlane vertex is contained in
*/ */
traverse( traverse(
vertex, vertex: Cell,
directed, directed: boolean,
edge, edge: Cell,
allVertices, allVertices: { [key: string]: Cell },
currentComp, currentComp,
hierarchyVertices, hierarchyVertices,
filledVertexSet, filledVertexSet,
@ -845,11 +822,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
let otherIndex = 0; let otherIndex = 0;
// Get the swimlane index of the other terminal // Get the swimlane index of the other terminal
for ( for (otherIndex = 0; otherIndex < this.swimlanes.length; otherIndex++) {
otherIndex = 0;
otherIndex < this.swimlanes.length;
otherIndex++
) {
if (model.isAncestor(this.swimlanes[otherIndex], otherVertex)) { if (model.isAncestor(this.swimlanes[otherIndex], otherVertex)) {
break; break;
} }
@ -896,7 +869,6 @@ class mxSwimlaneLayout extends mxGraphLayout {
} }
} }
} }
return currentComp; return currentComp;
} }
@ -905,7 +877,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* Executes the cycle stage using mxMinimumCycleRemover. * Executes the cycle stage using mxMinimumCycleRemover.
*/ */
cycleStage(parent) { cycleStage(parent: Cell) {
const cycleStage = new mxSwimlaneOrdering(this); const cycleStage = new mxSwimlaneOrdering(this);
cycleStage.execute(parent); cycleStage.execute(parent);
} }
@ -915,7 +887,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* Implements first stage of a Sugiyama layout. * Implements first stage of a Sugiyama layout.
*/ */
layeringStage() { layeringStage(): void {
this.model.initialRank(); this.model.initialRank();
this.model.fixRanks(); this.model.fixRanks();
} }
@ -925,8 +897,8 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* Executes the crossing stage using mxMedianHybridCrossingReduction. * Executes the crossing stage using mxMedianHybridCrossingReduction.
*/ */
crossingStage(parent) { crossingStage(parent: Cell): void {
const crossingStage = new mxMedianHybridCrossingReduction(this); const crossingStage = new MedianHybridCrossingReduction(this);
crossingStage.execute(parent); crossingStage.execute(parent);
} }
@ -935,8 +907,8 @@ class mxSwimlaneLayout extends mxGraphLayout {
* *
* Executes the placement stage using mxCoordinateAssignment. * Executes the placement stage using mxCoordinateAssignment.
*/ */
placementStage(initialX, parent) { placementStage(initialX: number, parent: Cell): number {
const placementStage = new mxCoordinateAssignment( const placementStage = new CoordinateAssignment(
this, this,
this.intraCellSpacing, this.intraCellSpacing,
this.interRankCellSpacing, this.interRankCellSpacing,
@ -951,4 +923,4 @@ class mxSwimlaneLayout extends mxGraphLayout {
} }
} }
export default mxSwimlaneLayout; export default SwimlaneLayout;

43
packages/core/src/view/layout/layout/hierarchical/model/mxGraphAbstractHierarchyCell.js → packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts
View File

@ -4,63 +4,65 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import Cell from '../../../../cell/datatypes/Cell';
import CellArray from '../../../../cell/datatypes/CellArray';
class mxGraphAbstractHierarchyCell { class MxGraphAbstractHierarchyCell {
/** /**
* Variable: maxRank * Variable: maxRank
* *
* The maximum rank this cell occupies. Default is -1. * The maximum rank this cell occupies. Default is -1.
*/ */
maxRank = -1; maxRank: number = -1;
/** /**
* Variable: minRank * Variable: minRank
* *
* The minimum rank this cell occupies. Default is -1. * The minimum rank this cell occupies. Default is -1.
*/ */
minRank = -1; minRank: number = -1;
/** /**
* Variable: x * Variable: x
* *
* The x position of this cell for each layer it occupies * The x position of this cell for each layer it occupies
*/ */
x = null; x: number = null;
/** /**
* Variable: y * Variable: y
* *
* The y position of this cell for each layer it occupies * The y position of this cell for each layer it occupies
*/ */
y = null; y: number = null;
/** /**
* Variable: width * Variable: width
* *
* The width of this cell. Default is 0. * The width of this cell. Default is 0.
*/ */
width = 0; width: number = 0;
/** /**
* Variable: height * Variable: height
* *
* The height of this cell. Default is 0. * The height of this cell. Default is 0.
*/ */
height = 0; height: number = 0;
/** /**
* Variable: nextLayerConnectedCells * Variable: nextLayerConnectedCells
* *
* A cached version of the cells this cell connects to on the next layer up * A cached version of the cells this cell connects to on the next layer up
*/ */
nextLayerConnectedCells = null; nextLayerConnectedCells: CellArray | null = null;
/** /**
* Variable: previousLayerConnectedCells * Variable: previousLayerConnectedCells
* *
* A cached version of the cells this cell connects to on the next layer down * A cached version of the cells this cell connects to on the next layer down
*/ */
previousLayerConnectedCells = null; previousLayerConnectedCells: CellArray | null = null;
/** /**
* Variable: temp * Variable: temp
@ -72,7 +74,7 @@ class mxGraphAbstractHierarchyCell {
* be used for hashing the nodes in the model dfs and so hashCode * be used for hashing the nodes in the model dfs and so hashCode
* was created * was created
*/ */
temp = null; temp: any = null;
/** /**
* Class: mxGraphAbstractHierarchyCell * Class: mxGraphAbstractHierarchyCell
@ -94,7 +96,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Returns the cells this cell connects to on the next layer up * Returns the cells this cell connects to on the next layer up
*/ */
getNextLayerConnectedCells(layer) { getNextLayerConnectedCells(layer: number): Cell | null {
return null; return null;
} }
@ -103,7 +105,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Returns the cells this cell connects to on the next layer down * Returns the cells this cell connects to on the next layer down
*/ */
getPreviousLayerConnectedCells(layer) { getPreviousLayerConnectedCells(layer: number): Cell | null {
return null; return null;
} }
@ -112,7 +114,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Returns whether or not this cell is an edge * Returns whether or not this cell is an edge
*/ */
isEdge() { isEdge(): boolean {
return false; return false;
} }
@ -121,7 +123,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Returns whether or not this cell is a node * Returns whether or not this cell is a node
*/ */
isVertex() { isVertex(): boolean {
return false; return false;
} }
@ -130,7 +132,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Gets the value of temp for the specified layer * Gets the value of temp for the specified layer
*/ */
getGeneralPurposeVariable(layer) { getGeneralPurposeVariable(layer: number): null | number {
return null; return null;
} }
@ -139,7 +141,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Set the value of temp for the specified layer * Set the value of temp for the specified layer
*/ */
setGeneralPurposeVariable(layer, value) { setGeneralPurposeVariable(layer: number, value: number): null | void {
return null; return null;
} }
@ -148,7 +150,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Set the value of x for the specified layer * Set the value of x for the specified layer
*/ */
setX(layer, value) { setX(layer: number, value: number): void {
if (this.isVertex()) { if (this.isVertex()) {
this.x[0] = value; this.x[0] = value;
} else if (this.isEdge()) { } else if (this.isEdge()) {
@ -161,14 +163,13 @@ class mxGraphAbstractHierarchyCell {
* *
* Gets the value of x on the specified layer * Gets the value of x on the specified layer
*/ */
getX(layer) { getX(layer: number): number {
if (this.isVertex()) { if (this.isVertex()) {
return this.x[0]; return this.x[0];
} }
if (this.isEdge()) { if (this.isEdge()) {
return this.x[layer - this.minRank - 1]; return this.x[layer - this.minRank - 1];
} }
return 0.0; return 0.0;
} }
@ -177,7 +178,7 @@ class mxGraphAbstractHierarchyCell {
* *
* Set the value of y for the specified layer * Set the value of y for the specified layer
*/ */
setY(layer, value) { setY(layer: number, value: number): void {
if (this.isVertex()) { if (this.isVertex()) {
this.y[0] = value; this.y[0] = value;
} else if (this.isEdge()) { } else if (this.isEdge()) {
@ -186,4 +187,4 @@ class mxGraphAbstractHierarchyCell {
} }
} }
export default mxGraphAbstractHierarchyCell; export default MxGraphAbstractHierarchyCell;

33
packages/core/src/view/layout/layout/hierarchical/model/mxGraphHierarchyEdge.js → packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts
View File

@ -4,17 +4,19 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell'; import GraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../../../util/mxObjectIdentity'; import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
import CellArray from '../../../../cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell { class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
/** /**
* Variable: edges * Variable: edges
* *
* The graph edge(s) this object represents. Parallel edges are all grouped * The graph edge(s) this object represents. Parallel edges are all grouped
* together within one hierarchy edge. * together within one hierarchy edge.
*/ */
edges = null; edges: CellArray;
/** /**
* Variable: ids * Variable: ids
@ -28,14 +30,14 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* The node this edge is sourced at * The node this edge is sourced at
*/ */
source = null; source: Cell | null = null;
/** /**
* Variable: target * Variable: target
* *
* The node this edge targets * The node this edge targets
*/ */
target = null; target: Cell | null = null;
/** /**
* Variable: isReversed * Variable: isReversed
@ -43,7 +45,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* Whether or not the direction of this edge has been reversed * Whether or not the direction of this edge has been reversed
* internally to create a DAG for the hierarchical layout * internally to create a DAG for the hierarchical layout
*/ */
isReversed = false; isReversed: boolean = false;
/** /**
* Class: mxGraphHierarchyEdge * Class: mxGraphHierarchyEdge
@ -58,7 +60,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* edges - a list of real graph edges this abstraction represents * edges - a list of real graph edges this abstraction represents
*/ */
constructor(edges) { constructor(edges: CellArray) {
super(edges); super(edges);
this.edges = edges; this.edges = edges;
this.ids = []; this.ids = [];
@ -85,7 +87,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* Returns the cells this cell connects to on the next layer up * Returns the cells this cell connects to on the next layer up
*/ */
getNextLayerConnectedCells(layer) { getNextLayerConnectedCells(layer: Cell): CellArray {
if (this.nextLayerConnectedCells == null) { if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = []; this.nextLayerConnectedCells = [];
@ -99,7 +101,6 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
} }
} }
} }
return this.nextLayerConnectedCells[layer - this.minRank - 1]; return this.nextLayerConnectedCells[layer - this.minRank - 1];
} }
@ -108,7 +109,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* Returns the cells this cell connects to on the next layer down * Returns the cells this cell connects to on the next layer down
*/ */
getPreviousLayerConnectedCells(layer) { getPreviousLayerConnectedCells(layer: Cell): CellArray {
if (this.previousLayerConnectedCells == null) { if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = []; this.previousLayerConnectedCells = [];
@ -122,7 +123,6 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
} }
} }
} }
return this.previousLayerConnectedCells[layer - this.minRank - 1]; return this.previousLayerConnectedCells[layer - this.minRank - 1];
} }
@ -131,7 +131,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* Returns true. * Returns true.
*/ */
isEdge() { isEdge(): boolean {
return true; return true;
} }
@ -140,7 +140,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* Gets the value of temp for the specified layer * Gets the value of temp for the specified layer
*/ */
getGeneralPurposeVariable(layer) { getGeneralPurposeVariable(layer: number): any {
return this.temp[layer - this.minRank - 1]; return this.temp[layer - this.minRank - 1];
} }
@ -149,7 +149,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* Set the value of temp for the specified layer * Set the value of temp for the specified layer
*/ */
setGeneralPurposeVariable(layer, value) { setGeneralPurposeVariable(layer: number, value: any): void {
this.temp[layer - this.minRank - 1] = value; this.temp[layer - this.minRank - 1] = value;
} }
@ -158,13 +158,12 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* *
* Gets the first core edge associated with this wrapper * Gets the first core edge associated with this wrapper
*/ */
getCoreCell() { getCoreCell(): Cell | null {
if (this.edges != null && this.edges.length > 0) { if (this.edges != null && this.edges.length > 0) {
return this.edges[0]; return this.edges[0];
} }
return null; return null;
} }
} }
export default mxGraphHierarchyEdge; export default GraphHierarchyEdge;

80
packages/core/src/view/layout/layout/hierarchical/model/mxGraphHierarchyModel.js → packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyModel.ts
View File

@ -6,8 +6,11 @@
*/ */
import Dictionary from '../../../../../util/Dictionary'; import Dictionary from '../../../../../util/Dictionary';
import mxGraphHierarchyNode from './mxGraphHierarchyNode'; import GraphHierarchyNode from './GraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge'; import GraphHierarchyEdge from './GraphHierarchyEdge';
import GraphLayout from '../../GraphLayout';
import Cell from '../../../../cell/datatypes/Cell';
import CellArray from '../../../../cell/datatypes/CellArray';
/** /**
* Class: mxGraphHierarchyModel * Class: mxGraphHierarchyModel
@ -33,8 +36,14 @@ import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
* scanRanksFromSinks - Whether rank assignment is from the sinks or sources. * scanRanksFromSinks - Whether rank assignment is from the sinks or sources.
* usage * usage
*/ */
class mxGraphHierarchyModel { class GraphHierarchyModel {
constructor(layout, vertices, roots, parent, tightenToSource) { constructor(
layout: GraphLayout,
vertices: CellArray,
roots: CellArray,
parent: Cell,
tightenToSource: boolean
) {
const graph = layout.getGraph(); const graph = layout.getGraph();
this.tightenToSource = tightenToSource; this.tightenToSource = tightenToSource;
this.roots = roots; this.roots = roots;
@ -83,10 +92,7 @@ class mxGraphHierarchyModel {
internalTargetCell = this.vertexMapper.get(targetCell); internalTargetCell = this.vertexMapper.get(targetCell);
} }
if ( if (internalTargetCell != null && internalVertices[i] !== internalTargetCell) {
internalTargetCell != null &&
internalVertices[i] !== internalTargetCell
) {
internalEdge.target = internalTargetCell; internalEdge.target = internalTargetCell;
if (internalTargetCell.connectsAsTarget.length === 0) { if (internalTargetCell.connectsAsTarget.length === 0) {
@ -111,7 +117,7 @@ class mxGraphHierarchyModel {
* *
* Stores the largest rank number allocated * Stores the largest rank number allocated
*/ */
maxRank = null; maxRank: number = null;
/** /**
* Variable: vertexMapper * Variable: vertexMapper
@ -147,21 +153,21 @@ class mxGraphHierarchyModel {
* *
* The parent cell whose children are being laid out * The parent cell whose children are being laid out
*/ */
parent = null; parent: Cell = null;
/** /**
* Variable: dfsCount * Variable: dfsCount
* *
* Count of the number of times the ancestor dfs has been used. * Count of the number of times the ancestor dfs has been used.
*/ */
dfsCount = 0; dfsCount: number = 0;
/** /**
* Variable: SOURCESCANSTARTRANK * Variable: SOURCESCANSTARTRANK
* *
* High value to start source layering scan rank value from. * High value to start source layering scan rank value from.
*/ */
SOURCESCANSTARTRANK = 100000000; SOURCESCANSTARTRANK: number = 100000000;
/** /**
* Variable: tightenToSource * Variable: tightenToSource
@ -169,7 +175,7 @@ class mxGraphHierarchyModel {
* Whether or not to tighten the assigned ranks of vertices up towards * Whether or not to tighten the assigned ranks of vertices up towards
* the source cells. * the source cells.
*/ */
tightenToSource = false; tightenToSource: boolean = false;
/** /**
* Function: createInternalCells * Function: createInternalCells
@ -184,12 +190,16 @@ class mxGraphHierarchyModel {
* internalVertices - The array of <mxGraphHierarchyNodes> to have their * internalVertices - The array of <mxGraphHierarchyNodes> to have their
* information filled in using the real vertices. * information filled in using the real vertices.
*/ */
createInternalCells(layout, vertices, internalVertices) { createInternalCells(
layout: GraphLayout,
vertices: CellArray,
internalVertices: CellArray
) {
const graph = layout.getGraph(); const graph = layout.getGraph();
// Create internal edges // Create internal edges
for (let i = 0; i < vertices.length; i += 1) { for (let i = 0; i < vertices.length; i += 1) {
internalVertices[i] = new mxGraphHierarchyNode(vertices[i]); internalVertices[i] = new GraphHierarchyNode(vertices[i]);
this.vertexMapper.put(vertices[i], internalVertices[i]); this.vertexMapper.put(vertices[i], internalVertices[i]);
// If the layout is deterministic, order the cells // If the layout is deterministic, order the cells
@ -204,11 +214,7 @@ class mxGraphHierarchyModel {
const cell = layout.getVisibleTerminal(conns[j], false); const cell = layout.getVisibleTerminal(conns[j], false);
// Looking for outgoing edges only // Looking for outgoing edges only
if ( if (cell !== vertices[i] && cell.isVertex() && !layout.isVertexIgnored(cell)) {
cell !== vertices[i] &&
cell.isVertex() &&
!layout.isVertexIgnored(cell)
) {
// We process all edge between this source and its targets // We process all edge between this source and its targets
// If there are edges going both ways, we need to collect // If there are edges going both ways, we need to collect
// them all into one internal edges to avoid looping problems // them all into one internal edges to avoid looping problems
@ -222,11 +228,7 @@ class mxGraphHierarchyModel {
// are the same. All the graph edges will have been assigned to // are the same. All the graph edges will have been assigned to
// an internal edge going the other way, so we don't want to // an internal edge going the other way, so we don't want to
// process them again // process them again
const undirectedEdges = layout.getEdgesBetween( const undirectedEdges = layout.getEdgesBetween(vertices[i], cell, false);
vertices[i],
cell,
false
);
const directedEdges = layout.getEdgesBetween(vertices[i], cell, true); const directedEdges = layout.getEdgesBetween(vertices[i], cell, true);
if ( if (
@ -235,7 +237,7 @@ class mxGraphHierarchyModel {
this.edgeMapper.get(undirectedEdges[0]) == null && this.edgeMapper.get(undirectedEdges[0]) == null &&
directedEdges.length * 2 >= undirectedEdges.length directedEdges.length * 2 >= undirectedEdges.length
) { ) {
const internalEdge = new mxGraphHierarchyEdge(undirectedEdges); const internalEdge = new GraphHierarchyEdge(undirectedEdges);
for (let k = 0; k < undirectedEdges.length; k++) { for (let k = 0; k < undirectedEdges.length; k++) {
const edge = undirectedEdges[k]; const edge = undirectedEdges[k];
@ -272,7 +274,7 @@ class mxGraphHierarchyModel {
* or sinks and working through each node in the relevant edge direction. * or sinks and working through each node in the relevant edge direction.
* Starting at the sinks is basically a longest path layering algorithm. * Starting at the sinks is basically a longest path layering algorithm.
*/ */
initialRank() { initialRank(): void {
const startNodes = []; const startNodes = [];
if (this.roots != null) { if (this.roots != null) {
@ -405,7 +407,7 @@ class mxGraphHierarchyModel {
* Fixes the layer assignments to the values stored in the nodes. Also needs * Fixes the layer assignments to the values stored in the nodes. Also needs
* to create dummy nodes for edges that cross layers. * to create dummy nodes for edges that cross layers.
*/ */
fixRanks() { fixRanks(): void {
const rankList = []; const rankList = [];
this.ranks = []; this.ranks = [];
@ -478,7 +480,12 @@ class mxGraphHierarchyModel {
* trackAncestors - Whether or not the search is to keep track all nodes * trackAncestors - Whether or not the search is to keep track all nodes
* directly above this one in the search path. * directly above this one in the search path.
*/ */
visit(visitor, dfsRoots, trackAncestors, seenNodes) { visit(
visitor: Function,
dfsRoots,
trackAncestors: boolean,
seenNodes: {} | null = null
): void {
// Run dfs through on all roots // Run dfs through on all roots
if (dfsRoots != null) { if (dfsRoots != null) {
for (let i = 0; i < dfsRoots.length; i += 1) { for (let i = 0; i < dfsRoots.length; i += 1) {
@ -530,7 +537,7 @@ class mxGraphHierarchyModel {
* ancestor node of the current node * ancestor node of the current node
* layer - the layer on the dfs tree ( not the same as the model ranks ) * layer - the layer on the dfs tree ( not the same as the model ranks )
*/ */
dfs(parent, root, connectingEdge, visitor, seen, layer) { dfs(parent: Cell, root: Cell, connectingEdge: Cell, visitor, seen, layer: number): void {
if (root != null) { if (root != null) {
const rootId = root.id; const rootId = root.id;
@ -576,16 +583,7 @@ class mxGraphHierarchyModel {
* childHash - the new hash code for this node * childHash - the new hash code for this node
* layer - the layer on the dfs tree ( not the same as the model ranks ) * layer - the layer on the dfs tree ( not the same as the model ranks )
*/ */
extendedDfs( extendedDfs(parent: Cell, root: Cell, connectingEdge: Cell, visitor, seen, ancestors, childHash, layer) {
parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer
) {
// Explanation of custom hash set. Previously, the ancestors variable // Explanation of custom hash set. Previously, the ancestors variable
// was passed through the dfs as a HashSet. The ancestors were copied // was passed through the dfs as a HashSet. The ancestors were copied
// into a new HashSet and when the new child was processed it was also // into a new HashSet and when the new child was processed it was also
@ -654,4 +652,4 @@ class mxGraphHierarchyModel {
} }
} }
export default mxGraphHierarchyModel; export default GraphHierarchyModel;

36
packages/core/src/view/layout/layout/hierarchical/model/mxGraphHierarchyNode.js → packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts
View File

@ -4,8 +4,10 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell'; import MxGraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../../../util/mxObjectIdentity'; import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
import CellArray from '../../../../cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
/** /**
* Class: mxGraphHierarchyNode * Class: mxGraphHierarchyNode
@ -20,13 +22,13 @@ import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
* *
* cell - the real graph cell this node represents * cell - the real graph cell this node represents
*/ */
class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell { class GraphHierarchyNode extends MxGraphAbstractHierarchyCell {
constructor(cell) { constructor(cell) {
super(cell); super(cell);
this.cell = cell; this.cell = cell;
this.id = mxObjectIdentity.get(cell); this.id = mxObjectIdentity.get(cell);
this.connectsAsTarget = []; this.connectsAsTarget: CellArray = [];
this.connectsAsSource = []; this.connectsAsSource: CellArray = [];
} }
/** /**
@ -34,7 +36,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* The graph cell this object represents. * The graph cell this object represents.
*/ */
cell = null; cell: Cell = null;
/** /**
* Variable: id * Variable: id
@ -70,7 +72,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Returns the integer value of the layer that this node resides in * Returns the integer value of the layer that this node resides in
*/ */
getRankValue(layer) { getRankValue(layer: number): number {
return this.maxRank; return this.maxRank;
} }
@ -79,7 +81,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Returns the cells this cell connects to on the next layer up * Returns the cells this cell connects to on the next layer up
*/ */
getNextLayerConnectedCells(layer) { getNextLayerConnectedCells(layer: number): CellArray {
if (this.nextLayerConnectedCells == null) { if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = []; this.nextLayerConnectedCells = [];
this.nextLayerConnectedCells[0] = []; this.nextLayerConnectedCells[0] = [];
@ -97,7 +99,6 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
} }
} }
} }
return this.nextLayerConnectedCells[0]; return this.nextLayerConnectedCells[0];
} }
@ -106,10 +107,10 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Returns the cells this cell connects to on the next layer down * Returns the cells this cell connects to on the next layer down
*/ */
getPreviousLayerConnectedCells(layer) { getPreviousLayerConnectedCells(layer: number): CellArray {
if (this.previousLayerConnectedCells == null) { if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = []; this.previousLayerConnectedCells = [];
this.previousLayerConnectedCells[0] = []; this.previousLayerConnectedCells[0] = []; // new CellArray()??
for (let i = 0; i < this.connectsAsSource.length; i += 1) { for (let i = 0; i < this.connectsAsSource.length; i += 1) {
const edge = this.connectsAsSource[i]; const edge = this.connectsAsSource[i];
@ -123,7 +124,6 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
} }
} }
} }
return this.previousLayerConnectedCells[0]; return this.previousLayerConnectedCells[0];
} }
@ -132,7 +132,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Returns true. * Returns true.
*/ */
isVertex() { isVertex(): boolean {
return true; return true;
} }
@ -141,7 +141,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Gets the value of temp for the specified layer * Gets the value of temp for the specified layer
*/ */
getGeneralPurposeVariable(layer) { getGeneralPurposeVariable(layer: number): any {
return this.temp[0]; return this.temp[0];
} }
@ -150,14 +150,14 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Set the value of temp for the specified layer * Set the value of temp for the specified layer
*/ */
setGeneralPurposeVariable(layer, value) { setGeneralPurposeVariable(layer: number, value: number): void {
this.temp[0] = value; this.temp[0] = value;
} }
/** /**
* Function: isAncestor * Function: isAncestor
*/ */
isAncestor(otherNode) { isAncestor(otherNode: Cell): boolean {
// Firstly, the hash code of this node needs to be shorter than the // Firstly, the hash code of this node needs to be shorter than the
// other node // other node
if ( if (
@ -183,10 +183,8 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
return false; return false;
} }
} }
return true; return true;
} }
return false; return false;
} }
@ -195,9 +193,9 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
* *
* Gets the core vertex associated with this wrapper * Gets the core vertex associated with this wrapper
*/ */
getCoreCell() { getCoreCell(): Cell {
return this.cell; return this.cell;
} }
} }
export default mxGraphHierarchyNode; export default GraphHierarchyNode;

92
packages/core/src/view/layout/layout/hierarchical/model/mxSwimlaneModel.js → packages/core/src/view/layout/layout/hierarchical/model/SwimlaneModel.ts
View File

@ -5,9 +5,13 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import utils from '../../../../../util/Utils'; import utils from '../../../../../util/Utils';
import mxGraphHierarchyNode from './mxGraphHierarchyNode'; import GraphHierarchyNode from './GraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge'; import GraphHierarchyEdge from './GraphHierarchyEdge';
import CellPath from '../../../../cell/datatypes/CellPath'; import CellPath from '../../../../cell/datatypes/CellPath';
import GraphLayout from '../../GraphLayout';
import Dictionary from '../../../../../util/Dictionary';
import CellArray from '../../../../cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
/** /**
* Class: mxSwimlaneModel * Class: mxSwimlaneModel
@ -33,8 +37,14 @@ import CellPath from '../../../../cell/datatypes/CellPath';
* scanRanksFromSinks - Whether rank assignment is from the sinks or sources. * scanRanksFromSinks - Whether rank assignment is from the sinks or sources.
* usage * usage
*/ */
class mxSwimlaneModel { class SwimlaneModel {
constructor(layout, vertices, roots, parent, tightenToSource) { constructor(
layout: GraphLayout,
vertices: CellArray,
roots: CellArray,
parent: Cell,
tightenToSource
) {
const graph = layout.getGraph(); const graph = layout.getGraph();
this.tightenToSource = tightenToSource; this.tightenToSource = tightenToSource;
this.roots = roots; this.roots = roots;
@ -83,10 +93,7 @@ class mxSwimlaneModel {
internalTargetCell = this.vertexMapper.get(targetCell); internalTargetCell = this.vertexMapper.get(targetCell);
} }
if ( if (internalTargetCell != null && internalVertices[i] !== internalTargetCell) {
internalTargetCell != null &&
internalVertices[i] !== internalTargetCell
) {
internalEdge.target = internalTargetCell; internalEdge.target = internalTargetCell;
if (internalTargetCell.connectsAsTarget.length == 0) { if (internalTargetCell.connectsAsTarget.length == 0) {
@ -111,28 +118,28 @@ class mxSwimlaneModel {
* *
* Stores the largest rank number allocated * Stores the largest rank number allocated
*/ */
maxRank = null; maxRank: number;
/** /**
* Variable: vertexMapper * Variable: vertexMapper
* *
* Map from graph vertices to internal model nodes. * Map from graph vertices to internal model nodes.
*/ */
vertexMapper = null; vertexMapper: Dictionary<Cell, Cell>;
/** /**
* Variable: edgeMapper * Variable: edgeMapper
* *
* Map from graph edges to internal model edges * Map from graph edges to internal model edges
*/ */
edgeMapper = null; edgeMapper: Dictionary<Cell, Cell>;
/** /**
* Variable: ranks * Variable: ranks
* *
* Mapping from rank number to actual rank * Mapping from rank number to actual rank
*/ */
ranks = null; ranks: [] = [];
/** /**
* Variable: roots * Variable: roots
@ -140,28 +147,28 @@ class mxSwimlaneModel {
* Store of roots of this hierarchy model, these are real graph cells, not * Store of roots of this hierarchy model, these are real graph cells, not
* internal cells * internal cells
*/ */
roots = null; roots: CellArray;
/** /**
* Variable: parent * Variable: parent
* *
* The parent cell whose children are being laid out * The parent cell whose children are being laid out
*/ */
parent = null; parent: Cell;
/** /**
* Variable: dfsCount * Variable: dfsCount
* *
* Count of the number of times the ancestor dfs has been used. * Count of the number of times the ancestor dfs has been used.
*/ */
dfsCount = 0; dfsCount: number = 0;
/** /**
* Variable: SOURCESCANSTARTRANK * Variable: SOURCESCANSTARTRANK
* *
* High value to start source layering scan rank value from. * High value to start source layering scan rank value from.
*/ */
SOURCESCANSTARTRANK = 100000000; SOURCESCANSTARTRANK: number = 100000000;
/** /**
* Variable: tightenToSource * Variable: tightenToSource
@ -169,7 +176,7 @@ class mxSwimlaneModel {
* Whether or not to tighten the assigned ranks of vertices up towards * Whether or not to tighten the assigned ranks of vertices up towards
* the source cells. * the source cells.
*/ */
tightenToSource = false; tightenToSource: boolean = false;
/** /**
* Variable: ranksPerGroup * Variable: ranksPerGroup
@ -191,13 +198,17 @@ class mxSwimlaneModel {
* internalVertices - The array of <mxGraphHierarchyNodes> to have their * internalVertices - The array of <mxGraphHierarchyNodes> to have their
* information filled in using the real vertices. * information filled in using the real vertices.
*/ */
createInternalCells(layout, vertices, internalVertices) { createInternalCells(
layout: GraphLayout,
vertices: CellArray,
internalVertices: CellArray
) {
const graph = layout.getGraph(); const graph = layout.getGraph();
const { swimlanes } = layout; const { swimlanes } = layout;
// Create internal edges // Create internal edges
for (let i = 0; i < vertices.length; i += 1) { for (let i = 0; i < vertices.length; i += 1) {
internalVertices[i] = new mxGraphHierarchyNode(vertices[i]); internalVertices[i] = new GraphHierarchyNode(vertices[i]);
this.vertexMapper.put(vertices[i], internalVertices[i]); this.vertexMapper.put(vertices[i], internalVertices[i]);
internalVertices[i].swimlaneIndex = -1; internalVertices[i].swimlaneIndex = -1;
@ -220,11 +231,7 @@ class mxSwimlaneModel {
const cell = layout.getVisibleTerminal(conns[j], false); const cell = layout.getVisibleTerminal(conns[j], false);
// Looking for outgoing edges only // Looking for outgoing edges only
if ( if (cell !== vertices[i] && cell.isVertex() && !layout.isVertexIgnored(cell)) {
cell !== vertices[i] &&
cell.isVertex() &&
!layout.isVertexIgnored(cell)
) {
// We process all edge between this source and its targets // We process all edge between this source and its targets
// If there are edges going both ways, we need to collect // If there are edges going both ways, we need to collect
// them all into one internal edges to avoid looping problems // them all into one internal edges to avoid looping problems
@ -238,11 +245,7 @@ class mxSwimlaneModel {
// are the same. All the graph edges will have been assigned to // are the same. All the graph edges will have been assigned to
// an internal edge going the other way, so we don't want to // an internal edge going the other way, so we don't want to
// process them again // process them again
const undirectedEdges = layout.getEdgesBetween( const undirectedEdges = layout.getEdgesBetween(vertices[i], cell, false);
vertices[i],
cell,
false
);
const directedEdges = layout.getEdgesBetween(vertices[i], cell, true); const directedEdges = layout.getEdgesBetween(vertices[i], cell, true);
if ( if (
@ -251,7 +254,7 @@ class mxSwimlaneModel {
this.edgeMapper.get(undirectedEdges[0]) == null && this.edgeMapper.get(undirectedEdges[0]) == null &&
directedEdges.length * 2 >= undirectedEdges.length directedEdges.length * 2 >= undirectedEdges.length
) { ) {
const internalEdge = new mxGraphHierarchyEdge(undirectedEdges); const internalEdge = new GraphHierarchyEdge(undirectedEdges);
for (let k = 0; k < undirectedEdges.length; k += 1) { for (let k = 0; k < undirectedEdges.length; k += 1) {
const edge = undirectedEdges[k]; const edge = undirectedEdges[k];
@ -288,7 +291,7 @@ class mxSwimlaneModel {
* or sinks and working through each node in the relevant edge direction. * or sinks and working through each node in the relevant edge direction.
* Starting at the sinks is basically a longest path layering algorithm. * Starting at the sinks is basically a longest path layering algorithm.
*/ */
initialRank() { initialRank(): void {
this.ranksPerGroup = []; this.ranksPerGroup = [];
const startNodes = []; const startNodes = [];
@ -457,7 +460,7 @@ class mxSwimlaneModel {
* chainCount - the number of edges in the chain of vertices going through * chainCount - the number of edges in the chain of vertices going through
* the current swimlane * the current swimlane
*/ */
maxChainDfs(parent, root, connectingEdge, seen, chainCount) { maxChainDfs(parent: Cell, root: Cell, connectingEdge: Cell, seen, chainCount: number) {
if (root != null) { if (root != null) {
const rootId = CellPath.create(root.cell); const rootId = CellPath.create(root.cell);
@ -510,7 +513,7 @@ class mxSwimlaneModel {
* Fixes the layer assignments to the values stored in the nodes. Also needs * Fixes the layer assignments to the values stored in the nodes. Also needs
* to create dummy nodes for edges that cross layers. * to create dummy nodes for edges that cross layers.
*/ */
fixRanks() { fixRanks(): void {
const rankList = []; const rankList = [];
this.ranks = []; this.ranks = [];
@ -583,7 +586,7 @@ class mxSwimlaneModel {
* trackAncestors - Whether or not the search is to keep track all nodes * trackAncestors - Whether or not the search is to keep track all nodes
* directly above this one in the search path. * directly above this one in the search path.
*/ */
visit(visitor, dfsRoots, trackAncestors, seenNodes) { visit(visitor: Function, dfsRoots: CellArray, trackAncestors: boolean, seenNodes) {
// Run dfs through on all roots // Run dfs through on all roots
if (dfsRoots != null) { if (dfsRoots != null) {
for (let i = 0; i < dfsRoots.length; i += 1) { for (let i = 0; i < dfsRoots.length; i += 1) {
@ -635,7 +638,14 @@ class mxSwimlaneModel {
* ancestor node of the current node * ancestor node of the current node
* layer - the layer on the dfs tree ( not the same as the model ranks ) * layer - the layer on the dfs tree ( not the same as the model ranks )
*/ */
dfs(parent, root, connectingEdge, visitor, seen, layer) { dfs(
parent: Cell,
root: Cell,
connectingEdge: Cell,
visitor: Function,
seen,
layer: number
) {
if (root != null) { if (root != null) {
const rootId = root.id; const rootId = root.id;
@ -682,14 +692,14 @@ class mxSwimlaneModel {
* layer - the layer on the dfs tree ( not the same as the model ranks ) * layer - the layer on the dfs tree ( not the same as the model ranks )
*/ */
extendedDfs( extendedDfs(
parent, parent: Cell,
root, root: Cell,
connectingEdge, connectingEdge: Cell,
visitor, visitor: Function,
seen, seen,
ancestors, ancestors,
childHash, childHash,
layer layer: number
) { ) {
// Explanation of custom hash set. Previously, the ancestors variable // Explanation of custom hash set. Previously, the ancestors variable
// was passed through the dfs as a HashSet. The ancestors were copied // was passed through the dfs as a HashSet. The ancestors were copied
@ -783,4 +793,4 @@ class mxSwimlaneModel {
} }
} }
export default mxSwimlaneModel; export default SwimlaneModel;

8
packages/core/src/view/layout/layout/hierarchical/mxHierarchicalEdgeStyle.js
View File

@ -1,8 +0,0 @@
const mxHierarchicalEdgeStyle = {
ORTHOGONAL: 1,
POLYLINE: 2,
STRAIGHT: 3,
CURVE: 4,
};
export default mxHierarchicalEdgeStyle;

24
packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js
View File

@ -4,15 +4,15 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxGraphLayout from '../mxGraphLayout'; import GraphLayout from '../GraphLayout';
import { DIRECTION_NORTH } from '../../../../util/Constants'; import { DIRECTION_NORTH } from '../../../../util/Constants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle'; import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
import Dictionary from '../../../../util/Dictionary'; import Dictionary from '../../../../util/Dictionary';
import mxGraphHierarchyModel from './model/mxGraphHierarchyModel'; import GraphHierarchyModel from './model/GraphHierarchyModel';
import mxObjectIdentity from '../../../../util/mxObjectIdentity'; import mxObjectIdentity from '../../../../util/mxObjectIdentity';
import mxMinimumCycleRemover from './stage/mxMinimumCycleRemover'; import MinimumCycleRemover from './stage/MinimumCycleRemover';
import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction'; import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
import mxCoordinateAssignment from './stage/mxCoordinateAssignment'; import CoordinateAssignment from './stage/CoordinateAssignment';
/** /**
* Class: mxHierarchicalLayout * Class: mxHierarchicalLayout
@ -31,7 +31,7 @@ import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
* deterministic - Optional boolean that specifies if this layout should be * deterministic - Optional boolean that specifies if this layout should be
* deterministic. Default is true. * deterministic. Default is true.
*/ */
class mxHierarchicalLayout extends mxGraphLayout { class mxHierarchicalLayout extends GraphLayout {
constructor(graph, orientation, deterministic) { constructor(graph, orientation, deterministic) {
super(graph); super(graph);
this.orientation = orientation != null ? orientation : DIRECTION_NORTH; this.orientation = orientation != null ? orientation : DIRECTION_NORTH;
@ -184,7 +184,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* The style to apply between cell layers to edge segments. * The style to apply between cell layers to edge segments.
* Default is <mxHierarchicalEdgeStyle.POLYLINE>. * Default is <mxHierarchicalEdgeStyle.POLYLINE>.
*/ */
edgeStyle = mxHierarchicalEdgeStyle.POLYLINE; edgeStyle = HierarchicalEdgeStyle.POLYLINE;
/** /**
* Function: getModel * Function: getModel
@ -549,7 +549,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
tmp.push(vertexSet[key]); tmp.push(vertexSet[key]);
} }
this.model = new mxGraphHierarchyModel( this.model = new GraphHierarchyModel(
this, this,
tmp, tmp,
this.roots, this.roots,
@ -765,7 +765,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* Executes the cycle stage using mxMinimumCycleRemover. * Executes the cycle stage using mxMinimumCycleRemover.
*/ */
cycleStage(parent) { cycleStage(parent) {
const cycleStage = new mxMinimumCycleRemover(this); const cycleStage = new MinimumCycleRemover(this);
cycleStage.execute(parent); cycleStage.execute(parent);
} }
@ -785,7 +785,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* Executes the crossing stage using mxMedianHybridCrossingReduction. * Executes the crossing stage using mxMedianHybridCrossingReduction.
*/ */
crossingStage(parent) { crossingStage(parent) {
const crossingStage = new mxMedianHybridCrossingReduction(this); const crossingStage = new MedianHybridCrossingReduction(this);
crossingStage.execute(parent); crossingStage.execute(parent);
} }
@ -795,7 +795,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* Executes the placement stage using mxCoordinateAssignment. * Executes the placement stage using mxCoordinateAssignment.
*/ */
placementStage(initialX, parent) { placementStage(initialX, parent) {
const placementStage = new mxCoordinateAssignment( const placementStage = new CoordinateAssignment(
this, this,
this.intraCellSpacing, this.intraCellSpacing,
this.interRankCellSpacing, this.interRankCellSpacing,

22
packages/core/src/view/layout/layout/hierarchical/stage/mxCoordinateAssignment.js → packages/core/src/view/layout/layout/hierarchical/stage/CoordinateAssignment.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage'; import MxHierarchicalLayoutStage from './HierarchicalLayoutStage';
import { import {
DIRECTION_EAST, DIRECTION_EAST,
DIRECTION_NORTH, DIRECTION_NORTH,
@ -15,7 +15,7 @@ import mxLog from '../../../../../util/gui/mxLog';
import WeightedCellSorter from '../../WeightedCellSorter'; import WeightedCellSorter from '../../WeightedCellSorter';
import Dictionary from '../../../../../util/Dictionary'; import Dictionary from '../../../../../util/Dictionary';
import Point from '../../../../geometry/Point'; import Point from '../../../../geometry/Point';
import mxHierarchicalEdgeStyle from '../mxHierarchicalEdgeStyle'; import HierarchicalEdgeStyle from '../HierarchicalEdgeStyle';
/** /**
* Class: mxCoordinateAssignment * Class: mxCoordinateAssignment
@ -35,7 +35,7 @@ import mxHierarchicalEdgeStyle from '../mxHierarchicalEdgeStyle';
* orientation - the position of the root node(s) relative to the graph * orientation - the position of the root node(s) relative to the graph
* initialX - the leftmost coordinate node placement starts at * initialX - the leftmost coordinate node placement starts at
*/ */
class mxCoordinateAssignment extends mxHierarchicalLayoutStage { class CoordinateAssignment extends MxHierarchicalLayoutStage {
constructor( constructor(
layout, layout,
intraCellSpacing, intraCellSpacing,
@ -1156,9 +1156,9 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
// Post process edge styles. Needs the vertex locations set for initial // Post process edge styles. Needs the vertex locations set for initial
// values of the top and bottoms of each rank // values of the top and bottoms of each rank
if ( if (
this.layout.edgeStyle === mxHierarchicalEdgeStyle.ORTHOGONAL || this.layout.edgeStyle === HierarchicalEdgeStyle.ORTHOGONAL ||
this.layout.edgeStyle === mxHierarchicalEdgeStyle.POLYLINE || this.layout.edgeStyle === HierarchicalEdgeStyle.POLYLINE ||
this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE
) { ) {
this.localEdgeProcessing(model); this.localEdgeProcessing(model);
} }
@ -1399,13 +1399,13 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
) { ) {
newPoints.push(new Point(x, y)); newPoints.push(new Point(x, y));
if (this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE) { if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
newPoints.push(new Point(x, y + jetty)); newPoints.push(new Point(x, y + jetty));
} }
} else { } else {
newPoints.push(new Point(y, x)); newPoints.push(new Point(y, x));
if (this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE) { if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
newPoints.push(new Point(y + jetty, x)); newPoints.push(new Point(y + jetty, x));
} }
} }
@ -1505,13 +1505,13 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
this.orientation === DIRECTION_NORTH || this.orientation === DIRECTION_NORTH ||
this.orientation === DIRECTION_SOUTH this.orientation === DIRECTION_SOUTH
) { ) {
if (this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE) { if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
newPoints.push(new Point(x, y - jetty)); newPoints.push(new Point(x, y - jetty));
} }
newPoints.push(new Point(x, y)); newPoints.push(new Point(x, y));
} else { } else {
if (this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE) { if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
newPoints.push(new Point(y - jetty, x)); newPoints.push(new Point(y - jetty, x));
} }
@ -1592,4 +1592,4 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
} }
} }
export default mxCoordinateAssignment; export default CoordinateAssignment;

4
packages/core/src/view/layout/layout/hierarchical/stage/mxHierarchicalLayoutStage.js → packages/core/src/view/layout/layout/hierarchical/stage/HierarchicalLayoutStage.ts
View File

@ -16,7 +16,7 @@
* *
* Constructs a new hierarchical layout stage. * Constructs a new hierarchical layout stage.
*/ */
class mxHierarchicalLayoutStage { class MxHierarchicalLayoutStage {
constructor() {} constructor() {}
/** /**
@ -29,4 +29,4 @@ class mxHierarchicalLayoutStage {
execute(parent) {} execute(parent) {}
} }
export default mxHierarchicalLayoutStage; export default MxHierarchicalLayoutStage;

6
packages/core/src/view/layout/layout/hierarchical/stage/MedianCellSorter.js → packages/core/src/view/layout/layout/hierarchical/stage/MedianCellSorter.ts
View File

@ -8,21 +8,21 @@ class MedianCellSorter {
* *
* The weighted value of the cell stored. * The weighted value of the cell stored.
*/ */
medianValue = 0; medianValue: number = 0;
/** /**
* Variable: cell * Variable: cell
* *
* The cell whose median value is being calculated * The cell whose median value is being calculated
*/ */
cell = false; cell: boolean = false;
/** /**
* Function: compare * Function: compare
* *
* Compares two MedianCellSorters. * Compares two MedianCellSorters.
*/ */
compare(a, b) { compare(a: MedianCellSorter, b: MedianCellSorter) {
if (a != null && b != null) { if (a != null && b != null) {
if (b.medianValue > a.medianValue) { if (b.medianValue > a.medianValue) {
return -1; return -1;

6
packages/core/src/view/layout/layout/hierarchical/stage/mxMedianHybridCrossingReduction.js → packages/core/src/view/layout/layout/hierarchical/stage/MedianHybridCrossingReduction.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage'; import HierarchicalLayoutStage from './HierarchicalLayoutStage';
import MedianCellSorter from './MedianCellSorter'; import MedianCellSorter from './MedianCellSorter';
/** /**
@ -25,7 +25,7 @@ import MedianCellSorter from './MedianCellSorter';
* orientation - the position of the root node(s) relative to the graph * orientation - the position of the root node(s) relative to the graph
* initialX - the leftmost coordinate node placement starts at * initialX - the leftmost coordinate node placement starts at
*/ */
class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage { class MedianHybridCrossingReduction extends HierarchicalLayoutStage {
constructor(layout) { constructor(layout) {
super(); super();
@ -583,4 +583,4 @@ class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
} }
} }
export default mxMedianHybridCrossingReduction; export default MedianHybridCrossingReduction;

25
packages/core/src/view/layout/layout/hierarchical/stage/mxMinimumCycleRemover.js → packages/core/src/view/layout/layout/hierarchical/stage/MinimumCycleRemover.ts
View File

@ -4,9 +4,11 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage'; import HierarchicalLayoutStage from './HierarchicalLayoutStage';
import utils from '../../../../../util/Utils'; import { remove } from '../../../../../util/Utils';
import { clone } from '../../../../../util/CloneUtils'; import { clone } from '../../../../../util/CloneUtils';
import GraphLayout from '../../GraphLayout';
import Cell from '../../../../cell/datatypes/Cell';
/** /**
* Class: mxMinimumCycleRemover * Class: mxMinimumCycleRemover
@ -18,10 +20,9 @@ import { clone } from '../../../../../util/CloneUtils';
* *
* Creates a cycle remover for the given internal model. * Creates a cycle remover for the given internal model.
*/ */
class mxMinimumCycleRemover extends mxHierarchicalLayoutStage { class MinimumCycleRemover extends HierarchicalLayoutStage {
constructor(layout) { constructor(layout: GraphLayout) {
super(); super();
this.layout = layout; this.layout = layout;
} }
@ -30,7 +31,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
* *
* Reference to the enclosing <mxHierarchicalLayout>. * Reference to the enclosing <mxHierarchicalLayout>.
*/ */
layout = null; layout: GraphLayout;
/** /**
* Function: execute * Function: execute
@ -39,7 +40,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
* and creates the resulting laid out graph within that facade for further * and creates the resulting laid out graph within that facade for further
* use. * use.
*/ */
execute(parent) { execute(parent: Cell): void {
const model = this.layout.getModel(); const model = this.layout.getModel();
const seenNodes = {}; const seenNodes = {};
const unseenNodesArray = model.vertexMapper.getValues(); const unseenNodesArray = model.vertexMapper.getValues();
@ -69,9 +70,9 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
// relationship to that edge in the parent and the cell // relationship to that edge in the parent and the cell
if (node.isAncestor(parent)) { if (node.isAncestor(parent)) {
connectingEdge.invert(); connectingEdge.invert();
utils.remove(connectingEdge, parent.connectsAsSource); remove(connectingEdge, parent.connectsAsSource);
parent.connectsAsTarget.push(connectingEdge); parent.connectsAsTarget.push(connectingEdge);
utils.remove(connectingEdge, node.connectsAsTarget); remove(connectingEdge, node.connectsAsTarget);
node.connectsAsSource.push(connectingEdge); node.connectsAsSource.push(connectingEdge);
} }
@ -96,10 +97,10 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
// relationship to that edge in the parent and the cell // relationship to that edge in the parent and the cell
if (node.isAncestor(parent)) { if (node.isAncestor(parent)) {
connectingEdge.invert(); connectingEdge.invert();
utils.remove(connectingEdge, parent.connectsAsSource); remove(connectingEdge, parent.connectsAsSource);
node.connectsAsSource.push(connectingEdge); node.connectsAsSource.push(connectingEdge);
parent.connectsAsTarget.push(connectingEdge); parent.connectsAsTarget.push(connectingEdge);
utils.remove(connectingEdge, node.connectsAsTarget); remove(connectingEdge, node.connectsAsTarget);
} }
seenNodes[node.id] = node; seenNodes[node.id] = node;
@ -112,4 +113,4 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
} }
} }
export default mxMinimumCycleRemover; export default MinimumCycleRemover;

4
packages/core/src/view/layout/layout/hierarchical/stage/mxSwimlaneOrdering.js
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021 * Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage'; import MxHierarchicalLayoutStage from './HierarchicalLayoutStage';
import utils from '../../../../../util/Utils'; import utils from '../../../../../util/Utils';
import CellPath from '../../../../cell/datatypes/CellPath'; import CellPath from '../../../../cell/datatypes/CellPath';
@ -18,7 +18,7 @@ import CellPath from '../../../../cell/datatypes/CellPath';
* *
* Creates a cycle remover for the given internal model. * Creates a cycle remover for the given internal model.
*/ */
class mxSwimlaneOrdering extends mxHierarchicalLayoutStage { class mxSwimlaneOrdering extends MxHierarchicalLayoutStage {
constructor(layout) { constructor(layout) {
super(); super();

12
packages/core/src/view/model/Model.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import EventSource from '../event/EventSource'; import EventSource from '../event/EventSource';
import mxUndoableEdit from './mxUndoableEdit'; import UndoableEdit from './UndoableEdit';
import CellPath from '../cell/datatypes/CellPath'; import CellPath from '../cell/datatypes/CellPath';
import Cell from '../cell/datatypes/Cell'; import Cell from '../cell/datatypes/Cell';
import utils, {isNumeric} from '../../util/Utils'; import utils, {isNumeric} from '../../util/Utils';
@ -128,7 +128,7 @@ import type { CellMap, FilterFunction, UndoableChange } from '../../types';
* Event: mxEvent.CHANGE * Event: mxEvent.CHANGE
* *
* Fires when an undoable edit is dispatched. The `edit` property * Fires when an undoable edit is dispatched. The `edit` property
* contains the {@link mxUndoableEdit}. The `changes` property contains * contains the {@link UndoableEdit}. The `changes` property contains
* the array of atomic changes inside the undoable edit. The changes property * the array of atomic changes inside the undoable edit. The changes property
* is **deprecated**, please use edit.changes instead. * is **deprecated**, please use edit.changes instead.
* *
@ -1066,15 +1066,15 @@ class Model extends EventSource {
} }
/** /**
* Creates a new {@link mxUndoableEdit} that implements the * Creates a new {@link UndoableEdit} that implements the
* notify function to fire a {@link change} and {@link notify} event * notify function to fire a {@link change} and {@link notify} event
* through the {@link mxUndoableEdit}'s source. * through the {@link UndoableEdit}'s source.
* *
* @param significant Optional boolean that specifies if the edit to be created is * @param significant Optional boolean that specifies if the edit to be created is
* significant. Default is true. * significant. Default is true.
*/ */
createUndoableEdit(significant: boolean=true): mxUndoableEdit { createUndoableEdit(significant: boolean=true): UndoableEdit {
const edit = new mxUndoableEdit(this, significant); const edit = new UndoableEdit(this, significant);
edit.notify = () => { edit.notify = () => {
// LATER: Remove changes property (deprecated) // LATER: Remove changes property (deprecated)

4
packages/core/src/view/model/mxUndoableEdit.ts → packages/core/src/view/model/UndoableEdit.ts
View File

@ -55,7 +55,7 @@ import type { UndoableChange } from '../../types';
* *
* Constructs a new undoable edit for the given source. * Constructs a new undoable edit for the given source.
*/ */
class mxUndoableEdit { class UndoableEdit {
constructor(source: EventSource, significant: boolean = true) { constructor(source: EventSource, significant: boolean = true) {
this.source = source; this.source = source;
this.changes = []; this.changes = [];
@ -213,4 +213,4 @@ class mxUndoableEdit {
} }
} }
export default mxUndoableEdit; export default UndoableEdit;

4
packages/core/src/view/page_breaks/GraphPageBreaks.ts
View File

@ -1,6 +1,6 @@
import Rectangle from "../geometry/Rectangle"; import Rectangle from "../geometry/Rectangle";
import Point from "../geometry/Point"; import Point from "../geometry/Point";
import mxPolyline from "../geometry/shape/edge/mxPolyline"; import Polyline from "../geometry/shape/edge/Polyline";
class GraphPageBreaks { class GraphPageBreaks {
horizontalPageBreaks: any[] | null = null; horizontalPageBreaks: any[] | null = null;
@ -91,7 +91,7 @@ class GraphPageBreaks {
breaks[i].points = pts; breaks[i].points = pts;
breaks[i].redraw(); breaks[i].redraw();
} else { } else {
const pageBreak = new mxPolyline(pts, this.pageBreakColor); const pageBreak = new Polyline(pts, this.pageBreakColor);
pageBreak.dialect = this.dialect; pageBreak.dialect = this.dialect;
pageBreak.pointerEvents = false; pageBreak.pointerEvents = false;
pageBreak.isDashed = this.pageBreakDashed; pageBreak.isDashed = this.pageBreakDashed;

50
packages/core/src/view/popups_menus/PopupMenuHandler.ts
View File

@ -6,7 +6,7 @@
*/ */
import mxPopupMenu from '../../util/gui/mxPopupMenu'; import mxPopupMenu from '../../util/gui/mxPopupMenu';
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils'; import utils, { getScrollOrigin } from '../../util/Utils';
import { getMainEvent, isMultiTouchEvent } from '../../util/EventUtils'; import { getMainEvent, isMultiTouchEvent } from '../../util/EventUtils';
import Graph from '../Graph'; import Graph from '../Graph';
import InternalMouseEvent from '../event/InternalMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
@ -28,7 +28,7 @@ class PopupMenuHandler extends mxPopupMenu {
if (graph != null) { if (graph != null) {
this.graph = graph; this.graph = graph;
this.factoryMethod = factoryMethod; this.factoryMethod = factoryMethod;
this.graph.addMouseListener(this); this.graph.event.addMouseListener(this);
// Does not show menu if any touch gestures take place after the trigger // Does not show menu if any touch gestures take place after the trigger
this.gestureHandler = (sender, eo) => { this.gestureHandler = (sender, eo) => {
@ -41,6 +41,13 @@ class PopupMenuHandler extends mxPopupMenu {
} }
} }
// @ts-ignore
gestureHandler: (...args: any[]) => any;
// @ts-ignore
inTolerance: boolean;
// @ts-ignore
popupTrigger: boolean;
/** /**
* Variable: graph * Variable: graph
* *
@ -104,12 +111,9 @@ class PopupMenuHandler extends mxPopupMenu {
// Hides the tooltip if the mouse is over // Hides the tooltip if the mouse is over
// the context menu // the context menu
InternalEvent.addGestureListeners( InternalEvent.addGestureListeners(this.div, (evt) => {
this.div, this.graph.tooltipHandler.hide();
evt => { });
this.graph.tooltipHandler.hide();
}
);
} }
/** /**
@ -128,9 +132,7 @@ class PopupMenuHandler extends mxPopupMenu {
* Handles the event by initiating the panning. By consuming the event all * Handles the event by initiating the panning. By consuming the event all
* subsequent events of the gesture are redirected to this handler. * subsequent events of the gesture are redirected to this handler.
*/ */
mouseDown(sender: any, mouseDown(sender: any, me: InternalMouseEvent): void {
me: InternalMouseEvent): void {
if (this.isEnabled() && !isMultiTouchEvent(me.getEvent())) { if (this.isEnabled() && !isMultiTouchEvent(me.getEvent())) {
// Hides the popupmenu if is is being displayed // Hides the popupmenu if is is being displayed
this.hideMenu(); this.hideMenu();
@ -148,9 +150,7 @@ class PopupMenuHandler extends mxPopupMenu {
* *
* Handles the event by updating the panning on the graph. * Handles the event by updating the panning on the graph.
*/ */
mouseMove(sender: any, mouseMove(sender: any, me: InternalMouseEvent): void {
me: InternalMouseEvent): void {
// Popup trigger may change on mouseUp so ignore it // Popup trigger may change on mouseUp so ignore it
if (this.inTolerance && this.screenX != null && this.screenY != null) { if (this.inTolerance && this.screenX != null && this.screenY != null) {
if ( if (
@ -170,8 +170,7 @@ class PopupMenuHandler extends mxPopupMenu {
* Handles the event by setting the translation on the view or showing the * Handles the event by setting the translation on the view or showing the
* popupmenu. * popupmenu.
*/ */
mouseUp(sender: any, mouseUp(sender: any, me: InternalMouseEvent): void {
me: InternalMouseEvent): void {
if ( if (
this.popupTrigger && this.popupTrigger &&
this.inTolerance && this.inTolerance &&
@ -185,11 +184,11 @@ class PopupMenuHandler extends mxPopupMenu {
this.graph.isEnabled() && this.graph.isEnabled() &&
this.isSelectOnPopup(me) && this.isSelectOnPopup(me) &&
cell != null && cell != null &&
!this.graph.isCellSelected(cell) !this.graph.selection.isCellSelected(cell)
) { ) {
this.graph.setSelectionCell(cell); this.graph.selection.setSelectionCell(cell);
} else if (this.clearSelectionOnBackground && cell == null) { } else if (this.clearSelectionOnBackground && cell == null) {
this.graph.clearSelection(); this.graph.selection.clearSelection();
} }
// Hides the tooltip if there is one // Hides the tooltip if there is one
@ -197,13 +196,8 @@ class PopupMenuHandler extends mxPopupMenu {
// Menu is shifted by 1 pixel so that the mouse up event // Menu is shifted by 1 pixel so that the mouse up event
// is routed via the underlying shape instead of the DIV // is routed via the underlying shape instead of the DIV
const origin = utils.getScrollOrigin(); const origin = getScrollOrigin();
this.popup( this.popup(me.getX() + origin.x + 1, me.getY() + origin.y + 1, cell, me.getEvent());
me.getX() + origin.x + 1,
me.getY() + origin.y + 1,
cell,
me.getEvent()
);
me.consume(); me.consume();
} }
@ -226,8 +220,8 @@ class PopupMenuHandler extends mxPopupMenu {
* Destroys the handler and all its resources and DOM nodes. * Destroys the handler and all its resources and DOM nodes.
*/ */
destroy(): void { destroy(): void {
this.graph.removeMouseListener(this); this.graph.event.removeMouseListener(this);
this.graph.removeListener(this.gestureHandler); this.graph.event.removeListener(this.gestureHandler);
// Supercall // Supercall
super.destroy(); super.destroy();

7
packages/core/src/view/ports/GraphPorts.ts
View File

@ -1,6 +1,13 @@
import Cell from "../cell/datatypes/Cell"; import Cell from "../cell/datatypes/Cell";
import Graph from '../Graph';
class GraphPorts { class GraphPorts {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/** /**
* Specifies if ports are enabled. This is used in {@link cellConnected} to update * Specifies if ports are enabled. This is used in {@link cellConnected} to update
* the respective style. * the respective style.

7
packages/core/src/view/printing/PrintPreview.ts
View File

@ -11,6 +11,7 @@ import mxClient from '../../mxClient';
import utils from '../../util/Utils'; import utils from '../../util/Utils';
import { DIALECT_SVG } from '../../util/Constants'; import { DIALECT_SVG } from '../../util/Constants';
import { write } from '../../util/DomUtils'; import { write } from '../../util/DomUtils';
import Graph from '../Graph';
/** /**
* @class PrintPreview * @class PrintPreview
@ -194,14 +195,12 @@ class PrintPreview {
/** /**
* Reference to the {@link graph} that should be previewed. * Reference to the {@link graph} that should be previewed.
*/ */
// graph: mxGraph; graph: Graph;
graph = null;
/** /**
* Holds the {@link Rectangle} that defines the page format. * Holds the {@link Rectangle} that defines the page format.
*/ */
// pageFormat: mxRectangle; pageFormat: Rectangle;
pageFormat = null;
/** /**
* Holds the scale of the print preview. * Holds the scale of the print preview.

10
packages/core/src/view/selection/mxCellHighlight.ts → packages/core/src/view/selection/CellHighlight.ts
View File

@ -26,7 +26,7 @@ import { ColorValue } from '../../types';
* highlight.highlight(graph.view.getState(cell))); * highlight.highlight(graph.view.getState(cell)));
* ``` * ```
*/ */
class mxCellHighlight { class CellHighlight {
constructor( constructor(
graph: graph, graph: graph,
highlightColor: ColorValue = DEFAULT_VALID_COLOR, highlightColor: ColorValue = DEFAULT_VALID_COLOR,
@ -178,7 +178,6 @@ class mxCellHighlight {
/** /**
* Updates the highlight after a change of the model or view. * Updates the highlight after a change of the model or view.
*/ */
// getStrokeWidth(state: mxCellState): number;
getStrokeWidth(state: CellState | null = null): number | null { getStrokeWidth(state: CellState | null = null): number | null {
return this.strokeWidth; return this.strokeWidth;
} }
@ -186,7 +185,6 @@ class mxCellHighlight {
/** /**
* Updates the highlight after a change of the model or view. * Updates the highlight after a change of the model or view.
*/ */
// repaint(): void;
repaint(): void { repaint(): void {
if (this.state != null && this.shape != null) { if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale; this.shape.scale = this.state.view.scale;
@ -221,7 +219,6 @@ class mxCellHighlight {
/** /**
* Resets the state of the cell marker. * Resets the state of the cell marker.
*/ */
// hide(): void;
hide(): void { hide(): void {
this.highlight(null); this.highlight(null);
} }
@ -229,7 +226,6 @@ class mxCellHighlight {
/** /**
* Marks the <markedState> and fires a <mark> event. * Marks the <markedState> and fires a <mark> event.
*/ */
// highlight(state: mxCellState): void;
highlight(state: CellState | null = null): void { highlight(state: CellState | null = null): void {
if (this.state !== state) { if (this.state !== state) {
if (this.shape != null) { if (this.shape != null) {
@ -247,7 +243,6 @@ class mxCellHighlight {
/** /**
* Returns true if this highlight is at the given position. * Returns true if this highlight is at the given position.
*/ */
// isHighlightAt(x: number, y: number): boolean;
isHighlightAt(x: number, y: number): boolean { isHighlightAt(x: number, y: number): boolean {
let hit = false; let hit = false;
if (this.shape != null && document.elementFromPoint != null) { if (this.shape != null && document.elementFromPoint != null) {
@ -267,7 +262,6 @@ class mxCellHighlight {
/** /**
* Destroys the handler and all its resources and DOM nodes. * Destroys the handler and all its resources and DOM nodes.
*/ */
// destroy(): void;
destroy(): void { destroy(): void {
const graph = <graph>this.graph; const graph = <graph>this.graph;
graph.getView().removeListener(this.resetHandler); graph.getView().removeListener(this.resetHandler);
@ -281,4 +275,4 @@ class mxCellHighlight {
} }
} }
export default mxCellHighlight; export default CellHighlight;

14
packages/core/src/view/selection/Selection.ts → packages/core/src/view/selection/GraphSelection.ts
View File

@ -2,16 +2,10 @@ import Cell from "../cell/datatypes/Cell";
import CellArray from "../cell/datatypes/CellArray"; import CellArray from "../cell/datatypes/CellArray";
import Rectangle from "../geometry/Rectangle"; import Rectangle from "../geometry/Rectangle";
import InternalMouseEvent from "../event/InternalMouseEvent"; import InternalMouseEvent from "../event/InternalMouseEvent";
import CellState from "../cell/datatypes/CellState";
import EdgeHandler from "../cell/edge/EdgeHandler";
import VertexHandler from "../cell/vertex/VertexHandler";
import EdgeStyle from "../style/EdgeStyle";
import EdgeSegmentHandler from "../cell/edge/EdgeSegmentHandler";
import ElbowEdgeHandler from "../cell/edge/ElbowEdgeHandler";
import graph from "../Graph"; import graph from "../Graph";
import mxClient from "../../mxClient"; import mxClient from "../../mxClient";
import SelectionChange from "./SelectionChange"; import SelectionChange from "./SelectionChange";
import mxUndoableEdit from "../model/mxUndoableEdit"; import UndoableEdit from "../model/UndoableEdit";
import EventObject from "../event/EventObject"; import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent"; import InternalEvent from "../event/InternalEvent";
import EventSource from "../event/EventSource"; import EventSource from "../event/EventSource";
@ -19,7 +13,7 @@ import Dictionary from "../../util/Dictionary";
import RootChange from "../model/RootChange"; import RootChange from "../model/RootChange";
import ChildChange from "../model/ChildChange"; import ChildChange from "../model/ChildChange";
class Selection extends EventSource { class GraphSelection extends EventSource {
constructor(graph: graph) { constructor(graph: graph) {
super(); super();
@ -242,7 +236,7 @@ class Selection extends EventSource {
) { ) {
const change = new SelectionChange(this, added || new CellArray(), removed || new CellArray()); const change = new SelectionChange(this, added || new CellArray(), removed || new CellArray());
change.execute(); change.execute();
const edit = new mxUndoableEdit(this, false); const edit = new UndoableEdit(this, false);
edit.add(change); edit.add(change);
this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit)); this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit));
} }
@ -700,6 +694,6 @@ class Selection extends EventSource {
} }
} }
export default Selection; export default GraphSelection;

30
packages/core/src/view/selection/RubberBand.ts
View File

@ -3,7 +3,13 @@
* Copyright (c) 2006-2016, Gaudenz Alder * Copyright (c) 2006-2016, Gaudenz Alder
*/ */
import utils, { getOffset, getScrollOrigin, setOpacity } from '../../util/Utils'; import {
convertPoint,
getOffset,
getScrollOrigin,
setOpacity,
setPrefixedStyle,
} from '../../util/Utils';
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import Point from '../geometry/Point'; import Point from '../geometry/Point';
import InternalMouseEvent from '../event/InternalMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
@ -145,8 +151,7 @@ class RubberBand {
* event all subsequent events of the gesture are redirected to this * event all subsequent events of the gesture are redirected to this
* handler. * handler.
*/ */
mouseDown(sender: any, mouseDown(sender: any, me: InternalMouseEvent): void {
me: InternalMouseEvent): void {
if ( if (
!me.isConsumed() && !me.isConsumed() &&
this.isEnabled() && this.isEnabled() &&
@ -154,8 +159,8 @@ class RubberBand {
me.getState() == null && me.getState() == null &&
!isMultiTouchEvent(me.getEvent()) !isMultiTouchEvent(me.getEvent())
) { ) {
const offset = utils.getOffset(this.graph.container); const offset = getOffset(this.graph.container);
const origin = utils.getScrollOrigin(this.graph.container); const origin = getScrollOrigin(this.graph.container);
origin.x -= offset.x; origin.x -= offset.x;
origin.y -= offset.y; origin.y -= offset.y;
this.start(me.getX() + origin.x, me.getY() + origin.y); this.start(me.getX() + origin.x, me.getY() + origin.y);
@ -179,7 +184,7 @@ class RubberBand {
function createMouseEvent(evt) { function createMouseEvent(evt) {
const me = new InternalMouseEvent(evt); const me = new InternalMouseEvent(evt);
const pt = utils.convertPoint(container, me.getX(), me.getY()); const pt = convertPoint(container, me.getX(), me.getY());
me.graphX = pt.x; me.graphX = pt.x;
me.graphY = pt.y; me.graphY = pt.y;
@ -211,9 +216,7 @@ class RubberBand {
* *
* Handles the event by updating therubberband selection. * Handles the event by updating therubberband selection.
*/ */
mouseMove(sender: any, mouseMove(sender: any, me: InternalMouseEvent): void {
me: InternalMouseEvent): void {
if (!me.isConsumed() && this.first != null) { if (!me.isConsumed() && this.first != null) {
const origin = getScrollOrigin(this.graph.container); const origin = getScrollOrigin(this.graph.container);
const offset = getOffset(this.graph.container); const offset = getOffset(this.graph.container);
@ -265,8 +268,7 @@ class RubberBand {
* *
* Returns true if this handler is active. * Returns true if this handler is active.
*/ */
isActive(sender: any, isActive(sender: any, me: InternalMouseEvent): boolean {
me: InternalMouseEvent): boolean {
return this.div != null && this.div.style.display !== 'none'; return this.div != null && this.div.style.display !== 'none';
} }
@ -276,9 +278,7 @@ class RubberBand {
* Handles the event by selecting the region of the rubberband using * Handles the event by selecting the region of the rubberband using
* <mxGraph.selectRegion>. * <mxGraph.selectRegion>.
*/ */
mouseUp(sender: any, mouseUp(sender: any, me: InternalMouseEvent): void {
me: InternalMouseEvent): void {
const active = this.isActive(); const active = this.isActive();
this.reset(); this.reset();
@ -308,7 +308,7 @@ class RubberBand {
if (this.div != null) { if (this.div != null) {
if (mxClient.IS_SVG && this.fadeOut) { if (mxClient.IS_SVG && this.fadeOut) {
const temp = this.div; const temp = this.div;
utils.setPrefixedStyle(temp.style, 'transition', 'all 0.2s linear'); setPrefixedStyle(temp.style, 'transition', 'all 0.2s linear');
temp.style.pointerEvents = 'none'; temp.style.pointerEvents = 'none';
temp.style.opacity = 0; temp.style.opacity = 0;

70
packages/core/src/view/selection/mxSelectionCellsHandler.js → packages/core/src/view/selection/SelectionCellsHandler.ts
View File

@ -8,7 +8,11 @@ import EventSource from '../event/EventSource';
import Dictionary from '../../util/Dictionary'; import Dictionary from '../../util/Dictionary';
import EventObject from '../event/EventObject'; import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils'; import utils, { sortCells } from '../../util/Utils';
import Graph from '../Graph';
import Cell from '../cell/datatypes/Cell';
import CellArray from '../cell/datatypes/CellArray';
import CellState from '../cell/datatypes/CellState';
/** /**
* Class: mxSelectionCellsHandler * Class: mxSelectionCellsHandler
@ -32,8 +36,8 @@ import utils from '../../util/Utils';
* *
* graph - Reference to the enclosing <mxGraph>. * graph - Reference to the enclosing <mxGraph>.
*/ */
class mxSelectionCellsHandler extends EventSource { class SelectionCellsHandler extends EventSource {
constructor(graph) { constructor(graph: Graph) {
super(); super();
this.graph = graph; this.graph = graph;
@ -62,48 +66,42 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; graph: Graph;
graph = null;
/** /**
* Variable: enabled * Variable: enabled
* *
* Specifies if events are handled. Default is true. * Specifies if events are handled. Default is true.
*/ */
// enabled: boolean; enabled: boolean = true;
enabled = true;
/** /**
* Variable: refreshHandler * Variable: refreshHandler
* *
* Keeps a reference to an event listener for later removal. * Keeps a reference to an event listener for later removal.
*/ */
// refreshHandler: any; refreshHandler: any = null;
refreshHandler = null;
/** /**
* Variable: maxHandlers * Variable: maxHandlers
* *
* Defines the maximum number of handlers to paint individually. Default is 100. * Defines the maximum number of handlers to paint individually. Default is 100.
*/ */
// maxHandlers: number; maxHandlers: number = 100;
maxHandlers = 100;
/** /**
* Variable: handlers * Variable: handlers
* *
* <mxDictionary> that maps from cells to handlers. * <mxDictionary> that maps from cells to handlers.
*/ */
// handlers: mxDictionary<any>; handlers: Dictionary<string, any>;
handlers = null;
/** /**
* Function: isEnabled * Function: isEnabled
* *
* Returns <enabled>. * Returns <enabled>.
*/ */
// isEnabled(): boolean; isEnabled(): boolean {
isEnabled() {
return this.enabled; return this.enabled;
} }
@ -112,8 +110,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Sets <enabled>. * Sets <enabled>.
*/ */
// setEnabled(value: boolean): void; setEnabled(value: boolean): void {
setEnabled(value) {
this.enabled = value; this.enabled = value;
} }
@ -122,8 +119,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Returns the handler for the given cell. * Returns the handler for the given cell.
*/ */
// getHandler(cell: mxCell): any; getHandler(cell: Cell): any {
getHandler(cell) {
return this.handlers.get(cell); return this.handlers.get(cell);
} }
@ -132,7 +128,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Returns true if the given cell has a handler. * Returns true if the given cell has a handler.
*/ */
isHandled(cell) { isHandled(cell: Cell): boolean {
return this.getHandler(cell) != null; return this.getHandler(cell) != null;
} }
@ -141,8 +137,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Resets all handlers. * Resets all handlers.
*/ */
// reset(): void; reset(): void {
reset() {
this.handlers.visit((key, handler) => { this.handlers.visit((key, handler) => {
handler.reset.apply(handler); handler.reset.apply(handler);
}); });
@ -153,8 +148,8 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Reloads or updates all handlers. * Reloads or updates all handlers.
*/ */
getHandledSelectionCells() { getHandledSelectionCells(): CellArray {
return this.graph.getSelectionCells(); return this.graph.selection.getSelectionCells();
} }
/** /**
@ -162,14 +157,13 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Reloads or updates all handlers. * Reloads or updates all handlers.
*/ */
// refresh(): void; refresh(): void {
refresh() {
// Removes all existing handlers // Removes all existing handlers
const oldHandlers = this.handlers; const oldHandlers = this.handlers;
this.handlers = new Dictionary(); this.handlers = new Dictionary();
// Creates handles for all selection cells // Creates handles for all selection cells
const tmp = utils.sortCells(this.getHandledSelectionCells(), false); const tmp = sortCells(this.getHandledSelectionCells(), false);
// Destroys or updates old handlers // Destroys or updates old handlers
for (let i = 0; i < tmp.length; i += 1) { for (let i = 0; i < tmp.length; i += 1) {
@ -226,8 +220,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Returns true if the given handler is active and should not be redrawn. * Returns true if the given handler is active and should not be redrawn.
*/ */
// isHandlerActive(handler: any): boolean; isHandlerActive(handler: any): boolean {
isHandlerActive(handler) {
return handler.index != null; return handler.index != null;
} }
@ -236,8 +229,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Updates the handler for the given shape if one exists. * Updates the handler for the given shape if one exists.
*/ */
// updateHandler(state: mxCellState): void; updateHandler(state: CellState): void {
updateHandler(state) {
let handler = this.handlers.remove(state.cell); let handler = this.handlers.remove(state.cell);
if (handler != null) { if (handler != null) {
@ -264,8 +256,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Redirects the given event to the handlers. * Redirects the given event to the handlers.
*/ */
// mouseDown(sender: Event, me: Event): void; mouseDown(sender: Event, me: Event): void {
mouseDown(sender, me) {
if (this.graph.isEnabled() && this.isEnabled()) { if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me]; const args = [sender, me];
@ -280,8 +271,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Redirects the given event to the handlers. * Redirects the given event to the handlers.
*/ */
// mouseMove(sender: Event, me: Event): void; mouseMove(sender: Event, me: Event): void {
mouseMove(sender, me) {
if (this.graph.isEnabled() && this.isEnabled()) { if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me]; const args = [sender, me];
@ -296,8 +286,7 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Redirects the given event to the handlers. * Redirects the given event to the handlers.
*/ */
// mouseUp(sender: Event, me: Event): void; mouseUp(sender: Event, me: Event): void {
mouseUp(sender, me) {
if (this.graph.isEnabled() && this.isEnabled()) { if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me]; const args = [sender, me];
@ -312,12 +301,11 @@ class mxSelectionCellsHandler extends EventSource {
* *
* Destroys the handler and all its resources and DOM nodes. * Destroys the handler and all its resources and DOM nodes.
*/ */
// destroy(): void; destroy(): void {
destroy() {
this.graph.removeMouseListener(this); this.graph.removeMouseListener(this);
if (this.refreshHandler != null) { if (this.refreshHandler != null) {
this.graph.getSelectionModel().removeListener(this.refreshHandler); this.graph.selection.getSelectionModel().removeListener(this.refreshHandler);
this.graph.getModel().removeListener(this.refreshHandler); this.graph.getModel().removeListener(this.refreshHandler);
this.graph.getView().removeListener(this.refreshHandler); this.graph.getView().removeListener(this.refreshHandler);
this.refreshHandler = null; this.refreshHandler = null;
@ -325,4 +313,4 @@ class mxSelectionCellsHandler extends EventSource {
} }
} }
export default mxSelectionCellsHandler; export default SelectionCellsHandler;

5
packages/core/src/view/style/Perimeter.ts
View File

@ -98,7 +98,6 @@ class Perimeter {
* of the perimeter and the line between the next and the center point is * of the perimeter and the line between the next and the center point is
* returned. * returned.
*/ */
// static RectanglePerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static RectanglePerimeter( static RectanglePerimeter(
bounds: Rectangle, bounds: Rectangle,
vertex: CellState, vertex: CellState,
@ -159,7 +158,6 @@ class Perimeter {
* Describes an elliptic perimeter. See {@link RectanglePerimeter} * Describes an elliptic perimeter. See {@link RectanglePerimeter}
* for a description of the parameters. * for a description of the parameters.
*/ */
// static EllipsePerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static EllipsePerimeter( static EllipsePerimeter(
bounds: Rectangle, bounds: Rectangle,
vertex: CellState, vertex: CellState,
@ -246,7 +244,6 @@ class Perimeter {
* Describes a rhombus (aka diamond) perimeter. See {@link RectanglePerimeter} * Describes a rhombus (aka diamond) perimeter. See {@link RectanglePerimeter}
* for a description of the parameters. * for a description of the parameters.
*/ */
// static RhombusPerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static RhombusPerimeter( static RhombusPerimeter(
bounds: Rectangle, bounds: Rectangle,
vertex: CellState, vertex: CellState,
@ -307,7 +304,6 @@ class Perimeter {
* Describes a triangle perimeter. See {@link RectanglePerimeter} * Describes a triangle perimeter. See {@link RectanglePerimeter}
* for a description of the parameters. * for a description of the parameters.
*/ */
// static TrianglePerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static TrianglePerimeter( static TrianglePerimeter(
bounds: Rectangle, bounds: Rectangle,
vertex: CellState, vertex: CellState,
@ -437,7 +433,6 @@ class Perimeter {
* Describes a hexagon perimeter. See {@link RectanglePerimeter} * Describes a hexagon perimeter. See {@link RectanglePerimeter}
* for a description of the parameters. * for a description of the parameters.
*/ */
// static HexagonPerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static HexagonPerimeter( static HexagonPerimeter(
bounds: Rectangle, bounds: Rectangle,
vertex: CellState, vertex: CellState,

90
packages/core/src/view/swimlane/Swimlane.ts → packages/core/src/view/swimlane/GraphSwimlane.ts
View File

@ -1,21 +1,26 @@
import Cell from "../cell/datatypes/Cell"; import Cell from '../cell/datatypes/Cell';
import Rectangle from "../geometry/Rectangle"; import Rectangle from '../geometry/Rectangle';
import utils, {convertPoint, getValue} from "../../util/Utils"; import utils, { convertPoint, getValue, mod } from '../../util/Utils';
import { import {
DEFAULT_STARTSIZE, DEFAULT_STARTSIZE,
DIRECTION_EAST, DIRECTION_EAST,
DIRECTION_NORTH, DIRECTION_NORTH,
DIRECTION_SOUTH, DIRECTION_SOUTH,
DIRECTION_WEST, SHAPE_SWIMLANE DIRECTION_WEST,
} from "../../util/Constants"; SHAPE_SWIMLANE,
import CellArray from "../cell/datatypes/CellArray"; } from '../../util/Constants';
import InternalMouseEvent from "../event/InternalMouseEvent"; import CellArray from '../cell/datatypes/CellArray';
import {getClientX, getClientY} from "../../util/EventUtils"; import InternalMouseEvent from '../event/InternalMouseEvent';
import { getClientX, getClientY } from '../../util/EventUtils';
import Graph from '../Graph';
class Swimlane { class GraphSwimlane {
constructor() { constructor(graph: Graph) {
this.graph = graph;
} }
graph: Graph;
/** /**
* Specifies if swimlanes should be selectable via the content if the * Specifies if swimlanes should be selectable via the content if the
* mouse is released. * mouse is released.
@ -105,14 +110,12 @@ class Swimlane {
* @param x X-coordinate of the mouse event. * @param x X-coordinate of the mouse event.
* @param y Y-coordinate of the mouse event. * @param y Y-coordinate of the mouse event.
*/ */
hitsSwimlaneContent(swimlane: Cell, hitsSwimlaneContent(swimlane: Cell, x: number, y: number): boolean {
x: number, const state = this.graph.view.getState(swimlane);
y: number): boolean {
const state = this.getView().getState(swimlane);
const size = this.getStartSize(swimlane); const size = this.getStartSize(swimlane);
if (state != null) { if (state != null) {
const scale = this.getView().getScale(); const scale = this.graph.view.getScale();
x -= state.x; x -= state.x;
y -= state.y; y -= state.y;
@ -141,10 +144,8 @@ class Swimlane {
*/ */
getStartSize(swimlane: Cell, ignoreState: boolean = false): Rectangle { getStartSize(swimlane: Cell, ignoreState: boolean = false): Rectangle {
const result = new Rectangle(); const result = new Rectangle();
const style = this.getCurrentCellStyle(swimlane, ignoreState); const style = this.graph.cell.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt( const size = parseInt(getValue(style, 'startSize', DEFAULT_STARTSIZE));
getValue(style, 'startSize', DEFAULT_STARTSIZE)
);
if (getValue(style, 'horizontal', true)) { if (getValue(style, 'horizontal', true)) {
result.height = size; result.height = size;
@ -172,19 +173,17 @@ class Swimlane {
n += 1; n += 1;
} }
const mod = utils.mod(n, 2); const _mod = mod(n, 2);
if (flipH && mod === 1) { if (flipH && _mod === 1) {
n += 2; n += 2;
} }
if (flipV && mod === 0) { if (flipV && _mod === 0) {
n += 2; n += 2;
} }
return [DIRECTION_NORTH, DIRECTION_EAST, DIRECTION_SOUTH, DIRECTION_WEST][ return [DIRECTION_NORTH, DIRECTION_EAST, DIRECTION_SOUTH, DIRECTION_WEST][mod(n, 4)];
utils.mod(n, 4)
];
} }
/** /**
@ -196,14 +195,11 @@ class Swimlane {
* @param swimlane {@link mxCell} whose start size should be returned. * @param swimlane {@link mxCell} whose start size should be returned.
* @param ignoreState Optional boolean that specifies if cell state should be ignored. * @param ignoreState Optional boolean that specifies if cell state should be ignored.
*/ */
getActualStartSize( getActualStartSize(swimlane: Cell, ignoreState: boolean = false): Rectangle {
swimlane: Cell,
ignoreState: boolean = false
): Rectangle {
const result = new Rectangle(); const result = new Rectangle();
if (this.isSwimlane(swimlane, ignoreState)) { if (this.isSwimlane(swimlane, ignoreState)) {
const style = this.getCurrentCellStyle(swimlane, ignoreState); const style = this.graph.cell.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt(getValue(style, 'startSize', DEFAULT_STARTSIZE)); const size = parseInt(getValue(style, 'startSize', DEFAULT_STARTSIZE));
const dir = this.getSwimlaneDirection(style); const dir = this.getSwimlaneDirection(style);
@ -231,13 +227,10 @@ class Swimlane {
isSwimlane(cell: Cell, ignoreState: boolean = false): boolean { isSwimlane(cell: Cell, ignoreState: boolean = false): boolean {
if ( if (
cell != null && cell != null &&
cell.getParent() !== this.getModel().getRoot() && cell.getParent() !== this.graph.model.getRoot() &&
!cell.isEdge() !cell.isEdge()
) { ) {
return ( return this.graph.cell.getCurrentCellStyle(cell, ignoreState).shape === SHAPE_SWIMLANE;
this.getCurrentCellStyle(cell, ignoreState).shape ===
SHAPE_SWIMLANE
);
} }
return false; return false;
} }
@ -256,14 +249,12 @@ class Swimlane {
* @param cells {@link mxCell} that should be dropped into the target. * @param cells {@link mxCell} that should be dropped into the target.
* @param evt Mouseevent that triggered the invocation. * @param evt Mouseevent that triggered the invocation.
*/ */
// isValidDropTarget(cell: mxCell, cells: mxCellArray, evt: Event): boolean;
isValidDropTarget(cell: Cell, cells: CellArray, evt: InternalMouseEvent): boolean { isValidDropTarget(cell: Cell, cells: CellArray, evt: InternalMouseEvent): boolean {
return ( return (
cell != null && cell != null &&
((this.isSplitEnabled() && this.isSplitTarget(cell, cells, evt)) || ((this.graph.isSplitEnabled() && this.graph.isSplitTarget(cell, cells, evt)) ||
(!cell.isEdge() && (!cell.isEdge() &&
(this.isSwimlane(cell) || (this.isSwimlane(cell) || (cell.getChildCount() > 0 && !cell.isCollapsed()))))
(cell.getChildCount() > 0 && !cell.isCollapsed()))))
); );
} }
@ -281,7 +272,6 @@ class Swimlane {
* @param cell {@link mxCell} that is under the mousepointer. * @param cell {@link mxCell} that is under the mousepointer.
* @param clone Optional boolean to indicate of cells will be cloned. * @param clone Optional boolean to indicate of cells will be cloned.
*/ */
// getDropTarget(cells: mxCellArray, evt: Event, cell: mxCell, clone?: boolean): mxCell;
getDropTarget( getDropTarget(
cells: CellArray, cells: CellArray,
evt: InternalMouseEvent, evt: InternalMouseEvent,
@ -296,13 +286,9 @@ class Swimlane {
} }
} }
const pt = convertPoint( const pt = convertPoint(this.graph.container, getClientX(evt), getClientY(evt));
this.container, pt.x -= this.graph.panning.panDx;
getClientX(evt), pt.y -= this.graph.panning.panDy;
getClientY(evt)
);
pt.x -= this.panDx;
pt.y -= this.panDy;
const swimlane = this.getSwimlaneAt(pt.x, pt.y); const swimlane = this.getSwimlaneAt(pt.x, pt.y);
if (cell == null) { if (cell == null) {
@ -324,8 +310,8 @@ class Swimlane {
while ( while (
cell != null && cell != null &&
!this.isValidDropTarget(cell, cells, evt) && !this.isValidDropTarget(cell, cells, evt) &&
!this.getModel().isLayer(cell) !this.graph.model.isLayer(cell)
) { ) {
cell = cell.getParent(); cell = cell.getParent();
} }
@ -337,9 +323,7 @@ class Swimlane {
} }
} }
return !this.getModel().isLayer(<Cell>cell) && parent == null return !this.graph.model.isLayer(<Cell>cell) && parent == null ? cell : null;
? cell
: null;
} }
/** /**
@ -378,4 +362,4 @@ class Swimlane {
} }
} }
export default Swimlane; export default GraphSwimlane;

13
packages/core/src/view/terminal/GraphTerminal.ts
View File

@ -1,8 +1,15 @@
import CellArray from "../cell/datatypes/CellArray"; import CellArray from "../cell/datatypes/CellArray";
import Cell from "../cell/datatypes/Cell"; import Cell from "../cell/datatypes/Cell";
import Dictionary from "../../util/Dictionary"; import Dictionary from "../../util/Dictionary";
import Graph from '../Graph';
class GraphTerminal { class GraphTerminal {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/***************************************************************************** /*****************************************************************************
* Group: Graph behaviour * Group: Graph behaviour
*****************************************************************************/ *****************************************************************************/
@ -50,16 +57,16 @@ class GraphTerminal {
const dict = new Dictionary(); const dict = new Dictionary();
for (let i = 0; i < edges.length; i += 1) { for (let i = 0; i < edges.length; i += 1) {
const state = this.view.getState(edges[i]); const state = this.graph.view.getState(edges[i]);
const source = const source =
state != null state != null
? state.getVisibleTerminal(true) ? state.getVisibleTerminal(true)
: this.view.getVisibleTerminal(edges[i], true); : this.graph.view.getVisibleTerminal(edges[i], true);
const target = const target =
state != null state != null
? state.getVisibleTerminal(false) ? state.getVisibleTerminal(false)
: this.view.getVisibleTerminal(edges[i], false); : this.graph.view.getVisibleTerminal(edges[i], false);
// Checks if the terminal is the source of the edge and if the // Checks if the terminal is the source of the edge and if the
// target should be stored in the result // target should be stored in the result

20
packages/core/src/view/tooltip/GraphTooltip.ts
View File

@ -2,11 +2,18 @@ import CellState from "../cell/datatypes/CellState";
import {htmlEntities} from "../../util/StringUtils"; import {htmlEntities} from "../../util/StringUtils";
import Resources from "../../util/Resources"; import Resources from "../../util/Resources";
import Shape from "../geometry/shape/Shape"; import Shape from "../geometry/shape/Shape";
import mxSelectionCellsHandler from "../selection/mxSelectionCellsHandler"; import SelectionCellsHandler from "../selection/SelectionCellsHandler";
import Cell from "../cell/datatypes/Cell"; import Cell from "../cell/datatypes/Cell";
import TooltipHandler from "./TooltipHandler"; import TooltipHandler from "./TooltipHandler";
import Graph from '../Graph';
class GraphTooltip { class GraphTooltip {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/** /**
* Returns the string or DOM node that represents the tooltip for the given * Returns the string or DOM node that represents the tooltip for the given
* state, node and coordinate pair. This implementation checks if the given * state, node and coordinate pair. This implementation checks if the given
@ -22,7 +29,6 @@ class GraphTooltip {
* @param x X-coordinate of the mouse. * @param x X-coordinate of the mouse.
* @param y Y-coordinate of the mouse. * @param y Y-coordinate of the mouse.
*/ */
// getTooltip(state: mxCellState, node: Node, x: number, y: number): string;
getTooltip( getTooltip(
state: CellState, state: CellState,
node: HTMLElement, node: HTMLElement,
@ -38,7 +44,7 @@ class GraphTooltip {
// @ts-ignore // @ts-ignore
(node === state.control.node || node.parentNode === state.control.node) (node === state.control.node || node.parentNode === state.control.node)
) { ) {
tip = this.collapseExpandResource; tip = this.graph.collapseExpandResource;
tip = htmlEntities(Resources.get(tip) || tip, true).replace( tip = htmlEntities(Resources.get(tip) || tip, true).replace(
/\\n/g, /\\n/g,
'<br>' '<br>'
@ -60,8 +66,8 @@ class GraphTooltip {
} }
if (tip == null) { if (tip == null) {
const handler = (<mxSelectionCellsHandler>( const handler = (<SelectionCellsHandler>(
this.selectionCellsHandler this.graph.selectionCellsHandler
)).getHandler(<Cell>state.cell); )).getHandler(<Cell>state.cell);
if ( if (
handler != null && handler != null &&
@ -103,7 +109,7 @@ class GraphTooltip {
// @ts-ignore // @ts-ignore
tip = cell.getTooltip(); tip = cell.getTooltip();
} else { } else {
tip = this.convertValueToString(cell); tip = this.graph.convertValueToString(cell);
} }
return tip; return tip;
} }
@ -119,7 +125,7 @@ class GraphTooltip {
* @param enabled Boolean indicating if tooltips should be enabled. * @param enabled Boolean indicating if tooltips should be enabled.
*/ */
setTooltips(enabled: boolean): void { setTooltips(enabled: boolean): void {
(<TooltipHandler>this.tooltipHandler).setEnabled(enabled); (<TooltipHandler>this.graph.tooltipHandler).setEnabled(enabled);
} }
} }

77
packages/core/src/view/tooltip/TooltipHandler.js → packages/core/src/view/tooltip/TooltipHandler.ts
View File

@ -5,10 +5,13 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import InternalEvent from '../event/InternalEvent'; import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils'; import { fit, getScrollOrigin } from '../../util/Utils';
import { TOOLTIP_VERTICAL_OFFSET } from '../../util/Constants'; import { TOOLTIP_VERTICAL_OFFSET } from '../../util/Constants';
import { getSource, isMouseEvent } from '../../util/EventUtils'; import { getSource, isMouseEvent } from '../../util/EventUtils';
import { isNode } from '../../util/DomUtils'; import { isNode } from '../../util/DomUtils';
import Graph from '../Graph';
import CellState from '../cell/datatypes/CellState';
import InternalMouseEvent from '../event/InternalMouseEvent';
/** /**
* Class: mxTooltipHandler * Class: mxTooltipHandler
@ -35,7 +38,7 @@ import { isNode } from '../../util/DomUtils';
* delay - Optional delay in milliseconds. * delay - Optional delay in milliseconds.
*/ */
class TooltipHandler { class TooltipHandler {
constructor(graph, delay) { constructor(graph: Graph | null, delay: number) {
if (graph != null) { if (graph != null) {
this.graph = graph; this.graph = graph;
this.delay = delay || 500; this.delay = delay || 500;
@ -48,32 +51,28 @@ class TooltipHandler {
* *
* Specifies the zIndex for the tooltip and its shadow. Default is 10005. * Specifies the zIndex for the tooltip and its shadow. Default is 10005.
*/ */
// zIndex: number; zIndex: number = 10005;
zIndex = 10005;
/** /**
* Variable: graph * Variable: graph
* *
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; graph: Graph = null;
graph = null;
/** /**
* Variable: delay * Variable: delay
* *
* Delay to show the tooltip in milliseconds. Default is 500. * Delay to show the tooltip in milliseconds. Default is 500.
*/ */
// delay: number; delay: number = null;
delay = null;
/** /**
* Variable: ignoreTouchEvents * Variable: ignoreTouchEvents
* *
* Specifies if touch and pen events should be ignored. Default is true. * Specifies if touch and pen events should be ignored. Default is true.
*/ */
// ignoreTouchEvents: boolean; ignoreTouchEvents: boolean = true;
ignoreTouchEvents = true;
/** /**
* Variable: hideOnHover * Variable: hideOnHover
@ -81,24 +80,21 @@ class TooltipHandler {
* Specifies if the tooltip should be hidden if the mouse is moved over the * Specifies if the tooltip should be hidden if the mouse is moved over the
* current cell. Default is false. * current cell. Default is false.
*/ */
// hideOnHover: boolean; hideOnHover: boolean = false;
hideOnHover = false;
/** /**
* Variable: destroyed * Variable: destroyed
* *
* True if this handler was destroyed using <destroy>. * True if this handler was destroyed using <destroy>.
*/ */
// destroyed: boolean; destroyed: boolean = false;
destroyed = false;
/** /**
* Variable: enabled * Variable: enabled
* *
* Specifies if events are handled. Default is true. * Specifies if events are handled. Default is true.
*/ */
// enabled: boolean; enabled: boolean = true;
enabled = true;
/** /**
* Function: isEnabled * Function: isEnabled
@ -106,8 +102,7 @@ class TooltipHandler {
* Returns true if events are handled. This implementation * Returns true if events are handled. This implementation
* returns <enabled>. * returns <enabled>.
*/ */
// isEnabled(): boolean; isEnabled(): boolean {
isEnabled() {
return this.enabled; return this.enabled;
} }
@ -117,8 +112,7 @@ class TooltipHandler {
* Enables or disables event handling. This implementation * Enables or disables event handling. This implementation
* updates <enabled>. * updates <enabled>.
*/ */
// setEnabled(enabled: boolean): void; setEnabled(enabled: boolean): void {
setEnabled(enabled) {
this.enabled = enabled; this.enabled = enabled;
} }
@ -127,8 +121,7 @@ class TooltipHandler {
* *
* Returns <hideOnHover>. * Returns <hideOnHover>.
*/ */
// isHideOnHover(): boolean; isHideOnHover(): boolean {
isHideOnHover() {
return this.hideOnHover; return this.hideOnHover;
} }
@ -137,8 +130,7 @@ class TooltipHandler {
* *
* Sets <hideOnHover>. * Sets <hideOnHover>.
*/ */
// setHideOnHover(value: boolean): void; setHideOnHover(value: boolean): void {
setHideOnHover(value) {
this.hideOnHover = value; this.hideOnHover = value;
} }
@ -147,8 +139,7 @@ class TooltipHandler {
* *
* Initializes the DOM nodes required for this tooltip handler. * Initializes the DOM nodes required for this tooltip handler.
*/ */
// init(): void; init(): void {
init() {
if (document.body != null) { if (document.body != null) {
this.div = document.createElement('div'); this.div = document.createElement('div');
this.div.className = 'mxTooltip'; this.div.className = 'mxTooltip';
@ -171,8 +162,7 @@ class TooltipHandler {
* *
* Returns the <mxCellState> to be used for showing a tooltip for this event. * Returns the <mxCellState> to be used for showing a tooltip for this event.
*/ */
// getStateForEvent(me: mxMouseEvent): mxCellState; getStateForEvent(me: MouseEvent): CellState {
getStateForEvent(me) {
return me.getState(); return me.getState();
} }
@ -183,8 +173,7 @@ class TooltipHandler {
* event all subsequent events of the gesture are redirected to this * event all subsequent events of the gesture are redirected to this
* handler. * handler.
*/ */
// mouseDown(sender: any, me: mxMouseEvent): void; mouseDown(sender: any, me: InternalMouseEvent): void {
mouseDown(sender, me) {
this.reset(me, false); this.reset(me, false);
this.hideTooltip(); this.hideTooltip();
} }
@ -194,8 +183,7 @@ class TooltipHandler {
* *
* Handles the event by updating the rubberband selection. * Handles the event by updating the rubberband selection.
*/ */
// mouseMove(sender: any, me: mxMouseEvent): void; mouseMove(sender: any, me: InternalMouseEvent): void {
mouseMove(sender, me) {
if (me.getX() !== this.lastX || me.getY() !== this.lastY) { if (me.getX() !== this.lastX || me.getY() !== this.lastY) {
this.reset(me, true); this.reset(me, true);
const state = this.getStateForEvent(me); const state = this.getStateForEvent(me);
@ -223,8 +211,7 @@ class TooltipHandler {
* Handles the event by resetting the tooltip timer or hiding the existing * Handles the event by resetting the tooltip timer or hiding the existing
* tooltip. * tooltip.
*/ */
// mouseUp(sender: any, me: mxMouseEvent): void; mouseUp(sender: any, me: InternalMouseEvent): void {
mouseUp(sender, me) {
this.reset(me, true); this.reset(me, true);
this.hideTooltip(); this.hideTooltip();
} }
@ -234,8 +221,7 @@ class TooltipHandler {
* *
* Resets the timer. * Resets the timer.
*/ */
// resetTimer(): void; resetTimer(): void {
resetTimer() {
if (this.thread != null) { if (this.thread != null) {
window.clearTimeout(this.thread); window.clearTimeout(this.thread);
this.thread = null; this.thread = null;
@ -247,8 +233,7 @@ class TooltipHandler {
* *
* Resets and/or restarts the timer to trigger the display of the tooltip. * Resets and/or restarts the timer to trigger the display of the tooltip.
*/ */
// reset(me: mxMouseEvent, restart: boolean, state: mxCellState): void; reset(me: InternalMouseEvent, restart: boolean, state: CellState): void {
reset(me, restart, state) {
if (!this.ignoreTouchEvents || isMouseEvent(me.getEvent())) { if (!this.ignoreTouchEvents || isMouseEvent(me.getEvent())) {
this.resetTimer(); this.resetTimer();
state = state != null ? state : this.getStateForEvent(me); state = state != null ? state : this.getStateForEvent(me);
@ -289,8 +274,7 @@ class TooltipHandler {
* *
* Hides the tooltip and resets the timer. * Hides the tooltip and resets the timer.
*/ */
// hide(): void; hide(): void {
hide() {
this.resetTimer(); this.resetTimer();
this.hideTooltip(); this.hideTooltip();
} }
@ -300,8 +284,7 @@ class TooltipHandler {
* *
* Hides the tooltip. * Hides the tooltip.
*/ */
// hideTooltip(): void; hideTooltip(): void {
hideTooltip() {
if (this.div != null) { if (this.div != null) {
this.div.style.visibility = 'hidden'; this.div.style.visibility = 'hidden';
this.div.innerHTML = ''; this.div.innerHTML = '';
@ -314,15 +297,14 @@ class TooltipHandler {
* Shows the tooltip for the specified cell and optional index at the * Shows the tooltip for the specified cell and optional index at the
* specified location (with a vertical offset of 10 pixels). * specified location (with a vertical offset of 10 pixels).
*/ */
// show(tip: string, x: number, y: number): void; show(tip: string, x: number, y: number): void {
show(tip, x, y) {
if (!this.destroyed && tip != null && tip.length > 0) { if (!this.destroyed && tip != null && tip.length > 0) {
// Initializes the DOM nodes if required // Initializes the DOM nodes if required
if (this.div == null) { if (this.div == null) {
this.init(); this.init();
} }
const origin = utils.getScrollOrigin(); const origin = getScrollOrigin();
this.div.style.zIndex = this.zIndex; this.div.style.zIndex = this.zIndex;
this.div.style.left = `${x + origin.x}px`; this.div.style.left = `${x + origin.x}px`;
@ -336,7 +318,7 @@ class TooltipHandler {
} }
this.div.style.visibility = ''; this.div.style.visibility = '';
utils.fit(this.div); fit(this.div);
} }
} }
@ -345,8 +327,7 @@ class TooltipHandler {
* *
* Destroys the handler and all its resources and DOM nodes. * Destroys the handler and all its resources and DOM nodes.
*/ */
// destroy(): void; destroy(): void {
destroy() {
if (!this.destroyed) { if (!this.destroyed) {
this.graph.removeMouseListener(this); this.graph.removeMouseListener(this);
InternalEvent.release(this.div); InternalEvent.release(this.div);

175
packages/core/src/view/view/GraphView.ts
View File

@ -34,7 +34,7 @@ import {
import mxLog from '../../util/gui/mxLog'; import mxLog from '../../util/gui/mxLog';
import Resources from '../../util/Resources'; import Resources from '../../util/Resources';
import CellState from '../cell/datatypes/CellState'; import CellState from '../cell/datatypes/CellState';
import mxUndoableEdit from '../model/mxUndoableEdit'; import UndoableEdit from '../model/UndoableEdit';
import ImageShape from '../geometry/shape/node/ImageShape'; import ImageShape from '../geometry/shape/node/ImageShape';
import InternalMouseEvent from '../event/InternalMouseEvent'; import InternalMouseEvent from '../event/InternalMouseEvent';
import StyleRegistry from '../style/StyleRegistry'; import StyleRegistry from '../style/StyleRegistry';
@ -70,7 +70,7 @@ import CellArray from "../cell/datatypes/CellArray";
* #### Event: mxEvent.UNDO * #### Event: mxEvent.UNDO
* *
* Fires after the root was changed in {@link setCurrentRoot}. The `edit` * Fires after the root was changed in {@link setCurrentRoot}. The `edit`
* property contains the {@link mxUndoableEdit} which contains the * property contains the {@link UndoableEdit} which contains the
* {@link CurrentRootChange}. * {@link CurrentRootChange}.
* *
* #### Event: mxEvent.SCALE_AND_TRANSLATE * #### Event: mxEvent.SCALE_AND_TRANSLATE
@ -260,6 +260,14 @@ class GraphView extends EventSource {
return this.translate; return this.translate;
} }
isRendering() {
return this.rendering;
}
setRendering(value: boolean) {
this.rendering = value;
}
/** /**
* Sets the translation and fires a {@link translate} event before calling * Sets the translation and fires a {@link translate} event before calling
* {@link revalidate} followed by {@link graph.sizeDidChange}. The translation is the * {@link revalidate} followed by {@link graph.sizeDidChange}. The translation is the
@ -283,22 +291,14 @@ class GraphView extends EventSource {
this.fireEvent( this.fireEvent(
new EventObject( new EventObject(
InternalEvent.TRANSLATE, InternalEvent.TRANSLATE,
'translate', {
this.translate, translate: this.translate,
'previousTranslate', previousTranslate: previousTranslate,
previousTranslate }
) )
); );
} }
isRendering() {
return this.rendering;
}
setRendering(value: boolean) {
this.rendering = value;
}
isAllowEval() { isAllowEval() {
return this.allowEval; return this.allowEval;
} }
@ -310,16 +310,14 @@ class GraphView extends EventSource {
/** /**
* Returns {@link states}. * Returns {@link states}.
*/ */
// getStates(): mxDictionary<mxCellState>; getStates(): Dictionary<string, CellState> {
getStates() {
return this.states; return this.states;
} }
/** /**
* Sets {@link states}. * Sets {@link states}.
*/ */
// setStates(value: mxDictionary<mxCellState>): void; setStates(value: Dictionary<string, CellState>): void {
setStates(value: Dictionary): void {
this.states = value; this.states = value;
} }
@ -327,7 +325,6 @@ class GraphView extends EventSource {
* Returns the DOM node that contains the background-, draw- and * Returns the DOM node that contains the background-, draw- and
* overlay- and decoratorpanes. * overlay- and decoratorpanes.
*/ */
// getCanvas(): SVGElement;
getCanvas(): SVGElement | null { getCanvas(): SVGElement | null {
return this.canvas; return this.canvas;
} }
@ -335,7 +332,6 @@ class GraphView extends EventSource {
/** /**
* Returns the DOM node that represents the background layer. * Returns the DOM node that represents the background layer.
*/ */
// getBackgroundPane(): Element;
getBackgroundPane(): SVGElement | null { getBackgroundPane(): SVGElement | null {
return this.backgroundPane; return this.backgroundPane;
} }
@ -343,7 +339,6 @@ class GraphView extends EventSource {
/** /**
* Returns the DOM node that represents the main drawing layer. * Returns the DOM node that represents the main drawing layer.
*/ */
// getDrawPane(): Element;
getDrawPane(): SVGElement | null { getDrawPane(): SVGElement | null {
return this.drawPane; return this.drawPane;
} }
@ -351,7 +346,6 @@ class GraphView extends EventSource {
/** /**
* Returns the DOM node that represents the layer above the drawing layer. * Returns the DOM node that represents the layer above the drawing layer.
*/ */
// getOverlayPane(): Element;
getOverlayPane(): SVGElement | null { getOverlayPane(): SVGElement | null {
return this.overlayPane; return this.overlayPane;
} }
@ -359,7 +353,6 @@ class GraphView extends EventSource {
/** /**
* Returns the DOM node that represents the topmost drawing layer. * Returns the DOM node that represents the topmost drawing layer.
*/ */
// getDecoratorPane(): Element;
getDecoratorPane(): SVGElement | null { getDecoratorPane(): SVGElement | null {
return this.decoratorPane; return this.decoratorPane;
} }
@ -369,7 +362,6 @@ class GraphView extends EventSource {
* *
* @param cells Array of {@link Cell} whose bounds should be returned. * @param cells Array of {@link Cell} whose bounds should be returned.
*/ */
// getBounds(cells: mxCellArray): mxRectangle;
getBounds(cells: CellArray): Rectangle | null { getBounds(cells: CellArray): Rectangle | null {
let result = null; let result = null;
@ -397,13 +389,12 @@ class GraphView extends EventSource {
* *
* @param root {@link mxCell} that specifies the root of the displayed cell hierarchy. * @param root {@link mxCell} that specifies the root of the displayed cell hierarchy.
*/ */
// setCurrentRoot(root: mxCell): mxCell;
setCurrentRoot(root: Cell | null): Cell | null { setCurrentRoot(root: Cell | null): Cell | null {
if (this.currentRoot != root) { if (this.currentRoot != root) {
const change = new CurrentRootChange(this, <Cell>root); const change = new CurrentRootChange(this, <Cell>root);
change.execute(); change.execute();
const edit = new mxUndoableEdit(this, true); const edit = new UndoableEdit(this, true);
edit.add(change); edit.add(change);
this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit)); this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit));
@ -422,7 +413,6 @@ class GraphView extends EventSource {
* @param dx X-coordinate of the translation. * @param dx X-coordinate of the translation.
* @param dy Y-coordinate of the translation. * @param dy Y-coordinate of the translation.
*/ */
// scaleAndTranslate(scale: number, dx: number, dy: number): void;
scaleAndTranslate(scale: number, dx: number, dy: number): void { scaleAndTranslate(scale: number, dx: number, dy: number): void {
const previousScale = this.scale; const previousScale = this.scale;
const previousTranslate = new Point(this.translate.x, this.translate.y); const previousTranslate = new Point(this.translate.x, this.translate.y);
@ -445,14 +435,12 @@ class GraphView extends EventSource {
this.fireEvent( this.fireEvent(
new EventObject( new EventObject(
InternalEvent.SCALE_AND_TRANSLATE, InternalEvent.SCALE_AND_TRANSLATE,
'scale', {
scale, scale: scale,
'previousScale', previousScale: previousScale,
previousScale, translate: this.translate,
'translate', previousTranslate: previousTranslate,
this.translate, }
'previousTranslate',
previousTranslate
) )
); );
} }
@ -460,8 +448,7 @@ class GraphView extends EventSource {
/** /**
* Invoked after {@link scale} and/or {@link translate} has changed. * Invoked after {@link scale} and/or {@link translate} has changed.
*/ */
// viewStateChanged(): void; viewStateChanged(): void {
viewStateChanged() {
this.revalidate(); this.revalidate();
(<graph>this.graph).sizeDidChange(); (<graph>this.graph).sizeDidChange();
} }
@ -469,8 +456,7 @@ class GraphView extends EventSource {
/** /**
* Clears the view if {@link currentRoot} is not null and revalidates. * Clears the view if {@link currentRoot} is not null and revalidates.
*/ */
// refresh(): void; refresh(): void {
refresh() {
if (this.currentRoot != null) { if (this.currentRoot != null) {
this.clear(); this.clear();
} }
@ -480,8 +466,7 @@ class GraphView extends EventSource {
/** /**
* Revalidates the complete view with all cell states. * Revalidates the complete view with all cell states.
*/ */
// revalidate(): void; revalidate(): void {
revalidate() {
this.invalidate(); this.invalidate();
this.validate(); this.validate();
} }
@ -495,8 +480,7 @@ class GraphView extends EventSource {
* @param force Boolean indicating if the current root should be ignored for * @param force Boolean indicating if the current root should be ignored for
* recursion. * recursion.
*/ */
// clear(cell: mxCell, force?: boolean, recurse?: boolean): void; clear(cell?: Cell | null, force: boolean = false, recurse: boolean = true): void {
clear(cell?: Cell | null, force: boolean = false, recurse: boolean = true) {
if (!cell) { if (!cell) {
cell = this.graph.getModel().getRoot(); cell = this.graph.getModel().getRoot();
} }
@ -523,12 +507,11 @@ class GraphView extends EventSource {
* @param cell Optional {@link Cell} to be invalidated. Default is the root of the * @param cell Optional {@link Cell} to be invalidated. Default is the root of the
* model. * model.
*/ */
// invalidate(cell: mxCell, recurse: boolean, includeEdges: boolean): void;
invalidate( invalidate(
cell: Cell | null = null, cell: Cell | null = null,
recurse: boolean = true, recurse: boolean = true,
includeEdges: boolean = true includeEdges: boolean = true
) { ): void {
const model: Model = (<graph>this.graph).getModel(); const model: Model = (<graph>this.graph).getModel();
const state: CellState = <CellState>this.getState(cell); const state: CellState = <CellState>this.getState(cell);
@ -573,8 +556,7 @@ class GraphView extends EventSource {
* @param cell Optional {@link Cell} to be used as the root of the validation. * @param cell Optional {@link Cell} to be used as the root of the validation.
* Default is {@link currentRoot} or the root of the model. * Default is {@link currentRoot} or the root of the model.
*/ */
// validate(cell?: mxCell): void; validate(cell: Cell | null = null): void {
validate(cell: Cell | null = null) {
const t0 = mxLog.enter('mxGraphView.validate'); const t0 = mxLog.enter('mxGraphView.validate');
window.status = window.status =
Resources.get(this.updatingDocumentResource) || Resources.get(this.updatingDocumentResource) ||
@ -612,8 +594,7 @@ class GraphView extends EventSource {
* Returns the bounds for an empty graph. This returns a rectangle at * Returns the bounds for an empty graph. This returns a rectangle at
* {@link translate} with the size of 0 x 0. * {@link translate} with the size of 0 x 0.
*/ */
// getEmptyBounds(): mxRectangle; getEmptyBounds(): Rectangle {
getEmptyBounds() {
return new Rectangle( return new Rectangle(
this.translate.x * this.scale, this.translate.x * this.scale,
this.translate.y * this.scale this.translate.y * this.scale
@ -628,7 +609,6 @@ class GraphView extends EventSource {
* @param recurse Optional boolean indicating if the children should be included. * @param recurse Optional boolean indicating if the children should be included.
* Default is true. * Default is true.
*/ */
// getBoundingBox(state: mxCellState, recurse: boolean): mxRectangle;
getBoundingBox( getBoundingBox(
state: CellState | null = null, state: CellState | null = null,
recurse: boolean = true recurse: boolean = true
@ -676,7 +656,6 @@ class GraphView extends EventSource {
* *
* @param bounds {@link mxRectangle} that represents the bounds of the shape. * @param bounds {@link mxRectangle} that represents the bounds of the shape.
*/ */
// createBackgroundPageShape(bounds: mxRectangle): mxRectangleShape;
createBackgroundPageShape(bounds: Rectangle): RectangleShape { createBackgroundPageShape(bounds: Rectangle): RectangleShape {
return new RectangleShape(bounds, 'white', 'black'); return new RectangleShape(bounds, 'white', 'black');
} }
@ -684,8 +663,7 @@ class GraphView extends EventSource {
/** /**
* Calls {@link validateBackgroundImage} and {@link validateBackgroundPage}. * Calls {@link validateBackgroundImage} and {@link validateBackgroundPage}.
*/ */
// validateBackground(): void; validateBackground(): void {
validateBackground() {
this.validateBackgroundImage(); this.validateBackgroundImage();
this.validateBackgroundPage(); this.validateBackgroundPage();
} }
@ -693,8 +671,7 @@ class GraphView extends EventSource {
/** /**
* Validates the background image. * Validates the background image.
*/ */
// validateBackgroundImage(): void; validateBackgroundImage(): void {
validateBackgroundImage() {
const bg = (<graph>this.graph).getBackgroundImage(); const bg = (<graph>this.graph).getBackgroundImage();
if (bg != null) { if (bg != null) {
@ -724,7 +701,6 @@ class GraphView extends EventSource {
/** /**
* Validates the background page. * Validates the background page.
*/ */
// validateBackgroundPage(): void;
validateBackgroundPage(): void { validateBackgroundPage(): void {
const graph = <graph>this.graph; const graph = <graph>this.graph;
@ -788,7 +764,6 @@ class GraphView extends EventSource {
/** /**
* Returns the bounds for the background page. * Returns the bounds for the background page.
*/ */
// getBackgroundPageBounds(): mxRectangle;
getBackgroundPageBounds(): Rectangle { getBackgroundPageBounds(): Rectangle {
const fmt = (<graph>this.graph).pageFormat; const fmt = (<graph>this.graph).pageFormat;
const ps = this.scale * (<graph>this.graph).pageScale; const ps = this.scale * (<graph>this.graph).pageScale;
@ -825,7 +800,6 @@ class GraphView extends EventSource {
* @param backgroundImage {@link mxImageShape} that represents the background image. * @param backgroundImage {@link mxImageShape} that represents the background image.
* @param bg {@link mxImage} that specifies the image and its dimensions. * @param bg {@link mxImage} that specifies the image and its dimensions.
*/ */
// redrawBackgroundImage(backgroundImage: mxImageShape, bg: mxImage): void;
redrawBackgroundImage(backgroundImage: ImageShape, bg: Image): void { redrawBackgroundImage(backgroundImage: ImageShape, bg: Image): void {
backgroundImage.scale = this.scale; backgroundImage.scale = this.scale;
const bounds = <Rectangle>backgroundImage.bounds; const bounds = <Rectangle>backgroundImage.bounds;
@ -845,7 +819,6 @@ class GraphView extends EventSource {
* @param visible Optional boolean indicating if the cell should be visible. Default * @param visible Optional boolean indicating if the cell should be visible. Default
* is true. * is true.
*/ */
// validateCell(cell: mxCell, visible?: boolean): void;
validateCell(cell: Cell, visible: boolean = true): Cell | null { validateCell(cell: Cell, visible: boolean = true): Cell | null {
visible = visible && cell.isVisible(); visible = visible && cell.isVisible();
const state = this.getState(cell, visible); const state = this.getState(cell, visible);
@ -873,7 +846,6 @@ class GraphView extends EventSource {
* @param recurse Optional boolean indicating if the children of the cell should be * @param recurse Optional boolean indicating if the children of the cell should be
* validated. Default is true. * validated. Default is true.
*/ */
// validateCellState(cell: mxCell, recurse?: boolean): void;
validateCellState(cell: Cell, recurse: boolean = true): CellState | null { validateCellState(cell: Cell, recurse: boolean = true): CellState | null {
let state: CellState | null = null; let state: CellState | null = null;
@ -952,8 +924,7 @@ class GraphView extends EventSource {
* *
* @param state {@link mxCellState} to be updated. * @param state {@link mxCellState} to be updated.
*/ */
// updateCellState(state: mxCellState): void; updateCellState(state: CellState): void {
updateCellState(state: CellState) {
const absoluteOffset = <Point>state.absoluteOffset; const absoluteOffset = <Point>state.absoluteOffset;
const origin = <Point>state.origin; const origin = <Point>state.origin;
@ -1038,8 +1009,7 @@ class GraphView extends EventSource {
/** /**
* Validates the given cell state. * Validates the given cell state.
*/ */
// updateVertexState(state: mxCellState, geo: mxGeometry): void; updateVertexState(state: CellState, geo: Geometry): void {
updateVertexState(state: CellState, geo: Geometry) {
const model = (<graph>this.graph).getModel(); const model = (<graph>this.graph).getModel();
const pState = this.getState(state.cell.getParent()); const pState = this.getState(state.cell.getParent());
@ -1063,8 +1033,7 @@ class GraphView extends EventSource {
/** /**
* Validates the given cell state. * Validates the given cell state.
*/ */
// updateEdgeState(state: mxCellState, geo: mxGeometry): void; updateEdgeState(state: CellState, geo: Geometry): void {
updateEdgeState(state: CellState, geo: Geometry) {
const source = <CellState>state.getVisibleTerminalState(true); const source = <CellState>state.getVisibleTerminalState(true);
const target = <CellState>state.getVisibleTerminalState(false); const target = <CellState>state.getVisibleTerminalState(false);
@ -1108,8 +1077,7 @@ class GraphView extends EventSource {
* *
* @param state {@link mxCellState} whose absolute offset should be updated. * @param state {@link mxCellState} whose absolute offset should be updated.
*/ */
// updateVertexLabelOffset(state: mxCellState): void; updateVertexLabelOffset(state: CellState): void {
updateVertexLabelOffset(state: CellState) {
const h = getValue(state.style, 'labelPosition', ALIGN_CENTER); const h = getValue(state.style, 'labelPosition', ALIGN_CENTER);
if (h === ALIGN_LEFT) { if (h === ALIGN_LEFT) {
@ -1161,7 +1129,6 @@ class GraphView extends EventSource {
/** /**
* Resets the current validation state. * Resets the current validation state.
*/ */
// resetValidationState(): void;
resetValidationState(): void { resetValidationState(): void {
this.lastNode = null; this.lastNode = null;
this.lastHtmlNode = null; this.lastHtmlNode = null;
@ -1175,7 +1142,6 @@ class GraphView extends EventSource {
* *
* @param state {@link mxCellState} that represents the cell state. * @param state {@link mxCellState} that represents the cell state.
*/ */
// stateValidated(state: mxCellState): void;
stateValidated(state: CellState): void { stateValidated(state: CellState): void {
const graph = <graph>this.graph; const graph = <graph>this.graph;
const fg = const fg =
@ -1204,7 +1170,6 @@ class GraphView extends EventSource {
* @param source {@link mxCellState} which represents the source terminal. * @param source {@link mxCellState} which represents the source terminal.
* @param target {@link mxCellState} which represents the target terminal. * @param target {@link mxCellState} which represents the target terminal.
*/ */
// updateFixedTerminalPoints(edge: mxCellState, source: mxCellState, target: mxCellState): void;
updateFixedTerminalPoints( updateFixedTerminalPoints(
edge: CellState, edge: CellState,
source: CellState, source: CellState,
@ -1301,8 +1266,7 @@ class GraphView extends EventSource {
* *
* @param edge {@link mxCellState} whose bounds should be updated. * @param edge {@link mxCellState} whose bounds should be updated.
*/ */
// updateBoundsFromStencil(state: mxCellState): mxRectangle; updateBoundsFromStencil(state: CellState): Rectangle {
updateBoundsFromStencil(state: CellState) {
let previous = null; let previous = null;
if ( if (
@ -1326,7 +1290,6 @@ class GraphView extends EventSource {
state.shape.stencil.h0 * asp.height state.shape.stencil.h0 * asp.height
); );
} }
return previous; return previous;
} }
@ -1339,13 +1302,12 @@ class GraphView extends EventSource {
* @param source {@link mxCellState} that represents the source terminal. * @param source {@link mxCellState} that represents the source terminal.
* @param target {@link mxCellState} that represents the target terminal. * @param target {@link mxCellState} that represents the target terminal.
*/ */
// updatePoints(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): void;
updatePoints( updatePoints(
edge: CellState, edge: CellState,
points: Point[], points: Point[],
source: CellState, source: CellState,
target: CellState target: CellState
) { ): void {
if (edge != null) { if (edge != null) {
const pts = []; const pts = [];
pts.push((<Point[]>edge.absolutePoints)[0]); pts.push((<Point[]>edge.absolutePoints)[0]);
@ -1398,7 +1360,6 @@ class GraphView extends EventSource {
/** /**
* Transforms the given control point to an absolute point. * Transforms the given control point to an absolute point.
*/ */
// transformControlPoint(state: mxCellState, pt: mxPoint): mxPoint;
transformControlPoint( transformControlPoint(
state: CellState, state: CellState,
pt: Point, pt: Point,
@ -1421,7 +1382,6 @@ class GraphView extends EventSource {
* or the {@link mxConstants.STYLE_LOOP} defined for the given edge. This implementation * or the {@link mxConstants.STYLE_LOOP} defined for the given edge. This implementation
* returns true if the given edge is a loop and does not * returns true if the given edge is a loop and does not
*/ */
// isLoopStyleEnabled(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): boolean;
isLoopStyleEnabled( isLoopStyleEnabled(
edge: CellState, edge: CellState,
points: Point[] = [], points: Point[] = [],
@ -1452,7 +1412,6 @@ class GraphView extends EventSource {
/** /**
* Returns the edge style function to be used to render the given edge state. * Returns the edge style function to be used to render the given edge state.
*/ */
// getEdgeStyle(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): any;
getEdgeStyle( getEdgeStyle(
edge: CellState, edge: CellState,
points: Point[] = [], points: Point[] = [],
@ -1488,12 +1447,11 @@ class GraphView extends EventSource {
* @param source {@link mxCellState} that represents the source terminal. * @param source {@link mxCellState} that represents the source terminal.
* @param target {@link mxCellState} that represents the target terminal. * @param target {@link mxCellState} that represents the target terminal.
*/ */
// updateFloatingTerminalPoints(state: mxCellState, source: mxCellState, target: mxCellState): void;
updateFloatingTerminalPoints( updateFloatingTerminalPoints(
state: CellState, state: CellState,
source: CellState, source: CellState,
target: CellState target: CellState
) { ): void {
const pts = <Point[]>state.absolutePoints; const pts = <Point[]>state.absolutePoints;
const p0 = pts[0]; const p0 = pts[0];
const pe = pts[pts.length - 1]; const pe = pts[pts.length - 1];
@ -1516,13 +1474,12 @@ class GraphView extends EventSource {
* @param end {@link mxCellState} for the terminal on the other side of the edge. * @param end {@link mxCellState} for the terminal on the other side of the edge.
* @param source Boolean indicating if start is the source terminal state. * @param source Boolean indicating if start is the source terminal state.
*/ */
// updateFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): void;
updateFloatingTerminalPoint( updateFloatingTerminalPoint(
edge: CellState, edge: CellState,
start: CellState, start: CellState,
end: CellState, end: CellState,
source: boolean source: boolean
) { ): void {
edge.setAbsoluteTerminalPoint( edge.setAbsoluteTerminalPoint(
<Point>this.getFloatingTerminalPoint(edge, start, end, source), <Point>this.getFloatingTerminalPoint(edge, start, end, source),
source source
@ -1538,7 +1495,6 @@ class GraphView extends EventSource {
* @param end {@link mxCellState} for the terminal on the other side of the edge. * @param end {@link mxCellState} for the terminal on the other side of the edge.
* @param source Boolean indicating if start is the source terminal state. * @param source Boolean indicating if start is the source terminal state.
*/ */
// getFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): mxPoint;
getFloatingTerminalPoint( getFloatingTerminalPoint(
edge: CellState, edge: CellState,
start: CellState, start: CellState,
@ -1588,7 +1544,6 @@ class GraphView extends EventSource {
* @param terminal {@link mxCellState} that represents the terminal. * @param terminal {@link mxCellState} that represents the terminal.
* @param source Boolean indicating if the given terminal is the source terminal. * @param source Boolean indicating if the given terminal is the source terminal.
*/ */
// getTerminalPort(state: mxCellState, terminal: mxCellState, source: boolean): mxCellState;
getTerminalPort( getTerminalPort(
state: CellState, state: CellState,
terminal: CellState, terminal: CellState,
@ -1623,13 +1578,12 @@ class GraphView extends EventSource {
* returned. * returned.
* @param border Optional border between the perimeter and the shape. * @param border Optional border between the perimeter and the shape.
*/ */
// getPerimeterPoint(terminal: mxCellState, next: mxPoint, orthogonal: boolean, border: number): mxPoint;
getPerimeterPoint( getPerimeterPoint(
terminal: CellState, terminal: CellState,
next: Point, next: Point,
orthogonal: boolean, orthogonal: boolean,
border: number = 0 border: number = 0
) { ): Point {
let point = null; let point = null;
if (terminal != null) { if (terminal != null) {
@ -1686,8 +1640,7 @@ class GraphView extends EventSource {
/** /**
* Returns the x-coordinate of the center point for automatic routing. * Returns the x-coordinate of the center point for automatic routing.
*/ */
// getRoutingCenterX(state: mxCellState): number; getRoutingCenterX(state: CellState): number {
getRoutingCenterX(state: CellState) {
const f = const f =
state.style != null ? parseFloat(state.style.routingCenterX) || 0 : 0; state.style != null ? parseFloat(state.style.routingCenterX) || 0 : 0;
return state.getCenterX() + f * state.width; return state.getCenterX() + f * state.width;
@ -1696,8 +1649,7 @@ class GraphView extends EventSource {
/** /**
* Returns the y-coordinate of the center point for automatic routing. * Returns the y-coordinate of the center point for automatic routing.
*/ */
// getRoutingCenterY(state: mxCellState): number; getRoutingCenterY(state: CellState): number {
getRoutingCenterY(state: CellState) {
const f = const f =
state.style != null ? parseFloat(state.style.routingCenterY) || 0 : 0; state.style != null ? parseFloat(state.style.routingCenterY) || 0 : 0;
return state.getCenterY() + f * state.height; return state.getCenterY() + f * state.height;
@ -1743,7 +1695,6 @@ class GraphView extends EventSource {
* @param {CellState} terminal mxCellState that represents the terminal. * @param {CellState} terminal mxCellState that represents the terminal.
* @param {number} border Number that adds a border between the shape and the perimeter. * @param {number} border Number that adds a border between the shape and the perimeter.
*/ */
// getPerimeterBounds(terminal: mxCellState, border?: number): mxRectangle;
getPerimeterBounds( getPerimeterBounds(
terminal: CellState | null = null, terminal: CellState | null = null,
border: number = 0 border: number = 0
@ -1757,7 +1708,6 @@ class GraphView extends EventSource {
/** /**
* Returns the perimeter function for the given state. * Returns the perimeter function for the given state.
*/ */
// getPerimeterFunction(state: mxCellState): any;
getPerimeterFunction(state: CellState): Function | null { getPerimeterFunction(state: CellState): Function | null {
let perimeter = state.style.perimeter; let perimeter = state.style.perimeter;
@ -1785,7 +1735,6 @@ class GraphView extends EventSource {
* @param source Boolean indicating if the next point for the source or target * @param source Boolean indicating if the next point for the source or target
* should be returned. * should be returned.
*/ */
// getNextPoint(edge: mxCellState, opposite: mxCellState, source: boolean): mxPoint;
getNextPoint( getNextPoint(
edge: CellState, edge: CellState,
opposite: CellState | null, opposite: CellState | null,
@ -1815,8 +1764,7 @@ class GraphView extends EventSource {
* @param source Boolean that specifies if the source or target terminal * @param source Boolean that specifies if the source or target terminal
* should be returned. * should be returned.
*/ */
// getVisibleTerminal(edge: mxCell, source: boolean): mxCell; getVisibleTerminal(edge: Cell, source: boolean): Cell | null {
getVisibleTerminal(edge: Cell, source: boolean) {
const model = (<graph>this.graph).getModel(); const model = (<graph>this.graph).getModel();
let result = edge.getTerminal(source); let result = edge.getTerminal(source);
let best = result; let best = result;
@ -1850,8 +1798,7 @@ class GraphView extends EventSource {
* *
* @param state {@link mxCellState} whose bounds should be updated. * @param state {@link mxCellState} whose bounds should be updated.
*/ */
// updateEdgeBounds(state: mxCellState): void; updateEdgeBounds(state: CellState): void {
updateEdgeBounds(state: CellState) {
const points = <Point[]>state.absolutePoints; const points = <Point[]>state.absolutePoints;
const p0 = points[0]; const p0 = points[0];
const pe = points[points.length - 1]; const pe = points[points.length - 1];
@ -1914,7 +1861,6 @@ class GraphView extends EventSource {
* @param state {@link mxCellState} that represents the state of the parent edge. * @param state {@link mxCellState} that represents the state of the parent edge.
* @param geometry {@link mxGeometry} that represents the relative location. * @param geometry {@link mxGeometry} that represents the relative location.
*/ */
// getPoint(state: mxCellState, geometry: mxGeometry): mxPoint;
getPoint(state: CellState, geometry: Geometry | null = null): Point { getPoint(state: CellState, geometry: Geometry | null = null): Point {
let x = state.getCenterX(); let x = state.getCenterX();
let y = state.getCenterY(); let y = state.getCenterY();
@ -1979,8 +1925,7 @@ class GraphView extends EventSource {
* @param x Specifies the x-coordinate of the absolute label location. * @param x Specifies the x-coordinate of the absolute label location.
* @param y Specifies the y-coordinate of the absolute label location. * @param y Specifies the y-coordinate of the absolute label location.
*/ */
// getRelativePoint(edgeState: mxCellState, x: number, y: number): mxPoint; getRelativePoint(edgeState: CellState, x: number, y: number): Point {
getRelativePoint(edgeState: CellState, x: number, y: number) {
const model = (<graph>this.graph).getModel(); const model = (<graph>this.graph).getModel();
const geometry = edgeState.cell.getGeometry(); const geometry = edgeState.cell.getGeometry();
@ -2078,8 +2023,7 @@ class GraphView extends EventSource {
* *
* @param state {@link mxCellState} whose absolute offset should be updated. * @param state {@link mxCellState} whose absolute offset should be updated.
*/ */
// updateEdgeLabelOffset(state: mxCellState): void; updateEdgeLabelOffset(state: CellState): void {
updateEdgeLabelOffset(state: CellState) {
const points = state.absolutePoints; const points = state.absolutePoints;
const absoluteOffset = <Point>state.absoluteOffset; const absoluteOffset = <Point>state.absoluteOffset;
absoluteOffset.x = state.getCenterX(); absoluteOffset.x = state.getCenterX();
@ -2129,8 +2073,7 @@ class GraphView extends EventSource {
* @param create Optional boolean indicating if a new state should be created * @param create Optional boolean indicating if a new state should be created
* if it does not yet exist. Default is false. * if it does not yet exist. Default is false.
*/ */
// getState(cell: mxCell, create?: boolean): mxCellState; getState(cell: Cell | null = null, create: boolean = false): CellState {
getState(cell: Cell | null = null, create: boolean = false) {
let state: CellState | null = null; let state: CellState | null = null;
if (cell != null) { if (cell != null) {
@ -2154,7 +2097,6 @@ class GraphView extends EventSource {
* have less elements than the given array. If no argument is given, then * have less elements than the given array. If no argument is given, then
* this returns {@link states}. * this returns {@link states}.
*/ */
// getCellStates(cells: mxCellArray): mxCellState[];
getCellStates(cells: CellArray | null): CellState[] | Dictionary | null { getCellStates(cells: CellArray | null): CellState[] | Dictionary | null {
if (cells == null) { if (cells == null) {
return this.states; return this.states;
@ -2175,7 +2117,6 @@ class GraphView extends EventSource {
* *
* @param cell {@link mxCell} for which the {@link CellState} should be removed. * @param cell {@link mxCell} for which the {@link CellState} should be removed.
*/ */
// removeState(cell: mxCell): mxCellState;
removeState(cell: Cell): CellState | null { removeState(cell: Cell): CellState | null {
let state: CellState | null = null; let state: CellState | null = null;
@ -2197,7 +2138,6 @@ class GraphView extends EventSource {
* *
* @param cell {@link mxCell} for which a new {@link CellState} should be created. * @param cell {@link mxCell} for which a new {@link CellState} should be created.
*/ */
// createState(cell: mxCell): mxCellState;
createState(cell: Cell): CellState { createState(cell: Cell): CellState {
return new CellState( return new CellState(
this, this,
@ -2210,8 +2150,7 @@ class GraphView extends EventSource {
* Returns true if the event origin is one of the drawing panes or * Returns true if the event origin is one of the drawing panes or
* containers of the view. * containers of the view.
*/ */
// isContainerEvent(evt: Event): boolean; isContainerEvent(evt: Event | MouseEvent): boolean {
isContainerEvent(evt: Event | MouseEvent) {
const source = getSource(evt); const source = getSource(evt);
return ( return (
@ -2233,8 +2172,7 @@ class GraphView extends EventSource {
* Returns true if the event origin is one of the scrollbars of the * Returns true if the event origin is one of the scrollbars of the
* container in IE. Such events are ignored. * container in IE. Such events are ignored.
*/ */
// isScrollEvent(evt: Event): boolean; isScrollEvent(evt: MouseEvent): boolean {
isScrollEvent(evt: MouseEvent) {
const graph = <graph>this.graph; const graph = <graph>this.graph;
const offset = getOffset(graph.container); const offset = getOffset(graph.container);
const pt = new Point(evt.clientX - offset.x, evt.clientY - offset.y); const pt = new Point(evt.clientX - offset.x, evt.clientY - offset.y);
@ -2257,8 +2195,7 @@ class GraphView extends EventSource {
* Initializes the graph event dispatch loop for the specified container * Initializes the graph event dispatch loop for the specified container
* and invokes {@link create} to create the required DOM nodes for the display. * and invokes {@link create} to create the required DOM nodes for the display.
*/ */
// init(): void; init(): void {
init() {
this.installListeners(); this.installListeners();
// Creates the DOM nodes for the respective display dialect // Creates the DOM nodes for the respective display dialect
@ -2269,8 +2206,7 @@ class GraphView extends EventSource {
/** /**
* Installs the required listeners in the container. * Installs the required listeners in the container.
*/ */
// installListeners(): void; installListeners(): void {
installListeners() {
const graph = <graph>this.graph; const graph = <graph>this.graph;
const { container } = graph; const { container } = graph;
@ -2424,8 +2360,7 @@ class GraphView extends EventSource {
/** /**
* Creates and returns the DOM nodes for the SVG display. * Creates and returns the DOM nodes for the SVG display.
*/ */
// createSvg(): Element; createSvg(): void {
createSvg() {
const { container } = <graph>this.graph; const { container } = <graph>this.graph;
const canvas = (this.canvas = document.createElementNS( const canvas = (this.canvas = document.createElementNS(
'http://www.w3.org/2000/svg', 'http://www.w3.org/2000/svg',
@ -2475,7 +2410,6 @@ class GraphView extends EventSource {
/** /**
* Updates the style of the container after installing the SVG DOM elements. * Updates the style of the container after installing the SVG DOM elements.
*/ */
// updateContainerStyle(container: Element): void;
updateContainerStyle(container: HTMLElement) { updateContainerStyle(container: HTMLElement) {
// Workaround for offset of container // Workaround for offset of container
const style = getCurrentStyle(container); const style = getCurrentStyle(container);
@ -2493,8 +2427,7 @@ class GraphView extends EventSource {
/** /**
* Destroys the view and all its resources. * Destroys the view and all its resources.
*/ */
// destroy(): void; destroy(): void {
destroy() {
let root: SVGElement | null = let root: SVGElement | null =
this.canvas != null ? this.canvas.ownerSVGElement : null; this.canvas != null ? this.canvas.ownerSVGElement : null;

4
packages/html/stories/FileIO.stories.js
View File

@ -45,7 +45,7 @@ const Template = ({ label, ...args }) => {
graph.panningHandler.useLeftButtonForPanning = true; graph.panningHandler.useLeftButtonForPanning = true;
// Adds a highlight on the cell under the mousepointer // Adds a highlight on the cell under the mousepointer
new mxCellTracker(graph); new CellTracker(graph);
// Changes the default vertex style in-place // Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
@ -71,7 +71,7 @@ const Template = ({ label, ...args }) => {
// Creates a layout algorithm to be used // Creates a layout algorithm to be used
// with the graph // with the graph
const layout = new mxFastOrganicLayout(graph); const layout = new MxFastOrganicLayout(graph);
// Moves stuff wider apart than usual // Moves stuff wider apart than usual
layout.forceConstant = 140; layout.forceConstant = 140;