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
// with the graph
let layout = new mxFastOrganicLayout(graph);
let layout = new MxFastOrganicLayout(graph);
// Moves stuff wider apart than usual
layout.forceConstant = 80;

10
docs/stashed/Schema.js
View File

@ -57,12 +57,12 @@ export default MYNAMEHERE;
mxConstants.SHADOW_OFFSET_Y = 6;
// Table icon dimensions and position
Swimlane.prototype.imageSize = 20;
Swimlane.prototype.imageDx = 16;
Swimlane.prototype.imageDy = 4;
SwimlaneShape.prototype.imageSize = 20;
SwimlaneShape.prototype.imageDx = 16;
SwimlaneShape.prototype.imageDy = 4;
// 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);
};
@ -126,7 +126,7 @@ export default MYNAMEHERE;
editor.layoutSwimlanes = true;
editor.createSwimlaneLayout = () =>
{
let layout = new mxStackLayout(this.graph, false);
let layout = new StackLayout(this.graph, false);
layout.fill = 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
{
let pageBreak = new mxPolyline(pts, this.pageBreakColor);
let pageBreak = new Polyline(pts, this.pageBreakColor);
pageBreak.dialect = this.dialect;
pageBreak.isDashed = this.pageBreakDashed;
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);
}
if (layout != null && layout.constructor == mxStackLayout)
if (layout != null && layout.constructor == StackLayout)
{
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
mxText.prototype.baseSpacingTop = 5;
mxText.prototype.baseSpacingBottom = 1;
TextShape.prototype.baseSpacingTop = 5;
TextShape.prototype.baseSpacingBottom = 1;
// Keeps edges between relative child cells inside parent
Model.prototype.ignoreRelativeEdgeParent = false;
@ -1923,7 +1923,7 @@ Graph.prototype.init = function(container)
*
* 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;
@ -2360,7 +2360,7 @@ Graph.prototype.initLayoutManager = function()
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.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1';
@ -2383,7 +2383,7 @@ Graph.prototype.initLayoutManager = function()
}
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.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1';
treeLayout.groupPadding = mxUtils.getValue(style, 'parentPadding', 20);
@ -2416,11 +2416,11 @@ Graph.prototype.initLayoutManager = function()
}
else if (style.childLayout == 'circleLayout')
{
return new mxCircleLayout(this.graph);
return new CircleLayout(this.graph);
}
else if (style.childLayout == 'organicLayout')
{
return new mxFastOrganicLayout(this.graph);
return new MxFastOrganicLayout(this.graph);
}
else if (style.childLayout == 'tableLayout')
{
@ -2975,7 +2975,7 @@ Graph.prototype.isCloneConnectSource = function(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);
if (layout != null && layout.constructor == mxStackLayout)
if (layout != null && layout.constructor == StackLayout)
{
style.horizontal = !layout.horizontal;
}
@ -3421,7 +3421,7 @@ Graph.prototype.updateAlternateBounds = function(cell, geo, willCollapse)
{
let layout = this.layoutManager.getLayout(cell.getParent());
if (layout != null && layout.constructor == mxStackLayout)
if (layout != null && layout.constructor == StackLayout)
{
if (layout.horizontal)
{
@ -3492,7 +3492,7 @@ Graph.prototype.foldCells = function(collapse, recurse, cells, checkFoldable, ev
}
}
else if ((evt == null || !mxEvent.isAltDown(evt)) &&
layout.constructor == mxStackLayout && !layout.resizeLast)
layout.constructor == StackLayout && !layout.resizeLast)
{
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)
{
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();
try
@ -3560,7 +3560,7 @@ Graph.prototype.resizeParentStacks = function(parent, layout, dx, dy)
let dir = layout.horizontal;
// 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)
{
let pgeo = parent.getGeometry();
@ -5124,13 +5124,13 @@ Graph.prototype.setTableColumnWidth = function(col, dx, extend)
*/
function TableLayout(graph)
{
mxGraphLayout.call(this, graph);
GraphLayout.call(this, graph);
};
/**
* Extends mxGraphLayout.
*/
TableLayout.prototype = new mxStackLayout();
TableLayout.prototype = new StackLayout();
TableLayout.prototype.constructor = TableLayout;
/**
@ -5578,9 +5578,9 @@ TableLayout.prototype.execute = function(parent)
/**
* 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
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.
*/
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 placeholders = node.getAttribute('placeholders');
@ -5827,7 +5827,7 @@ TableLayout.prototype.execute = function(parent)
let stencil = shape.substring(8, shape.length - 1);
let doc = mxUtils.parseXml(Graph.decompress(stencil));
return new Shape(new Stencil(doc.documentElement));
return new Shape(new StencilShape(doc.documentElement));
}
catch (e)
{
@ -5853,41 +5853,41 @@ TableLayout.prototype.execute = function(parent)
* IMPORTANT: For embedded diagrams to work entries must also
* be added in EmbedServlet.java.
*/
StencilRegistry.libraries = {};
StencilShapeRegistry.libraries = {};
/**
* Global switch to disable dynamic loading.
*/
StencilRegistry.dynamicLoading = true;
StencilShapeRegistry.dynamicLoading = true;
/**
* 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.
* Each package is only loaded once.
*/
StencilRegistry.packages = [];
StencilShapeRegistry.packages = [];
// 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
if (basename != null)
{
let libs = StencilRegistry.libraries[basename];
let libs = StencilShapeRegistry.libraries[basename];
if (libs != null)
{
if (StencilRegistry.packages[basename] == null)
if (StencilShapeRegistry.packages[basename] == null)
{
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')
{
StencilRegistry.loadStencilSet(fname, null);
StencilShapeRegistry.loadStencilSet(fname, null);
}
else if (fname.toLowerCase().substring(fname.length - 3, fname.length) == '.js')
{
try
{
if (StencilRegistry.allowEval)
if (StencilShapeRegistry.allowEval)
{
let req = mxUtils.load(fname);
@ -5928,17 +5928,17 @@ StencilRegistry.getStencil = function(name)
}
}
StencilRegistry.packages[basename] = 1;
StencilShapeRegistry.packages[basename] = 1;
}
}
else
{
// Replaces '_-_' with '_'
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
// loaded to render the given stencil.
StencilRegistry.getBasenameForStencil = function(name)
StencilShapeRegistry.getBasenameForStencil = function(name)
{
let tmp = null;
@ -5970,12 +5970,12 @@ StencilRegistry.getBasenameForStencil = function(name)
};
// Loads the given stencil set
StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, async)
StencilShapeRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, async)
{
force = (force != null) ? force : false;
// Uses additional cache for detecting previous load attempts
let xmlDoc = StencilRegistry.packages[stencilFile];
let xmlDoc = StencilShapeRegistry.packages[stencilFile];
if (force || xmlDoc == null)
{
@ -5987,13 +5987,13 @@ StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, a
{
if (async)
{
StencilRegistry.loadStencil(stencilFile, mxUtils.bind(this, function(xmlDoc2)
StencilShapeRegistry.loadStencil(stencilFile, mxUtils.bind(this, function(xmlDoc2)
{
if (xmlDoc2 != null && xmlDoc2.documentElement != null)
{
StencilRegistry.packages[stencilFile] = xmlDoc2;
StencilShapeRegistry.packages[stencilFile] = xmlDoc2;
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
{
xmlDoc = StencilRegistry.loadStencil(stencilFile);
StencilRegistry.packages[stencilFile] = xmlDoc;
xmlDoc = StencilShapeRegistry.loadStencil(stencilFile);
StencilShapeRegistry.packages[stencilFile] = xmlDoc;
install = true;
}
}
@ -6017,13 +6017,13 @@ StencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force, a
if (xmlDoc != null && xmlDoc.documentElement != null)
{
StencilRegistry.parseStencilSet(xmlDoc.documentElement, postStencilLoad, install);
StencilShapeRegistry.parseStencilSet(xmlDoc.documentElement, postStencilLoad, install);
}
}
};
// Loads the given stencil XML file.
StencilRegistry.loadStencil = function(filename, fn)
StencilShapeRegistry.loadStencil = function(filename, fn)
{
if (fn != null)
{
@ -6039,16 +6039,16 @@ StencilRegistry.loadStencil = function(filename, fn)
};
// Takes array of strings
StencilRegistry.parseStencilSets = function(stencils)
StencilShapeRegistry.parseStencilSets = function(stencils)
{
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
StencilRegistry.parseStencilSet = function(root, postStencilLoad, install)
StencilShapeRegistry.parseStencilSet = function(root, postStencilLoad, install)
{
if (root.nodeName == 'stencils')
{
@ -6058,7 +6058,7 @@ StencilRegistry.parseStencilSet = function(root, postStencilLoad, install)
{
if (shapes.nodeName == 'shapes')
{
StencilRegistry.parseStencilSet(shapes, postStencilLoad, install);
StencilShapeRegistry.parseStencilSet(shapes, postStencilLoad, install);
}
shapes = shapes.nextSibling;
@ -6089,7 +6089,7 @@ StencilRegistry.parseStencilSet = function(root, postStencilLoad, install)
if (install)
{
StencilRegistry.addStencil(packageName + stencilName.toLowerCase(), new Stencil(shape));
StencilShapeRegistry.addStencil(packageName + stencilName.toLowerCase(), new StencilShape(shape));
}
if (postStencilLoad != null)
@ -6151,8 +6151,8 @@ if (typeof VertexHandler != 'undefined')
};
// Ignores all table cells in layouts
let graphLayoutIsVertexIgnored = mxGraphLayout.prototype.isVertexIgnored;
mxGraphLayout.prototype.isVertexIgnored = function(vertex)
let graphLayoutIsVertexIgnored = GraphLayout.prototype.isVertexIgnored;
GraphLayout.prototype.isVertexIgnored = function(vertex)
{
return graphLayoutIsVertexIgnored.apply(this, arguments) ||
this.graph.isTableRow(vertex) || this.graph.isTableCell(vertex);
@ -6169,7 +6169,7 @@ if (typeof VertexHandler != 'undefined')
// Overrides highlight shape for connection points
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;
return hl;
@ -7068,7 +7068,7 @@ if (typeof VertexHandler != 'undefined')
{
let layout = this.layoutManager.getLayout(parent);
if (layout != null && layout.constructor == mxStackLayout)
if (layout != null && layout.constructor == StackLayout)
{
result = false;
}
@ -7857,7 +7857,7 @@ if (typeof VertexHandler != 'undefined')
currentState: null,
currentLink: null,
highlight: (highlight != null && highlight != '' && highlight != mxConstants.NONE) ?
new mxCellHighlight(graph, highlight, 4) : null,
new CellHighlight(graph, highlight, 4) : null,
startX: 0,
startY: 0,
scrollLeft: 0,
@ -9573,7 +9573,7 @@ if (typeof VertexHandler != 'undefined')
*/
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;
};
@ -10151,8 +10151,8 @@ if (typeof VertexHandler != 'undefined')
/**
* Overridden to allow for shrinking pools when lanes are resized.
*/
let stackLayoutResizeCell = mxStackLayout.prototype.resizeCell;
mxStackLayout.prototype.resizeCell = function(cell, bounds)
let stackLayoutResizeCell = StackLayout.prototype.resizeCell;
StackLayout.prototype.resizeCell = function(cell, bounds)
{
stackLayoutResizeCell.apply(this, arguments);
let style = this.graph.getCellStyle(cell);
@ -10168,7 +10168,7 @@ if (typeof VertexHandler != 'undefined')
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 start = this.graph.getActualStartSize(parent);
geo = geo.clone();
@ -10191,8 +10191,8 @@ if (typeof VertexHandler != 'undefined')
/**
* Shows handle for table instead of rows and cells.
*/
let selectionCellsHandlerGetHandledSelectionCells = mxSelectionCellsHandler.prototype.getHandledSelectionCells;
mxSelectionCellsHandler.prototype.getHandledSelectionCells = function()
let selectionCellsHandlerGetHandledSelectionCells = SelectionCellsHandler.prototype.getHandledSelectionCells;
SelectionCellsHandler.prototype.getHandledSelectionCells = function()
{
let cells = selectionCellsHandlerGetHandledSelectionCells.apply(this, arguments);
let dict = new Dictionary();
@ -10404,7 +10404,7 @@ if (typeof VertexHandler != 'undefined')
let colState = cols[index];
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;
// Workaround for event handling on overlapping cells with tolerance
@ -10483,7 +10483,7 @@ if (typeof VertexHandler != 'undefined')
{
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.svgStrokeTolerance++;
@ -10678,7 +10678,7 @@ if (typeof VertexHandler != 'undefined')
let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null &&
StencilRegistry.getStencil(name) == null)
StencilShapeRegistry.getStencil(name) == null)
{
name = mxConstants.SHAPE_RECTANGLE;
}
@ -10940,7 +10940,7 @@ if (typeof VertexHandler != 'undefined')
// Enables connections along the outline, virtual waypoints, parent highlight etc
ConnectionHandler.prototype.outlineConnect = true;
mxCellHighlight.prototype.keepOnTop = true;
CellHighlight.prototype.keepOnTop = true;
VertexHandler.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)
{
let layout = new mxCompactTreeLayout(graph, true);
let layout = new CompactTreeLayout(graph, true);
layout.edgeRouting = false;
layout.levelDistance = 30;
@ -311,7 +311,7 @@ Menus.prototype.init = function()
if (tmp != null)
{
let layout = new mxCompactTreeLayout(graph, false);
let layout = new CompactTreeLayout(graph, false);
layout.edgeRouting = false;
layout.levelDistance = 30;
@ -350,7 +350,7 @@ Menus.prototype.init = function()
if (tmp != null)
{
let layout = new mxRadialTreeLayout(graph, false);
let layout = new RadialTreeLayout(graph, false);
layout.levelDistance = 80;
layout.autoRadius = true;
@ -378,7 +378,7 @@ Menus.prototype.init = function()
menu.addSeparator(parent);
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)
{
@ -404,7 +404,7 @@ Menus.prototype.init = function()
}), parent);
menu.addItem(Resources.get('circle'), null, utils.bind(this, function()
{
let layout = new mxCircleLayout(graph);
let layout = new CircleLayout(graph);
this.editorUi.executeLayout(function()
{

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

@ -110,10 +110,10 @@
// Table Shape
function TableShape()
{
Swimlane.call(this);
SwimlaneShape.call(this);
};
utils.extend(TableShape, Swimlane);
utils.extend(TableShape, SwimlaneShape);
TableShape.prototype.getLabelBounds = function(rect)
{
@ -125,7 +125,7 @@
}
else
{
return Swimlane.prototype.getLabelBounds.apply(this, arguments);
return SwimlaneShape.prototype.getLabelBounds.apply(this, arguments);
}
};
@ -142,7 +142,7 @@
}
else
{
Swimlane.prototype.paintVertexShape.apply(this, arguments);
SwimlaneShape.prototype.paintVertexShape.apply(this, arguments);
c.translate(-x, -y);
}
@ -1353,7 +1353,7 @@
};
// Sets default jiggle for diamond
Rhombus.prototype.defaultJiggle = 2;
RhombusShape.prototype.defaultJiggle = 2;
// Overrides to avoid call to rect
var mxRectangleShapeIsHtmlAllowed0 = RectangleShape.prototype.isHtmlAllowed;
@ -1547,7 +1547,7 @@
{
Actor.call(this);
};
utils.extend(CalloutShape, Hexagon);
utils.extend(CalloutShape, HexagonShape);
CalloutShape.prototype.size = 30;
CalloutShape.prototype.position = 0.5;
CalloutShape.prototype.position2 = 0.5;
@ -1607,7 +1607,7 @@
{
Actor.call(this);
};
utils.extend(HexagonShape, Hexagon);
utils.extend(HexagonShape, HexagonShape);
HexagonShape.prototype.size = 0.25;
HexagonShape.prototype.fixedSize = 20;
HexagonShape.prototype.isRoundable = function()
@ -1653,8 +1653,8 @@
mxCellRenderer.registerShape('plus', PlusShape);
// Overrides painting of rhombus shape to allow for double style
let mxRhombusPaintVertexShape = Rhombus.prototype.paintVertexShape;
Rhombus.prototype.getLabelBounds = function(rect)
let mxRhombusPaintVertexShape = RhombusShape.prototype.paintVertexShape;
RhombusShape.prototype.getLabelBounds = function(rect)
{
if (this.style.double == 1)
{
@ -1667,7 +1667,7 @@
return rect;
};
Rhombus.prototype.paintVertexShape = function(c, x, y, w, h)
RhombusShape.prototype.paintVertexShape = function(c, x, y, w, h)
{
mxRhombusPaintVertexShape.apply(this, arguments);
@ -1915,12 +1915,12 @@
// UML Entity Shape
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)
{
Ellipse.prototype.paintVertexShape.apply(this, arguments);
EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.begin();
c.moveTo(x + w / 8, y + h);
@ -2690,9 +2690,9 @@
// State Shapes derives from double ellipse
function StateShape()
{
DoubleEllipse.call(this);
DoubleEllipseShape.call(this);
};
utils.extend(StateShape, DoubleEllipse);
utils.extend(StateShape, DoubleEllipseShape);
StateShape.prototype.outerStroke = true;
StateShape.prototype.paintVertexShape = function(c, x, y, w, h)
{
@ -2727,10 +2727,10 @@
// Link shape
function LinkShape()
{
mxArrowConnector.call(this);
ArrowConnector.call(this);
this.spacing = 0;
};
utils.extend(LinkShape, mxArrowConnector);
utils.extend(LinkShape, ArrowConnector);
LinkShape.prototype.defaultWidth = 4;
LinkShape.prototype.isOpenEnded = function()
@ -2754,10 +2754,10 @@
// Generic arrow
function FlexArrowShape()
{
mxArrowConnector.call(this);
ArrowConnector.call(this);
this.spacing = 0;
};
utils.extend(FlexArrowShape, mxArrowConnector);
utils.extend(FlexArrowShape, ArrowConnector);
FlexArrowShape.prototype.defaultWidth = 10;
FlexArrowShape.prototype.defaultArrowWidth = 20;
@ -3071,12 +3071,12 @@
// Internal storage
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)
{
Ellipse.prototype.paintVertexShape.apply(this, arguments);
EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.begin();
c.moveTo(x + w / 2, y + h);
@ -3090,12 +3090,12 @@
// 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)
{
Ellipse.prototype.paintVertexShape.apply(this, arguments);
EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.setShadow(false);
c.begin();
@ -3116,12 +3116,12 @@
// 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)
{
Ellipse.prototype.paintVertexShape.apply(this, arguments);
EllipseShape.prototype.paintVertexShape.apply(this, arguments);
var s2 = 0.145;
c.setShadow(false);
@ -3143,12 +3143,12 @@
// 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)
{
Rhombus.prototype.paintVertexShape.apply(this, arguments);
RhombusShape.prototype.paintVertexShape.apply(this, arguments);
c.setShadow(false);
c.begin();
@ -3163,9 +3163,9 @@
// 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)
{
c.begin();
@ -3188,9 +3188,9 @@
// 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)
{
// Arrow size
@ -3223,9 +3223,9 @@
// 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)
{
if (!this.outline)
@ -3293,12 +3293,12 @@
// 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)
{
Ellipse.prototype.paintVertexShape.apply(this, arguments);
EllipseShape.prototype.paintVertexShape.apply(this, arguments);
c.setShadow(false);
c.begin();
@ -3401,9 +3401,9 @@
// FilledEdge shape
function FilledEdge()
{
mxConnector.call(this);
Connector.call(this);
};
utils.extend(FilledEdge, mxConnector);
utils.extend(FilledEdge, Connector);
FilledEdge.prototype.origPaintEdgeShape = FilledEdge.prototype.paintEdgeShape;
FilledEdge.prototype.paintEdgeShape = function(c, pts, rounded)
@ -3462,7 +3462,7 @@
}
// 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 ny = unitY * (size + sw + 1);
@ -3477,7 +3477,7 @@
});
// 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 ny = unitY * (size + sw + 1);
@ -3508,7 +3508,7 @@
});
// 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 ny = unitY * (size + sw + 1);
@ -3552,8 +3552,8 @@
};
};
mxMarker.addMarker('circle', circleMarker);
mxMarker.addMarker('circlePlus', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
Marker.addMarker('circle', circleMarker);
Marker.addMarker('circlePlus', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
{
let pt = pe.clone();
let fn = circleMarker.apply(this, arguments);
@ -3574,7 +3574,7 @@
});
// 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 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
// 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)
{
@ -4553,7 +4553,7 @@
let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null &&
StencilRegistry.getStencil(name) == null)
StencilShapeRegistry.getStencil(name) == null)
{
name = mxConstants.SHAPE_RECTANGLE;
}
@ -4595,7 +4595,7 @@
let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null &&
StencilRegistry.getStencil(name) == null)
StencilShapeRegistry.getStencil(name) == null)
{
name = mxConstants.SHAPE_CONNECTOR;
}
@ -4818,13 +4818,13 @@
new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(0.75, 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.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))];
PartialRectangleShape.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;
Label.prototype.constraints = RectangleShape.prototype.constraints;
@ -4968,10 +4968,10 @@
InternalStorageShape.prototype.constraints = RectangleShape.prototype.constraints;
DataStorageShape.prototype.constraints = RectangleShape.prototype.constraints;
TapeDataShape.prototype.constraints = Ellipse.prototype.constraints;
OrEllipseShape.prototype.constraints = Ellipse.prototype.constraints;
SumEllipseShape.prototype.constraints = Ellipse.prototype.constraints;
LineEllipseShape.prototype.constraints = Ellipse.prototype.constraints;
TapeDataShape.prototype.constraints = EllipseShape.prototype.constraints;
OrEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
SumEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
LineEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
ManualInputShape.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.5), 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.75, 0.5), false),
new ConnectionConstraint(new Point(1, 0.5), false)];
LollipopShape.prototype.constraints = [new ConnectionConstraint(new Point(0.5, 0), false),
new ConnectionConstraint(new Point(0.5, 1), false)];
DoubleEllipse.prototype.constraints = Ellipse.prototype.constraints;
Rhombus.prototype.constraints = Ellipse.prototype.constraints;
Triangle.prototype.constraints = [new ConnectionConstraint(new Point(0, 0.25), true),
DoubleEllipseShape.prototype.constraints = EllipseShape.prototype.constraints;
RhombusShape.prototype.constraints = EllipseShape.prototype.constraints;
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.75), true),
new ConnectionConstraint(new Point(0.5, 0), true),
new ConnectionConstraint(new Point(0.5, 1), 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.625, 0), 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.5, 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.16, 0.55), 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.5), true),
new ConnectionConstraint(new Point(1, 0.75), true)];
mxArrow.prototype.constraints = null;
Arrow.prototype.constraints = null;
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);
// LATER: Use parent of parent if valid layout
if (layout != null && layout.constructor == mxStackLayout)
if (layout != null && layout.constructor == StackLayout)
{
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)
{
@ -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)
{

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

@ -9,9 +9,9 @@ import mxDefaultKeyHandler from './mxDefaultKeyHandler';
import EventSource from '../view/event/EventSource';
import Resources from '../util/Resources';
import mxClient from '../mxClient';
import mxCompactTreeLayout from '../view/layout/layout/mxCompactTreeLayout';
import CompactTreeLayout from '../view/layout/layout/CompactTreeLayout';
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 utils from '../util/Utils';
import mxCodec from '../util/serialization/mxCodec';
@ -1733,12 +1733,12 @@ class mxEditor extends EventSource {
/**
* Creates the layout instance used to layout the
* swimlanes in the diagram.
* @returns mxStackLayout instance
* @returns StackLayout instance
*/
// createDiagramLayout(): mxStackLayout;
createDiagramLayout() {
const gs = this.graph.gridSize;
const layout = new mxStackLayout(
const layout = new StackLayout(
this.graph,
!this.horizontalFlow,
this.swimlaneSpacing,
@ -1757,11 +1757,11 @@ class mxEditor extends EventSource {
/**
* Creates the layout instance used to layout the
* children of each swimlane.
* @returns mxCompactTreeLayout instance
* @returns CompactTreeLayout instance
*/
// createSwimlaneLayout(): mxCompactTreeLayout;
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, horizontal) {
if (cell != null) {
const layout = new mxCompactTreeLayout(this.graph, horizontal);
const layout = new CompactTreeLayout(this.graph, horizontal);
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 mxEditor from './editor/mxEditor';
import mxCellHighlight from './view/selection/mxCellHighlight';
import CellHighlight from './view/selection/CellHighlight';
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 ConstraintHandler from './view/connection/ConstraintHandler';
import EdgeHandler from './view/cell/edge/EdgeHandler';
@ -31,35 +31,35 @@ import mxKeyHandler from './view/event/mxKeyHandler';
import PanningHandler from './view/panning/PanningHandler';
import PopupMenuHandler from './view/popups_menus/PopupMenuHandler';
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 VertexHandler from './view/cell/vertex/VertexHandler';
import mxCircleLayout from './view/layout/layout/mxCircleLayout';
import mxCompactTreeLayout from './view/layout/layout/mxCompactTreeLayout';
import mxCompositeLayout from './view/layout/layout/mxCompositeLayout';
import mxEdgeLabelLayout from './view/layout/layout/mxEdgeLabelLayout';
import mxFastOrganicLayout from './view/layout/layout/mxFastOrganicLayout';
import mxGraphLayout from './view/layout/layout/mxGraphLayout';
import mxParallelEdgeLayout from './view/layout/layout/mxParallelEdgeLayout';
import mxPartitionLayout from './view/layout/layout/mxPartitionLayout';
import mxRadialTreeLayout from './view/layout/layout/mxRadialTreeLayout';
import mxStackLayout from './view/layout/layout/mxStackLayout';
import CircleLayout from './view/layout/layout/CircleLayout';
import CompactTreeLayout from './view/layout/layout/CompactTreeLayout';
import CompositeLayout from './view/layout/layout/CompositeLayout';
import EdgeLabelLayout from './view/layout/layout/EdgeLabelLayout';
import MxFastOrganicLayout from './view/layout/layout/FastOrganicLayout';
import GraphLayout from './view/layout/layout/GraphLayout';
import ParallelEdgeLayout from './view/layout/layout/ParallelEdgeLayout';
import PartitionLayout from './view/layout/layout/PartitionLayout';
import RadialTreeLayout from './view/layout/layout/RadialTreeLayout';
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 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 mxGraphHierarchyEdge from './view/layout/layout/hierarchical/model/mxGraphHierarchyEdge';
import mxGraphHierarchyModel from './view/layout/layout/hierarchical/model/mxGraphHierarchyModel';
import mxGraphHierarchyNode from './view/layout/layout/hierarchical/model/mxGraphHierarchyNode';
import mxSwimlaneModel from './view/layout/layout/hierarchical/model/mxSwimlaneModel';
import MxGraphAbstractHierarchyCell from './view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell';
import GraphHierarchyEdge from './view/layout/layout/hierarchical/model/GraphHierarchyEdge';
import GraphHierarchyModel from './view/layout/layout/hierarchical/model/GraphHierarchyModel';
import GraphHierarchyNode from './view/layout/layout/hierarchical/model/GraphHierarchyNode';
import SwimlaneModel from './view/layout/layout/hierarchical/model/SwimlaneModel';
import mxCoordinateAssignment from './view/layout/layout/hierarchical/stage/mxCoordinateAssignment';
import mxHierarchicalLayoutStage from './view/layout/layout/hierarchical/stage/mxHierarchicalLayoutStage';
import mxMedianHybridCrossingReduction from './view/layout/layout/hierarchical/stage/mxMedianHybridCrossingReduction';
import mxMinimumCycleRemover from './view/layout/layout/hierarchical/stage/mxMinimumCycleRemover';
import CoordinateAssignment from './view/layout/layout/hierarchical/stage/CoordinateAssignment';
import MxHierarchicalLayoutStage from './view/layout/layout/hierarchical/stage/HierarchicalLayoutStage';
import MedianHybridCrossingReduction from './view/layout/layout/hierarchical/stage/MedianHybridCrossingReduction';
import MinimumCycleRemover from './view/layout/layout/hierarchical/stage/MinimumCycleRemover';
import mxSwimlaneOrdering from './view/layout/layout/hierarchical/stage/mxSwimlaneOrdering';
import mxCellCodec from './util/serialization/mxCellCodec';
@ -80,29 +80,29 @@ import mxStylesheetCodec from './util/serialization/mxStylesheetCodec';
import mxTerminalChangeCodec from './util/serialization/mxTerminalChangeCodec';
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 Swimlane from './view/geometry/shape/Swimlane';
import mxText from './view/geometry/shape/mxText';
import Triangle from './view/geometry/shape/Triangle';
import SwimlaneShape from './view/geometry/shape/node/SwimlaneShape';
import TextShape from './view/geometry/shape/node/TextShape';
import TriangleShape from './view/geometry/shape/node/TriangleShape';
import mxArrow from './view/geometry/shape/edge/mxArrow';
import mxArrowConnector from './view/geometry/shape/edge/mxArrowConnector';
import mxConnector from './view/geometry/shape/edge/mxConnector';
import mxLine from './view/geometry/shape/edge/mxLine';
import mxMarker from './view/geometry/shape/edge/mxMarker';
import mxPolyline from './view/geometry/shape/edge/mxPolyline';
import Arrow from './view/geometry/shape/edge/Arrow';
import ArrowConnector from './view/geometry/shape/edge/ArrowConnector';
import Connector from './view/geometry/shape/edge/Connector';
import Line from './view/geometry/shape/edge/Line';
import Marker from './view/geometry/shape/edge/Marker';
import Polyline from './view/geometry/shape/edge/Polyline';
import Cloud from './view/geometry/shape/node/Cloud';
import Cylinder from './view/geometry/shape/node/Cylinder';
import DoubleEllipse from './view/geometry/shape/node/DoubleEllipse';
import Ellipse from './view/geometry/shape/node/Ellipse';
import Hexagon from './view/geometry/shape/node/Hexagon';
import CloudShape from './view/geometry/shape/node/CloudShape';
import CylinderShape from './view/geometry/shape/node/CylinderShape';
import DoubleEllipseShape from './view/geometry/shape/node/DoubleEllipseShape';
import EllipseShape from './view/geometry/shape/node/EllipseShape';
import HexagonShape from './view/geometry/shape/node/HexagonShape';
import ImageShape from './view/geometry/shape/node/ImageShape';
import RectangleShape from './view/geometry/shape/node/RectangleShape';
import Rhombus from './view/geometry/shape/node/Rhombus';
import Stencil from './view/geometry/shape/node/Stencil';
import StencilRegistry from './view/geometry/shape/node/StencilRegistry';
import RhombusShape from './view/geometry/shape/node/RhombusShape';
import StencilShape from './view/geometry/shape/node/StencilShape';
import StencilShapeRegistry from './view/geometry/shape/node/StencilShapeRegistry';
import * as mxConstants from './util/Constants';
import mxGuide from './util/Guide';
@ -161,7 +161,7 @@ import mxXmlRequest from './util/network/mxXmlRequest';
import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
import mxClipboard from './util/storage/mxClipboard';
import mxUndoableEdit from './view/model/mxUndoableEdit';
import UndoableEdit from './view/model/UndoableEdit';
import mxUndoManager from './util/mxUndoManager';
import Cell from './view/cell/datatypes/Cell';
@ -210,7 +210,7 @@ export default {
mxDivResizer,
mxDragSource: DragSource,
mxToolbar,
mxUndoableEdit,
mxUndoableEdit: UndoableEdit,
mxUndoManager,
mxUrlConverter,
mxPanningManager: PanningManager,
@ -225,49 +225,49 @@ export default {
mxSvgCanvas2D,
mxGuide,
mxShape: Shape,
mxStencil: Stencil,
mxStencilRegistry: StencilRegistry,
mxMarker,
mxStencil: StencilShape,
mxStencilRegistry: StencilShapeRegistry,
mxMarker: Marker,
mxActor: Actor,
mxCloud: Cloud,
mxCloud: CloudShape,
mxRectangleShape: RectangleShape,
mxEllipse: Ellipse,
mxDoubleEllipse: DoubleEllipse,
mxRhombus: Rhombus,
mxPolyline,
mxArrow,
mxArrowConnector,
mxText,
mxTriangle: Triangle,
mxHexagon: Hexagon,
mxLine,
mxEllipse: EllipseShape,
mxDoubleEllipse: DoubleEllipseShape,
mxRhombus: RhombusShape,
mxPolyline: Polyline,
mxArrow: Arrow,
mxArrowConnector: ArrowConnector,
mxText: TextShape,
mxTriangle: TriangleShape,
mxHexagon: HexagonShape,
mxLine: Line,
mxImageShape: ImageShape,
mxLabel: Label,
mxCylinder: Cylinder,
mxConnector,
mxSwimlane: Swimlane,
mxGraphLayout,
mxStackLayout,
mxPartitionLayout,
mxCompactTreeLayout,
mxRadialTreeLayout,
mxFastOrganicLayout,
mxCircleLayout,
mxParallelEdgeLayout,
mxCompositeLayout,
mxEdgeLabelLayout,
mxGraphAbstractHierarchyCell,
mxGraphHierarchyNode,
mxGraphHierarchyEdge,
mxGraphHierarchyModel,
mxSwimlaneModel,
mxHierarchicalLayoutStage,
mxMedianHybridCrossingReduction,
mxMinimumCycleRemover,
mxCoordinateAssignment,
mxCylinder: CylinderShape,
mxConnector: Connector,
mxSwimlane: SwimlaneShape,
mxGraphLayout: GraphLayout,
mxStackLayout: StackLayout,
mxPartitionLayout: PartitionLayout,
mxCompactTreeLayout: CompactTreeLayout,
mxRadialTreeLayout: RadialTreeLayout,
mxFastOrganicLayout: MxFastOrganicLayout,
mxCircleLayout: CircleLayout,
mxParallelEdgeLayout: ParallelEdgeLayout,
mxCompositeLayout: CompositeLayout,
mxEdgeLabelLayout: EdgeLabelLayout,
mxGraphAbstractHierarchyCell: MxGraphAbstractHierarchyCell,
mxGraphHierarchyNode: GraphHierarchyNode,
mxGraphHierarchyEdge: GraphHierarchyEdge,
mxGraphHierarchyModel: GraphHierarchyModel,
mxSwimlaneModel: SwimlaneModel,
mxHierarchicalLayoutStage: MxHierarchicalLayoutStage,
mxMedianHybridCrossingReduction: MedianHybridCrossingReduction,
mxMinimumCycleRemover: MinimumCycleRemover,
mxCoordinateAssignment: CoordinateAssignment,
mxSwimlaneOrdering,
mxHierarchicalLayout,
mxSwimlaneLayout,
mxSwimlaneLayout: SwimlaneLayout,
mxGraphModel: Model,
mxCell: Cell,
mxGeometry: Geometry,
@ -295,7 +295,7 @@ export default {
mxPanningHandler: PanningHandler,
mxPopupMenuHandler: PopupMenuHandler,
mxCellMarker: CellMarker,
mxSelectionCellsHandler,
mxSelectionCellsHandler: SelectionCellsHandler,
mxConnectionHandler: ConnectionHandler,
mxConstraintHandler: ConstraintHandler,
mxRubberband: RubberBand,
@ -306,8 +306,8 @@ export default {
mxEdgeSegmentHandler: EdgeSegmentHandler,
mxKeyHandler,
mxTooltipHandler: TooltipHandler,
mxCellTracker,
mxCellHighlight,
mxCellTracker: CellTracker,
mxCellHighlight: CellHighlight,
mxDefaultKeyHandler,
mxDefaultPopupMenu,
mxDefaultToolbar,

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

@ -7,7 +7,7 @@
import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './Constants';
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 Shape from '../view/geometry/shape/Shape';
import Rectangle from '../view/geometry/Rectangle';
@ -135,9 +135,9 @@ class Guide {
*
* 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?? ============================
const guide = new mxPolyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
const guide = new Polyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
guide.isDashed = true;
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 TooltipHandler from './tooltip/TooltipHandler';
import mxClient from '../mxClient';
import mxSelectionCellsHandler from './selection/mxSelectionCellsHandler';
import SelectionCellsHandler from './selection/SelectionCellsHandler';
import ConnectionHandler from './connection/ConnectionHandler';
import GraphHandler from './GraphHandler';
import PanningHandler from './panning/PanningHandler';
@ -141,7 +141,7 @@ class Graph extends EventSource {
container: HTMLElement;
destroyed: boolean = false;
tooltipHandler: TooltipHandler | null = null;
selectionCellsHandler: mxSelectionCellsHandler | null = null;
selectionCellsHandler: SelectionCellsHandler | null = null;
popupMenuHandler: PopupMenuHandler | null = null;
connectionHandler: ConnectionHandler | 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.
*/
createSelectionCellsHandler(): mxSelectionCellsHandler {
return new mxSelectionCellsHandler(this);
createSelectionCellsHandler(): SelectionCellsHandler {
return new SelectionCellsHandler(this);
}
/**

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

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

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

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

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

@ -12,7 +12,7 @@ import {
MAX_HOTSPOT_SIZE,
MIN_HOTSPOT_SIZE,
} from '../../util/Constants';
import mxCellHighlight from '../selection/mxCellHighlight';
import CellHighlight from '../selection/CellHighlight';
import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent';
import utils, { intersectsHotspot } from '../../util/Utils';
@ -75,7 +75,7 @@ class CellMarker extends EventSource {
this.validColor = validColor;
this.invalidColor = invalidColor;
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;
highlight: mxCellHighlight;
highlight: CellHighlight;
/**
* Function: setEnabled

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

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

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

@ -1,8 +1,14 @@
import Cell from "../datatypes/Cell";
import Geometry from "../../geometry/Geometry";
import CellArray from "../datatypes/CellArray";
import Graph from '../../Graph';
class GraphVertex {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/**
* Specifies the return value for vertices in {@link isLabelMovable}.
@ -115,7 +121,7 @@ class GraphVertex {
relative,
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.
*/
getChildVertices(parent: Cell): CellArray {
return this.getChildCells(parent, true, false);
return this.graph.cell.getChildCells(parent, true, false);
}
/*****************************************************************************
@ -176,4 +182,4 @@ class GraphVertex {
}
}
export default GraphVertex;
export default GraphVertex;

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

@ -94,8 +94,8 @@ class VertexHandle {
const { scale } = this.graph.view;
const tr = this.graph.view.translate;
let pt = new Point(
me.getGraphX() / scale - tr.x,
me.getGraphY() / scale - tr.y
<number>me.getGraphX() / scale - tr.x,
<number>me.getGraphY() / scale - tr.y
);
// Center shape on mouse cursor
@ -301,7 +301,7 @@ class VertexHandle {
*/
reset(): void {
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();
}

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

@ -23,7 +23,7 @@ import {
import InternalEvent from '../../event/InternalEvent';
import RectangleShape from '../../geometry/shape/node/RectangleShape';
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 utils from '../../../util/Utils';
import mxClient from '../../../mxClient';
@ -262,7 +262,7 @@ class VertexHandler {
if (
resizable ||
(this.graph.isLabelMovable(this.state.cell) &&
(this.graph.label.isLabelMovable(this.state.cell) &&
this.state.width >= 2 &&
this.state.height >= 2)
) {
@ -560,7 +560,7 @@ class VertexHandler {
return shape;
}
if (index === InternalEvent.ROTATION_HANDLE) {
return new Ellipse(
return new EllipseShape(
bounds,
fillColor || HANDLE_FILLCOLOR,
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 CellMarker from '../cell/CellMarker';
import ConstraintHandler from './ConstraintHandler';
import mxPolyline from '../geometry/shape/edge/mxPolyline';
import Polyline from '../geometry/shape/edge/Polyline';
import EventSource from '../event/EventSource';
import Rectangle from '../geometry/Rectangle';
import mxLog from '../../util/gui/mxLog';
@ -520,7 +520,7 @@ class ConnectionHandler extends EventSource {
const shape =
this.livePreview && this.edgeState
? this.graph.cellRenderer.createShape(this.edgeState)
: new mxPolyline([], INVALID_COLOR);
: new Polyline([], INVALID_COLOR);
if (shape && shape.node) {
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
*/
import Rectangle from '../geometry/Rectangle';
import mxCellHighlight from '../selection/mxCellHighlight';
import CellHighlight from '../selection/CellHighlight';
import utils from '../../util/Utils';
import InternalEvent from '../event/InternalEvent';
import mxClient from '../../mxClient';
@ -546,7 +546,7 @@ class DragSource {
}
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

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

@ -25,7 +25,7 @@ import {
LINE_HEIGHT,
WORD_WRAP,
} from '../../util/Constants';
import mxText from '../geometry/shape/mxText';
import TextShape from '../geometry/shape/node/TextShape';
import graph from '../Graph';
import Cell from '../cell/datatypes/Cell';
import InternalMouseEvent from '../event/InternalMouseEvent';
@ -652,7 +652,7 @@ class CellEditor {
state.style.overflow !== 'width'
) {
// @ts-ignore
const dummy = new mxText(); // FIXME!!!! ===================================================================================================
const dummy = new TextShape(); // FIXME!!!! ===================================================================================================
const spacing = parseInt(state.style.spacing || 2) * scale;
const spacingTop =
(parseInt(state.style.spacingTop || 0) + dummy.baseSpacingTop) *
@ -1099,7 +1099,7 @@ class CellEditor {
);
} else {
// @ts-ignore
const dummy = new mxText(); // FIXME!!!! ===================================================================================================
const dummy = new TextShape(); // FIXME!!!! ===================================================================================================
const spacing: number = parseInt(state.style.spacing || 0) * scale;
const spacingTop: number =
(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
*/
import CellMarker from '../cell/CellMarker';
import InternalMouseEvent from './InternalMouseEvent';
import Graph from '../Graph';
import Cell from '../cell/datatypes/Cell';
/**
* Event handler that highlights cells
@ -61,29 +64,33 @@ import CellMarker from '../cell/CellMarker';
* });
* ```
*/
class mxCellTracker extends CellMarker {
constructor(graph, color, funct) {
class CellTracker extends CellMarker {
constructor(
graph: Graph,
color: string,
funct: null | ((me: InternalMouseEvent) => Cell)=null
) {
super(graph, color);
this.graph.addMouseListener(this);
this.graph.event.addMouseListener(this);
if (funct != null) {
this.getCell = funct;
}
}
destroyed: boolean = false;
/**
* Ignores the event. The event is not consumed.
*/
// mouseDown(sender: any, me: mxMouseEvent): void;
mouseDown(sender, me) {}
mouseDown(sender: any, me: InternalMouseEvent): void {}
/**
* Handles the event by highlighting the cell under the mousepointer if it
* is over the hotspot region of the cell.
*/
// mouseMove(sender: any, me: mxMouseEvent): void;
mouseMove(sender, me) {
mouseMove(sender: any, me: InternalMouseEvent): void {
if (this.isEnabled()) {
this.process(me);
}
@ -92,8 +99,7 @@ class mxCellTracker extends CellMarker {
/**
* Handles the event by resetting the highlight.
*/
// mouseUp(sender: any, me: mxMouseEvent): void;
mouseUp(sender, me) {}
mouseUp(sender: any, me: InternalMouseEvent): void {}
/**
* Function: destroy
@ -102,15 +108,14 @@ class mxCellTracker extends CellMarker {
* normally need to be called. It is called automatically when the window
* unloads.
*/
// destroy(): void;
destroy() {
destroy(): void {
if (!this.destroyed) {
this.destroyed = true;
this.graph.removeMouseListener(this);
this.graph.event.removeMouseListener(this);
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) {
this.selectCellForEvent(cell, evt);
this.graph.selection.selectCellForEvent(cell, evt);
} else if (!this.isToggleEvent(evt)) {
this.graph.selection.clearSelection();
}
@ -961,8 +961,8 @@ class GraphEvents {
height = Math.max(height, this.graph.minimumContainerSize.height);
}
if (this.resizeContainer) {
this.doResizeContainer(width, height);
if (this.graph.resizeContainer) {
this.graph.doResizeContainer(width, height);
}
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.
*/
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(
c: mxSvgCanvas2D,
x: number,
@ -65,7 +64,6 @@ class Actor extends Shape {
/**
* Draws the path for this shape.
*/
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath(
c: mxSvgCanvas2D,
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 mxClient from '../../../mxClient';
import CellState from '../../cell/datatypes/CellState';
import Stencil from './node/Stencil';
import StencilShape from './node/StencilShape';
import CellOverlay from '../../cell/CellOverlay';
import type {
@ -93,7 +93,7 @@ const toBool = (i: any) => {
* ```
*/
class Shape {
constructor(stencil: Stencil | null = null) {
constructor(stencil: StencilShape | null = null) {
if (stencil) {
this.stencil = stencil;
}
@ -267,7 +267,7 @@ class Shape {
*
* Holds the <mxStencil> that defines the shape.
*/
stencil: Stencil | null = null;
stencil: StencilShape | null = null;
/**
* 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 { 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.
*
* 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) {
super();
this.points = points;
@ -27,8 +30,7 @@ class mxArrow extends Shape {
/**
* Augments the bounding box with the edge width and markers.
*/
// augmentBoundingBox(bbox: mxRectangle): void;
augmentBoundingBox(bbox) {
augmentBoundingBox(bbox: Rectangle): void {
super.augmentBoundingBox(bbox);
const w = Math.max(this.arrowWidth, this.endSize);
@ -38,8 +40,7 @@ class mxArrow extends Shape {
/**
* Paints the line shape.
*/
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void;
paintEdgeShape(c, pts) {
paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
// Geometry of arrow
const spacing = ARROW_SPACING;
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
*/
import Shape from '../Shape';
import {
ARROW_SIZE,
ARROW_SPACING,
ARROW_WIDTH,
NONE,
} from '../../../../util/Constants';
import utils from '../../../../util/Utils';
import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH, NONE } from '../../../../util/Constants';
import utils, { getNumber, getValue, relativeCcw } from '../../../../util/Utils';
import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
import Point from '../../Point';
import Rectangle from '../../Rectangle';
import CellState from '../../../cell/datatypes/CellState';
/**
* 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}.
*/
class mxArrowConnector extends Shape {
class ArrowConnector extends Shape {
constructor(points, fill, stroke, strokewidth, arrowWidth, spacing, endSize) {
super();
this.points = points;
@ -36,23 +35,21 @@ class mxArrowConnector extends Shape {
* Allows to use the SVG bounding box in SVG.
* @defaultValue `false` for performance reasons.
*/
// useSvgBoundingBox: boolean;
useSvgBoundingBox = true;
useSvgBoundingBox: boolean = true;
/**
* Function: isRoundable
*
* Hook for subclassers.
*/
isRoundable() {
isRoundable(): boolean {
return true;
}
/**
* Overrides mxShape to reset spacing.
*/
// resetStyles(): void;
resetStyles() {
resetStyles(): void {
super.resetStyles();
this.arrowSpacing = ARROW_SPACING;
}
@ -60,23 +57,19 @@ class mxArrowConnector extends Shape {
/**
* Overrides apply to get smooth transition from default start- and endsize.
*/
// apply(state: mxCellState): void;
apply(state) {
apply(state: CellState): void {
super.apply(state);
if (this.style != null) {
this.startSize =
utils.getNumber(this.style, 'startSize', ARROW_SIZE / 5) * 3;
this.endSize =
utils.getNumber(this.style, 'endSize', ARROW_SIZE / 5) * 3;
this.startSize = getNumber(this.style, 'startSize', ARROW_SIZE / 5) * 3;
this.endSize = getNumber(this.style, 'endSize', ARROW_SIZE / 5) * 3;
}
}
/**
* Augments the bounding box with the edge width and markers.
*/
// augmentBoundingBox(bbox: mxRectangle): void;
augmentBoundingBox(bbox) {
augmentBoundingBox(bbox: Rectangle): void {
super.augmentBoundingBox(bbox);
let w = this.getEdgeWidth();
@ -95,8 +88,7 @@ class mxArrowConnector extends Shape {
/**
* Paints the line shape.
*/
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void;
paintEdgeShape(c, pts) {
paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
// Geometry of arrow
let strokeWidth = this.strokewidth;
@ -126,11 +118,7 @@ class mxArrowConnector extends Shape {
// Finds first non-overlapping point
let i0 = 1;
while (
i0 < pts.length - 1 &&
pts[i0].x === pts[0].x &&
pts[i0].y === pts[0].y
) {
while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
i0++;
}
@ -204,7 +192,7 @@ class mxArrowConnector extends Shape {
for (let i = 0; i < pts.length - 2; i += 1) {
// Work out in which direction the line is bending
const pos = utils.relativeCcw(
const pos = relativeCcw(
pts[i].x,
pts[i].y,
pts[i + 1].x,
@ -314,10 +302,7 @@ class mxArrowConnector extends Shape {
false
);
} else {
c.lineTo(
pe.x - spacing * nx1 + orthx / 2,
pe.y - spacing * ny1 + orthy / 2
);
c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2);
const inStartX = pe.x - spacing * nx1 - orthx / 2;
const inStartY = pe.y - spacing * ny1 - orthy / 2;
@ -402,18 +387,7 @@ class mxArrowConnector extends Shape {
*
* Paints the marker.
*/
paintMarker(
c,
ptX,
ptY,
nx,
ny,
size,
arrowWidth,
edgeWidth,
spacing,
initialMove
) {
paintMarker(c, ptX, ptY, nx, ny, size, arrowWidth, edgeWidth, spacing, initialMove) {
const widthArrowRatio = edgeWidth / arrowWidth;
const orthx = (edgeWidth * ny) / 2;
const orthy = (-edgeWidth * nx) / 2;
@ -442,58 +416,51 @@ class mxArrowConnector extends Shape {
/**
* @returns whether the arrow is rounded
*/
// isArrowRounded(): boolean;
isArrowRounded() {
isArrowRounded(): boolean {
return this.isRounded;
}
/**
* @returns the width of the start arrow
*/
// getStartArrowWidth(): number;
getStartArrowWidth() {
getStartArrowWidth(): number {
return ARROW_WIDTH;
}
/**
* @returns the width of the end arrow
*/
// getEndArrowWidth(): number;
getEndArrowWidth() {
getEndArrowWidth(): number {
return ARROW_WIDTH;
}
/**
* @returns the width of the body of the edge
*/
// getEdgeWidth(): number;
getEdgeWidth() {
getEdgeWidth(): number {
return ARROW_WIDTH / 3;
}
/**
* @returns whether the ends of the shape are drawn
*/
// isOpenEnded(): boolean;
isOpenEnded() {
isOpenEnded(): boolean {
return false;
}
/**
* @returns whether the start marker is drawn
*/
// isMarkerStart(): boolean;
isMarkerStart() {
return utils.getValue(this.style, 'startArrow', NONE) !== NONE;
isMarkerStart(): boolean {
return getValue(this.style, 'startArrow', NONE) !== NONE;
}
/**
* @returns whether the end marker is drawn
*/
// isMarkerEnd(): boolean;
isMarkerEnd() {
return utils.getValue(this.style, 'endArrow', NONE) !== NONE;
isMarkerEnd(): boolean {
return 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
* Type definitions from the typed-mxgraph project
*/
import {
DEFAULT_MARKERSIZE,
NONE,
} from '../../../../util/Constants';
import mxPolyline from './mxPolyline';
import utils from '../../../../util/Utils';
import mxMarker from './mxMarker';
import { DEFAULT_MARKERSIZE, NONE } from '../../../../util/Constants';
import Polyline from './Polyline';
import utils, { getNumber, getValue } from '../../../../util/Utils';
import Marker from './Marker';
import Point from '../../Point';
import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
import Rectangle from '../../Rectangle';
/**
* Extends {@link mxShape} to implement a connector shape.
* The connector shape allows for arrow heads on either side.
* This shape is registered under {@link mxConstants.SHAPE_CONNECTOR} in {@link mxCellRenderer}.
*
* @class mxConnector
* @extends {mxPolyline}
* @class Connector
* @extends {Polyline}
*/
class mxConnector extends mxPolyline {
constructor(points, stroke, strokewidth) {
class Connector extends Polyline {
constructor(points: Point[], stroke: string, strokewidth: number) {
super(points, stroke, strokewidth);
}
@ -29,18 +29,15 @@ class mxConnector extends mxPolyline {
* Updates the <boundingBox> for this shape using <createBoundingBox>
* and augmentBoundingBox and stores the result in <boundingBox>.
*/
// updateBoundingBox(): void;
updateBoundingBox() {
this.useSvgBoundingBox =
this.style != null && this.style.curved === 1;
updateBoundingBox(): void {
this.useSvgBoundingBox = this.style != null && this.style.curved === 1;
super.updateBoundingBox();
}
/**
* Paints the line shape.
*/
// paintEdgeShape(c: mxAbstractCanvas2D, pts: mxPoint[]): void;
paintEdgeShape(c, pts) {
paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
// The indirection via functions for markers is needed in
// order to apply the offsets before painting the line and
// 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.
*/
// createMarker(c: mxAbstractCanvas2D, pts: mxPoint[], source: boolean): mxMarker;
createMarker(c, pts, source) {
createMarker(c: mxAbstractCanvas2D, pts: Point[], source: boolean): Marker {
let result = null;
const n = pts.length;
const type = utils.getValue(
this.style,
source ? 'startArrow' : 'endArrow'
);
const type = getValue(this.style, source ? 'startArrow' : 'endArrow');
let p0 = source ? pts[1] : pts[n - 2];
const pe = source ? pts[0] : pts[n - 1];
@ -99,7 +92,7 @@ class mxConnector extends mxPolyline {
const unitX = dx / dist;
const unitY = dy / dist;
const size = utils.getNumber(
const size = getNumber(
this.style,
source ? 'startSize' : 'endSize',
DEFAULT_MARKERSIZE
@ -109,7 +102,7 @@ class mxConnector extends mxPolyline {
// orthogonal vectors describing the direction of the marker
const filled = this.style[source ? 'startFill' : 'endFill'] !== 0;
result = mxMarker.createMarker(
result = Marker.createMarker(
c,
this,
type,
@ -129,28 +122,22 @@ class mxConnector extends mxPolyline {
/**
* Augments the bounding box with the strokewidth and shadow offsets.
*/
// augmentBoundingBox(bbox: mxRectangle): void;
augmentBoundingBox(bbox) {
augmentBoundingBox(bbox: Rectangle): void {
super.augmentBoundingBox(bbox);
// Adds marker sizes
let size = 0;
if (utils.getValue(this.style, 'startArrow', NONE) !== NONE) {
size =
utils.getNumber(this.style, 'startSize', DEFAULT_MARKERSIZE) + 1;
if (getValue(this.style, 'startArrow', NONE) !== NONE) {
size = getNumber(this.style, 'startSize', DEFAULT_MARKERSIZE) + 1;
}
if (utils.getValue(this.style, 'endArrow', NONE) !== NONE) {
size =
Math.max(
size,
utils.getNumber(this.style, 'endSize', DEFAULT_MARKERSIZE)
) + 1;
if (getValue(this.style, 'endArrow', NONE) !== NONE) {
size = Math.max(size, getNumber(this.style, 'endSize', DEFAULT_MARKERSIZE)) + 1;
}
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
*/
import Shape from '../Shape';
import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
import Rectangle from '../../Rectangle';
/**
* Extends {@link Shape} to implement a horizontal line shape.
* This shape is registered under {@link mxConstants.SHAPE_LINE} in {@link mxCellRenderer}.
* @class mxLine
* @class Line
* @extends {Shape}
*/
class mxLine extends Shape {
constructor(bounds, stroke, strokewidth, vertical) {
class Line extends Shape {
constructor(bounds: Rectangle, stroke: string, strokewidth: number, vertical: boolean) {
super();
this.bounds = bounds;
this.stroke = stroke;
@ -36,8 +38,13 @@ class mxLine extends Shape {
* @param {number} w
* @param {number} h
*/
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(c, x, y, w, h) {
paintVertexShape(
c: mxAbstractCanvas2D,
x: number,
y: number,
w: number,
h: number
): void {
c.begin();
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.
* 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.
*
@ -30,7 +30,7 @@ class mxMarker {
*/
// static addMarker(type: string, funct: Function): void;
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.
*/
static createMarker(
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) {
const funct = mxMarker.markers[type];
static createMarker(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
const funct = Marker.markers[type];
return funct != null
? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
: null;
@ -64,18 +53,7 @@ class mxMarker {
function createArrow(widthFactor) {
widthFactor = widthFactor != null ? widthFactor : 2;
return (
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) => {
return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
// 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
// only half the strokewidth is processed ).
@ -89,8 +67,7 @@ class mxMarker {
pt.x -= endOffsetX;
pt.y -= endOffsetY;
const f =
type !== ARROW_CLASSIC && type !== ARROW_CLASSIC_THIN ? 1 : 3 / 4;
const f = type !== ARROW_CLASSIC && type !== ARROW_CLASSIC_THIN ? 1 : 3 / 4;
pe.x += -unitX * f - endOffsetX;
pe.y += -unitY * f - endOffsetY;
@ -121,26 +98,15 @@ class mxMarker {
};
}
mxMarker.addMarker('classic', createArrow(2));
mxMarker.addMarker('classicThin', createArrow(3));
mxMarker.addMarker('block', createArrow(2));
mxMarker.addMarker('blockThin', createArrow(3));
Marker.addMarker('classic', createArrow(2));
Marker.addMarker('classicThin', createArrow(3));
Marker.addMarker('block', createArrow(2));
Marker.addMarker('blockThin', createArrow(3));
function createOpenArrow(widthFactor) {
widthFactor = widthFactor != null ? widthFactor : 2;
return (
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) => {
return (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
// 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
// only half the strokewidth is processed ).
@ -173,10 +139,10 @@ class mxMarker {
};
}
mxMarker.addMarker('open', createOpenArrow(2));
mxMarker.addMarker('openThin', createOpenArrow(3));
Marker.addMarker('open', createOpenArrow(2));
Marker.addMarker('openThin', createOpenArrow(3));
mxMarker.addMarker(
Marker.addMarker(
'oval',
(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) => {
const a = size / 2;
@ -197,18 +163,7 @@ class mxMarker {
}
);
function diamond(
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) {
function diamond(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
// 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
// only half the strokewidth is processed ). Or 0.9862 for thin diamond.
@ -234,15 +189,9 @@ class mxMarker {
return () => {
canvas.begin();
canvas.moveTo(pt.x, pt.y);
canvas.lineTo(
pt.x - unitX / 2 - unitY / tk,
pt.y + unitX / tk - unitY / 2
);
canvas.lineTo(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 / 2 + unitY / tk,
pt.y - unitY / 2 - unitX / tk
);
canvas.lineTo(pt.x - unitX / 2 + unitY / tk, pt.y - unitY / 2 - unitX / tk);
canvas.close();
if (filled) {
@ -253,8 +202,8 @@ class mxMarker {
};
}
mxMarker.addMarker('diamond', diamond);
mxMarker.addMarker('diamondThin', diamond);
Marker.addMarker('diamond', 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
*/
import Shape from '../Shape';
import {
LINE_ARCSIZE,
} from '../../../../util/Constants';
import utils from '../../../../util/Utils';
import { LINE_ARCSIZE } from '../../../../util/Constants';
import utils, { getValue } from '../../../../util/Utils';
import Point from '../../Point';
import mxAbstractCanvas2D from '../../../../util/canvas/mxAbstractCanvas2D';
/**
* Class: mxPolyline
@ -30,8 +30,8 @@ import utils from '../../../../util/Utils';
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
class mxPolyline extends Shape {
constructor(points, stroke, strokewidth) {
class Polyline extends Shape {
constructor(points: Point[], stroke: string, strokewidth: number) {
super();
this.points = points;
this.stroke = stroke;
@ -41,32 +41,28 @@ class mxPolyline extends Shape {
/**
* Returns 0.
*/
// getRotation(): number;
getRotation() {
getRotation(): number {
return 0;
}
/**
* Returns 0.
*/
// getShapeRotation(): number;
getShapeRotation() {
getShapeRotation(): number {
return 0;
}
/**
* Returns false.
*/
// isPaintBoundsInverted(): boolean;
isPaintBoundsInverted() {
isPaintBoundsInverted(): boolean {
return false;
}
/**
* Paints the line shape.
*/
// paintEdgeShape(c: mxAbstractCanvas2D, pts: Array<mxPoint>): void;
paintEdgeShape(c, pts) {
paintEdgeShape(c: mxAbstractCanvas2D, pts: Point[]): void {
const prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke';
@ -75,17 +71,14 @@ class mxPolyline extends Shape {
} else {
this.paintCurvedLine(c, pts);
}
c.pointerEventsValue = prev;
}
/**
* Paints the line shape.
*/
// paintLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>, rounded?: boolean): void;
paintLine(c, pts, rounded) {
const arcSize =
utils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
paintLine(c: mxAbstractCanvas2D, pts: Point[], rounded?: boolean): void {
const arcSize = getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, pts, rounded, arcSize, false);
c.stroke();
@ -94,8 +87,7 @@ class mxPolyline extends Shape {
/**
* Paints the line shape.
*/
// paintCurvedLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>): void;
paintCurvedLine(c, pts) {
paintCurvedLine(c: mxAbstractCanvas2D, pts: Point[]): void {
c.begin();
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}.
*/
class Cloud extends Actor {
class CloudShape extends Actor {
constructor(
bounds: Rectangle,
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}.
*/
class Cylinder extends Shape {
class CylinderShape extends Shape {
constructor(
bounds: Rectangle,
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;
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.
* This shape is registered under mxConstants.SHAPE_ELLIPSE in mxCellRenderer.
*/
class Ellipse extends Shape {
class EllipseShape extends Shape {
constructor(
bounds: Rectangle,
fill: string,
@ -29,17 +29,16 @@ class Ellipse extends Shape {
/**
* Paints the ellipse shape.
*/
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number
) {
): void {
c.ellipse(x, y, w, h);
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 Point from '../../Point';
import utils from '../../../../util/Utils';
import utils, { getValue } from '../../../../util/Utils';
import { LINE_ARCSIZE } from '../../../../util/Constants';
import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
/**
* Implementation of the hexagon shape.
* @class Hexagon
* @class HexagonShape
* @extends {Actor}
*/
class Hexagon extends Actor {
class HexagonShape extends Actor {
constructor() {
super();
}
@ -28,10 +28,8 @@ class Hexagon extends Actor {
* @param {number} w
* @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) {
const arcSize =
utils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number): void {
const arcSize = getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints(
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
* Type definitions from the typed-mxgraph project
*/
import Rectangle from '../Rectangle';
import Rectangle from '../../Rectangle';
import {
ALIGN_BOTTOM,
ALIGN_CENTER,
@ -13,9 +13,9 @@ import {
ALIGN_RIGHT,
ALIGN_TOP,
DEFAULT_IMAGESIZE,
} from '../../../util/Constants';
import RectangleShape from './node/RectangleShape';
import utils from '../../../util/Utils';
} from '../../../../util/Constants';
import RectangleShape from './RectangleShape';
import utils from '../../../../util/Utils';
/**
* 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.
* This shape is registered under {@link mxConstants.SHAPE_RHOMBUS} in {@link cellRenderer}.
* @class Rhombus
* @class RhombusShape
* @extends {Shape}
*/
class Rhombus extends Shape {
class RhombusShape extends Shape {
constructor(
bounds: Rectangle,
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,
RECTANGLE_ROUNDING_FACTOR,
} from '../../../../util/Constants';
import StencilRegistry from './StencilRegistry';
import StencilShapeRegistry from './StencilShapeRegistry';
import { getChildNodes, getTextContent } from '../../../../util/DomUtils';
import Point from '../../Point';
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.
*
* @class Stencil
* @class StencilShape
*/
class Stencil extends Shape {
class StencilShape extends Shape {
constructor(desc: Element) {
super();
this.desc = desc;
@ -182,7 +182,7 @@ class Stencil extends Shape {
let result = this.evaluateAttribute(node, attribute, shape);
const loc = node.getAttribute('localized');
if ((Stencil.defaultLocalized && loc == null) || loc == '1') {
if ((StencilShape.defaultLocalized && loc == null) || loc == '1') {
result = Resources.get(result);
}
@ -203,7 +203,7 @@ class Stencil extends Shape {
if (result == null) {
const text = getTextContent(node);
if (text != null && Stencil.allowEval) {
if (text != null && StencilShape.allowEval) {
const funct = eval(text);
if (typeof funct === 'function') {
@ -604,7 +604,7 @@ class Stencil extends Shape {
);
}
} else if (name === 'include-shape') {
const stencil = StencilRegistry.getStencil(node.getAttribute('name'));
const stencil = StencilShapeRegistry.getStencil(node.getAttribute('name'));
if (stencil != null) {
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)
*/
import Stencil from './Stencil';
import StencilShape from './StencilShape';
type Stencils = {
[k: string]: Stencil;
[k: string]: StencilShape;
};
/**
* A singleton class that provides a registry for stencils and the methods
* for painting those stencils onto a canvas or into a DOM.
*
* @class StencilRegistry
* @class StencilShapeRegistry
*/
class StencilRegistry {
class StencilShapeRegistry {
static stencils: Stencils = {};
/**
* Adds the given <mxStencil>.
* @static
* @param {string} name
* @param {Stencil} stencil
* @param {StencilShape} stencil
*/
static addStencil(name: string, stencil: Stencil) {
StencilRegistry.stencils[name] = stencil;
static addStencil(name: string, stencil: StencilShape) {
StencilShapeRegistry.stencils[name] = stencil;
}
/**
* Returns the <mxStencil> for the given name.
* @static
* @param {string} name
* @returns {Stencil}
* @returns {StencilShape}
*/
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
* Type definitions from the typed-mxgraph project
*/
import Shape from './Shape';
import Rectangle from '../Rectangle';
import Shape from '../Shape';
import Rectangle from '../../Rectangle';
import {
DEFAULT_STARTSIZE,
DIRECTION_NORTH,
@ -14,8 +14,8 @@ import {
LINE_ARCSIZE,
NONE,
RECTANGLE_ROUNDING_FACTOR,
} from '../../../util/Constants';
import utils from '../../../util/Utils';
} from '../../../../util/Constants';
import utils from '../../../../util/Utils';
/**
* 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,
* not only its label.
*
* @class Swimlane
* @class SwimlaneShape
* @extends {Shape}
*/
class Swimlane extends Shape {
class SwimlaneShape extends Shape {
constructor(bounds, fill, stroke, strokewidth) {
super();
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
*/
import mxClient from '../../../mxClient';
import mxClient from '../../../../mxClient';
import {
ABSOLUTE_LINE_HEIGHT,
ALIGN_BOTTOM,
@ -27,19 +27,19 @@ import {
TEXT_DIRECTION_LTR,
TEXT_DIRECTION_RTL,
WORD_WRAP,
} from '../../../util/Constants';
import utils from '../../../util/Utils';
import Point from '../Point';
import mxSvgCanvas2D from '../../../util/canvas/mxSvgCanvas2D';
import Shape from './Shape';
import Rectangle from '../Rectangle';
import CellState from '../../cell/datatypes/CellState';
import {
htmlEntities,
replaceTrailingNewlines,
trim,
} from '../../../util/StringUtils';
import { isNode } from '../../../util/DomUtils';
} from '../../../../util/Constants';
import utils, {
getAlignmentAsPoint,
getBoundingBox,
getValue,
} from '../../../../util/Utils';
import Point from '../../Point';
import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
import Shape from '../Shape';
import Rectangle from '../../Rectangle';
import CellState from '../../../cell/datatypes/CellState';
import { htmlEntities, replaceTrailingNewlines, trim } from '../../../../util/StringUtils';
import { isNode } from '../../../../util/DomUtils';
/**
* Extends mxShape to implement a text shape.
@ -49,10 +49,10 @@ import { isNode } from '../../../util/DomUtils';
* ```javascript
* mxText.prototype.verticalTextRotation = 90;
* ```
* @class mxText
* @class TextShape
* @extends {Shape}
*/
class mxText extends Shape {
class TextShape extends Shape {
constructor(
value: string,
bounds: Rectangle,
@ -88,8 +88,7 @@ class mxText extends Shape {
this.size = size;
this.fontStyle = fontStyle;
this.spacing = parseInt(String(spacing || 2));
this.spacingTop =
parseInt(String(spacing || 2)) + parseInt(String(spacingTop || 0));
this.spacingTop = parseInt(String(spacing || 2)) + parseInt(String(spacingTop || 0));
this.spacingRight =
parseInt(String(spacing || 2)) + parseInt(String(spacingRight || 0));
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
* value 5 here to get the same label positions as in mxGraph 1.x.
*/
// baseSpacingTop: number;
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
* value 1 here to get the same label positions as in mxGraph 1.x.
*/
// baseSpacingBottom: number;
baseSpacingBottom: number = 0;
/**
@ -158,7 +155,6 @@ class mxText extends Shape {
*
* Specifies the spacing to be added to the left spacing. Default is 0.
*/
// baseSpacingLeft: number;
baseSpacingLeft: number = 0;
/**
@ -166,7 +162,6 @@ class mxText extends Shape {
*
* Specifies the spacing to be added to the right spacing. Default is 0.
*/
// baseSpacingRight: number;
baseSpacingRight: number = 0;
/**
@ -175,7 +170,6 @@ class mxText extends Shape {
* Specifies if linefeeds in HTML labels should be replaced with BR tags.
* Default is true.
*/
// replaceLinefeeds: boolean;
replaceLinefeeds: boolean = true;
/**
@ -183,7 +177,6 @@ class mxText extends Shape {
*
* Rotation for vertical text. Default is -90 (bottom to top).
*/
// verticalTextRotation: number;
verticalTextRotation: number = -90;
/**
@ -194,7 +187,6 @@ class mxText extends Shape {
* true, then the bounding box will be set to <bounds>. Default is true.
* <ignoreStringSize> has precedence over this switch.
*/
// ignoreClippedStringSize: boolean;
ignoreClippedStringSize: boolean = true;
/**
@ -204,7 +196,6 @@ class mxText extends Shape {
* boundingBox will not ignore the actual size of the string, otherwise
* <bounds> will be used instead. Default is false.
*/
// ignoreStringSize: boolean;
ignoreStringSize: boolean = false;
/**
@ -212,7 +203,6 @@ class mxText extends Shape {
*
* Contains the last rendered text value. Used for caching.
*/
// lastValue: string;
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.
*/
// cacheEnabled: boolean;
cacheEnabled: boolean = true;
/**
@ -228,7 +217,6 @@ class mxText extends Shape {
*
* Disables offset in IE9 for crisper image output.
*/
// getSvgScreenOffset(): 0 | 0.5;
getSvgScreenOffset(): number {
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.
*/
// checkBounds(): boolean;
checkBounds(): boolean {
return (
!isNaN(this.scale) &&
@ -257,7 +244,6 @@ class mxText extends Shape {
*
* Generic rendering code.
*/
// paint(c: mxAbstractCanvas2D, update?: boolean): void;
paint(c: mxSvgCanvas2D, update: boolean = false): void {
// Scale is passed-through to canvas
const s = this.scale;
@ -285,8 +271,7 @@ class mxText extends Shape {
);
} else {
// Checks if text contains HTML markup
const realHtml =
isNode(this.value) || this.dialect === DIALECT_STRICTHTML;
const realHtml = isNode(this.value) || this.dialect === DIALECT_STRICTHTML;
// Always renders labels as HTML in VML
const fmt = realHtml ? 'html' : '';
@ -340,7 +325,6 @@ class mxText extends Shape {
*
* Renders the text using the given DOM nodes.
*/
// redraw(): void;
redraw(): void {
if (
this.visible &&
@ -379,7 +363,6 @@ class mxText extends Shape {
*
* Resets all styles.
*/
// resetStyles(): void;
resetStyles(): void {
super.resetStyles();
@ -410,70 +393,35 @@ class mxText extends Shape {
*
* state - <mxCellState> of the corresponding cell.
*/
// apply(state: mxCellState): void;
apply(state: CellState): void {
const old = this.spacing;
super.apply(state);
if (this.style != null) {
this.fontStyle = this.style.fontStyle || this.fontStyle;
this.family = utils.getValue(this.style, 'fontFamily', this.family);
this.size = utils.getValue(this.style, 'fontSize', this.size);
this.color = utils.getValue(this.style, 'fontColor', this.color);
this.align = utils.getValue(this.style, 'align', this.align);
this.valign = utils.getValue(this.style, 'verticalAlign', this.valign);
this.spacing = parseInt(
utils.getValue(this.style, 'spacing', this.spacing)
);
this.family = getValue(this.style, 'fontFamily', this.family);
this.size = getValue(this.style, 'fontSize', this.size);
this.color = getValue(this.style, 'fontColor', this.color);
this.align = getValue(this.style, 'align', this.align);
this.valign = getValue(this.style, 'verticalAlign', this.valign);
this.spacing = parseInt(getValue(this.style, 'spacing', this.spacing));
this.spacingTop =
parseInt(
utils.getValue(this.style, 'spacingTop', this.spacingTop - old)
) + this.spacing;
parseInt(getValue(this.style, 'spacingTop', this.spacingTop - old)) +
this.spacing;
this.spacingRight =
parseInt(
utils.getValue(
this.style,
'spacingRight',
this.spacingRight - old
)
) + this.spacing;
parseInt(getValue(this.style, 'spacingRight', this.spacingRight - old)) +
this.spacing;
this.spacingBottom =
parseInt(
utils.getValue(
this.style,
'spacingBottom',
this.spacingBottom - old
)
) + this.spacing;
parseInt(getValue(this.style, 'spacingBottom', this.spacingBottom - old)) +
this.spacing;
this.spacingLeft =
parseInt(
utils.getValue(
this.style,
'spacingLeft',
this.spacingLeft - old
)
) + this.spacing;
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);
parseInt(getValue(this.style, 'spacingLeft', this.spacingLeft - old)) +
this.spacing;
this.horizontal = getValue(this.style, 'horizontal', this.horizontal);
this.background = getValue(this.style, 'backgroundColor', this.background);
this.border = getValue(this.style, 'labelBorderColor', this.border);
this.textDirection = getValue(this.style, 'textDirection', DEFAULT_TEXT_DIRECTION);
this.opacity = getValue(this.style, 'textOpacity', 100);
this.updateMargin();
}
@ -489,8 +437,7 @@ class mxText extends Shape {
* depending on the contents of <value>. This is not invoked for HTML, wrapped
* content or if <value> is a DOM node.
*/
// getAutoDirection(): string;
getAutoDirection() {
getAutoDirection(): string {
// Looks for strong (directional) characters
const tmp = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(
<string>this.value
@ -529,23 +476,16 @@ class mxText extends Shape {
*
* Updates the <boundingBox> for this shape using the given node and position.
*/
// updateBoundingBox(): void;
updateBoundingBox() {
updateBoundingBox(): void {
let { node } = this;
this.boundingBox = this.bounds.clone();
const rot = this.getTextRotation();
const h =
this.style != null
? utils.getValue(this.style, 'labelPosition', ALIGN_CENTER)
: null;
this.style != null ? getValue(this.style, 'labelPosition', ALIGN_CENTER) : null;
const v =
this.style != null
? utils.getValue(
this.style,
'verticalLabelPosition',
ALIGN_MIDDLE
)
? getValue(this.style, 'verticalLabelPosition', ALIGN_MIDDLE)
: null;
if (
@ -598,12 +538,7 @@ class mxText extends Shape {
}
if (ow != null && oh != null) {
this.boundingBox = new Rectangle(
this.bounds.x,
this.bounds.y,
ow,
oh
);
this.boundingBox = new Rectangle(this.bounds.x, this.bounds.y, ow, oh);
}
}
@ -613,7 +548,7 @@ class mxText extends Shape {
if (rot !== 0) {
// Accounts for pre-rotated x and y
const bbox = <Rectangle>(
utils.getBoundingBox(
getBoundingBox(
new Rectangle(
margin.x * this.boundingBox.width,
margin.y * this.boundingBox.height,
@ -626,10 +561,8 @@ class mxText extends Shape {
);
this.unrotatedBoundingBox = Rectangle.fromRectangle(this.boundingBox);
this.unrotatedBoundingBox.x +=
margin.x * this.unrotatedBoundingBox.width;
this.unrotatedBoundingBox.y +=
margin.y * this.unrotatedBoundingBox.height;
this.unrotatedBoundingBox.x += margin.x * this.unrotatedBoundingBox.width;
this.unrotatedBoundingBox.y += margin.y * this.unrotatedBoundingBox.height;
this.boundingBox.x += bbox.x;
this.boundingBox.y += bbox.y;
@ -648,8 +581,7 @@ class mxText extends Shape {
*
* Returns 0 to avoid using rotation in the canvas via updateTransform.
*/
// getShapeRotation(): 0;
getShapeRotation() {
getShapeRotation(): number {
return 0;
}
@ -658,8 +590,7 @@ class mxText extends Shape {
*
* Returns the rotation for the text label of the corresponding shape.
*/
// getTextRotation(): number;
getTextRotation() {
getTextRotation(): number {
return this.state != null && this.state.shape != null
? this.state.shape.getTextRotation()
: 0;
@ -671,8 +602,7 @@ class mxText extends Shape {
* Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the
* horizontal style is false.
*/
// isPaintBoundsInverted(): boolean;
isPaintBoundsInverted() {
isPaintBoundsInverted(): boolean {
return (
!this.horizontal &&
this.state != null &&
@ -686,14 +616,7 @@ class mxText extends 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
) {
configureCanvas(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number): void {
super.configureCanvas(c, x, y, w, h);
c.setFontColor(this.color);
@ -730,17 +653,13 @@ class mxText extends Shape {
* Private helper function to create SVG elements
*/
getTextCss() {
const lh = ABSOLUTE_LINE_HEIGHT
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
const lh = ABSOLUTE_LINE_HEIGHT ? `${this.size * LINE_HEIGHT}px` : LINE_HEIGHT;
let css =
`display: inline-block; font-size: ${this.size}px; ` +
`font-family: ${this.family}; color: ${
this.color
}; line-height: ${lh}; pointer-events: ${
this.pointerEvents ? 'all' : 'none'
}; `;
}; line-height: ${lh}; pointer-events: ${this.pointerEvents ? 'all' : 'none'}; `;
if ((this.fontStyle & FONT_BOLD) === FONT_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.
*/
// redrawHtmlShape(): void;
redrawHtmlShape() {
redrawHtmlShape(): void {
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 flex =
@ -855,8 +773,7 @@ class mxText extends Shape {
*
* Sets the inner HTML of the given element to the <value>.
*/
// updateInnerHtml(elt: HTMLElement): void;
updateInnerHtml(elt: HTMLElement) {
updateInnerHtml(elt: HTMLElement): void {
if (isNode(this.value)) {
// @ts-ignore
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.
*/
// updateValue(): void;
updateValue() {
updateValue(): void {
const node = <SVGGElement>this.node;
if (isNode(this.value)) {
@ -900,11 +816,8 @@ class mxText extends Shape {
val = replaceTrailingNewlines(val, '<div><br></div>');
val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
const bg =
this.background != null && this.background !== NONE
? this.background
: null;
const bd =
this.border != null && this.border !== NONE ? this.border : null;
this.background != null && this.background !== NONE ? this.background : null;
const bd = this.border != null && this.border !== NONE ? this.border : null;
if (this.overflow === 'fill' || this.overflow === 'width') {
if (bg != null) {
@ -928,9 +841,7 @@ class mxText extends Shape {
// Wrapper DIV for background, zoom needed for inline in quirks
// and to measure wrapped font sizes in all browsers
// FIXME: Background size in quirks mode for wrapped text
const lh = ABSOLUTE_LINE_HEIGHT
? `${this.size * LINE_HEIGHT}px`
: LINE_HEIGHT;
const lh = ABSOLUTE_LINE_HEIGHT ? `${this.size * LINE_HEIGHT}px` : LINE_HEIGHT;
val =
`<div style="zoom:1;${css}display:inline-block;_display:inline;text-decoration:inherit;` +
`padding-bottom:1px;padding-right:1px;line-height:${lh}">${val}</div>`;
@ -944,10 +855,7 @@ class mxText extends Shape {
if (divs.length > 0) {
let dir = this.textDirection;
if (
dir === TEXT_DIRECTION_AUTO &&
this.dialect !== DIALECT_STRICTHTML
) {
if (dir === TEXT_DIRECTION_AUTO && this.dialect !== DIALECT_STRICTHTML) {
dir = this.getAutoDirection();
}
@ -965,8 +873,7 @@ class mxText extends Shape {
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
// updateFont(node: HTMLElement): void;
updateFont(node: HTMLElement | SVGGElement) {
updateFont(node: HTMLElement | SVGGElement): void {
const { style } = node;
// @ts-ignore
@ -1016,8 +923,7 @@ class mxText extends Shape {
*
* Updates the HTML node(s) to reflect the latest bounds and scale.
*/
// updateSize(node: HTMLElement, enableWrap: boolean): void;
updateSize(node: HTMLElement, enableWrap: boolean = false) {
updateSize(node: HTMLElement, enableWrap: boolean = false): void {
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 { style } = node;
@ -1047,10 +953,7 @@ class mxText extends Shape {
if (enableWrap && this.overflow !== 'fill' && this.overflow !== 'width') {
let sizeDiv = node;
if (
sizeDiv.firstChild != null &&
sizeDiv.firstChild.nodeName === 'DIV'
) {
if (sizeDiv.firstChild != null && sizeDiv.firstChild.nodeName === 'DIV') {
// @ts-ignore
sizeDiv = sizeDiv.firstChild;
@ -1089,9 +992,8 @@ class mxText extends Shape {
*
* Returns the spacing as an <mxPoint>.
*/
// 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>.
*/
// getSpacing(): mxPoint;
getSpacing(): Point {
let dx = 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
*/
import Point from '../Point';
import Actor from './Actor';
import utils from '../../../util/Utils';
import { LINE_ARCSIZE } from '../../../util/Constants';
import mxSvgCanvas2D from '../../../util/canvas/mxSvgCanvas2D';
import Point from '../../Point';
import Actor from '../Actor';
import utils, { getValue } from '../../../../util/Utils';
import { LINE_ARCSIZE } from '../../../../util/Constants';
import mxSvgCanvas2D from '../../../../util/canvas/mxSvgCanvas2D';
/**
* Implementation of the triangle shape.
* @class Triangle
* @class TriangleShape
* @extends {Actor}
*/
class Triangle extends Actor {
class TriangleShape extends Actor {
constructor() {
super();
}
@ -25,7 +25,6 @@ class Triangle extends Actor {
* Adds roundable support.
* @returns {boolean}
*/
// isRoundable(): boolean;
isRoundable(): boolean {
return true;
}
@ -38,7 +37,6 @@ class Triangle extends Actor {
* @param {number} w
* @param {number} h
*/
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath(
c: mxSvgCanvas2D,
x: number,
@ -47,7 +45,7 @@ class Triangle extends Actor {
h: number
): void {
const arcSize: number =
utils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints(
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.
*/
class Image {
constructor(src, width, height) {
constructor(src: string,
width: number,
height: number) {
this.src = src;
this.width = width;
this.height = height;
@ -26,24 +28,21 @@ class Image {
*
* String that specifies the URL of the image.
*/
// src: string;
src = null;
src: string | null = null;
/**
* Variable: width
*
* Integer that specifies the width of the image.
*/
// width: number;
width = null;
width: number | null = null;
/**
* Variable: height
*
* Integer that specifies the height of the image.
*/
// height: number;
height = null;
height: number | null = null;
}
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.
*/
// images: { [key: string]: { value: string; fallback: Function } };
images = null;
images: { [key: string]: { value: string; fallback: Function } } | null = null;
/**
* Variable: alt
*
* Specifies if the fallback representation should be returned.
*/
// alt: boolean;
alt = null;
alt: boolean = null;
/**
* Function: putImage
@ -78,8 +76,7 @@ class ImageBundle {
* Adds the specified entry to the map. The entry is an object with a value and
* fallback property as specified in the arguments.
*/
// putImage(key: string, value: string, fallback: Function): void;
putImage(key, value, fallback) {
putImage(key: string, value: string, fallback: Function): void {
this.images[key] = { value, fallback };
}
@ -90,8 +87,7 @@ class ImageBundle {
* or fallback, depending on <alt>. The fallback is returned if
* <alt> is true, the value is returned otherwise.
*/
// getImage(key: string): string;
getImage(key) {
getImage(key: string): string {
let result = 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
*/
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
* 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.
*/
// includeOverlays: boolean;
includeOverlays = false;
includeOverlays: boolean = false;
/**
* Draws the given state and all its descendants to the given canvas.
*/
// drawState(state: mxCellState, canvas: mxAbstractCanvas2D): void;
drawState(state, canvas) {
drawState(state: CellState, canvas: mxAbstractCanvas2D): void {
if (state != null) {
this.visitStatesRecursive(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.
*/
visitStatesRecursive(state, canvas, visitor) {
visitStatesRecursive(state: CellState, canvas: mxAbstractCanvas2D, visitor: Function) {
if (state != null) {
visitor(state, canvas);
@ -72,9 +74,7 @@ class ImageExport {
const childCount = state.cell.getChildCount();
for (let i = 0; i < childCount; i += 1) {
const childState = graph.view.getState(
state.cell.getChildAt(i)
);
const childState = graph.view.getState(state.cell.getChildAt(i));
this.visitStatesRecursive(childState, canvas, visitor);
}
}
@ -83,16 +83,14 @@ class ImageExport {
/**
* Returns the link for the given cell state and canvas. This returns null.
*/
// getLinkForCellState(state: mxCellState, canvas: mxAbstractCanvas2D): any;
getLinkForCellState(state, canvas) {
getLinkForCellState(state: CellState, canvas: mxAbstractCanvas2D): any {
return null;
}
/**
* Draws the given state to the given canvas.
*/
// drawCellState(state: mxCellState, canvas: mxAbstractCanvas2D): void;
drawCellState(state, canvas) {
drawCellState(state: CellState, canvas: mxAbstractCanvas2D): void {
// Experimental feature
const link = this.getLinkForCellState(state, canvas);
@ -114,8 +112,7 @@ class ImageExport {
*
* Draws the shape of the given state.
*/
// drawShape(state: mxCellState, canvas: mxAbstractCanvas2D): void;
drawShape(state, canvas) {
drawShape(state: CellState, canvas: mxAbstractCanvas2D): void {
if (state.shape instanceof Shape && state.shape.checkBounds()) {
canvas.save();
@ -130,8 +127,7 @@ class ImageExport {
/**
* Draws the text of the given state.
*/
// drawText(state: mxCellState, canvas: mxAbstractCanvas2D): void;
drawText(state, canvas) {
drawText(state: CellState, canvas: mxAbstractCanvas2D): void {
if (state.text != null && state.text.checkBounds()) {
canvas.save();
@ -149,8 +145,7 @@ class ImageExport {
* Draws the overlays for the given state. This is called if <includeOverlays>
* is true.
*/
// drawOverlays(state: mxCellState, canvas: mxAbstractCanvas2D): void;
drawOverlays(state, canvas) {
drawOverlays(state: CellState, canvas: mxAbstractCanvas2D): void {
if (state.overlays != null) {
state.overlays.visit((id, 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
* 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
@ -29,11 +32,11 @@ import mxGraphLayout from './mxGraphLayout';
* graph - <mxGraph> that contains the cells.
* radius - Optional radius as an int. Default is 100.
*/
class mxCircleLayout extends mxGraphLayout {
constructor(graph, radius) {
class CircleLayout extends GraphLayout {
constructor(graph: Graph, radius: number = 100) {
super(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.
*/
radius = null;
radius: number;
/**
* Variable: moveCircle
@ -49,7 +52,7 @@ class mxCircleLayout extends mxGraphLayout {
* Boolean specifying if the circle should be moved to the top,
* left corner specified by <x0> and <y0>. Default is false.
*/
moveCircle = false;
moveCircle: boolean = false;
/**
* Variable: x0
@ -57,7 +60,7 @@ class mxCircleLayout extends mxGraphLayout {
* Integer specifying the left coordinate of the circle.
* Default is 0.
*/
x0 = 0;
x0: number = 0;
/**
* Variable: y0
@ -65,7 +68,7 @@ class mxCircleLayout extends mxGraphLayout {
* Integer specifying the top coordinate of the circle.
* Default is 0.
*/
y0 = 0;
y0: number = 0;
/**
* Variable: resetEdges
@ -73,7 +76,7 @@ class mxCircleLayout extends mxGraphLayout {
* Specifies if all edge points of traversed edges should be removed.
* Default is true.
*/
resetEdges = true;
resetEdges: boolean = true;
/**
* Variable: disableEdgeStyle
@ -81,14 +84,14 @@ class mxCircleLayout extends mxGraphLayout {
* Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are
* modified by the result. Default is true.
*/
disableEdgeStyle = true;
disableEdgeStyle: boolean = true;
/**
* Function: execute
*
* Implements <mxGraphLayout.execute>.
*/
execute(parent) {
execute(parent: Cell) {
const model = this.graph.getModel();
// 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
* 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);
}
@ -164,7 +167,7 @@ class mxCircleLayout extends mxGraphLayout {
* of vertices and the given radius. This is called from
* <execute>.
*/
circle(vertices, r, left, top) {
circle(vertices: CellArray, r: number, left: number, top: number) {
const vertexCount = vertices.length;
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 Point from '../../geometry/Point';
import mxGraphLayout from './mxGraphLayout';
import GraphLayout from './GraphLayout';
import CellPath from '../../cell/datatypes/CellPath';
import Rectangle from '../../geometry/Rectangle';
import utils from '../../../util/Utils';
import utils, { sortCells } from '../../../util/Utils';
import WeightedCellSorter from './WeightedCellSorter';
import CellArray from '../../cell/datatypes/CellArray';
import Cell from '../../cell/datatypes/Cell';
import Graph from '../../Graph';
/**
* @class mxCompactTreeLayout
* @extends {mxGraphLayout}
* @class CompactTreeLayout
* @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
* not connected to the tree will be ignored by this layout.
*
@ -29,34 +32,31 @@ import WeightedCellSorter from './WeightedCellSorter';
* layout.execute(graph.getDefaultParent());
* ```
*/
class mxCompactTreeLayout extends mxGraphLayout {
constructor(graph, horizontal, invert) {
class CompactTreeLayout extends GraphLayout {
constructor(graph: Graph, horizontal: boolean = true, invert: boolean = false) {
super(graph);
this.horizontal = horizontal != null ? horizontal : true;
this.invert = invert != null ? invert : false;
this.horizontal = horizontal;
this.invert = invert;
}
/**
* Specifies the orientation of the layout.
* @default true
*/
// horizontal: boolean;
horizontal = null;
horizontal: boolean = null;
/**
* Specifies if edge directions should be inverted.
* @default false.
*/
// invert: boolean;
invert = null;
invert: boolean = null;
/**
* If the parents should be resized to match the width/height of the
* children. Default is true.
* @default true
*/
// resizeParent: boolean;
resizeParent = true;
resizeParent: boolean = true;
/**
* 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.
* @default false
*/
// maintainParentLocation: boolean;
maintainParentLocation = false;
maintainParentLocation: boolean = false;
/**
* Padding added to resized parents.
* @default 10
*/
// groupPadding: boolean;
groupPadding = 10;
groupPadding: number = 10;
/**
* Top padding added to resized parents.
* @default 0
*/
// groupPaddingTop: boolean;
groupPaddingTop = 0;
groupPaddingTop: number = 0;
/**
* Right padding added to resized parents.
* @default 0
*/
// groupPaddingRight: boolean;
groupPaddingRight = 0;
groupPaddingRight: number = 0;
/**
* Bottom padding added to resized parents.
* @default 0
*/
// groupPaddingBottom: boolean;
groupPaddingBottom = 0;
groupPaddingBottom: number = 0;
/**
* Left padding added to resized parents.
* @default 0
*/
// groupPaddingLeft: boolean;
groupPaddingLeft = 0;
groupPaddingLeft: number = 0;
/**
* A set of the parents that need updating based on children
* process as part of the layout.
*/
// parentsChanged: { [id: string]: mxCell };
parentsChanged = null;
parentsChanged: { [id: string]: mxCell } = null;
/**
* Specifies if the tree should be moved to the top, left corner
* if it is inside a top-level layer.
* @default false
*/
// moveTree: boolean;
moveTree = false;
moveTree: boolean = false;
/**
* Specifies if the tree should be moved to the top, left corner
@ -129,81 +121,69 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Holds the levelDistance.
* @default 10
*/
// levelDistance: number;
levelDistance = 10;
levelDistance: number = 10;
/**
* Holds the nodeDistance.
* @default 20
*/
// nodeDistance: number;
nodeDistance = 20;
nodeDistance: number = 20;
/**
* Specifies if all edge points of traversed edges should be removed.
*
* @default true
*/
// resetEdges: boolean;
resetEdges = true;
resetEdges: boolean = true;
/**
* The preferred horizontal distance between edges exiting a vertex.
*/
// prefHozEdgeSep: boolean;
prefHozEdgeSep = 5;
prefHozEdgeSep: number = 5;
/**
* The preferred vertical offset between edges exiting a vertex.
*/
// prefVertEdgeOff: boolean;
prefVertEdgeOff = 4;
prefVertEdgeOff: number = 4;
/**
* The minimum distance for an edge jetty from a vertex.
*/
// minEdgeJetty: boolean;
minEdgeJetty = 8;
minEdgeJetty: number = 8;
/**
* The size of the vertical buffer in the center of inter-rank channels
* where edge control points should not be placed.
*/
// channelBuffer: boolean;
channelBuffer = 4;
channelBuffer: number = 4;
/**
* Whether or not to apply the internal tree edge routing.
*/
// edgeRouting: boolean;
edgeRouting = true;
edgeRouting: boolean = true;
/**
* Specifies if edges should be sorted according to the order of their
* opposite terminal cell in the model.
*/
// sortEdges: boolean;
sortEdges = false;
sortEdges: boolean = false;
/**
* Whether or not the tops of cells in each rank should be aligned
* across the rank
*/
// alignRanks: boolean;
alignRanks = false;
alignRanks: boolean = false;
/**
* An array of the maximum height of cells (relative to the layout direction)
* per rank
*/
// maxRankHeight: Array<number>;
maxRankHeight = null;
maxRankHeight: CellArray | null = null;
/**
* The cell to use as the root of the tree
*/
// root: mxCell;
root = null;
root: Cell | null = null;
/**
* 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.
*/
// isVertexIgnored(vertex: mxCell): boolean;
isVertexIgnored(vertex) {
isVertexIgnored(vertex: Cell): boolean {
return (
super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0
super.isVertexIgnored(vertex) || this.graph.getConnections(vertex).length === 0
);
}
/**
* Returns {@link horizontal}.
*/
// isHorizontal(): boolean;
isHorizontal() {
isHorizontal(): boolean {
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
* 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 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, root) {
execute(parent: Cell, root?: Cell): void {
this.parent = parent;
const model = this.graph.getModel();
if (root == null) {
// Takes the parent as the root if it has outgoing edges
if (
this.graph.getEdges(
parent,
parent.getParent(),
this.invert,
!this.invert,
false
).length > 0
this.graph.getEdges(parent, parent.getParent(), this.invert, !this.invert, false)
.length > 0
) {
this.root = parent;
}
@ -272,13 +243,8 @@ class mxCompactTreeLayout extends mxGraphLayout {
for (let i = 0; i < roots.length; i += 1) {
if (
!this.isVertexIgnored(roots[i]) &&
this.graph.getEdges(
roots[i],
null,
this.invert,
!this.invert,
false
).length > 0
this.graph.getEdges(roots[i], null, this.invert, !this.invert, false)
.length > 0
) {
this.root = roots[i];
break;
@ -395,8 +361,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
/**
* Moves the specified node and all of its children by the given amount.
*/
// moveNode(node: any, dx: number, dy: number): void;
moveNode(node, dx, dy) {
moveNode(node: any, dx: number, dy: number): void {
node.x += dx;
node.y += dy;
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.
*/
// sortOutgoingEdges(source: mxCell, edges: Array<mxCell>): void;
sortOutgoingEdges(source, edges) {
sortOutgoingEdges(source: Cell, edges: CellArray): void {
const lookup = new Dictionary();
edges.sort((e1, e2) => {
@ -441,12 +405,8 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Stores the maximum height (relative to the layout
* direction) of cells in each rank
*/
// findRankHeights(node: any, rank: number): void;
findRankHeights(node, rank) {
if (
this.maxRankHeight[rank] == null ||
this.maxRankHeight[rank] < node.height
) {
findRankHeights(node: any, rank: number): void {
if (this.maxRankHeight[rank] == null || 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
* direction) when the tops of each rank are to be aligned
*/
// setCellHeights(node: any, rank: number): void;
setCellHeights(node, rank) {
if (
this.maxRankHeight[rank] != null &&
this.maxRankHeight[rank] > node.height
) {
setCellHeights(node: any, rank: number): void {
if (this.maxRankHeight[rank] != null && this.maxRankHeight[rank] > node.height) {
node.height = this.maxRankHeight[rank];
}
@ -490,11 +446,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
const id = CellPath.create(cell);
let node = null;
if (
cell != null &&
this.visited[id] == null &&
!this.isVertexIgnored(cell)
) {
if (cell != null && this.visited[id] == null && !this.isVertexIgnored(cell)) {
this.visited[id] = cell;
node = this.createNode(cell);
@ -556,21 +508,18 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
// layout(node: any): void;
layout(node) {
if (node != null) {
let { child } = node;
layout(node: any): void {
let { child } = node;
while (child != null) {
this.layout(child);
child = child.next;
}
while (child != null) {
this.layout(child);
child = child.next;
}
if (node.child != null) {
this.attachParent(node, this.join(node));
} else {
this.layoutLeaf(node);
}
if (node.child != null) {
this.attachParent(node, this.join(node));
} else {
this.layoutLeaf(node);
}
}
@ -578,8 +527,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
// horizontalLayout(node: any, x0: number, y0: number, bounds: mxRectangle): mxRectangle;
horizontalLayout(node, x0, y0, bounds) {
horizontalLayout(node: any, x0: number, y0: number, bounds: Rectangle): Rectangle {
node.x += x0 + node.offsetX;
node.y += y0 + node.offsetY;
bounds = this.apply(node, bounds);
@ -591,12 +539,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
let s = child.next;
while (s != null) {
bounds = this.horizontalLayout(
s,
node.x + child.offsetX,
siblingOffset,
bounds
);
bounds = this.horizontalLayout(s, node.x + child.offsetX, siblingOffset, bounds);
siblingOffset += s.offsetY;
s = s.next;
}
@ -641,8 +584,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
// attachParent(node: any, height: number): void;
attachParent(node, height) {
attachParent(node: any, height: number): void {
const x = this.nodeDistance + this.levelDistance;
const y2 = (height - node.width) / 2 - this.nodeDistance;
const y1 = y2 + node.width + 2 * this.nodeDistance - height;
@ -667,7 +609,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* at the given node.
*/
// layoutLeaf(node: any): void;
layoutLeaf(node) {
layoutLeaf(node: any): void {
const dist = 2 * this.nodeDistance;
node.contour.upperTail = this.createLine(node.height + dist, 0);
@ -684,8 +626,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
// join(node: any): number;
join(node) {
join(node: any): number {
const dist = 2 * this.nodeDistance;
let { child } = node;
@ -710,8 +651,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
// merge(p1: any, p2: any): number;
merge(p1, p2) {
merge(p1: any, p2: any): number {
let x = 0;
let y = 0;
let total = 0;
@ -757,7 +697,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* at the given node.
*/
// 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;
if (b1 <= p1 || p1 + a1 <= 0) {
@ -849,8 +789,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* Starts the actual compact tree layout algorithm
* at the given node.
*/
// apply(node: any, bounds: mxRectangle): mxRectangle;
apply(node, bounds) {
apply(node: any, bounds: Rectangle): Rectangle {
const model = this.graph.getModel();
const { cell } = node;
let g = cell.getGeometry();
@ -904,8 +843,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
* implementation adjusts the group to just fit around the children with
* a padding.
*/
// adjustParents(): void;
adjustParents() {
adjustParents(): void {
const tmp = [];
for (const id in this.parentsChanged) {
@ -913,7 +851,7 @@ class mxCompactTreeLayout extends mxGraphLayout {
}
this.arrangeGroups(
utils.sortCells(tmp, true),
sortCells(tmp, true),
this.groupPadding,
this.groupPaddingTop,
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
* Type definitions from the typed-mxgraph project
*/
import mxGraphLayout from './mxGraphLayout';
import GraphLayout from './GraphLayout';
/**
* Class: mxCompositeLayout
@ -34,7 +34,7 @@ import mxGraphLayout from './mxGraphLayout';
* master - Optional layout that handles moves. If no layout is given then
* the first layout of the above array is used to handle moves.
*/
class mxCompositeLayout extends mxGraphLayout {
class CompositeLayout extends GraphLayout {
constructor(graph, layouts, master) {
super(graph);
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 mxGraphLayout from './mxGraphLayout';
import utils from '../../../util/Utils';
import GraphLayout from './GraphLayout';
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
@ -21,16 +25,15 @@ import utils from '../../../util/Utils';
* layout.execute(graph.getDefaultParent());
* ```
*/
class mxEdgeLabelLayout extends mxGraphLayout {
constructor(graph, radius) {
class EdgeLabelLayout extends GraphLayout {
constructor(graph: Graph, radius: number) {
super(graph);
}
/**
* Implements {@link mxGraphLayout.execute}
* Implements {@link GraphLayout.execute}
*/
// execute(parent: mxCell): void;
execute(parent) {
execute(parent: Cell): void {
const { view } = this.graph;
const model = this.graph.getModel();
@ -61,8 +64,7 @@ class mxEdgeLabelLayout extends mxGraphLayout {
* @param v vertexes
* @param e edges
*/
// placeLabels(v: Array<mxCell>, e: Array<mxCell>): void;
placeLabels(v, e) {
placeLabels(v: CellState[], e: CellState[]): void {
const model = this.graph.getModel();
// 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.
*/
// avoid(edge: mxCell, vertex: mxCell): void;
avoid(edge, vertex) {
avoid(edge: Cell, vertex: Cell): void {
const model = this.graph.getModel();
const labRect = edge.text.boundingBox;
if (utils.intersects(labRect, vertex)) {
if (intersects(labRect, vertex)) {
const dy1 = -labRect.y - labRect.height + vertex.y;
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
*/
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
@ -25,46 +27,40 @@ import mxGraphLayout from './mxGraphLayout';
*
* Constructs a new fast organic layout for the specified graph.
*/
class mxFastOrganicLayout extends mxGraphLayout {
constructor(graph) {
class MxFastOrganicLayout extends GraphLayout {
constructor(graph: Graph) {
super(graph);
}
/**
* Specifies if the top left corner of the input cells should be the origin of the layout result. Default is true.
*/
// useInputOrigin: boolean;
useInputOrigin = true;
useInputOrigin: boolean = true;
/**
* Specifies if all edge points of traversed edges should be removed. Default is true.
*/
// resetEdges: boolean;
resetEdges = true;
resetEdges: boolean = true;
/**
* Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true.
*/
// disableEdgeStyle: boolean;
disableEdgeStyle = true;
disableEdgeStyle: boolean = 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.
*/
// forceConstant: number;
forceConstant = 50;
forceConstant: number = 50;
/**
* Cache of <forceConstant>^2 for performance.
*/
// forceConstantSquared: any;
forceConstantSquared = 0;
forceConstantSquared: any = 0;
/**
* Minimal distance limit. Default is 2. Prevents of dividing by zero.
*/
// minDistanceLimit: number;
minDistanceLimit = 2;
minDistanceLimit: number = 2;
/**
* Variable: maxDistanceLimit
@ -72,41 +68,40 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Maximal distance limit. Default is 500. Prevents of
* dividing by zero.
*/
maxDistanceLimit = 500;
maxDistanceLimit: number = 500;
/**
* Cached version of minDistanceLimit squared.
*/
// minDistanceLimitSquared: number;
minDistanceLimitSquared = 4;
minDistanceLimitSquared: number = 4;
/**
* Variable: initialTemp
*
* Start value of temperature. Default is 200.
*/
initialTemp = 200;
initialTemp: number = 200;
/**
* Variable: temperature
*
* Temperature to limit displacement at later stages of layout.
*/
temperature = 0;
temperature: number = 0;
/**
* Variable: maxIterations
*
* Total number of iterations to run the layout though.
*/
maxIterations = 0;
maxIterations: number = 0;
/**
* Variable: iteration
*
* Current iteration count.
*/
iteration = 0;
iteration: number = 0;
/**
* Variable: vertexArray
@ -189,7 +184,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
*
* vertex - <mxCell> whose ignored state should be returned.
*/
isVertexIgnored(vertex) {
isVertexIgnored(vertex: Cell) {
return (
super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0
@ -202,7 +197,7 @@ class mxFastOrganicLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. This operates on all children of the
* given parent where <isVertexIgnored> returns false.
*/
execute(parent) {
execute(parent: Cell) {
const model = this.graph.getModel();
this.vertexArray = [];
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 Geometry from '../../geometry/Geometry';
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
* {@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 mxStackLayout}
*/
class mxGraphLayout {
constructor(graph) {
class GraphLayout {
constructor(graph: Graph) {
this.graph = graph;
}
/**
* Reference to the enclosing {@link mxGraph}.
*/
// graph: mxGraph;
graph = null;
graph: Graph = null;
/**
* Boolean indicating if the bounding box of the label should be used if
* its available. Default is true.
*/
// useBoundingBox: boolean;
useBoundingBox = true;
useBoundingBox: boolean = true;
/**
* The parent cell of the layout, if any
*/
// parent: mxCell;
parent = null;
parent: Cell = null;
/**
* 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 y Y-coordinate of the new cell location.
*/
// moveCell(cell: mxCell, x: number, y: number): void;
moveCell(cell, x, y) {}
moveCell(cell: Cell, x: number, y: number): void {}
/**
* Function: resizeCell
@ -75,21 +74,19 @@ class mxGraphLayout {
* cell - <mxCell> which has been moved.
* 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.
*
* @param parent {@link mxCell} whose children should be layed out.
*/
// execute(parent: mxCell): void;
execute(parent) {}
execute(parent: Cell): void {}
/**
* Returns the graph that this layout operates on.
*/
// getGraph(): mxGraph;
getGraph() {
getGraph(): Graph {
return this.graph;
}
@ -106,8 +103,7 @@ class mxGraphLayout {
* @param source Optional boolean that specifies if the connection is incoming
* or outgoing. Default is null.
*/
// getConstraint(key: string, cell: mxCell, edge?: mxCell, source?: boolean): any;
getConstraint(key, cell, edge, source) {
getConstraint(key: string, cell: Cell, edge?: Cell, source?: boolean): any {
return this.graph.getCurrentCellStyle(cell)[key];
}
@ -138,8 +134,7 @@ class mxGraphLayout {
* null for the first step of the traversal.
* @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, directed, func, edge, visited) {
traverse(vertex: Cell, directed?: boolean, func?: Function, edge?: Cell, visited?: Dictionary<Cell, boolean>): void {
if (func != null && vertex != null) {
directed = directed != null ? directed : true;
visited = visited || new Dictionary();
@ -174,8 +169,7 @@ class mxGraphLayout {
* @param child {@link mxCell} that specifies the child.
* @param traverseAncestors boolean whether to
*/
// isAncestor(parent: mxCell, child: mxCell, traverseAncestors?: boolean): boolean;
isAncestor(parent, child, traverseAncestors) {
isAncestor(parent: Cell, child: Cell, traverseAncestors?: boolean): boolean {
if (!traverseAncestors) {
return child.getParent() === parent;
}
@ -198,9 +192,8 @@ class mxGraphLayout {
*
* @param cell {@link mxCell} whose movable state should be returned.
*/
// isVertexMovable(cell: mxCell): boolean;
isVertexMovable(cell) {
return this.graph.isCellMovable(cell);
isVertexMovable(cell: Cell): boolean {
return this.graph.cell.isCellMovable(cell);
}
/**
@ -209,8 +202,7 @@ class mxGraphLayout {
*
* @param vertex {@link mxCell} whose ignored state should be returned.
*/
// isVertexIgnored(vertex: mxCell): boolean;
isVertexIgnored(vertex) {
isVertexIgnored(vertex: Cell): boolean {
return !vertex.isVertex() || !vertex.isVisible();
}
@ -220,8 +212,7 @@ class mxGraphLayout {
*
* @param cell {@link mxCell} whose ignored state should be returned.
*/
// isEdgeIgnored(edge: mxCell): boolean;
isEdgeIgnored(edge) {
isEdgeIgnored(edge: Cell): boolean {
const model = this.graph.getModel();
return (
@ -235,16 +226,14 @@ class mxGraphLayout {
/**
* Disables or enables the edge style of the given edge.
*/
// setEdgeStyleEnabled(edge: mxCell, value: any): void;
setEdgeStyleEnabled(edge, value) {
setEdgeStyleEnabled(edge: Cell, value: any): void {
this.graph.setCellStyles('noEdgeStyle', value ? '0' : '1', [edge]);
}
/**
* Disables or enables orthogonal end segments of the given edge.
*/
// setOrthogonalEdge(edge: mxCell, value: any): void;
setOrthogonalEdge(edge, value) {
setOrthogonalEdge(edge: Cell, value: any): void {
this.graph.setCellStyles('orthogonal', value ? '1' : '0', [edge]);
}
@ -252,8 +241,7 @@ class mxGraphLayout {
* Determines the offset of the given parent to the parent
* of the layout
*/
// getParentOffset(parent: mxCell): mxPoint;
getParentOffset(parent) {
getParentOffset(parent: Cell): Point {
const result = new Point();
if (parent != null && parent !== this.parent) {
@ -280,8 +268,7 @@ class mxGraphLayout {
* Replaces the array of mxPoints in the geometry of the given edge
* with the given array of mxPoints.
*/
// setEdgePoints(edge: mxCell, points: Array<mxPoint>): void;
setEdgePoints(edge, points) {
setEdgePoints(edge: Cell, points: Point[]): void {
if (edge != null) {
const { model } = this.graph;
let geometry = edge.getGeometry();
@ -320,8 +307,7 @@ class mxGraphLayout {
* @param x Integer that defines the x-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, x, y) {
setVertexLocation(cell: Cell, x: number, y: number): Rectangle {
const model = this.graph.getModel();
let geometry = cell.getGeometry();
let result = null;
@ -381,8 +367,7 @@ class mxGraphLayout {
* Returns an {@link Rectangle} that defines the bounds of the given cell or
* the bounding box if {@link useBoundingBox} is true.
*/
// getVertexBounds(cell: mxCell): mxRectangle;
getVertexBounds(cell) {
getVertexBounds(cell: Cell): Rectangle {
let geo = cell.getGeometry();
// Checks for oversize label bounding box and corrects
@ -435,8 +420,8 @@ class mxGraphLayout {
* Shortcut to <mxGraph.updateGroupBounds> with moveGroup set to true.
*/
arrangeGroups(
cells,
border,
cells: CellArray,
border: Rectangle,
topBorder,
rightBorder,
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 mxGraphLayout from './mxGraphLayout';
import GraphLayout from './GraphLayout';
import mxObjectIdentity from '../../../util/mxObjectIdentity';
import Graph from '../../Graph';
import CellArray from '../../cell/datatypes/CellArray';
import Cell from '../../cell/datatypes/Cell';
/**
* Class: mxParallelEdgeLayout
@ -52,8 +55,8 @@ import mxObjectIdentity from '../../../util/mxObjectIdentity';
*
* Constructs a new parallel edge layout for the specified graph.
*/
class mxParallelEdgeLayout extends mxGraphLayout {
constructor(graph) {
class ParallelEdgeLayout extends GraphLayout {
constructor(graph: Graph) {
super(graph);
}
@ -62,7 +65,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
*
* Defines the spacing between the parallels. Default is 20.
*/
spacing = 20;
spacing: number = 20;
/**
* Variable: checkOverlap
@ -70,14 +73,14 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* Specifies if only overlapping edges should be considered
* parallel. Default is false.
*/
checkOverlap = false;
checkOverlap: boolean = false;
/**
* Function: execute
*
* Implements <mxGraphLayout.execute>.
*/
execute(parent, cells) {
execute(parent: Cell, cells: CellArray) {
const lookup = this.findParallels(parent, cells);
this.graph.model.beginUpdate();
@ -99,7 +102,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
*
* Finds the parallel edges in the given parent.
*/
findParallels(parent, cells) {
findParallels(parent: Cell, cells: CellArray) {
const lookup = [];
const addCell = cell => {
@ -139,7 +142,7 @@ class mxParallelEdgeLayout extends mxGraphLayout {
* edge direction and is built using the visible terminal of the given
* edge.
*/
getEdgeId(edge) {
getEdgeId(edge: Cell) {
const view = this.graph.getView();
// 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.
*/
layout(parallels) {
layout(parallels: CellArray) {
const edge = parallels[0];
const view = this.graph.getView();
const model = this.graph.getModel();
@ -233,11 +236,11 @@ class mxParallelEdgeLayout extends mxGraphLayout {
*
* Routes the given edge via the given point.
*/
route(edge, x, y) {
route(edge: Cell, x: number, y: number) {
if (this.graph.isCellMovable(edge)) {
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 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
@ -25,8 +27,8 @@ import mxGraphLayout from './mxGraphLayout';
* ```
* @class
*/
class mxPartitionLayout extends mxGraphLayout {
constructor(graph, horizontal, spacing, border) {
class PartitionLayout extends GraphLayout {
constructor(graph: Graph, horizontal: boolean=true, spacing: number=0, border: number=0) {
super(graph);
this.horizontal = horizontal != null ? horizontal : true;
this.spacing = spacing || 0;
@ -37,47 +39,41 @@ class mxPartitionLayout extends mxGraphLayout {
* Boolean indicating the direction in which the space is partitioned.
* Default is true.
*/
// horizontal: boolean;
horizontal = null;
horizontal: boolean;
/**
* Integer that specifies the absolute spacing in pixels between the
* children. Default is 0.
*/
// spacing: number;
spacing = null;
spacing: number;
/**
* Integer that specifies the absolute inset in pixels for the parent that
* contains the children. Default is 0.
*/
// border: number;
border = null;
border: number;
/**
* Boolean that specifies if vertices should be resized. Default is true.
*/
// resizeVertices: boolean;
resizeVertices = true;
resizeVertices: boolean = true;
/**
* Returns <horizontal>.
*/
// isHorizontal(): boolean;
isHorizontal() {
isHorizontal(): boolean {
return this.horizontal;
}
/**
* Implements {@link mxGraphLayout.moveCell}.
* Implements {@link GraphLayout.moveCell}.
*
* @param {mxCell} cell
* @param {number} x
* @param {number} y
* @memberof mxPartitionLayout
*/
// moveCell(cell: mxCell, x: number, y: number): void;
moveCell(cell, x, y) {
moveCell(cell: Cell, x: number, y: number): void {
const model = this.graph.getModel();
const parent = cell.getParent();
@ -115,8 +111,7 @@ class mxPartitionLayout extends mxGraphLayout {
* Implements <mxGraphLayout.execute>. All children where <isVertexIgnored>
* returns false and <isVertexMovable> returns true are modified.
*/
// execute(parent: mxCell): void;
execute(parent) {
execute(parent: Cell): void {
const horizontal = this.isHorizontal();
const model = this.graph.getModel();
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
* 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
@ -17,8 +20,8 @@ import mxCompactTreeLayout from './mxCompactTreeLayout';
* layout.execute(graph.getDefaultParent());
* ```
*/
class mxRadialTreeLayout extends mxCompactTreeLayout {
constructor(graph) {
class RadialTreeLayout extends CompactTreeLayout {
constructor(graph: Graph) {
super(graph, false);
}
@ -26,89 +29,76 @@ class mxRadialTreeLayout extends mxCompactTreeLayout {
* The initial offset to compute the angle position.
* @default 0.5
*/
// angleOffset: number;
angleOffset = 0.5;
angleOffset: number = 0.5;
/**
* The X co-ordinate of the root cell
* @default 0
*/
// rootx: number;
rootx = 0;
rootx: number = 0;
/**
* The Y co-ordinate of the root cell
* @default 0
*/
// rooty: number;
rooty = 0;
rooty: number = 0;
/**
* Holds the levelDistance.
* @default 120
*/
// levelDistance: number;
levelDistance = 120;
levelDistance: number = 120;
/**
* Holds the nodeDistance.
* @default 10
*/
// nodeDistance: number;
nodeDistance = 10;
nodeDistance: number = 10;
/**
* Specifies if the radios should be computed automatically
* @default false
*/
// autoRadius: boolean;
autoRadius = false;
autoRadius: boolean = false;
/**
* Specifies if edges should be sorted according to the order of their
* opposite terminal cell in the model.
* @default false
*/
// sortEdges: boolean;
sortEdges = false;
sortEdges: boolean = false;
/**
* Array of leftmost x coordinate of each row
*/
// rowMinX: Array<number>;
rowMinX = [];
rowMinX: number[] = [];
/**
* Array of rightmost x coordinate of each row
*/
// rowMaxX: Array<number>;
rowMaxX = [];
rowMaxX: number[] = [];
/**
* Array of x coordinate of leftmost vertex of each row
*/
// rowMinCenX: Array<number>;
rowMinCenX = [];
rowMinCenX: number[] = [];
/**
* Variable: rowMaxCenX
*
* Array of x coordinate of rightmost vertex of each row
*/
// rowMaxCenX: Array<number>;
rowMaxCenX = [];
rowMaxCenX: number[] = [];
/**
* Array of y deltas of each row behind root vertex, also the radius in the tree
*/
// rowRadi: Array<number>;
rowRadi = [];
rowRadi: number[] = [];
/**
* Array of vertices on each row
*/
// row: Array<mxCell>;
row = [];
row: CellArray = new CellArray();
/**
* 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.
* @return true if the cell has no connections.
*/
// isVertexIgnored(vertex: mxCell): boolean;
isVertexIgnored(vertex) {
isVertexIgnored(vertex: Cell): boolean {
return (
super.isVertexIgnored(vertex) ||
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 root Optional {@link mxCell} that will be used as the root of the tree.
*/
// execute(parent: mxCell, root?: mxCell): void;
execute(parent, root) {
execute(parent: Cell, root: Cell | null = null): void {
this.parent = parent;
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 rowNum Integer indicating which row is being processed.
*/
// calcRowDims(row: Array<number>, rowNum: number): void;
calcRowDims(row, rowNum) {
calcRowDims(row: number[], rowNum: number): void {
if (row == null || row.length === 0) {
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
* Type definitions from the typed-mxgraph project
*/
import mxGraphLayout from './mxGraphLayout';
import GraphLayout from './GraphLayout';
import Rectangle from '../../geometry/Rectangle';
import utils from '../../../util/Utils';
import utils, { getNumber } from '../../../util/Utils';
import {
DEFAULT_STARTSIZE,
} 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
@ -30,8 +34,15 @@ import {
* Constructs a new stack layout layout for the specified graph,
* spacing, orientation and offset.
*/
class mxStackLayout extends mxGraphLayout {
constructor(graph, horizontal, spacing, x0, y0, border) {
class StackLayout extends GraphLayout {
constructor(
graph: Graph,
horizontal: boolean,
spacing: number,
x0: number,
y0: number,
border: number
) {
super(graph);
this.horizontal = horizontal != null ? horizontal : true;
this.spacing = spacing != null ? spacing : 0;
@ -43,124 +54,108 @@ class mxStackLayout extends mxGraphLayout {
/**
* Specifies the orientation of the layout.
*/
// horizontal: boolean;
horizontal = null;
horizontal: boolean;
/**
* Specifies the spacing between the cells.
*/
// spacing: number;
spacing = null;
spacing: number;
/**
* Specifies the horizontal origin of the layout.
*/
// x0: number;
x0 = null;
x0: number;
/**
* Specifies the vertical origin of the layout.
*/
// y0: number;
y0 = null;
y0: number;
/**
* Border to be added if fill is true.
*/
// border: number;
border = 0;
border: number = 0;
/**
* Top margin for the child area.
*/
// marginTop: number;
marginTop = 0;
marginTop: number = 0;
/**
* Top margin for the child area.
*/
// marginLeft: number;
marginLeft = 0;
marginLeft: number = 0;
/**
* Top margin for the child area.
*/
// marginRight: number;
marginRight = 0;
marginRight: number = 0;
/**
* Top margin for the child area.
*/
// marginBottom: number;
marginBottom = 0;
marginBottom: number = 0;
/**
* 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 = false;
keepFirstLocation: boolean = false;
/**
* Boolean indicating if dimension should be changed to fill out the parent cell.
*/
// fill: boolean;
fill = false;
fill: boolean = false;
/**
* If the parent should be resized to match the width/height of the stack.
*/
// resizeParent: boolean;
resizeParent = false;
resizeParent: boolean = false;
/**
* Use maximum of existing value and new value for resize of parent.
*/
// resizeParentMax: boolean;
resizeParentMax = false;
resizeParentMax: boolean = false;
/**
* If the last element should be resized to fill out the parent.
*/
// resizeLast: boolean;
resizeLast = false;
resizeLast: boolean = false;
/**
* Value at which a new column or row should be created.
*/
// wrap: boolean;
wrap = null;
wrap: number | null = null;
/**
* If the strokeWidth should be ignored.
*/
// borderCollapse: boolean;
borderCollapse = true;
borderCollapse: boolean = true;
/**
* If gaps should be allowed in the stack.
*/
// allowGaps: boolean;
allowGaps = false;
allowGaps: boolean = false;
/**
* Grid size for alignment of position and size.
*/
// gridSize: number;
gridSize = 0;
gridSize: number = 0;
/**
* Returns horizontal.
*/
// isHorizontal(): boolean;
isHorizontal() {
isHorizontal(): boolean {
return this.horizontal;
}
/**
* Implements mxGraphLayout.moveCell.
*/
// moveCell(cell: mxCell, x: number, y: number): void;
moveCell(cell, x, y) {
moveCell(
cell: Cell,
x: number,
y: number
): void {
const model = this.graph.getModel();
const parent = cell.getParent();
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.
*/
// getParentSize(): void;
getParentSize(parent) {
getParentSize(parent: Cell): void {
const model = this.graph.getModel();
let pgeo = parent.getGeometry();
@ -226,18 +220,16 @@ class mxStackLayout extends mxGraphLayout {
const height = this.graph.container.offsetHeight - 1;
pgeo = new Rectangle(0, 0, width, height);
}
return pgeo;
}
/**
* Returns the cells to be layouted.
*/
// getLayoutCells(parent: mxCell): Array<mxCell>;
getLayoutCells(parent) {
getLayoutCells(parent: Cell): CellArray {
const model = this.graph.getModel();
const childCount = parent.getChildCount();
const cells = [];
const cells = new CellArray();
for (let i = 0; i < childCount; i += 1) {
const child = parent.getChildAt(i);
@ -265,15 +257,13 @@ class mxStackLayout extends mxGraphLayout {
: -1;
});
}
return cells;
}
/**
* Snaps the given value to the grid size.
*/
// snap(): void;
snap(value) {
snap(value): void {
if (this.gridSize != null && this.gridSize > 0) {
value = Math.max(value, this.gridSize);
@ -282,15 +272,13 @@ class mxStackLayout extends mxGraphLayout {
value += mod > this.gridSize / 2 ? this.gridSize - mod : -mod;
}
}
return value;
}
/**
* Implements mxGraphLayout.execute.
*/
// execute(parent: mxCell): void;
execute(parent) {
execute(parent: Cell): void {
if (parent != null) {
const pgeo = this.getParentSize(parent);
const horizontal = this.isHorizontal();
@ -378,7 +366,7 @@ class mxStackLayout extends mxGraphLayout {
if (!this.borderCollapse) {
const childStyle = this.graph.getCellStyle(child);
sw = utils.getNumber(childStyle, 'strokeWidth', 1);
sw = getNumber(childStyle, 'strokeWidth', 1);
}
if (last != null) {
@ -492,7 +480,10 @@ class mxStackLayout extends mxGraphLayout {
* child - The given child of <mxCell>.
* geo - The specific geometry of <mxGeometry>.
*/
setChildGeometry(child, geo) {
setChildGeometry(
child: Cell,
geo: Geometry
) {
const geo2 = child.getGeometry();
if (
@ -517,7 +508,11 @@ class mxStackLayout extends mxGraphLayout {
* pgeo - The new <mxGeometry> for parent.
* last - The last <mxGeometry>.
*/
updateParentGeometry(parent, pgeo, last) {
updateParentGeometry(
parent: Cell,
pgeo: Geometry,
last: Geometry
) {
const horizontal = this.isHorizontal();
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
*/
import mxGraphLayout from '../mxGraphLayout';
import GraphLayout from '../GraphLayout';
import { DIRECTION_NORTH } from '../../../../util/Constants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
import Dictionary from '../../../../util/Dictionary';
import Rectangle from '../../../geometry/Rectangle';
import mxSwimlaneModel from './model/mxSwimlaneModel';
import SwimlaneModel from './model/SwimlaneModel';
import mxObjectIdentity from '../../../../util/mxObjectIdentity';
import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering';
import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction';
import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
import CoordinateAssignment from './stage/CoordinateAssignment';
import Graph from '../../../Graph';
import Cell from '../../../cell/datatypes/Cell';
import CellArray from '../../../cell/datatypes/CellArray';
/**
* Class: mxSwimlaneLayout
@ -33,8 +36,8 @@ import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
* deterministic - Optional boolean that specifies if this layout should be
* deterministic. Default is true.
*/
class mxSwimlaneLayout extends mxGraphLayout {
constructor(graph, orientation, deterministic) {
class SwimlaneLayout extends GraphLayout {
constructor(graph: Graph, orientation, deterministic: boolean = true) {
super(graph);
this.orientation = orientation != null ? orientation : DIRECTION_NORTH;
this.deterministic = deterministic != null ? deterministic : true;
@ -199,7 +202,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* The style to apply between cell layers to edge segments.
* Default is <mxHierarchicalEdgeStyle.POLYLINE>.
*/
edgeStyle = mxHierarchicalEdgeStyle.POLYLINE;
edgeStyle = HierarchicalEdgeStyle.POLYLINE;
/**
* Function: getModel
@ -220,7 +223,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* parent - Parent <mxCell> that contains the children 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;
const { model } = this.graph;
this.edgesCache = new Dictionary();
@ -286,11 +289,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
this.run(parent);
if (this.resizeParent && !parent.isCollapsed()) {
this.graph.updateGroupBounds(
[parent],
this.parentBorder,
this.moveParent
);
this.graph.updateGroupBounds([parent], this.parentBorder, this.moveParent);
}
// Maintaining parent location
@ -318,7 +317,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* all child vertices.
*
*/
updateGroupBounds() {
updateGroupBounds(): void {
// Get all vertices and edge in the layout
const cells = [];
const { model } = this;
@ -351,18 +350,10 @@ class mxSwimlaneLayout extends mxGraphLayout {
const maxChildrenY = bounds.y + geo.y + bounds.height;
if (layoutBounds == null) {
layoutBounds = new Rectangle(
0,
childrenY,
0,
maxChildrenY - childrenY
);
layoutBounds = new Rectangle(0, childrenY, 0, maxChildrenY - childrenY);
} else {
layoutBounds.y = Math.min(layoutBounds.y, childrenY);
const maxY = Math.max(
layoutBounds.y + layoutBounds.height,
maxChildrenY
);
const maxY = Math.max(layoutBounds.y + layoutBounds.height, maxChildrenY);
layoutBounds.height = maxY - layoutBounds.y;
}
}
@ -391,8 +382,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
newGeo.y = y;
newGeo.width = childBounds[i].width + w + this.interRankCellSpacing / 2;
newGeo.height =
layoutBounds.height + size.height + 2 * this.parentBorder;
newGeo.height = layoutBounds.height + size.height + 2 * this.parentBorder;
this.graph.model.setGeometry(lane, newGeo);
this.graph.moveCells(children, -x, geo.y - y);
@ -414,7 +404,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* parent - <mxCell> whose children should be checked.
* vertices - array of vertices to limit search to
*/
findRoots(parent, vertices) {
findRoots(parent: Cell, vertices: CellArray) {
const roots = [];
if (parent != null && vertices != null) {
@ -480,7 +470,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* cell - <mxCell> whose edges should be returned.
*/
getEdges(cell) {
getEdges(cell: Cell): CellArray {
const cachedEdges = this.edgesCache.get(cell);
if (cachedEdges != null) {
@ -503,7 +493,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
edges = edges.concat(model.getEdges(cell, true, true));
const result = [];
const result = new CellArray();
for (let i = 0; i < edges.length; i += 1) {
const source = this.getVisibleTerminal(edges[i], true);
@ -514,11 +504,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
(source !== target &&
((target === cell &&
(this.parent == null ||
this.graph.isValidAncestor(
source,
this.parent,
this.traverseAncestors
))) ||
this.graph.isValidAncestor(source, this.parent, this.traverseAncestors))) ||
(source === cell &&
(this.parent == null ||
this.graph.isValidAncestor(
@ -546,7 +532,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* edge - <mxCell> whose edges should 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;
if (source) {
@ -590,7 +576,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
* routing changes made. It runs each stage of the layout that has been
* created.
*/
run(parent) {
run(parent: Cell): void {
// Separate out unconnected hierarchies
const hierarchyVertices = [];
const allVertexSet = Object();
@ -685,13 +671,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
tmp.push(allVertexSet[key]);
}
this.model = new mxSwimlaneModel(
this,
tmp,
this.roots,
parent,
this.tightenToSource
);
this.model = new SwimlaneModel(this, tmp, this.roots, parent, this.tightenToSource);
this.cycleStage(parent);
this.layeringStage();
@ -705,7 +685,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* Creates an array of descendant cells
*/
filterDescendants(cell, result) {
filterDescendants(cell: Cell, result: { [key: string]: Cell }) {
const { model } = this.graph;
if (
@ -742,11 +722,10 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* cell - <mxCell> that represents the port.
*/
isPort(cell) {
isPort(cell: Cell): boolean {
if (cell.geometry.relative) {
return true;
}
return false;
}
@ -762,10 +741,9 @@ class mxSwimlaneLayout extends mxGraphLayout {
* target -
* directed -
*/
getEdgesBetween(source, target, directed) {
directed = directed != null ? directed : false;
getEdgesBetween(source: Cell, target: Cell, directed: boolean = false) {
const edges = this.getEdges(source);
const result = [];
const result = new CellArray();
// Checks if the edge is connected to the correct
// cell and returns the first match
@ -780,7 +758,6 @@ class mxSwimlaneLayout extends mxGraphLayout {
result.push(edges[i]);
}
}
return result;
}
@ -802,10 +779,10 @@ class mxSwimlaneLayout extends mxGraphLayout {
* swimlaneIndex - the laid out order index of the swimlane vertex is contained in
*/
traverse(
vertex,
directed,
edge,
allVertices,
vertex: Cell,
directed: boolean,
edge: Cell,
allVertices: { [key: string]: Cell },
currentComp,
hierarchyVertices,
filledVertexSet,
@ -845,11 +822,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
let otherIndex = 0;
// Get the swimlane index of the other terminal
for (
otherIndex = 0;
otherIndex < this.swimlanes.length;
otherIndex++
) {
for (otherIndex = 0; otherIndex < this.swimlanes.length; otherIndex++) {
if (model.isAncestor(this.swimlanes[otherIndex], otherVertex)) {
break;
}
@ -896,7 +869,6 @@ class mxSwimlaneLayout extends mxGraphLayout {
}
}
}
return currentComp;
}
@ -905,7 +877,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* Executes the cycle stage using mxMinimumCycleRemover.
*/
cycleStage(parent) {
cycleStage(parent: Cell) {
const cycleStage = new mxSwimlaneOrdering(this);
cycleStage.execute(parent);
}
@ -915,7 +887,7 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* Implements first stage of a Sugiyama layout.
*/
layeringStage() {
layeringStage(): void {
this.model.initialRank();
this.model.fixRanks();
}
@ -925,8 +897,8 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* Executes the crossing stage using mxMedianHybridCrossingReduction.
*/
crossingStage(parent) {
const crossingStage = new mxMedianHybridCrossingReduction(this);
crossingStage(parent: Cell): void {
const crossingStage = new MedianHybridCrossingReduction(this);
crossingStage.execute(parent);
}
@ -935,8 +907,8 @@ class mxSwimlaneLayout extends mxGraphLayout {
*
* Executes the placement stage using mxCoordinateAssignment.
*/
placementStage(initialX, parent) {
const placementStage = new mxCoordinateAssignment(
placementStage(initialX: number, parent: Cell): number {
const placementStage = new CoordinateAssignment(
this,
this.intraCellSpacing,
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
* 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
*
* The maximum rank this cell occupies. Default is -1.
*/
maxRank = -1;
maxRank: number = -1;
/**
* Variable: minRank
*
* The minimum rank this cell occupies. Default is -1.
*/
minRank = -1;
minRank: number = -1;
/**
* Variable: x
*
* The x position of this cell for each layer it occupies
*/
x = null;
x: number = null;
/**
* Variable: y
*
* The y position of this cell for each layer it occupies
*/
y = null;
y: number = null;
/**
* Variable: width
*
* The width of this cell. Default is 0.
*/
width = 0;
width: number = 0;
/**
* Variable: height
*
* The height of this cell. Default is 0.
*/
height = 0;
height: number = 0;
/**
* Variable: nextLayerConnectedCells
*
* A cached version of the cells this cell connects to on the next layer up
*/
nextLayerConnectedCells = null;
nextLayerConnectedCells: CellArray | null = null;
/**
* Variable: previousLayerConnectedCells
*
* A cached version of the cells this cell connects to on the next layer down
*/
previousLayerConnectedCells = null;
previousLayerConnectedCells: CellArray | null = null;
/**
* Variable: temp
@ -72,7 +74,7 @@ class mxGraphAbstractHierarchyCell {
* be used for hashing the nodes in the model dfs and so hashCode
* was created
*/
temp = null;
temp: any = null;
/**
* Class: mxGraphAbstractHierarchyCell
@ -94,7 +96,7 @@ class mxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells(layer) {
getNextLayerConnectedCells(layer: number): Cell | null {
return null;
}
@ -103,7 +105,7 @@ class mxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells(layer) {
getPreviousLayerConnectedCells(layer: number): Cell | null {
return null;
}
@ -112,7 +114,7 @@ class mxGraphAbstractHierarchyCell {
*
* Returns whether or not this cell is an edge
*/
isEdge() {
isEdge(): boolean {
return false;
}
@ -121,7 +123,7 @@ class mxGraphAbstractHierarchyCell {
*
* Returns whether or not this cell is a node
*/
isVertex() {
isVertex(): boolean {
return false;
}
@ -130,7 +132,7 @@ class mxGraphAbstractHierarchyCell {
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable(layer) {
getGeneralPurposeVariable(layer: number): null | number {
return null;
}
@ -139,7 +141,7 @@ class mxGraphAbstractHierarchyCell {
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable(layer, value) {
setGeneralPurposeVariable(layer: number, value: number): null | void {
return null;
}
@ -148,7 +150,7 @@ class mxGraphAbstractHierarchyCell {
*
* Set the value of x for the specified layer
*/
setX(layer, value) {
setX(layer: number, value: number): void {
if (this.isVertex()) {
this.x[0] = value;
} else if (this.isEdge()) {
@ -161,14 +163,13 @@ class mxGraphAbstractHierarchyCell {
*
* Gets the value of x on the specified layer
*/
getX(layer) {
getX(layer: number): number {
if (this.isVertex()) {
return this.x[0];
}
if (this.isEdge()) {
return this.x[layer - this.minRank - 1];
}
return 0.0;
}
@ -177,7 +178,7 @@ class mxGraphAbstractHierarchyCell {
*
* Set the value of y for the specified layer
*/
setY(layer, value) {
setY(layer: number, value: number): void {
if (this.isVertex()) {
this.y[0] = value;
} 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
* Type definitions from the typed-mxgraph project
*/
import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell';
import GraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
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
*
* The graph edge(s) this object represents. Parallel edges are all grouped
* together within one hierarchy edge.
*/
edges = null;
edges: CellArray;
/**
* Variable: ids
@ -28,14 +30,14 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* The node this edge is sourced at
*/
source = null;
source: Cell | null = null;
/**
* Variable: target
*
* The node this edge targets
*/
target = null;
target: Cell | null = null;
/**
* Variable: isReversed
@ -43,7 +45,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
* Whether or not the direction of this edge has been reversed
* internally to create a DAG for the hierarchical layout
*/
isReversed = false;
isReversed: boolean = false;
/**
* Class: mxGraphHierarchyEdge
@ -58,7 +60,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* edges - a list of real graph edges this abstraction represents
*/
constructor(edges) {
constructor(edges: CellArray) {
super(edges);
this.edges = edges;
this.ids = [];
@ -85,7 +87,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells(layer) {
getNextLayerConnectedCells(layer: Cell): CellArray {
if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = [];
@ -99,7 +101,6 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
}
}
}
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
*/
getPreviousLayerConnectedCells(layer) {
getPreviousLayerConnectedCells(layer: Cell): CellArray {
if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = [];
@ -122,7 +123,6 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
}
}
}
return this.previousLayerConnectedCells[layer - this.minRank - 1];
}
@ -131,7 +131,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* Returns true.
*/
isEdge() {
isEdge(): boolean {
return true;
}
@ -140,7 +140,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable(layer) {
getGeneralPurposeVariable(layer: number): any {
return this.temp[layer - this.minRank - 1];
}
@ -149,7 +149,7 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* 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;
}
@ -158,13 +158,12 @@ class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
*
* Gets the first core edge associated with this wrapper
*/
getCoreCell() {
getCoreCell(): Cell | null {
if (this.edges != null && this.edges.length > 0) {
return this.edges[0];
}
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 mxGraphHierarchyNode from './mxGraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
import GraphHierarchyNode from './GraphHierarchyNode';
import GraphHierarchyEdge from './GraphHierarchyEdge';
import GraphLayout from '../../GraphLayout';
import Cell from '../../../../cell/datatypes/Cell';
import CellArray from '../../../../cell/datatypes/CellArray';
/**
* Class: mxGraphHierarchyModel
@ -33,8 +36,14 @@ import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
* scanRanksFromSinks - Whether rank assignment is from the sinks or sources.
* usage
*/
class mxGraphHierarchyModel {
constructor(layout, vertices, roots, parent, tightenToSource) {
class GraphHierarchyModel {
constructor(
layout: GraphLayout,
vertices: CellArray,
roots: CellArray,
parent: Cell,
tightenToSource: boolean
) {
const graph = layout.getGraph();
this.tightenToSource = tightenToSource;
this.roots = roots;
@ -83,10 +92,7 @@ class mxGraphHierarchyModel {
internalTargetCell = this.vertexMapper.get(targetCell);
}
if (
internalTargetCell != null &&
internalVertices[i] !== internalTargetCell
) {
if (internalTargetCell != null && internalVertices[i] !== internalTargetCell) {
internalEdge.target = internalTargetCell;
if (internalTargetCell.connectsAsTarget.length === 0) {
@ -111,7 +117,7 @@ class mxGraphHierarchyModel {
*
* Stores the largest rank number allocated
*/
maxRank = null;
maxRank: number = null;
/**
* Variable: vertexMapper
@ -147,21 +153,21 @@ class mxGraphHierarchyModel {
*
* The parent cell whose children are being laid out
*/
parent = null;
parent: Cell = null;
/**
* Variable: dfsCount
*
* Count of the number of times the ancestor dfs has been used.
*/
dfsCount = 0;
dfsCount: number = 0;
/**
* Variable: SOURCESCANSTARTRANK
*
* High value to start source layering scan rank value from.
*/
SOURCESCANSTARTRANK = 100000000;
SOURCESCANSTARTRANK: number = 100000000;
/**
* Variable: tightenToSource
@ -169,7 +175,7 @@ class mxGraphHierarchyModel {
* Whether or not to tighten the assigned ranks of vertices up towards
* the source cells.
*/
tightenToSource = false;
tightenToSource: boolean = false;
/**
* Function: createInternalCells
@ -184,12 +190,16 @@ class mxGraphHierarchyModel {
* internalVertices - The array of <mxGraphHierarchyNodes> to have their
* information filled in using the real vertices.
*/
createInternalCells(layout, vertices, internalVertices) {
createInternalCells(
layout: GraphLayout,
vertices: CellArray,
internalVertices: CellArray
) {
const graph = layout.getGraph();
// Create internal edges
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]);
// If the layout is deterministic, order the cells
@ -204,11 +214,7 @@ class mxGraphHierarchyModel {
const cell = layout.getVisibleTerminal(conns[j], false);
// Looking for outgoing edges only
if (
cell !== vertices[i] &&
cell.isVertex() &&
!layout.isVertexIgnored(cell)
) {
if (cell !== vertices[i] && cell.isVertex() && !layout.isVertexIgnored(cell)) {
// We process all edge between this source and its targets
// If there are edges going both ways, we need to collect
// 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
// an internal edge going the other way, so we don't want to
// process them again
const undirectedEdges = layout.getEdgesBetween(
vertices[i],
cell,
false
);
const undirectedEdges = layout.getEdgesBetween(vertices[i], cell, false);
const directedEdges = layout.getEdgesBetween(vertices[i], cell, true);
if (
@ -235,7 +237,7 @@ class mxGraphHierarchyModel {
this.edgeMapper.get(undirectedEdges[0]) == null &&
directedEdges.length * 2 >= undirectedEdges.length
) {
const internalEdge = new mxGraphHierarchyEdge(undirectedEdges);
const internalEdge = new GraphHierarchyEdge(undirectedEdges);
for (let k = 0; k < undirectedEdges.length; k++) {
const edge = undirectedEdges[k];
@ -272,7 +274,7 @@ class mxGraphHierarchyModel {
* or sinks and working through each node in the relevant edge direction.
* Starting at the sinks is basically a longest path layering algorithm.
*/
initialRank() {
initialRank(): void {
const startNodes = [];
if (this.roots != null) {
@ -405,7 +407,7 @@ class mxGraphHierarchyModel {
* Fixes the layer assignments to the values stored in the nodes. Also needs
* to create dummy nodes for edges that cross layers.
*/
fixRanks() {
fixRanks(): void {
const rankList = [];
this.ranks = [];
@ -478,7 +480,12 @@ class mxGraphHierarchyModel {
* trackAncestors - Whether or not the search is to keep track all nodes
* 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
if (dfsRoots != null) {
for (let i = 0; i < dfsRoots.length; i += 1) {
@ -530,7 +537,7 @@ class mxGraphHierarchyModel {
* ancestor node of the current node
* 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) {
const rootId = root.id;
@ -576,16 +583,7 @@ class mxGraphHierarchyModel {
* childHash - the new hash code for this node
* layer - the layer on the dfs tree ( not the same as the model ranks )
*/
extendedDfs(
parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer
) {
extendedDfs(parent: Cell, root: Cell, connectingEdge: Cell, visitor, seen, ancestors, childHash, layer) {
// Explanation of custom hash set. Previously, the ancestors variable
// 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
@ -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
* Type definitions from the typed-mxgraph project
*/
import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell';
import MxGraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
import CellArray from '../../../../cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
/**
* Class: mxGraphHierarchyNode
@ -20,13 +22,13 @@ import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
*
* cell - the real graph cell this node represents
*/
class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
class GraphHierarchyNode extends MxGraphAbstractHierarchyCell {
constructor(cell) {
super(cell);
this.cell = cell;
this.id = mxObjectIdentity.get(cell);
this.connectsAsTarget = [];
this.connectsAsSource = [];
this.connectsAsTarget: CellArray = [];
this.connectsAsSource: CellArray = [];
}
/**
@ -34,7 +36,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* The graph cell this object represents.
*/
cell = null;
cell: Cell = null;
/**
* Variable: id
@ -70,7 +72,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Returns the integer value of the layer that this node resides in
*/
getRankValue(layer) {
getRankValue(layer: number): number {
return this.maxRank;
}
@ -79,7 +81,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells(layer) {
getNextLayerConnectedCells(layer: number): CellArray {
if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = [];
this.nextLayerConnectedCells[0] = [];
@ -97,7 +99,6 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
}
}
}
return this.nextLayerConnectedCells[0];
}
@ -106,10 +107,10 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells(layer) {
getPreviousLayerConnectedCells(layer: number): CellArray {
if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = [];
this.previousLayerConnectedCells[0] = [];
this.previousLayerConnectedCells[0] = []; // new CellArray()??
for (let i = 0; i < this.connectsAsSource.length; i += 1) {
const edge = this.connectsAsSource[i];
@ -123,7 +124,6 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
}
}
}
return this.previousLayerConnectedCells[0];
}
@ -132,7 +132,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Returns true.
*/
isVertex() {
isVertex(): boolean {
return true;
}
@ -141,7 +141,7 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable(layer) {
getGeneralPurposeVariable(layer: number): any {
return this.temp[0];
}
@ -150,14 +150,14 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable(layer, value) {
setGeneralPurposeVariable(layer: number, value: number): void {
this.temp[0] = value;
}
/**
* Function: isAncestor
*/
isAncestor(otherNode) {
isAncestor(otherNode: Cell): boolean {
// Firstly, the hash code of this node needs to be shorter than the
// other node
if (
@ -183,10 +183,8 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
return false;
}
}
return true;
}
return false;
}
@ -195,9 +193,9 @@ class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
*
* Gets the core vertex associated with this wrapper
*/
getCoreCell() {
getCoreCell(): 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
*/
import utils from '../../../../../util/Utils';
import mxGraphHierarchyNode from './mxGraphHierarchyNode';
import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
import GraphHierarchyNode from './GraphHierarchyNode';
import GraphHierarchyEdge from './GraphHierarchyEdge';
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
@ -33,8 +37,14 @@ import CellPath from '../../../../cell/datatypes/CellPath';
* scanRanksFromSinks - Whether rank assignment is from the sinks or sources.
* usage
*/
class mxSwimlaneModel {
constructor(layout, vertices, roots, parent, tightenToSource) {
class SwimlaneModel {
constructor(
layout: GraphLayout,
vertices: CellArray,
roots: CellArray,
parent: Cell,
tightenToSource
) {
const graph = layout.getGraph();
this.tightenToSource = tightenToSource;
this.roots = roots;
@ -83,10 +93,7 @@ class mxSwimlaneModel {
internalTargetCell = this.vertexMapper.get(targetCell);
}
if (
internalTargetCell != null &&
internalVertices[i] !== internalTargetCell
) {
if (internalTargetCell != null && internalVertices[i] !== internalTargetCell) {
internalEdge.target = internalTargetCell;
if (internalTargetCell.connectsAsTarget.length == 0) {
@ -111,28 +118,28 @@ class mxSwimlaneModel {
*
* Stores the largest rank number allocated
*/
maxRank = null;
maxRank: number;
/**
* Variable: vertexMapper
*
* Map from graph vertices to internal model nodes.
*/
vertexMapper = null;
vertexMapper: Dictionary<Cell, Cell>;
/**
* Variable: edgeMapper
*
* Map from graph edges to internal model edges
*/
edgeMapper = null;
edgeMapper: Dictionary<Cell, Cell>;
/**
* Variable: ranks
*
* Mapping from rank number to actual rank
*/
ranks = null;
ranks: [] = [];
/**
* Variable: roots
@ -140,28 +147,28 @@ class mxSwimlaneModel {
* Store of roots of this hierarchy model, these are real graph cells, not
* internal cells
*/
roots = null;
roots: CellArray;
/**
* Variable: parent
*
* The parent cell whose children are being laid out
*/
parent = null;
parent: Cell;
/**
* Variable: dfsCount
*
* Count of the number of times the ancestor dfs has been used.
*/
dfsCount = 0;
dfsCount: number = 0;
/**
* Variable: SOURCESCANSTARTRANK
*
* High value to start source layering scan rank value from.
*/
SOURCESCANSTARTRANK = 100000000;
SOURCESCANSTARTRANK: number = 100000000;
/**
* Variable: tightenToSource
@ -169,7 +176,7 @@ class mxSwimlaneModel {
* Whether or not to tighten the assigned ranks of vertices up towards
* the source cells.
*/
tightenToSource = false;
tightenToSource: boolean = false;
/**
* Variable: ranksPerGroup
@ -191,13 +198,17 @@ class mxSwimlaneModel {
* internalVertices - The array of <mxGraphHierarchyNodes> to have their
* information filled in using the real vertices.
*/
createInternalCells(layout, vertices, internalVertices) {
createInternalCells(
layout: GraphLayout,
vertices: CellArray,
internalVertices: CellArray
) {
const graph = layout.getGraph();
const { swimlanes } = layout;
// Create internal edges
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]);
internalVertices[i].swimlaneIndex = -1;
@ -220,11 +231,7 @@ class mxSwimlaneModel {
const cell = layout.getVisibleTerminal(conns[j], false);
// Looking for outgoing edges only
if (
cell !== vertices[i] &&
cell.isVertex() &&
!layout.isVertexIgnored(cell)
) {
if (cell !== vertices[i] && cell.isVertex() && !layout.isVertexIgnored(cell)) {
// We process all edge between this source and its targets
// If there are edges going both ways, we need to collect
// 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
// an internal edge going the other way, so we don't want to
// process them again
const undirectedEdges = layout.getEdgesBetween(
vertices[i],
cell,
false
);
const undirectedEdges = layout.getEdgesBetween(vertices[i], cell, false);
const directedEdges = layout.getEdgesBetween(vertices[i], cell, true);
if (
@ -251,7 +254,7 @@ class mxSwimlaneModel {
this.edgeMapper.get(undirectedEdges[0]) == null &&
directedEdges.length * 2 >= undirectedEdges.length
) {
const internalEdge = new mxGraphHierarchyEdge(undirectedEdges);
const internalEdge = new GraphHierarchyEdge(undirectedEdges);
for (let k = 0; k < undirectedEdges.length; k += 1) {
const edge = undirectedEdges[k];
@ -288,7 +291,7 @@ class mxSwimlaneModel {
* or sinks and working through each node in the relevant edge direction.
* Starting at the sinks is basically a longest path layering algorithm.
*/
initialRank() {
initialRank(): void {
this.ranksPerGroup = [];
const startNodes = [];
@ -457,7 +460,7 @@ class mxSwimlaneModel {
* chainCount - the number of edges in the chain of vertices going through
* the current swimlane
*/
maxChainDfs(parent, root, connectingEdge, seen, chainCount) {
maxChainDfs(parent: Cell, root: Cell, connectingEdge: Cell, seen, chainCount: number) {
if (root != null) {
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
* to create dummy nodes for edges that cross layers.
*/
fixRanks() {
fixRanks(): void {
const rankList = [];
this.ranks = [];
@ -583,7 +586,7 @@ class mxSwimlaneModel {
* trackAncestors - Whether or not the search is to keep track all nodes
* 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
if (dfsRoots != null) {
for (let i = 0; i < dfsRoots.length; i += 1) {
@ -635,7 +638,14 @@ class mxSwimlaneModel {
* ancestor node of the current node
* 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) {
const rootId = root.id;
@ -682,14 +692,14 @@ class mxSwimlaneModel {
* layer - the layer on the dfs tree ( not the same as the model ranks )
*/
extendedDfs(
parent,
root,
connectingEdge,
visitor,
parent: Cell,
root: Cell,
connectingEdge: Cell,
visitor: Function,
seen,
ancestors,
childHash,
layer
layer: number
) {
// Explanation of custom hash set. Previously, the ancestors variable
// 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
* Type definitions from the typed-mxgraph project
*/
import mxGraphLayout from '../mxGraphLayout';
import GraphLayout from '../GraphLayout';
import { DIRECTION_NORTH } from '../../../../util/Constants';
import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
import Dictionary from '../../../../util/Dictionary';
import mxGraphHierarchyModel from './model/mxGraphHierarchyModel';
import GraphHierarchyModel from './model/GraphHierarchyModel';
import mxObjectIdentity from '../../../../util/mxObjectIdentity';
import mxMinimumCycleRemover from './stage/mxMinimumCycleRemover';
import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction';
import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
import MinimumCycleRemover from './stage/MinimumCycleRemover';
import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
import CoordinateAssignment from './stage/CoordinateAssignment';
/**
* Class: mxHierarchicalLayout
@ -31,7 +31,7 @@ import mxCoordinateAssignment from './stage/mxCoordinateAssignment';
* deterministic - Optional boolean that specifies if this layout should be
* deterministic. Default is true.
*/
class mxHierarchicalLayout extends mxGraphLayout {
class mxHierarchicalLayout extends GraphLayout {
constructor(graph, orientation, deterministic) {
super(graph);
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.
* Default is <mxHierarchicalEdgeStyle.POLYLINE>.
*/
edgeStyle = mxHierarchicalEdgeStyle.POLYLINE;
edgeStyle = HierarchicalEdgeStyle.POLYLINE;
/**
* Function: getModel
@ -549,7 +549,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
tmp.push(vertexSet[key]);
}
this.model = new mxGraphHierarchyModel(
this.model = new GraphHierarchyModel(
this,
tmp,
this.roots,
@ -765,7 +765,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* Executes the cycle stage using mxMinimumCycleRemover.
*/
cycleStage(parent) {
const cycleStage = new mxMinimumCycleRemover(this);
const cycleStage = new MinimumCycleRemover(this);
cycleStage.execute(parent);
}
@ -785,7 +785,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* Executes the crossing stage using mxMedianHybridCrossingReduction.
*/
crossingStage(parent) {
const crossingStage = new mxMedianHybridCrossingReduction(this);
const crossingStage = new MedianHybridCrossingReduction(this);
crossingStage.execute(parent);
}
@ -795,7 +795,7 @@ class mxHierarchicalLayout extends mxGraphLayout {
* Executes the placement stage using mxCoordinateAssignment.
*/
placementStage(initialX, parent) {
const placementStage = new mxCoordinateAssignment(
const placementStage = new CoordinateAssignment(
this,
this.intraCellSpacing,
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
* Type definitions from the typed-mxgraph project
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import MxHierarchicalLayoutStage from './HierarchicalLayoutStage';
import {
DIRECTION_EAST,
DIRECTION_NORTH,
@ -15,7 +15,7 @@ import mxLog from '../../../../../util/gui/mxLog';
import WeightedCellSorter from '../../WeightedCellSorter';
import Dictionary from '../../../../../util/Dictionary';
import Point from '../../../../geometry/Point';
import mxHierarchicalEdgeStyle from '../mxHierarchicalEdgeStyle';
import HierarchicalEdgeStyle from '../HierarchicalEdgeStyle';
/**
* Class: mxCoordinateAssignment
@ -35,7 +35,7 @@ import mxHierarchicalEdgeStyle from '../mxHierarchicalEdgeStyle';
* orientation - the position of the root node(s) relative to the graph
* initialX - the leftmost coordinate node placement starts at
*/
class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
class CoordinateAssignment extends MxHierarchicalLayoutStage {
constructor(
layout,
intraCellSpacing,
@ -1156,9 +1156,9 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
// Post process edge styles. Needs the vertex locations set for initial
// values of the top and bottoms of each rank
if (
this.layout.edgeStyle === mxHierarchicalEdgeStyle.ORTHOGONAL ||
this.layout.edgeStyle === mxHierarchicalEdgeStyle.POLYLINE ||
this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE
this.layout.edgeStyle === HierarchicalEdgeStyle.ORTHOGONAL ||
this.layout.edgeStyle === HierarchicalEdgeStyle.POLYLINE ||
this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE
) {
this.localEdgeProcessing(model);
}
@ -1399,13 +1399,13 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
) {
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));
}
} else {
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));
}
}
@ -1505,13 +1505,13 @@ class mxCoordinateAssignment extends mxHierarchicalLayoutStage {
this.orientation === DIRECTION_NORTH ||
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));
} else {
if (this.layout.edgeStyle === mxHierarchicalEdgeStyle.CURVE) {
if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
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.
*/
class mxHierarchicalLayoutStage {
class MxHierarchicalLayoutStage {
constructor() {}
/**
@ -29,4 +29,4 @@ class mxHierarchicalLayoutStage {
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.
*/
medianValue = 0;
medianValue: number = 0;
/**
* Variable: cell
*
* The cell whose median value is being calculated
*/
cell = false;
cell: boolean = false;
/**
* Function: compare
*
* Compares two MedianCellSorters.
*/
compare(a, b) {
compare(a: MedianCellSorter, b: MedianCellSorter) {
if (a != null && b != null) {
if (b.medianValue > a.medianValue) {
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
* Type definitions from the typed-mxgraph project
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import HierarchicalLayoutStage from './HierarchicalLayoutStage';
import MedianCellSorter from './MedianCellSorter';
/**
@ -25,7 +25,7 @@ import MedianCellSorter from './MedianCellSorter';
* orientation - the position of the root node(s) relative to the graph
* initialX - the leftmost coordinate node placement starts at
*/
class mxMedianHybridCrossingReduction extends mxHierarchicalLayoutStage {
class MedianHybridCrossingReduction extends HierarchicalLayoutStage {
constructor(layout) {
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
* Type definitions from the typed-mxgraph project
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import utils from '../../../../../util/Utils';
import HierarchicalLayoutStage from './HierarchicalLayoutStage';
import { remove } from '../../../../../util/Utils';
import { clone } from '../../../../../util/CloneUtils';
import GraphLayout from '../../GraphLayout';
import Cell from '../../../../cell/datatypes/Cell';
/**
* Class: mxMinimumCycleRemover
@ -18,10 +20,9 @@ import { clone } from '../../../../../util/CloneUtils';
*
* Creates a cycle remover for the given internal model.
*/
class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
constructor(layout) {
class MinimumCycleRemover extends HierarchicalLayoutStage {
constructor(layout: GraphLayout) {
super();
this.layout = layout;
}
@ -30,7 +31,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
*
* Reference to the enclosing <mxHierarchicalLayout>.
*/
layout = null;
layout: GraphLayout;
/**
* Function: execute
@ -39,7 +40,7 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
* and creates the resulting laid out graph within that facade for further
* use.
*/
execute(parent) {
execute(parent: Cell): void {
const model = this.layout.getModel();
const seenNodes = {};
const unseenNodesArray = model.vertexMapper.getValues();
@ -69,9 +70,9 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
// relationship to that edge in the parent and the cell
if (node.isAncestor(parent)) {
connectingEdge.invert();
utils.remove(connectingEdge, parent.connectsAsSource);
remove(connectingEdge, parent.connectsAsSource);
parent.connectsAsTarget.push(connectingEdge);
utils.remove(connectingEdge, node.connectsAsTarget);
remove(connectingEdge, node.connectsAsTarget);
node.connectsAsSource.push(connectingEdge);
}
@ -96,10 +97,10 @@ class mxMinimumCycleRemover extends mxHierarchicalLayoutStage {
// relationship to that edge in the parent and the cell
if (node.isAncestor(parent)) {
connectingEdge.invert();
utils.remove(connectingEdge, parent.connectsAsSource);
remove(connectingEdge, parent.connectsAsSource);
node.connectsAsSource.push(connectingEdge);
parent.connectsAsTarget.push(connectingEdge);
utils.remove(connectingEdge, node.connectsAsTarget);
remove(connectingEdge, node.connectsAsTarget);
}
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
* Type definitions from the typed-mxgraph project
*/
import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
import MxHierarchicalLayoutStage from './HierarchicalLayoutStage';
import utils from '../../../../../util/Utils';
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.
*/
class mxSwimlaneOrdering extends mxHierarchicalLayoutStage {
class mxSwimlaneOrdering extends MxHierarchicalLayoutStage {
constructor(layout) {
super();

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

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import EventSource from '../event/EventSource';
import mxUndoableEdit from './mxUndoableEdit';
import UndoableEdit from './UndoableEdit';
import CellPath from '../cell/datatypes/CellPath';
import Cell from '../cell/datatypes/Cell';
import utils, {isNumeric} from '../../util/Utils';
@ -128,7 +128,7 @@ import type { CellMap, FilterFunction, UndoableChange } from '../../types';
* Event: mxEvent.CHANGE
*
* 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
* 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
* 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
* significant. Default is true.
*/
createUndoableEdit(significant: boolean=true): mxUndoableEdit {
const edit = new mxUndoableEdit(this, significant);
createUndoableEdit(significant: boolean=true): UndoableEdit {
const edit = new UndoableEdit(this, significant);
edit.notify = () => {
// 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.
*/
class mxUndoableEdit {
class UndoableEdit {
constructor(source: EventSource, significant: boolean = true) {
this.source = source;
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 Point from "../geometry/Point";
import mxPolyline from "../geometry/shape/edge/mxPolyline";
import Polyline from "../geometry/shape/edge/Polyline";
class GraphPageBreaks {
horizontalPageBreaks: any[] | null = null;
@ -91,7 +91,7 @@ class GraphPageBreaks {
breaks[i].points = pts;
breaks[i].redraw();
} else {
const pageBreak = new mxPolyline(pts, this.pageBreakColor);
const pageBreak = new Polyline(pts, this.pageBreakColor);
pageBreak.dialect = this.dialect;
pageBreak.pointerEvents = false;
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 InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils';
import utils, { getScrollOrigin } from '../../util/Utils';
import { getMainEvent, isMultiTouchEvent } from '../../util/EventUtils';
import Graph from '../Graph';
import InternalMouseEvent from '../event/InternalMouseEvent';
@ -28,7 +28,7 @@ class PopupMenuHandler extends mxPopupMenu {
if (graph != null) {
this.graph = graph;
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
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
*
@ -104,12 +111,9 @@ class PopupMenuHandler extends mxPopupMenu {
// Hides the tooltip if the mouse is over
// the context menu
InternalEvent.addGestureListeners(
this.div,
evt => {
this.graph.tooltipHandler.hide();
}
);
InternalEvent.addGestureListeners(this.div, (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
* subsequent events of the gesture are redirected to this handler.
*/
mouseDown(sender: any,
me: InternalMouseEvent): void {
mouseDown(sender: any, me: InternalMouseEvent): void {
if (this.isEnabled() && !isMultiTouchEvent(me.getEvent())) {
// Hides the popupmenu if is is being displayed
this.hideMenu();
@ -148,9 +150,7 @@ class PopupMenuHandler extends mxPopupMenu {
*
* Handles the event by updating the panning on the graph.
*/
mouseMove(sender: any,
me: InternalMouseEvent): void {
mouseMove(sender: any, me: InternalMouseEvent): void {
// Popup trigger may change on mouseUp so ignore it
if (this.inTolerance && this.screenX != null && this.screenY != null) {
if (
@ -170,8 +170,7 @@ class PopupMenuHandler extends mxPopupMenu {
* Handles the event by setting the translation on the view or showing the
* popupmenu.
*/
mouseUp(sender: any,
me: InternalMouseEvent): void {
mouseUp(sender: any, me: InternalMouseEvent): void {
if (
this.popupTrigger &&
this.inTolerance &&
@ -185,11 +184,11 @@ class PopupMenuHandler extends mxPopupMenu {
this.graph.isEnabled() &&
this.isSelectOnPopup(me) &&
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) {
this.graph.clearSelection();
this.graph.selection.clearSelection();
}
// 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
// is routed via the underlying shape instead of the DIV
const origin = utils.getScrollOrigin();
this.popup(
me.getX() + origin.x + 1,
me.getY() + origin.y + 1,
cell,
me.getEvent()
);
const origin = getScrollOrigin();
this.popup(me.getX() + origin.x + 1, me.getY() + origin.y + 1, cell, me.getEvent());
me.consume();
}
@ -226,8 +220,8 @@ class PopupMenuHandler extends mxPopupMenu {
* Destroys the handler and all its resources and DOM nodes.
*/
destroy(): void {
this.graph.removeMouseListener(this);
this.graph.removeListener(this.gestureHandler);
this.graph.event.removeMouseListener(this);
this.graph.event.removeListener(this.gestureHandler);
// Supercall
super.destroy();

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

@ -1,6 +1,13 @@
import Cell from "../cell/datatypes/Cell";
import Graph from '../Graph';
class GraphPorts {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/**
* Specifies if ports are enabled. This is used in {@link cellConnected} to update
* 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 { DIALECT_SVG } from '../../util/Constants';
import { write } from '../../util/DomUtils';
import Graph from '../Graph';
/**
* @class PrintPreview
@ -194,14 +195,12 @@ class PrintPreview {
/**
* Reference to the {@link graph} that should be previewed.
*/
// graph: mxGraph;
graph = null;
graph: Graph;
/**
* Holds the {@link Rectangle} that defines the page format.
*/
// pageFormat: mxRectangle;
pageFormat = null;
pageFormat: Rectangle;
/**
* 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)));
* ```
*/
class mxCellHighlight {
class CellHighlight {
constructor(
graph: graph,
highlightColor: ColorValue = DEFAULT_VALID_COLOR,
@ -178,7 +178,6 @@ class mxCellHighlight {
/**
* Updates the highlight after a change of the model or view.
*/
// getStrokeWidth(state: mxCellState): number;
getStrokeWidth(state: CellState | null = null): number | null {
return this.strokeWidth;
}
@ -186,7 +185,6 @@ class mxCellHighlight {
/**
* Updates the highlight after a change of the model or view.
*/
// repaint(): void;
repaint(): void {
if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale;
@ -221,7 +219,6 @@ class mxCellHighlight {
/**
* Resets the state of the cell marker.
*/
// hide(): void;
hide(): void {
this.highlight(null);
}
@ -229,7 +226,6 @@ class mxCellHighlight {
/**
* Marks the <markedState> and fires a <mark> event.
*/
// highlight(state: mxCellState): void;
highlight(state: CellState | null = null): void {
if (this.state !== state) {
if (this.shape != null) {
@ -247,7 +243,6 @@ class mxCellHighlight {
/**
* Returns true if this highlight is at the given position.
*/
// isHighlightAt(x: number, y: number): boolean;
isHighlightAt(x: number, y: number): boolean {
let hit = false;
if (this.shape != null && document.elementFromPoint != null) {
@ -267,7 +262,6 @@ class mxCellHighlight {
/**
* Destroys the handler and all its resources and DOM nodes.
*/
// destroy(): void;
destroy(): void {
const graph = <graph>this.graph;
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 Rectangle from "../geometry/Rectangle";
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 mxClient from "../../mxClient";
import SelectionChange from "./SelectionChange";
import mxUndoableEdit from "../model/mxUndoableEdit";
import UndoableEdit from "../model/UndoableEdit";
import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent";
import EventSource from "../event/EventSource";
@ -19,7 +13,7 @@ import Dictionary from "../../util/Dictionary";
import RootChange from "../model/RootChange";
import ChildChange from "../model/ChildChange";
class Selection extends EventSource {
class GraphSelection extends EventSource {
constructor(graph: graph) {
super();
@ -242,7 +236,7 @@ class Selection extends EventSource {
) {
const change = new SelectionChange(this, added || new CellArray(), removed || new CellArray());
change.execute();
const edit = new mxUndoableEdit(this, false);
const edit = new UndoableEdit(this, false);
edit.add(change);
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
*/
import utils, { getOffset, getScrollOrigin, setOpacity } from '../../util/Utils';
import {
convertPoint,
getOffset,
getScrollOrigin,
setOpacity,
setPrefixedStyle,
} from '../../util/Utils';
import InternalEvent from '../event/InternalEvent';
import Point from '../geometry/Point';
import InternalMouseEvent from '../event/InternalMouseEvent';
@ -145,8 +151,7 @@ class RubberBand {
* event all subsequent events of the gesture are redirected to this
* handler.
*/
mouseDown(sender: any,
me: InternalMouseEvent): void {
mouseDown(sender: any, me: InternalMouseEvent): void {
if (
!me.isConsumed() &&
this.isEnabled() &&
@ -154,8 +159,8 @@ class RubberBand {
me.getState() == null &&
!isMultiTouchEvent(me.getEvent())
) {
const offset = utils.getOffset(this.graph.container);
const origin = utils.getScrollOrigin(this.graph.container);
const offset = getOffset(this.graph.container);
const origin = getScrollOrigin(this.graph.container);
origin.x -= offset.x;
origin.y -= offset.y;
this.start(me.getX() + origin.x, me.getY() + origin.y);
@ -179,7 +184,7 @@ class RubberBand {
function createMouseEvent(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.graphY = pt.y;
@ -211,9 +216,7 @@ class RubberBand {
*
* Handles the event by updating therubberband selection.
*/
mouseMove(sender: any,
me: InternalMouseEvent): void {
mouseMove(sender: any, me: InternalMouseEvent): void {
if (!me.isConsumed() && this.first != null) {
const origin = getScrollOrigin(this.graph.container);
const offset = getOffset(this.graph.container);
@ -265,8 +268,7 @@ class RubberBand {
*
* Returns true if this handler is active.
*/
isActive(sender: any,
me: InternalMouseEvent): boolean {
isActive(sender: any, me: InternalMouseEvent): boolean {
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
* <mxGraph.selectRegion>.
*/
mouseUp(sender: any,
me: InternalMouseEvent): void {
mouseUp(sender: any, me: InternalMouseEvent): void {
const active = this.isActive();
this.reset();
@ -308,7 +308,7 @@ class RubberBand {
if (this.div != null) {
if (mxClient.IS_SVG && this.fadeOut) {
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.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 EventObject from '../event/EventObject';
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
@ -32,8 +36,8 @@ import utils from '../../util/Utils';
*
* graph - Reference to the enclosing <mxGraph>.
*/
class mxSelectionCellsHandler extends EventSource {
constructor(graph) {
class SelectionCellsHandler extends EventSource {
constructor(graph: Graph) {
super();
this.graph = graph;
@ -62,48 +66,42 @@ class mxSelectionCellsHandler extends EventSource {
*
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph = null;
graph: Graph;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
// enabled: boolean;
enabled = true;
enabled: boolean = true;
/**
* Variable: refreshHandler
*
* Keeps a reference to an event listener for later removal.
*/
// refreshHandler: any;
refreshHandler = null;
refreshHandler: any = null;
/**
* Variable: maxHandlers
*
* Defines the maximum number of handlers to paint individually. Default is 100.
*/
// maxHandlers: number;
maxHandlers = 100;
maxHandlers: number = 100;
/**
* Variable: handlers
*
* <mxDictionary> that maps from cells to handlers.
*/
// handlers: mxDictionary<any>;
handlers = null;
handlers: Dictionary<string, any>;
/**
* Function: isEnabled
*
* Returns <enabled>.
*/
// isEnabled(): boolean;
isEnabled() {
isEnabled(): boolean {
return this.enabled;
}
@ -112,8 +110,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Sets <enabled>.
*/
// setEnabled(value: boolean): void;
setEnabled(value) {
setEnabled(value: boolean): void {
this.enabled = value;
}
@ -122,8 +119,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Returns the handler for the given cell.
*/
// getHandler(cell: mxCell): any;
getHandler(cell) {
getHandler(cell: Cell): any {
return this.handlers.get(cell);
}
@ -132,7 +128,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Returns true if the given cell has a handler.
*/
isHandled(cell) {
isHandled(cell: Cell): boolean {
return this.getHandler(cell) != null;
}
@ -141,8 +137,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Resets all handlers.
*/
// reset(): void;
reset() {
reset(): void {
this.handlers.visit((key, handler) => {
handler.reset.apply(handler);
});
@ -153,8 +148,8 @@ class mxSelectionCellsHandler extends EventSource {
*
* Reloads or updates all handlers.
*/
getHandledSelectionCells() {
return this.graph.getSelectionCells();
getHandledSelectionCells(): CellArray {
return this.graph.selection.getSelectionCells();
}
/**
@ -162,14 +157,13 @@ class mxSelectionCellsHandler extends EventSource {
*
* Reloads or updates all handlers.
*/
// refresh(): void;
refresh() {
refresh(): void {
// Removes all existing handlers
const oldHandlers = this.handlers;
this.handlers = new Dictionary();
// Creates handles for all selection cells
const tmp = utils.sortCells(this.getHandledSelectionCells(), false);
const tmp = sortCells(this.getHandledSelectionCells(), false);
// Destroys or updates old handlers
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.
*/
// isHandlerActive(handler: any): boolean;
isHandlerActive(handler) {
isHandlerActive(handler: any): boolean {
return handler.index != null;
}
@ -236,8 +229,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Updates the handler for the given shape if one exists.
*/
// updateHandler(state: mxCellState): void;
updateHandler(state) {
updateHandler(state: CellState): void {
let handler = this.handlers.remove(state.cell);
if (handler != null) {
@ -264,8 +256,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Redirects the given event to the handlers.
*/
// mouseDown(sender: Event, me: Event): void;
mouseDown(sender, me) {
mouseDown(sender: Event, me: Event): void {
if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me];
@ -280,8 +271,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Redirects the given event to the handlers.
*/
// mouseMove(sender: Event, me: Event): void;
mouseMove(sender, me) {
mouseMove(sender: Event, me: Event): void {
if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me];
@ -296,8 +286,7 @@ class mxSelectionCellsHandler extends EventSource {
*
* Redirects the given event to the handlers.
*/
// mouseUp(sender: Event, me: Event): void;
mouseUp(sender, me) {
mouseUp(sender: Event, me: Event): void {
if (this.graph.isEnabled() && this.isEnabled()) {
const args = [sender, me];
@ -312,12 +301,11 @@ class mxSelectionCellsHandler extends EventSource {
*
* Destroys the handler and all its resources and DOM nodes.
*/
// destroy(): void;
destroy() {
destroy(): void {
this.graph.removeMouseListener(this);
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.getView().removeListener(this.refreshHandler);
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
* returned.
*/
// static RectanglePerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static RectanglePerimeter(
bounds: Rectangle,
vertex: CellState,
@ -159,7 +158,6 @@ class Perimeter {
* Describes an elliptic perimeter. See {@link RectanglePerimeter}
* for a description of the parameters.
*/
// static EllipsePerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static EllipsePerimeter(
bounds: Rectangle,
vertex: CellState,
@ -246,7 +244,6 @@ class Perimeter {
* Describes a rhombus (aka diamond) perimeter. See {@link RectanglePerimeter}
* for a description of the parameters.
*/
// static RhombusPerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static RhombusPerimeter(
bounds: Rectangle,
vertex: CellState,
@ -307,7 +304,6 @@ class Perimeter {
* Describes a triangle perimeter. See {@link RectanglePerimeter}
* for a description of the parameters.
*/
// static TrianglePerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static TrianglePerimeter(
bounds: Rectangle,
vertex: CellState,
@ -437,7 +433,6 @@ class Perimeter {
* Describes a hexagon perimeter. See {@link RectanglePerimeter}
* for a description of the parameters.
*/
// static HexagonPerimeter(bounds: mxRectangle, vertex: mxCellState, next: mxPoint, orthogonal?: boolean): mxPoint;
static HexagonPerimeter(
bounds: Rectangle,
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 Rectangle from "../geometry/Rectangle";
import utils, {convertPoint, getValue} from "../../util/Utils";
import Cell from '../cell/datatypes/Cell';
import Rectangle from '../geometry/Rectangle';
import utils, { convertPoint, getValue, mod } from '../../util/Utils';
import {
DEFAULT_STARTSIZE,
DIRECTION_EAST,
DIRECTION_NORTH,
DIRECTION_SOUTH,
DIRECTION_WEST, SHAPE_SWIMLANE
} from "../../util/Constants";
import CellArray from "../cell/datatypes/CellArray";
import InternalMouseEvent from "../event/InternalMouseEvent";
import {getClientX, getClientY} from "../../util/EventUtils";
DIRECTION_WEST,
SHAPE_SWIMLANE,
} from '../../util/Constants';
import CellArray from '../cell/datatypes/CellArray';
import InternalMouseEvent from '../event/InternalMouseEvent';
import { getClientX, getClientY } from '../../util/EventUtils';
import Graph from '../Graph';
class Swimlane {
constructor() {
class GraphSwimlane {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/**
* Specifies if swimlanes should be selectable via the content if the
* mouse is released.
@ -105,14 +110,12 @@ class Swimlane {
* @param x X-coordinate of the mouse event.
* @param y Y-coordinate of the mouse event.
*/
hitsSwimlaneContent(swimlane: Cell,
x: number,
y: number): boolean {
const state = this.getView().getState(swimlane);
hitsSwimlaneContent(swimlane: Cell, x: number, y: number): boolean {
const state = this.graph.view.getState(swimlane);
const size = this.getStartSize(swimlane);
if (state != null) {
const scale = this.getView().getScale();
const scale = this.graph.view.getScale();
x -= state.x;
y -= state.y;
@ -141,10 +144,8 @@ class Swimlane {
*/
getStartSize(swimlane: Cell, ignoreState: boolean = false): Rectangle {
const result = new Rectangle();
const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt(
getValue(style, 'startSize', DEFAULT_STARTSIZE)
);
const style = this.graph.cell.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt(getValue(style, 'startSize', DEFAULT_STARTSIZE));
if (getValue(style, 'horizontal', true)) {
result.height = size;
@ -172,19 +173,17 @@ class Swimlane {
n += 1;
}
const mod = utils.mod(n, 2);
const _mod = mod(n, 2);
if (flipH && mod === 1) {
if (flipH && _mod === 1) {
n += 2;
}
if (flipV && mod === 0) {
if (flipV && _mod === 0) {
n += 2;
}
return [DIRECTION_NORTH, DIRECTION_EAST, DIRECTION_SOUTH, DIRECTION_WEST][
utils.mod(n, 4)
];
return [DIRECTION_NORTH, DIRECTION_EAST, DIRECTION_SOUTH, DIRECTION_WEST][mod(n, 4)];
}
/**
@ -196,14 +195,11 @@ class Swimlane {
* @param swimlane {@link mxCell} whose start size should be returned.
* @param ignoreState Optional boolean that specifies if cell state should be ignored.
*/
getActualStartSize(
swimlane: Cell,
ignoreState: boolean = false
): Rectangle {
getActualStartSize(swimlane: Cell, ignoreState: boolean = false): Rectangle {
const result = new Rectangle();
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 dir = this.getSwimlaneDirection(style);
@ -231,13 +227,10 @@ class Swimlane {
isSwimlane(cell: Cell, ignoreState: boolean = false): boolean {
if (
cell != null &&
cell.getParent() !== this.getModel().getRoot() &&
cell.getParent() !== this.graph.model.getRoot() &&
!cell.isEdge()
) {
return (
this.getCurrentCellStyle(cell, ignoreState).shape ===
SHAPE_SWIMLANE
);
return this.graph.cell.getCurrentCellStyle(cell, ignoreState).shape === SHAPE_SWIMLANE;
}
return false;
}
@ -256,14 +249,12 @@ class Swimlane {
* @param cells {@link mxCell} that should be dropped into the target.
* @param evt Mouseevent that triggered the invocation.
*/
// isValidDropTarget(cell: mxCell, cells: mxCellArray, evt: Event): boolean;
isValidDropTarget(cell: Cell, cells: CellArray, evt: InternalMouseEvent): boolean {
return (
cell != null &&
((this.isSplitEnabled() && this.isSplitTarget(cell, cells, evt)) ||
((this.graph.isSplitEnabled() && this.graph.isSplitTarget(cell, cells, evt)) ||
(!cell.isEdge() &&
(this.isSwimlane(cell) ||
(cell.getChildCount() > 0 && !cell.isCollapsed()))))
(this.isSwimlane(cell) || (cell.getChildCount() > 0 && !cell.isCollapsed()))))
);
}
@ -281,7 +272,6 @@ class Swimlane {
* @param cell {@link mxCell} that is under the mousepointer.
* @param clone Optional boolean to indicate of cells will be cloned.
*/
// getDropTarget(cells: mxCellArray, evt: Event, cell: mxCell, clone?: boolean): mxCell;
getDropTarget(
cells: CellArray,
evt: InternalMouseEvent,
@ -296,13 +286,9 @@ class Swimlane {
}
}
const pt = convertPoint(
this.container,
getClientX(evt),
getClientY(evt)
);
pt.x -= this.panDx;
pt.y -= this.panDy;
const pt = convertPoint(this.graph.container, getClientX(evt), getClientY(evt));
pt.x -= this.graph.panning.panDx;
pt.y -= this.graph.panning.panDy;
const swimlane = this.getSwimlaneAt(pt.x, pt.y);
if (cell == null) {
@ -324,8 +310,8 @@ class Swimlane {
while (
cell != null &&
!this.isValidDropTarget(cell, cells, evt) &&
!this.getModel().isLayer(cell)
) {
!this.graph.model.isLayer(cell)
) {
cell = cell.getParent();
}
@ -337,9 +323,7 @@ class Swimlane {
}
}
return !this.getModel().isLayer(<Cell>cell) && parent == null
? cell
: null;
return !this.graph.model.isLayer(<Cell>cell) && parent == 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 Cell from "../cell/datatypes/Cell";
import Dictionary from "../../util/Dictionary";
import Graph from '../Graph';
class GraphTerminal {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/*****************************************************************************
* Group: Graph behaviour
*****************************************************************************/
@ -50,16 +57,16 @@ class GraphTerminal {
const dict = new Dictionary();
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 =
state != null
? state.getVisibleTerminal(true)
: this.view.getVisibleTerminal(edges[i], true);
: this.graph.view.getVisibleTerminal(edges[i], true);
const target =
state != null
? 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
// 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 Resources from "../../util/Resources";
import Shape from "../geometry/shape/Shape";
import mxSelectionCellsHandler from "../selection/mxSelectionCellsHandler";
import SelectionCellsHandler from "../selection/SelectionCellsHandler";
import Cell from "../cell/datatypes/Cell";
import TooltipHandler from "./TooltipHandler";
import Graph from '../Graph';
class GraphTooltip {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/**
* Returns the string or DOM node that represents the tooltip for 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 y Y-coordinate of the mouse.
*/
// getTooltip(state: mxCellState, node: Node, x: number, y: number): string;
getTooltip(
state: CellState,
node: HTMLElement,
@ -38,7 +44,7 @@ class GraphTooltip {
// @ts-ignore
(node === state.control.node || node.parentNode === state.control.node)
) {
tip = this.collapseExpandResource;
tip = this.graph.collapseExpandResource;
tip = htmlEntities(Resources.get(tip) || tip, true).replace(
/\\n/g,
'<br>'
@ -60,8 +66,8 @@ class GraphTooltip {
}
if (tip == null) {
const handler = (<mxSelectionCellsHandler>(
this.selectionCellsHandler
const handler = (<SelectionCellsHandler>(
this.graph.selectionCellsHandler
)).getHandler(<Cell>state.cell);
if (
handler != null &&
@ -103,7 +109,7 @@ class GraphTooltip {
// @ts-ignore
tip = cell.getTooltip();
} else {
tip = this.convertValueToString(cell);
tip = this.graph.convertValueToString(cell);
}
return tip;
}
@ -119,7 +125,7 @@ class GraphTooltip {
* @param enabled Boolean indicating if tooltips should be enabled.
*/
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
*/
import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils';
import { fit, getScrollOrigin } from '../../util/Utils';
import { TOOLTIP_VERTICAL_OFFSET } from '../../util/Constants';
import { getSource, isMouseEvent } from '../../util/EventUtils';
import { isNode } from '../../util/DomUtils';
import Graph from '../Graph';
import CellState from '../cell/datatypes/CellState';
import InternalMouseEvent from '../event/InternalMouseEvent';
/**
* Class: mxTooltipHandler
@ -35,7 +38,7 @@ import { isNode } from '../../util/DomUtils';
* delay - Optional delay in milliseconds.
*/
class TooltipHandler {
constructor(graph, delay) {
constructor(graph: Graph | null, delay: number) {
if (graph != null) {
this.graph = graph;
this.delay = delay || 500;
@ -48,32 +51,28 @@ class TooltipHandler {
*
* Specifies the zIndex for the tooltip and its shadow. Default is 10005.
*/
// zIndex: number;
zIndex = 10005;
zIndex: number = 10005;
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph = null;
graph: Graph = null;
/**
* Variable: delay
*
* Delay to show the tooltip in milliseconds. Default is 500.
*/
// delay: number;
delay = null;
delay: number = null;
/**
* Variable: ignoreTouchEvents
*
* Specifies if touch and pen events should be ignored. Default is true.
*/
// ignoreTouchEvents: boolean;
ignoreTouchEvents = true;
ignoreTouchEvents: boolean = true;
/**
* Variable: hideOnHover
@ -81,24 +80,21 @@ class TooltipHandler {
* Specifies if the tooltip should be hidden if the mouse is moved over the
* current cell. Default is false.
*/
// hideOnHover: boolean;
hideOnHover = false;
hideOnHover: boolean = false;
/**
* Variable: destroyed
*
* True if this handler was destroyed using <destroy>.
*/
// destroyed: boolean;
destroyed = false;
destroyed: boolean = false;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
// enabled: boolean;
enabled = true;
enabled: boolean = true;
/**
* Function: isEnabled
@ -106,8 +102,7 @@ class TooltipHandler {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
// isEnabled(): boolean;
isEnabled() {
isEnabled(): boolean {
return this.enabled;
}
@ -117,8 +112,7 @@ class TooltipHandler {
* Enables or disables event handling. This implementation
* updates <enabled>.
*/
// setEnabled(enabled: boolean): void;
setEnabled(enabled) {
setEnabled(enabled: boolean): void {
this.enabled = enabled;
}
@ -127,8 +121,7 @@ class TooltipHandler {
*
* Returns <hideOnHover>.
*/
// isHideOnHover(): boolean;
isHideOnHover() {
isHideOnHover(): boolean {
return this.hideOnHover;
}
@ -137,8 +130,7 @@ class TooltipHandler {
*
* Sets <hideOnHover>.
*/
// setHideOnHover(value: boolean): void;
setHideOnHover(value) {
setHideOnHover(value: boolean): void {
this.hideOnHover = value;
}
@ -147,8 +139,7 @@ class TooltipHandler {
*
* Initializes the DOM nodes required for this tooltip handler.
*/
// init(): void;
init() {
init(): void {
if (document.body != null) {
this.div = document.createElement('div');
this.div.className = 'mxTooltip';
@ -171,8 +162,7 @@ class TooltipHandler {
*
* Returns the <mxCellState> to be used for showing a tooltip for this event.
*/
// getStateForEvent(me: mxMouseEvent): mxCellState;
getStateForEvent(me) {
getStateForEvent(me: MouseEvent): CellState {
return me.getState();
}
@ -183,8 +173,7 @@ class TooltipHandler {
* event all subsequent events of the gesture are redirected to this
* handler.
*/
// mouseDown(sender: any, me: mxMouseEvent): void;
mouseDown(sender, me) {
mouseDown(sender: any, me: InternalMouseEvent): void {
this.reset(me, false);
this.hideTooltip();
}
@ -194,8 +183,7 @@ class TooltipHandler {
*
* Handles the event by updating the rubberband selection.
*/
// mouseMove(sender: any, me: mxMouseEvent): void;
mouseMove(sender, me) {
mouseMove(sender: any, me: InternalMouseEvent): void {
if (me.getX() !== this.lastX || me.getY() !== this.lastY) {
this.reset(me, true);
const state = this.getStateForEvent(me);
@ -223,8 +211,7 @@ class TooltipHandler {
* Handles the event by resetting the tooltip timer or hiding the existing
* tooltip.
*/
// mouseUp(sender: any, me: mxMouseEvent): void;
mouseUp(sender, me) {
mouseUp(sender: any, me: InternalMouseEvent): void {
this.reset(me, true);
this.hideTooltip();
}
@ -234,8 +221,7 @@ class TooltipHandler {
*
* Resets the timer.
*/
// resetTimer(): void;
resetTimer() {
resetTimer(): void {
if (this.thread != null) {
window.clearTimeout(this.thread);
this.thread = null;
@ -247,8 +233,7 @@ class TooltipHandler {
*
* Resets and/or restarts the timer to trigger the display of the tooltip.
*/
// reset(me: mxMouseEvent, restart: boolean, state: mxCellState): void;
reset(me, restart, state) {
reset(me: InternalMouseEvent, restart: boolean, state: CellState): void {
if (!this.ignoreTouchEvents || isMouseEvent(me.getEvent())) {
this.resetTimer();
state = state != null ? state : this.getStateForEvent(me);
@ -289,8 +274,7 @@ class TooltipHandler {
*
* Hides the tooltip and resets the timer.
*/
// hide(): void;
hide() {
hide(): void {
this.resetTimer();
this.hideTooltip();
}
@ -300,8 +284,7 @@ class TooltipHandler {
*
* Hides the tooltip.
*/
// hideTooltip(): void;
hideTooltip() {
hideTooltip(): void {
if (this.div != null) {
this.div.style.visibility = 'hidden';
this.div.innerHTML = '';
@ -314,15 +297,14 @@ class TooltipHandler {
* Shows the tooltip for the specified cell and optional index at the
* specified location (with a vertical offset of 10 pixels).
*/
// show(tip: string, x: number, y: number): void;
show(tip, x, y) {
show(tip: string, x: number, y: number): void {
if (!this.destroyed && tip != null && tip.length > 0) {
// Initializes the DOM nodes if required
if (this.div == null) {
this.init();
}
const origin = utils.getScrollOrigin();
const origin = getScrollOrigin();
this.div.style.zIndex = this.zIndex;
this.div.style.left = `${x + origin.x}px`;
@ -336,7 +318,7 @@ class TooltipHandler {
}
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.
*/
// destroy(): void;
destroy() {
destroy(): void {
if (!this.destroyed) {
this.graph.removeMouseListener(this);
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 Resources from '../../util/Resources';
import CellState from '../cell/datatypes/CellState';
import mxUndoableEdit from '../model/mxUndoableEdit';
import UndoableEdit from '../model/UndoableEdit';
import ImageShape from '../geometry/shape/node/ImageShape';
import InternalMouseEvent from '../event/InternalMouseEvent';
import StyleRegistry from '../style/StyleRegistry';
@ -70,7 +70,7 @@ import CellArray from "../cell/datatypes/CellArray";
* #### Event: mxEvent.UNDO
*
* 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}.
*
* #### Event: mxEvent.SCALE_AND_TRANSLATE
@ -260,6 +260,14 @@ class GraphView extends EventSource {
return this.translate;
}
isRendering() {
return this.rendering;
}
setRendering(value: boolean) {
this.rendering = value;
}
/**
* Sets the translation and fires a {@link translate} event before calling
* {@link revalidate} followed by {@link graph.sizeDidChange}. The translation is the
@ -283,22 +291,14 @@ class GraphView extends EventSource {
this.fireEvent(
new EventObject(
InternalEvent.TRANSLATE,
'translate',
this.translate,
'previousTranslate',
previousTranslate
{
translate: this.translate,
previousTranslate: previousTranslate,
}
)
);
}
isRendering() {
return this.rendering;
}
setRendering(value: boolean) {
this.rendering = value;
}
isAllowEval() {
return this.allowEval;
}
@ -310,16 +310,14 @@ class GraphView extends EventSource {
/**
* Returns {@link states}.
*/
// getStates(): mxDictionary<mxCellState>;
getStates() {
getStates(): Dictionary<string, CellState> {
return this.states;
}
/**
* Sets {@link states}.
*/
// setStates(value: mxDictionary<mxCellState>): void;
setStates(value: Dictionary): void {
setStates(value: Dictionary<string, CellState>): void {
this.states = value;
}
@ -327,7 +325,6 @@ class GraphView extends EventSource {
* Returns the DOM node that contains the background-, draw- and
* overlay- and decoratorpanes.
*/
// getCanvas(): SVGElement;
getCanvas(): SVGElement | null {
return this.canvas;
}
@ -335,7 +332,6 @@ class GraphView extends EventSource {
/**
* Returns the DOM node that represents the background layer.
*/
// getBackgroundPane(): Element;
getBackgroundPane(): SVGElement | null {
return this.backgroundPane;
}
@ -343,7 +339,6 @@ class GraphView extends EventSource {
/**
* Returns the DOM node that represents the main drawing layer.
*/
// getDrawPane(): Element;
getDrawPane(): SVGElement | null {
return this.drawPane;
}
@ -351,7 +346,6 @@ class GraphView extends EventSource {
/**
* Returns the DOM node that represents the layer above the drawing layer.
*/
// getOverlayPane(): Element;
getOverlayPane(): SVGElement | null {
return this.overlayPane;
}
@ -359,7 +353,6 @@ class GraphView extends EventSource {
/**
* Returns the DOM node that represents the topmost drawing layer.
*/
// getDecoratorPane(): Element;
getDecoratorPane(): SVGElement | null {
return this.decoratorPane;
}
@ -369,7 +362,6 @@ class GraphView extends EventSource {
*
* @param cells Array of {@link Cell} whose bounds should be returned.
*/
// getBounds(cells: mxCellArray): mxRectangle;
getBounds(cells: CellArray): Rectangle | 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.
*/
// setCurrentRoot(root: mxCell): mxCell;
setCurrentRoot(root: Cell | null): Cell | null {
if (this.currentRoot != root) {
const change = new CurrentRootChange(this, <Cell>root);
change.execute();
const edit = new mxUndoableEdit(this, true);
const edit = new UndoableEdit(this, true);
edit.add(change);
this.fireEvent(new EventObject(InternalEvent.UNDO, 'edit', edit));
@ -422,7 +413,6 @@ class GraphView extends EventSource {
* @param dx X-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 {
const previousScale = this.scale;
const previousTranslate = new Point(this.translate.x, this.translate.y);
@ -445,14 +435,12 @@ class GraphView extends EventSource {
this.fireEvent(
new EventObject(
InternalEvent.SCALE_AND_TRANSLATE,
'scale',
scale,
'previousScale',
previousScale,
'translate',
this.translate,
'previousTranslate',
previousTranslate
{
scale: scale,
previousScale: previousScale,
translate: this.translate,
previousTranslate: previousTranslate,
}
)
);
}
@ -460,8 +448,7 @@ class GraphView extends EventSource {
/**
* Invoked after {@link scale} and/or {@link translate} has changed.
*/
// viewStateChanged(): void;
viewStateChanged() {
viewStateChanged(): void {
this.revalidate();
(<graph>this.graph).sizeDidChange();
}
@ -469,8 +456,7 @@ class GraphView extends EventSource {
/**
* Clears the view if {@link currentRoot} is not null and revalidates.
*/
// refresh(): void;
refresh() {
refresh(): void {
if (this.currentRoot != null) {
this.clear();
}
@ -480,8 +466,7 @@ class GraphView extends EventSource {
/**
* Revalidates the complete view with all cell states.
*/
// revalidate(): void;
revalidate() {
revalidate(): void {
this.invalidate();
this.validate();
}
@ -495,8 +480,7 @@ class GraphView extends EventSource {
* @param force Boolean indicating if the current root should be ignored for
* recursion.
*/
// clear(cell: mxCell, force?: boolean, recurse?: boolean): void;
clear(cell?: Cell | null, force: boolean = false, recurse: boolean = true) {
clear(cell?: Cell | null, force: boolean = false, recurse: boolean = true): void {
if (!cell) {
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
* model.
*/
// invalidate(cell: mxCell, recurse: boolean, includeEdges: boolean): void;
invalidate(
cell: Cell | null = null,
recurse: boolean = true,
includeEdges: boolean = true
) {
): void {
const model: Model = (<graph>this.graph).getModel();
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.
* Default is {@link currentRoot} or the root of the model.
*/
// validate(cell?: mxCell): void;
validate(cell: Cell | null = null) {
validate(cell: Cell | null = null): void {
const t0 = mxLog.enter('mxGraphView.validate');
window.status =
Resources.get(this.updatingDocumentResource) ||
@ -612,8 +594,7 @@ class GraphView extends EventSource {
* Returns the bounds for an empty graph. This returns a rectangle at
* {@link translate} with the size of 0 x 0.
*/
// getEmptyBounds(): mxRectangle;
getEmptyBounds() {
getEmptyBounds(): Rectangle {
return new Rectangle(
this.translate.x * 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.
* Default is true.
*/
// getBoundingBox(state: mxCellState, recurse: boolean): mxRectangle;
getBoundingBox(
state: CellState | null = null,
recurse: boolean = true
@ -676,7 +656,6 @@ class GraphView extends EventSource {
*
* @param bounds {@link mxRectangle} that represents the bounds of the shape.
*/
// createBackgroundPageShape(bounds: mxRectangle): mxRectangleShape;
createBackgroundPageShape(bounds: Rectangle): RectangleShape {
return new RectangleShape(bounds, 'white', 'black');
}
@ -684,8 +663,7 @@ class GraphView extends EventSource {
/**
* Calls {@link validateBackgroundImage} and {@link validateBackgroundPage}.
*/
// validateBackground(): void;
validateBackground() {
validateBackground(): void {
this.validateBackgroundImage();
this.validateBackgroundPage();
}
@ -693,8 +671,7 @@ class GraphView extends EventSource {
/**
* Validates the background image.
*/
// validateBackgroundImage(): void;
validateBackgroundImage() {
validateBackgroundImage(): void {
const bg = (<graph>this.graph).getBackgroundImage();
if (bg != null) {
@ -724,7 +701,6 @@ class GraphView extends EventSource {
/**
* Validates the background page.
*/
// validateBackgroundPage(): void;
validateBackgroundPage(): void {
const graph = <graph>this.graph;
@ -788,7 +764,6 @@ class GraphView extends EventSource {
/**
* Returns the bounds for the background page.
*/
// getBackgroundPageBounds(): mxRectangle;
getBackgroundPageBounds(): Rectangle {
const fmt = (<graph>this.graph).pageFormat;
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 bg {@link mxImage} that specifies the image and its dimensions.
*/
// redrawBackgroundImage(backgroundImage: mxImageShape, bg: mxImage): void;
redrawBackgroundImage(backgroundImage: ImageShape, bg: Image): void {
backgroundImage.scale = this.scale;
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
* is true.
*/
// validateCell(cell: mxCell, visible?: boolean): void;
validateCell(cell: Cell, visible: boolean = true): Cell | null {
visible = visible && cell.isVisible();
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
* validated. Default is true.
*/
// validateCellState(cell: mxCell, recurse?: boolean): void;
validateCellState(cell: Cell, recurse: boolean = true): CellState | null {
let state: CellState | null = null;
@ -952,8 +924,7 @@ class GraphView extends EventSource {
*
* @param state {@link mxCellState} to be updated.
*/
// updateCellState(state: mxCellState): void;
updateCellState(state: CellState) {
updateCellState(state: CellState): void {
const absoluteOffset = <Point>state.absoluteOffset;
const origin = <Point>state.origin;
@ -1038,8 +1009,7 @@ class GraphView extends EventSource {
/**
* Validates the given cell state.
*/
// updateVertexState(state: mxCellState, geo: mxGeometry): void;
updateVertexState(state: CellState, geo: Geometry) {
updateVertexState(state: CellState, geo: Geometry): void {
const model = (<graph>this.graph).getModel();
const pState = this.getState(state.cell.getParent());
@ -1063,8 +1033,7 @@ class GraphView extends EventSource {
/**
* Validates the given cell state.
*/
// updateEdgeState(state: mxCellState, geo: mxGeometry): void;
updateEdgeState(state: CellState, geo: Geometry) {
updateEdgeState(state: CellState, geo: Geometry): void {
const source = <CellState>state.getVisibleTerminalState(true);
const target = <CellState>state.getVisibleTerminalState(false);
@ -1108,8 +1077,7 @@ class GraphView extends EventSource {
*
* @param state {@link mxCellState} whose absolute offset should be updated.
*/
// updateVertexLabelOffset(state: mxCellState): void;
updateVertexLabelOffset(state: CellState) {
updateVertexLabelOffset(state: CellState): void {
const h = getValue(state.style, 'labelPosition', ALIGN_CENTER);
if (h === ALIGN_LEFT) {
@ -1161,7 +1129,6 @@ class GraphView extends EventSource {
/**
* Resets the current validation state.
*/
// resetValidationState(): void;
resetValidationState(): void {
this.lastNode = null;
this.lastHtmlNode = null;
@ -1175,7 +1142,6 @@ class GraphView extends EventSource {
*
* @param state {@link mxCellState} that represents the cell state.
*/
// stateValidated(state: mxCellState): void;
stateValidated(state: CellState): void {
const graph = <graph>this.graph;
const fg =
@ -1204,7 +1170,6 @@ class GraphView extends EventSource {
* @param source {@link mxCellState} which represents the source terminal.
* @param target {@link mxCellState} which represents the target terminal.
*/
// updateFixedTerminalPoints(edge: mxCellState, source: mxCellState, target: mxCellState): void;
updateFixedTerminalPoints(
edge: CellState,
source: CellState,
@ -1301,8 +1266,7 @@ class GraphView extends EventSource {
*
* @param edge {@link mxCellState} whose bounds should be updated.
*/
// updateBoundsFromStencil(state: mxCellState): mxRectangle;
updateBoundsFromStencil(state: CellState) {
updateBoundsFromStencil(state: CellState): Rectangle {
let previous = null;
if (
@ -1326,7 +1290,6 @@ class GraphView extends EventSource {
state.shape.stencil.h0 * asp.height
);
}
return previous;
}
@ -1339,13 +1302,12 @@ class GraphView extends EventSource {
* @param source {@link mxCellState} that represents the source terminal.
* @param target {@link mxCellState} that represents the target terminal.
*/
// updatePoints(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): void;
updatePoints(
edge: CellState,
points: Point[],
source: CellState,
target: CellState
) {
): void {
if (edge != null) {
const pts = [];
pts.push((<Point[]>edge.absolutePoints)[0]);
@ -1398,7 +1360,6 @@ class GraphView extends EventSource {
/**
* Transforms the given control point to an absolute point.
*/
// transformControlPoint(state: mxCellState, pt: mxPoint): mxPoint;
transformControlPoint(
state: CellState,
pt: Point,
@ -1421,7 +1382,6 @@ class GraphView extends EventSource {
* 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
*/
// isLoopStyleEnabled(edge: mxCellState, points: mxPoint[], source: mxCellState, target: mxCellState): boolean;
isLoopStyleEnabled(
edge: CellState,
points: Point[] = [],
@ -1452,7 +1412,6 @@ class GraphView extends EventSource {
/**
* 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(
edge: CellState,
points: Point[] = [],
@ -1488,12 +1447,11 @@ class GraphView extends EventSource {
* @param source {@link mxCellState} that represents the source terminal.
* @param target {@link mxCellState} that represents the target terminal.
*/
// updateFloatingTerminalPoints(state: mxCellState, source: mxCellState, target: mxCellState): void;
updateFloatingTerminalPoints(
state: CellState,
source: CellState,
target: CellState
) {
): void {
const pts = <Point[]>state.absolutePoints;
const p0 = pts[0];
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 source Boolean indicating if start is the source terminal state.
*/
// updateFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): void;
updateFloatingTerminalPoint(
edge: CellState,
start: CellState,
end: CellState,
source: boolean
) {
): void {
edge.setAbsoluteTerminalPoint(
<Point>this.getFloatingTerminalPoint(edge, start, end, 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 source Boolean indicating if start is the source terminal state.
*/
// getFloatingTerminalPoint(edge: mxCellState, start: mxCellState, end: mxCellState, source: boolean): mxPoint;
getFloatingTerminalPoint(
edge: CellState,
start: CellState,
@ -1588,7 +1544,6 @@ class GraphView extends EventSource {
* @param terminal {@link mxCellState} that represents the terminal.
* @param source Boolean indicating if the given terminal is the source terminal.
*/
// getTerminalPort(state: mxCellState, terminal: mxCellState, source: boolean): mxCellState;
getTerminalPort(
state: CellState,
terminal: CellState,
@ -1623,13 +1578,12 @@ class GraphView extends EventSource {
* returned.
* @param border Optional border between the perimeter and the shape.
*/
// getPerimeterPoint(terminal: mxCellState, next: mxPoint, orthogonal: boolean, border: number): mxPoint;
getPerimeterPoint(
terminal: CellState,
next: Point,
orthogonal: boolean,
border: number = 0
) {
): Point {
let point = null;
if (terminal != null) {
@ -1686,8 +1640,7 @@ class GraphView extends EventSource {
/**
* Returns the x-coordinate of the center point for automatic routing.
*/
// getRoutingCenterX(state: mxCellState): number;
getRoutingCenterX(state: CellState) {
getRoutingCenterX(state: CellState): number {
const f =
state.style != null ? parseFloat(state.style.routingCenterX) || 0 : 0;
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.
*/
// getRoutingCenterY(state: mxCellState): number;
getRoutingCenterY(state: CellState) {
getRoutingCenterY(state: CellState): number {
const f =
state.style != null ? parseFloat(state.style.routingCenterY) || 0 : 0;
return state.getCenterY() + f * state.height;
@ -1743,7 +1695,6 @@ class GraphView extends EventSource {
* @param {CellState} terminal mxCellState that represents the terminal.
* @param {number} border Number that adds a border between the shape and the perimeter.
*/
// getPerimeterBounds(terminal: mxCellState, border?: number): mxRectangle;
getPerimeterBounds(
terminal: CellState | null = null,
border: number = 0
@ -1757,7 +1708,6 @@ class GraphView extends EventSource {
/**
* Returns the perimeter function for the given state.
*/
// getPerimeterFunction(state: mxCellState): any;
getPerimeterFunction(state: CellState): Function | null {
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
* should be returned.
*/
// getNextPoint(edge: mxCellState, opposite: mxCellState, source: boolean): mxPoint;
getNextPoint(
edge: CellState,
opposite: CellState | null,
@ -1815,8 +1764,7 @@ class GraphView extends EventSource {
* @param source Boolean that specifies if the source or target terminal
* should be returned.
*/
// getVisibleTerminal(edge: mxCell, source: boolean): mxCell;
getVisibleTerminal(edge: Cell, source: boolean) {
getVisibleTerminal(edge: Cell, source: boolean): Cell | null {
const model = (<graph>this.graph).getModel();
let result = edge.getTerminal(source);
let best = result;
@ -1850,8 +1798,7 @@ class GraphView extends EventSource {
*
* @param state {@link mxCellState} whose bounds should be updated.
*/
// updateEdgeBounds(state: mxCellState): void;
updateEdgeBounds(state: CellState) {
updateEdgeBounds(state: CellState): void {
const points = <Point[]>state.absolutePoints;
const p0 = points[0];
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 geometry {@link mxGeometry} that represents the relative location.
*/
// getPoint(state: mxCellState, geometry: mxGeometry): mxPoint;
getPoint(state: CellState, geometry: Geometry | null = null): Point {
let x = state.getCenterX();
let y = state.getCenterY();
@ -1979,8 +1925,7 @@ class GraphView extends EventSource {
* @param x Specifies the x-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) {
getRelativePoint(edgeState: CellState, x: number, y: number): Point {
const model = (<graph>this.graph).getModel();
const geometry = edgeState.cell.getGeometry();
@ -2078,8 +2023,7 @@ class GraphView extends EventSource {
*
* @param state {@link mxCellState} whose absolute offset should be updated.
*/
// updateEdgeLabelOffset(state: mxCellState): void;
updateEdgeLabelOffset(state: CellState) {
updateEdgeLabelOffset(state: CellState): void {
const points = state.absolutePoints;
const absoluteOffset = <Point>state.absoluteOffset;
absoluteOffset.x = state.getCenterX();
@ -2129,8 +2073,7 @@ class GraphView extends EventSource {
* @param create Optional boolean indicating if a new state should be created
* if it does not yet exist. Default is false.
*/
// getState(cell: mxCell, create?: boolean): mxCellState;
getState(cell: Cell | null = null, create: boolean = false) {
getState(cell: Cell | null = null, create: boolean = false): CellState {
let state: CellState | null = 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
* this returns {@link states}.
*/
// getCellStates(cells: mxCellArray): mxCellState[];
getCellStates(cells: CellArray | null): CellState[] | Dictionary | null {
if (cells == null) {
return this.states;
@ -2175,7 +2117,6 @@ class GraphView extends EventSource {
*
* @param cell {@link mxCell} for which the {@link CellState} should be removed.
*/
// removeState(cell: mxCell): mxCellState;
removeState(cell: Cell): CellState | 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.
*/
// createState(cell: mxCell): mxCellState;
createState(cell: Cell): CellState {
return new CellState(
this,
@ -2210,8 +2150,7 @@ class GraphView extends EventSource {
* Returns true if the event origin is one of the drawing panes or
* containers of the view.
*/
// isContainerEvent(evt: Event): boolean;
isContainerEvent(evt: Event | MouseEvent) {
isContainerEvent(evt: Event | MouseEvent): boolean {
const source = getSource(evt);
return (
@ -2233,8 +2172,7 @@ class GraphView extends EventSource {
* Returns true if the event origin is one of the scrollbars of the
* container in IE. Such events are ignored.
*/
// isScrollEvent(evt: Event): boolean;
isScrollEvent(evt: MouseEvent) {
isScrollEvent(evt: MouseEvent): boolean {
const graph = <graph>this.graph;
const offset = getOffset(graph.container);
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
* and invokes {@link create} to create the required DOM nodes for the display.
*/
// init(): void;
init() {
init(): void {
this.installListeners();
// Creates the DOM nodes for the respective display dialect
@ -2269,8 +2206,7 @@ class GraphView extends EventSource {
/**
* Installs the required listeners in the container.
*/
// installListeners(): void;
installListeners() {
installListeners(): void {
const graph = <graph>this.graph;
const { container } = graph;
@ -2424,8 +2360,7 @@ class GraphView extends EventSource {
/**
* Creates and returns the DOM nodes for the SVG display.
*/
// createSvg(): Element;
createSvg() {
createSvg(): void {
const { container } = <graph>this.graph;
const canvas = (this.canvas = document.createElementNS(
'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.
*/
// updateContainerStyle(container: Element): void;
updateContainerStyle(container: HTMLElement) {
// Workaround for offset of container
const style = getCurrentStyle(container);
@ -2493,8 +2427,7 @@ class GraphView extends EventSource {
/**
* Destroys the view and all its resources.
*/
// destroy(): void;
destroy() {
destroy(): void {
let root: SVGElement | 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;
// Adds a highlight on the cell under the mousepointer
new mxCellTracker(graph);
new CellTracker(graph);
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
@ -71,7 +71,7 @@ const Template = ({ label, ...args }) => {
// Creates a layout algorithm to be used
// with the graph
const layout = new mxFastOrganicLayout(graph);
const layout = new MxFastOrganicLayout(graph);
// Moves stuff wider apart than usual
layout.forceConstant = 140;