247 lines
7.2 KiB
HTML
247 lines
7.2 KiB
HTML
|
<!--
|
||
|
|
$Id: dynamicloading.html,v 1.11 2011-04-28 15:31:10 gaudenz Exp $
|
||
|
|
Copyright (c) 2006-2010, JGraph Ltd
|
||
|
|
|
||
|
|
Dynamic loading example for mxGraph. This example demonstrates loading
|
||
|
|
graph model data dynamically to limit the number of cells in the model.
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Dynamic loading 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>
|
||
|
|
|
||
|
|
<!-- 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).
|
||
|
|
|
||
|
|
// Global variable to make sure each cell in a response has
|
||
|
|
// a unique ID throughout the complete life of the program,
|
||
|
|
// in a real-life setup each cell should have an external
|
||
|
|
// ID on the business object or else the cell ID should be
|
||
|
|
// globally unique for the lifetime of the graph model.
|
||
|
|
var requestId = 0;
|
||
|
|
|
||
|
|
function main(container)
|
||
|
|
{
|
||
|
|
// 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
|
||
|
|
{
|
||
|
|
// Creates the graph inside the given container
|
||
|
|
var graph = new mxGraph(container);
|
||
|
|
|
||
|
|
// Disables all built-in interactions
|
||
|
|
graph.setEnabled(false);
|
||
|
|
|
||
|
|
// Handles clicks on cells
|
||
|
|
graph.addListener(mxEvent.CLICK, function(sender, evt)
|
||
|
|
{
|
||
|
|
var cell = evt.getProperty('cell');
|
||
|
|
|
||
|
|
if (cell != null)
|
||
|
|
{
|
||
|
|
load(graph, cell);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Changes the default vertex style in-place
|
||
|
|
var style = graph.getStylesheet().getDefaultVertexStyle();
|
||
|
|
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
|
||
|
|
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
|
||
|
|
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||
|
|
|
||
|
|
// Gets the default parent for inserting new cells. This
|
||
|
|
// is normally the first child of the root (ie. layer 0).
|
||
|
|
var parent = graph.getDefaultParent();
|
||
|
|
|
||
|
|
var cx = graph.container.scrollWidth / 2;
|
||
|
|
var cy = graph.container.scrollHeight / 2;
|
||
|
|
|
||
|
|
var cell = graph.insertVertex(parent, '0-0', '0-0', cx - 20, cy - 15, 40, 30);
|
||
|
|
|
||
|
|
// Animates the changes in the graph model
|
||
|
|
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt)
|
||
|
|
{
|
||
|
|
var changes = evt.getProperty('edit').changes;
|
||
|
|
mxEffects.animateChanges(graph, changes);
|
||
|
|
});
|
||
|
|
|
||
|
|
load(graph, cell);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Loads the links for the given cell into the given graph
|
||
|
|
// by requesting the respective data in the server-side
|
||
|
|
// (implemented for this demo using the server-function)
|
||
|
|
function load(graph, cell)
|
||
|
|
{
|
||
|
|
if (graph.getModel().isVertex(cell))
|
||
|
|
{
|
||
|
|
var cx = graph.container.scrollWidth / 2;
|
||
|
|
var cy = graph.container.scrollHeight / 2;
|
||
|
|
|
||
|
|
// 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 cells to the model in a single step
|
||
|
|
graph.getModel().beginUpdate();
|
||
|
|
try
|
||
|
|
{
|
||
|
|
var xml = server(cell.id);
|
||
|
|
var doc = mxUtils.parseXml(xml);
|
||
|
|
var dec = new mxCodec(doc);
|
||
|
|
var model = dec.decode(doc.documentElement);
|
||
|
|
|
||
|
|
// Removes all cells which are not in the response
|
||
|
|
for (var key in graph.getModel().cells)
|
||
|
|
{
|
||
|
|
var tmp = graph.getModel().getCell(key);
|
||
|
|
|
||
|
|
if (tmp != cell &&
|
||
|
|
graph.getModel().isVertex(tmp))
|
||
|
|
{
|
||
|
|
graph.removeCells([tmp]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Merges the response model with the client model
|
||
|
|
graph.getModel().mergeChildren(model.getRoot().getChildAt(0), parent);
|
||
|
|
|
||
|
|
// Moves the given cell to the center
|
||
|
|
var geo = graph.getModel().getGeometry(cell);
|
||
|
|
|
||
|
|
if (geo != null)
|
||
|
|
{
|
||
|
|
geo = geo.clone();
|
||
|
|
geo.x = cx - geo.width / 2;
|
||
|
|
geo.y = cy - geo.height / 2;
|
||
|
|
|
||
|
|
graph.getModel().setGeometry(cell, geo);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Creates a list of the new vertices, if there is more
|
||
|
|
// than the center vertex which might have existed
|
||
|
|
// previously, then this needs to be changed to analyze
|
||
|
|
// the target model before calling mergeChildren above
|
||
|
|
var vertices = [];
|
||
|
|
|
||
|
|
for (var key in graph.getModel().cells)
|
||
|
|
{
|
||
|
|
var tmp = graph.getModel().getCell(key);
|
||
|
|
|
||
|
|
if (tmp != cell &&
|
||
|
|
model.isVertex(tmp))
|
||
|
|
{
|
||
|
|
vertices.push(tmp);
|
||
|
|
|
||
|
|
// Changes the initial location "in-place"
|
||
|
|
// to get a nice animation effect from the
|
||
|
|
// center to the radius of the circle
|
||
|
|
var geo = model.getGeometry(tmp);
|
||
|
|
|
||
|
|
if (geo != null)
|
||
|
|
{
|
||
|
|
geo.x = cx - geo.width / 2;
|
||
|
|
geo.y = cy - geo.height / 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Arranges the response in a circle
|
||
|
|
var cellCount = vertices.length;
|
||
|
|
var phi = 2 * Math.PI / cellCount;
|
||
|
|
var r = Math.min(graph.container.scrollWidth / 4,
|
||
|
|
graph.container.scrollHeight / 4);
|
||
|
|
|
||
|
|
for (var i = 0; i < cellCount; i++)
|
||
|
|
{
|
||
|
|
var geo = graph.getModel().getGeometry(vertices[i]);
|
||
|
|
|
||
|
|
if (geo != null)
|
||
|
|
{
|
||
|
|
geo = geo.clone();
|
||
|
|
geo.x += r * Math.sin(i * phi);
|
||
|
|
geo.y += r * Math.cos(i * phi);
|
||
|
|
|
||
|
|
graph.getModel().setGeometry(vertices[i], geo);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
finally
|
||
|
|
{
|
||
|
|
// Updates the display
|
||
|
|
graph.getModel().endUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Simulates the existence of a server that can crawl the
|
||
|
|
// big graph with a certain depth and create a graph model
|
||
|
|
// for the traversed cells, which is then sent to the client
|
||
|
|
function server(cellId)
|
||
|
|
{
|
||
|
|
// Increments the request ID as a prefix for the cell IDs
|
||
|
|
requestId++;
|
||
|
|
|
||
|
|
// Creates a local graph with no display
|
||
|
|
var graph = new mxGraph();
|
||
|
|
|
||
|
|
// 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 cells to the model in a single step
|
||
|
|
graph.getModel().beginUpdate();
|
||
|
|
try
|
||
|
|
{
|
||
|
|
var v0 = graph.insertVertex(parent, cellId, 'Dummy', 0, 0, 40, 30);
|
||
|
|
var cellCount = parseInt(Math.random() * 16) + 4;
|
||
|
|
|
||
|
|
// Creates the random links and cells for the response
|
||
|
|
for (var i = 0; i < cellCount; i++)
|
||
|
|
{
|
||
|
|
var id = requestId + '-' + i;
|
||
|
|
var v = graph.insertVertex(parent, id, id, 0, 0, 40, 30);
|
||
|
|
var e = graph.insertEdge(parent, null, 'Link ' + i, v0, v);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
finally
|
||
|
|
{
|
||
|
|
// Updates the display
|
||
|
|
graph.getModel().endUpdate();
|
||
|
|
}
|
||
|
|
|
||
|
|
var enc = new mxCodec();
|
||
|
|
var node = enc.encode(graph.getModel());
|
||
|
|
|
||
|
|
return mxUtils.getXml(node);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<!-- Page passes the container for the graph to the grogram -->
|
||
|
|
<body onload="main(document.getElementById('graphContainer'))">
|
||
|
|
|
||
|
|
<!-- Creates a container for the graph with a grid wallpaper. Make sure to define the position
|
||
|
|
and overflow attributes! See comments on the adding of the size-listener on line 54 ff! -->
|
||
|
|
<div id="graphContainer"
|
||
|
|
style="overflow:visible;width:100%;height:100%;background:url('editors/images/grid.gif');">
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|