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

manual js syntax updates

development
mcyph 2021-03-19 23:50:19 +11:00
parent c5e7813b34
commit a3b84ee3c9
3 changed files with 761 additions and 866 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
javascript/src/js/layout/mxCompactTreeLayout.js
View File

@ -4,33 +4,9 @@
*/ */
import mxDictionary from "FIXME"; import mxDictionary from "FIXME";
import mxPoint from "FIXME";
class mxCompactTreeLayout extends mxGraphLayout { class mxCompactTreeLayout extends mxGraphLayout {
/**
* Class: mxCompactTreeLayout
*
* Extends <mxGraphLayout> 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.
*
* Example:
*
* (code)
* var layout = new mxCompactTreeLayout(graph);
* layout.execute(graph.getDefaultParent());
* (end)
*
* Constructor: mxCompactTreeLayout
*
* Constructs a new compact tree layout for the specified graph
* and orientation.
*/
constructor(graph, horizontal, invert) {
super(graph);
this.horizontal = (horizontal != null) ? horizontal : true;
this.invert = (invert != null) ? invert : false;
};
/** /**
* Variable: horizontal * Variable: horizontal
* *
@ -218,6 +194,31 @@ class mxCompactTreeLayout extends mxGraphLayout {
*/ */
node = null; node = null;
/**
* Class: mxCompactTreeLayout
*
* Extends <mxGraphLayout> 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.
*
* Example:
*
* (code)
* var layout = new mxCompactTreeLayout(graph);
* layout.execute(graph.getDefaultParent());
* (end)
*
* Constructor: mxCompactTreeLayout
*
* Constructs a new compact tree layout for the specified graph
* and orientation.
*/
constructor(graph, horizontal, invert) {
super(graph);
this.horizontal = (horizontal != null) ? horizontal : true;
this.invert = (invert != null) ? invert : false;
};
/** /**
* Function: isVertexIgnored * Function: isVertexIgnored
* *

554
javascript/src/js/layout/mxRadialTreeLayout.js
View File

@ -2,317 +2,295 @@
* Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder * Copyright (c) 2006-2015, Gaudenz Alder
*/ */
/**
* Class: mxRadialTreeLayout
*
* Extends <mxGraphLayout> to implement a radial tree 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.
*
* Example:
*
* (code)
* var layout = new mxRadialTreeLayout(graph);
* layout.execute(graph.getDefaultParent());
* (end)
*
* Constructor: mxRadialTreeLayout
*
* Constructs a new radial tree layout for the specified graph
*/
function mxRadialTreeLayout(graph)
{
mxCompactTreeLayout.call(this, graph , false);
};
/** class mxRadialTreeLayout extends mxCompactTreeLayout {
* Extends mxGraphLayout. /**
*/ * Variable: angleOffset
mxUtils.extend(mxRadialTreeLayout, mxCompactTreeLayout); *
* The initial offset to compute the angle position.
*/
angleOffset = 0.5;
/** /**
* Variable: angleOffset * Variable: rootx
* *
* The initial offset to compute the angle position. * The X co-ordinate of the root cell
*/ */
angleOffset = 0.5; rootx = 0;
/** /**
* Variable: rootx * Variable: rooty
* *
* The X co-ordinate of the root cell * The Y co-ordinate of the root cell
*/ */
rootx = 0; rooty = 0;
/** /**
* Variable: rooty * Variable: levelDistance
* *
* The Y co-ordinate of the root cell * Holds the levelDistance. Default is 120.
*/ */
rooty = 0; levelDistance = 120;
/** /**
* Variable: levelDistance * Variable: nodeDistance
* *
* Holds the levelDistance. Default is 120. * Holds the nodeDistance. Default is 10.
*/ */
levelDistance = 120; nodeDistance = 10;
/** /**
* Variable: nodeDistance * Variable: autoRadius
* *
* Holds the nodeDistance. Default is 10. * Specifies if the radios should be computed automatically
*/ */
nodeDistance = 10; autoRadius = false;
/** /**
* Variable: autoRadius * Variable: sortEdges
* *
* Specifies if the radios should be computed automatically * Specifies if edges should be sorted according to the order of their
*/ * opposite terminal cell in the model.
autoRadius = false; */
sortEdges = false;
/** /**
* Variable: sortEdges * Variable: rowMinX
* *
* Specifies if edges should be sorted according to the order of their * Array of leftmost x coordinate of each row
* opposite terminal cell in the model. */
*/ rowMinX = [];
sortEdges = false;
/** /**
* Variable: rowMinX * Variable: rowMaxX
* *
* Array of leftmost x coordinate of each row * Array of rightmost x coordinate of each row
*/ */
rowMinX = []; rowMaxX = [];
/** /**
* Variable: rowMaxX * Variable: rowMinCenX
* *
* Array of rightmost x coordinate of each row * Array of x coordinate of leftmost vertex of each row
*/ */
rowMaxX = []; rowMinCenX = [];
/** /**
* Variable: rowMinCenX * Variable: rowMaxCenX
* *
* Array of x coordinate of leftmost vertex of each row * Array of x coordinate of rightmost vertex of each row
*/ */
rowMinCenX = []; rowMaxCenX = [];
/** /**
* Variable: rowMaxCenX * Variable: rowRadi
* *
* Array of x coordinate of rightmost vertex of each row * Array of y deltas of each row behind root vertex, also the radius in the tree
*/ */
rowMaxCenX = []; rowRadi = [];
/** /**
* Variable: rowRadi * Variable: row
* *
* Array of y deltas of each row behind root vertex, also the radius in the tree * Array of vertices on each row
*/ */
rowRadi = []; row = [];
/** /**
* Variable: row * Class: mxRadialTreeLayout
* *
* Array of vertices on each row * Extends <mxGraphLayout> to implement a radial tree algorithm. This
*/ * layout is suitable for graphs that have no cycles (trees). Vertices that are
row = []; * not connected to the tree will be ignored by this layout.
*
* Example:
*
* (code)
* var layout = new mxRadialTreeLayout(graph);
* layout.execute(graph.getDefaultParent());
* (end)
*
* Constructor: mxRadialTreeLayout
*
* Constructs a new radial tree layout for the specified graph
*/
constructor(graph) {
super(graph, false);
};
/** /**
* Function: isVertexIgnored * Function: isVertexIgnored
* *
* Returns a boolean indicating if the given <mxCell> should be ignored as a * Returns a boolean indicating if the given <mxCell> should be ignored as a
* vertex. This returns true if the cell has no connections. * vertex. This returns true if the cell has no connections.
* *
* Parameters: * Parameters:
* *
* vertex - <mxCell> whose ignored state should be returned. * vertex - <mxCell> whose ignored state should be returned.
*/ */
isVertexIgnored = (vertex)=> isVertexIgnored = (vertex) => {
{ return super.isVertexIgnored(vertex) ||
return isVertexIgnored.apply(this, arguments) || this.graph.getConnections(vertex).length === 0;
this.graph.getConnections(vertex).length == 0; };
};
/** /**
* Function: execute * Function: execute
* *
* Implements <mxGraphLayout.execute>. * Implements <mxGraphLayout.execute>.
* *
* If the parent has any connected edges, then it is used as the root of * If the parent has any connected edges, then it is used as the root of
* the tree. Else, <mxGraph.findTreeRoots> will be used to find a suitable * the tree. Else, <mxGraph.findTreeRoots> will be used to find a suitable
* root node within the set of children of the given parent. * root node within the set of children of the given parent.
* *
* Parameters: * Parameters:
* *
* parent - <mxCell> whose children should be laid out. * parent - <mxCell> whose children should be laid out.
* root - Optional <mxCell> that will be used as the root of the tree. * root - Optional <mxCell> that will be used as the root of the tree.
*/ */
execute = (parent, root)=> execute = (parent, root) => {
{ this.parent = parent;
this.parent = parent;
this.useBoundingBox = false;
this.edgeRouting = false;
//this.horizontal = false;
execute.apply(this, arguments); this.useBoundingBox = false;
this.edgeRouting = false;
var bounds = null; //this.horizontal = false;
var rootBounds = this.getVertexBounds(this.root);
this.centerX = rootBounds.x + rootBounds.width / 2;
this.centerY = rootBounds.y + rootBounds.height / 2;
// Calculate the bounds of the involved vertices directly from the values set in the compact tree execute.apply(this, arguments);
for (var vertex in this.visited)
{
var vertexBounds = this.getVertexBounds(this.visited[vertex]);
bounds = (bounds != null) ? bounds : vertexBounds.clone();
bounds.add(vertexBounds);
}
this.calcRowDims([this.node], 0);
var maxLeftGrad = 0;
var maxRightGrad = 0;
// Find the steepest left and right gradients var bounds = null;
for (var i = 0; i < this.row.length; i++) var rootBounds = this.getVertexBounds(this.root);
{ this.centerX = rootBounds.x + rootBounds.width / 2;
var leftGrad = (this.centerX - this.rowMinX[i] - this.nodeDistance) / this.rowRadi[i]; this.centerY = rootBounds.y + rootBounds.height / 2;
var rightGrad = (this.rowMaxX[i] - this.centerX - this.nodeDistance) / this.rowRadi[i];
// Calculate the bounds of the involved vertices directly from the values set in the compact tree
maxLeftGrad = Math.max (maxLeftGrad, leftGrad); for (var vertex in this.visited) {
maxRightGrad = Math.max (maxRightGrad, rightGrad); var vertexBounds = this.getVertexBounds(this.visited[vertex]);
} bounds = (bounds != null) ? bounds : vertexBounds.clone();
bounds.add(vertexBounds);
// Extend out row so they meet the maximum gradient and convert to polar co-ords
for (var i = 0; i < this.row.length; i++)
{
var xLeftLimit = this.centerX - this.nodeDistance - maxLeftGrad * this.rowRadi[i];
var xRightLimit = this.centerX + this.nodeDistance + maxRightGrad * this.rowRadi[i];
var fullWidth = xRightLimit - xLeftLimit;
for (var j = 0; j < this.row[i].length; j ++)
{
var row = this.row[i];
var node = row[j];
var vertexBounds = this.getVertexBounds(node.cell);
var xProportion = (vertexBounds.x + vertexBounds.width / 2 - xLeftLimit) / (fullWidth);
var theta = 2 * Math.PI * xProportion;
node.theta = theta;
} }
}
// Post-process from outside inwards to try to align parents with children this.calcRowDims([this.node], 0);
for (var i = this.row.length - 2; i >= 0; i--)
{ var maxLeftGrad = 0;
var row = this.row[i]; var maxRightGrad = 0;
for (var j = 0; j < row.length; j++) // Find the steepest left and right gradients
{ for (var i = 0; i < this.row.length; i++) {
var node = row[j]; var leftGrad = (this.centerX - this.rowMinX[i] - this.nodeDistance) / this.rowRadi[i];
var child = node.child; var rightGrad = (this.rowMaxX[i] - this.centerX - this.nodeDistance) / this.rowRadi[i];
var counter = 0;
var totalTheta = 0; maxLeftGrad = Math.max(maxLeftGrad, leftGrad);
maxRightGrad = Math.max(maxRightGrad, rightGrad);
while (child != null) }
{
totalTheta += child.theta; // Extend out row so they meet the maximum gradient and convert to polar co-ords
counter++; for (var i = 0; i < this.row.length; i++) {
var xLeftLimit = this.centerX - this.nodeDistance - maxLeftGrad * this.rowRadi[i];
var xRightLimit = this.centerX + this.nodeDistance + maxRightGrad * this.rowRadi[i];
var fullWidth = xRightLimit - xLeftLimit;
for (var j = 0; j < this.row[i].length; j++) {
var row = this.row[i];
var node = row[j];
var vertexBounds = this.getVertexBounds(node.cell);
var xProportion = (vertexBounds.x + vertexBounds.width / 2 - xLeftLimit) / (fullWidth);
var theta = 2 * Math.PI * xProportion;
node.theta = theta;
}
}
// Post-process from outside inwards to try to align parents with children
for (var i = this.row.length - 2; i >= 0; i--) {
var row = this.row[i];
for (var j = 0; j < row.length; j++) {
var node = row[j];
var child = node.child;
var counter = 0;
var totalTheta = 0;
while (child != null) {
totalTheta += child.theta;
counter++;
child = child.next;
}
if (counter > 0) {
var averTheta = totalTheta / counter;
if (averTheta > node.theta && j < row.length - 1) {
var nextTheta = row[j + 1].theta;
node.theta = Math.min(averTheta, nextTheta - Math.PI / 10);
} else if (averTheta < node.theta && j > 0) {
var lastTheta = row[j - 1].theta;
node.theta = Math.max(averTheta, lastTheta + Math.PI / 10);
}
}
}
}
// Set locations
for (var i = 0; i < this.row.length; i++) {
for (var j = 0; j < this.row[i].length; j++) {
var row = this.row[i];
var node = row[j];
var vertexBounds = this.getVertexBounds(node.cell);
this.setVertexLocation(node.cell,
this.centerX - vertexBounds.width / 2 + this.rowRadi[i] * Math.cos(node.theta),
this.centerY - vertexBounds.height / 2 + this.rowRadi[i] * Math.sin(node.theta));
}
}
};
/**
* Function: calcRowDims
*
* Recursive function to calculate the dimensions of each row
*
* Parameters:
*
* row - Array of internal nodes, the children of which are to be processed.
* rowNum - Integer indicating which row is being processed.
*/
calcRowDims = (row, rowNum) => {
if (row == null || row.length == 0) {
return;
}
// Place root's children proportionally around the first level
this.rowMinX[rowNum] = this.centerX;
this.rowMaxX[rowNum] = this.centerX;
this.rowMinCenX[rowNum] = this.centerX;
this.rowMaxCenX[rowNum] = this.centerX;
this.row[rowNum] = [];
var rowHasChildren = false;
for (var i = 0; i < row.length; i++) {
var child = row[i] != null ? row[i].child : null;
while (child != null) {
var cell = child.cell;
var vertexBounds = this.getVertexBounds(cell);
this.rowMinX[rowNum] = Math.min(vertexBounds.x, this.rowMinX[rowNum]);
this.rowMaxX[rowNum] = Math.max(vertexBounds.x + vertexBounds.width, this.rowMaxX[rowNum]);
this.rowMinCenX[rowNum] = Math.min(vertexBounds.x + vertexBounds.width / 2, this.rowMinCenX[rowNum]);
this.rowMaxCenX[rowNum] = Math.max(vertexBounds.x + vertexBounds.width / 2, this.rowMaxCenX[rowNum]);
this.rowRadi[rowNum] = vertexBounds.y - this.getVertexBounds(this.root).y;
if (child.child != null) {
rowHasChildren = true;
}
this.row[rowNum].push(child);
child = child.next; child = child.next;
} }
if (counter > 0)
{
var averTheta = totalTheta / counter;
if (averTheta > node.theta && j < row.length - 1)
{
var nextTheta = row[j+1].theta;
node.theta = Math.min (averTheta, nextTheta - Math.PI/10);
}
else if (averTheta < node.theta && j > 0 )
{
var lastTheta = row[j-1].theta;
node.theta = Math.max (averTheta, lastTheta + Math.PI/10);
}
}
} }
}
if (rowHasChildren) {
// Set locations this.calcRowDims(this.row[rowNum], rowNum + 1);
for (var i = 0; i < this.row.length; i++)
{
for (var j = 0; j < this.row[i].length; j ++)
{
var row = this.row[i];
var node = row[j];
var vertexBounds = this.getVertexBounds(node.cell);
this.setVertexLocation(node.cell,
this.centerX - vertexBounds.width / 2 + this.rowRadi[i] * Math.cos(node.theta),
this.centerY - vertexBounds.height / 2 + this.rowRadi[i] * Math.sin(node.theta));
} }
} };
}; }
/** export default mxRadialTreeLayout;
* Function: calcRowDims
*
* Recursive function to calculate the dimensions of each row
*
* Parameters:
*
* row - Array of internal nodes, the children of which are to be processed.
* rowNum - Integer indicating which row is being processed.
*/
calcRowDims = (row, rowNum)=>
{
if (row == null || row.length == 0)
{
return;
}
// Place root's children proportionally around the first level
this.rowMinX[rowNum] = this.centerX;
this.rowMaxX[rowNum] = this.centerX;
this.rowMinCenX[rowNum] = this.centerX;
this.rowMaxCenX[rowNum] = this.centerX;
this.row[rowNum] = [];
var rowHasChildren = false;
for (var i = 0; i < row.length; i++)
{
var child = row[i] != null ? row[i].child : null;
while (child != null)
{
var cell = child.cell;
var vertexBounds = this.getVertexBounds(cell);
this.rowMinX[rowNum] = Math.min(vertexBounds.x, this.rowMinX[rowNum]);
this.rowMaxX[rowNum] = Math.max(vertexBounds.x + vertexBounds.width, this.rowMaxX[rowNum]);
this.rowMinCenX[rowNum] = Math.min(vertexBounds.x + vertexBounds.width / 2, this.rowMinCenX[rowNum]);
this.rowMaxCenX[rowNum] = Math.max(vertexBounds.x + vertexBounds.width / 2, this.rowMaxCenX[rowNum]);
this.rowRadi[rowNum] = vertexBounds.y - this.getVertexBounds(this.root).y;
if (child.child != null)
{
rowHasChildren = true;
}
this.row[rowNum].push(child);
child = child.next;
}
}
if (rowHasChildren)
{
this.calcRowDims(this.row[rowNum], rowNum + 1);
}
};

1022
javascript/src/js/layout/mxStackLayout.js
View File

File diff suppressed because it is too large Load Diff