288 lines
8.5 KiB
HTML
288 lines
8.5 KiB
HTML
|
<!--
|
||
|
|
Copyright (c) 2006-2013, JGraph Ltd
|
||
|
|
|
||
|
|
Tree example for mxGraph. This example demonstrates folding
|
||
|
|
of subtrees in a acyclic graph (tree).
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Tree example for mxGraph</title>
|
||
|
|
|
||
|
|
<!-- Sets the basepath for the library if not in same directory -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
mxBasePath = '../src';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Loads and initializes the library -->
|
||
|
|
<script type="text/javascript" src="../src/js/mxClient.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
/*
|
||
|
|
Defines a custom shape for the tree node that includes the
|
||
|
|
upper half of the outgoing edge(s).
|
||
|
|
*/
|
||
|
|
function TreeNodeShape() { };
|
||
|
|
|
||
|
|
TreeNodeShape.prototype = new mxCylinder();
|
||
|
|
TreeNodeShape.prototype.constructor = TreeNodeShape;
|
||
|
|
|
||
|
|
// Defines the length of the upper edge segment.
|
||
|
|
TreeNodeShape.prototype.segment = 20;
|
||
|
|
|
||
|
|
// Needs access to the cell state for rendering
|
||
|
|
TreeNodeShape.prototype.apply = function(state)
|
||
|
|
{
|
||
|
|
mxCylinder.prototype.apply.apply(this, arguments);
|
||
|
|
this.state = state;
|
||
|
|
};
|
||
|
|
|
||
|
|
TreeNodeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
|
||
|
|
{
|
||
|
|
var graph = this.state.view.graph;
|
||
|
|
var hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;
|
||
|
|
|
||
|
|
if (isForeground)
|
||
|
|
{
|
||
|
|
if (hasChildren)
|
||
|
|
{
|
||
|
|
// Painting outside of vertex bounds is used here
|
||
|
|
path.moveTo(w / 2, h + this.segment);
|
||
|
|
path.lineTo(w / 2, h);
|
||
|
|
path.end();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
path.moveTo(0, 0);
|
||
|
|
path.lineTo(w, 0);
|
||
|
|
path.lineTo(w, h);
|
||
|
|
path.lineTo(0, h);
|
||
|
|
path.close();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
mxCellRenderer.registerShape('treenode', TreeNodeShape);
|
||
|
|
|
||
|
|
// Defines a custom perimeter for the nodes in the tree
|
||
|
|
mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source)
|
||
|
|
{
|
||
|
|
var pt = null;
|
||
|
|
|
||
|
|
if (source)
|
||
|
|
{
|
||
|
|
pt = new mxPoint(start.x + start.width / 2,
|
||
|
|
start.y + start.height + TreeNodeShape.prototype.segment);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
pt = new mxPoint(start.x + start.width / 2, start.y);
|
||
|
|
}
|
||
|
|
|
||
|
|
edge.setAbsoluteTerminalPoint(pt, source);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Example code -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
// Program starts here. Creates a sample graph in the
|
||
|
|
// DOM node with the specified ID. This function is invoked
|
||
|
|
// from the onLoad event handler of the document (see below).
|
||
|
|
function main()
|
||
|
|
{
|
||
|
|
// Checks if browser is supported
|
||
|
|
if (!mxClient.isBrowserSupported())
|
||
|
|
{
|
||
|
|
// Displays an error message if the browser is
|
||
|
|
// not supported.
|
||
|
|
mxUtils.error('Browser is not supported!', 200, false);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
// Sets the collapse and expand icons. The values below are the default
|
||
|
|
// values, but this is how to replace them if you need to.
|
||
|
|
mxGraph.prototype.collapsedImage = new mxImage(mxClient.imageBasePath + '/collapsed.gif', 9, 9);
|
||
|
|
mxGraph.prototype.expandedImage = new mxImage(mxClient.imageBasePath + '/expanded.gif', 9, 9);
|
||
|
|
|
||
|
|
// Workaround for Internet Explorer ignoring certain styles
|
||
|
|
var container = document.createElement('div');
|
||
|
|
container.style.position = 'absolute';
|
||
|
|
container.style.overflow = 'hidden';
|
||
|
|
container.style.left = '0px';
|
||
|
|
container.style.top = '0px';
|
||
|
|
container.style.right = '0px';
|
||
|
|
container.style.bottom = '0px';
|
||
|
|
|
||
|
|
if (mxClient.IS_IE)
|
||
|
|
{
|
||
|
|
new mxDivResizer(container);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.body.appendChild(container);
|
||
|
|
|
||
|
|
// Creates the graph inside the given container
|
||
|
|
var graph = new mxGraph(container);
|
||
|
|
|
||
|
|
// Avoids overlap of edges and collapse icons
|
||
|
|
graph.keepEdgesInBackground = true;
|
||
|
|
|
||
|
|
// Set some stylesheet options for the visual appearance
|
||
|
|
var style = graph.getStylesheet().getDefaultVertexStyle();
|
||
|
|
style[mxConstants.STYLE_SHAPE] = 'treenode';
|
||
|
|
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||
|
|
style[mxConstants.STYLE_SHADOW] = true;
|
||
|
|
|
||
|
|
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||
|
|
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
|
||
|
|
style[mxConstants.STYLE_ROUNDED] = true;
|
||
|
|
|
||
|
|
// Enables automatic sizing for vertices after editing and
|
||
|
|
// panning by using the left mouse button.
|
||
|
|
graph.setAutoSizeCells(true);
|
||
|
|
graph.setPanning(true);
|
||
|
|
graph.panningHandler.useLeftButtonForPanning = true;
|
||
|
|
|
||
|
|
// Stops editing on enter or escape keypress
|
||
|
|
var keyHandler = new mxKeyHandler(graph);
|
||
|
|
|
||
|
|
// Enables automatic layout on the graph and installs
|
||
|
|
// a tree layout for all groups who's children are
|
||
|
|
// being changed, added or removed.
|
||
|
|
var layout = new mxCompactTreeLayout(graph, false);
|
||
|
|
layout.useBoundingBox = false;
|
||
|
|
layout.edgeRouting = false;
|
||
|
|
layout.levelDistance = 30;
|
||
|
|
layout.nodeDistance = 10;
|
||
|
|
|
||
|
|
var layoutMgr = new mxLayoutManager(graph);
|
||
|
|
|
||
|
|
layoutMgr.getLayout = function(cell)
|
||
|
|
{
|
||
|
|
if (cell.getChildCount() > 0)
|
||
|
|
{
|
||
|
|
return layout;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Disallow any selections
|
||
|
|
graph.setCellsSelectable(false);
|
||
|
|
|
||
|
|
// Defines the condition for showing the folding icon
|
||
|
|
graph.isCellFoldable = function(cell)
|
||
|
|
{
|
||
|
|
return this.model.getOutgoingEdges(cell).length > 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Defines the position of the folding icon
|
||
|
|
graph.cellRenderer.getControlBounds = function(state)
|
||
|
|
{
|
||
|
|
if (state.control != null)
|
||
|
|
{
|
||
|
|
var oldScale = state.control.scale;
|
||
|
|
var w = state.control.bounds.width / oldScale;
|
||
|
|
var h = state.control.bounds.height / oldScale;
|
||
|
|
var s = state.view.scale;
|
||
|
|
|
||
|
|
return new mxRectangle(state.x + state.width / 2 - w / 2 * s,
|
||
|
|
state.y + state.height + TreeNodeShape.prototype.segment * s - h / 2 * s,
|
||
|
|
w * s, h * s);
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Implements the click on a folding icon
|
||
|
|
graph.foldCells = function(collapse, recurse, cells)
|
||
|
|
{
|
||
|
|
this.model.beginUpdate();
|
||
|
|
try
|
||
|
|
{
|
||
|
|
toggleSubtree(this, cells[0], !collapse);
|
||
|
|
this.model.setCollapsed(cells[0], collapse);
|
||
|
|
|
||
|
|
// Executes the layout for the new graph since
|
||
|
|
// changes to visiblity and collapsed state do
|
||
|
|
// not trigger a layout in the current manager.
|
||
|
|
layout.execute(graph.getDefaultParent());
|
||
|
|
}
|
||
|
|
finally
|
||
|
|
{
|
||
|
|
this.model.endUpdate();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Gets the default parent for inserting new cells. This
|
||
|
|
// is normally the first child of the root (ie. layer 0).
|
||
|
|
var parent = graph.getDefaultParent();
|
||
|
|
|
||
|
|
// Adds the root vertex of the tree
|
||
|
|
graph.getModel().beginUpdate();
|
||
|
|
try
|
||
|
|
{
|
||
|
|
var w = graph.container.offsetWidth;
|
||
|
|
var root = graph.insertVertex(parent, 'treeRoot', 'Root', w/2 - 30, 20, 60, 40);
|
||
|
|
|
||
|
|
var v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', root, v1);
|
||
|
|
|
||
|
|
var v2 = graph.insertVertex(parent, 'v2', 'Child 2', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', root, v2);
|
||
|
|
|
||
|
|
var v3 = graph.insertVertex(parent, 'v3', 'Child 3', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', root, v3);
|
||
|
|
|
||
|
|
var v11 = graph.insertVertex(parent, 'v11', 'Child 1.1', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v1, v11);
|
||
|
|
|
||
|
|
var v12 = graph.insertVertex(parent, 'v12', 'Child 1.2', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v1, v12);
|
||
|
|
|
||
|
|
var v21 = graph.insertVertex(parent, 'v21', 'Child 2.1', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v2, v21);
|
||
|
|
|
||
|
|
var v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v2, v22);
|
||
|
|
|
||
|
|
var v221 = graph.insertVertex(parent, 'v221', 'Child 2.2.1', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v22, v221);
|
||
|
|
|
||
|
|
var v222 = graph.insertVertex(parent, 'v222', 'Child 2.2.2', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v22, v222);
|
||
|
|
|
||
|
|
var v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40);
|
||
|
|
graph.insertEdge(parent, null, '', v3, v31);
|
||
|
|
}
|
||
|
|
finally
|
||
|
|
{
|
||
|
|
// Updates the display
|
||
|
|
graph.getModel().endUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Updates the visible state of a given subtree taking into
|
||
|
|
// account the collapsed state of the traversed branches
|
||
|
|
function toggleSubtree(graph, cell, show)
|
||
|
|
{
|
||
|
|
show = (show != null) ? show : true;
|
||
|
|
var cells = [];
|
||
|
|
|
||
|
|
graph.traverse(cell, true, function(vertex)
|
||
|
|
{
|
||
|
|
if (vertex != cell)
|
||
|
|
{
|
||
|
|
cells.push(vertex);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Stops recursion if a collapsed cell is seen
|
||
|
|
return vertex == cell || !graph.isCellCollapsed(vertex);
|
||
|
|
});
|
||
|
|
|
||
|
|
graph.toggleCells(show, cells, true);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
|
||
|
|
<body onload="main();">
|
||
|
|
</body>
|
||
|
|
</html>
|