<!--
Copyright (c) 2006-2013, JGraph Ltd
Guides example for mxGraph. This example demonstrates the guides
feature which aligns the current selection to the existing vertices
in the graph. This feature is in RFC state. Creating a grid using
a canvas and installing a key handler for cursor keys is also
demonstrated here, as well as snapping waypoints to terminals.
-->
<html>
<head>
<title>Guides 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).
function main(container)
{
// Checks if the 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
{
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGraphHandler.prototype.useGuidesForEvent = function(me)
{
return !mxEvent.isAltDown(me.getEvent());
};
// Defines the guides to be red (default)
mxConstants.GUIDE_COLOR = '#FF0000';
// Defines the guides to be 1 pixel (default)
mxConstants.GUIDE_STROKEWIDTH = 1;
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setConnectable(true);
graph.gridSize = 30;
// Changes the default style for edges "in-place" and assigns
// an alternate edge style which is applied in mxGraph.flip
// when the user double clicks on the adjustment control point
// of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true.
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical';
// Enables rubberband selection
new mxRubberband(graph);
// 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();
var v1;
try
{
v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Handles cursor keys
var nudge = function(keyCode)
{
if (!graph.isSelectionEmpty())
{
var dx = 0;
var dy = 0;
if (keyCode == 37)
{
dx = -1;
}
else if (keyCode == 38)
{
dy = -1;
}
else if (keyCode == 39)
{
dx = 1;
}
else if (keyCode == 40)
{
dy = 1;
}
graph.moveCells(graph.getSelectionCells(), dx, dy);
}
};
// Transfer initial focus to graph container for keystroke handling
graph.container.focus();
// Handles keystroke events
var keyHandler = new mxKeyHandler(graph);
// Ignores enter keystroke. Remove this line if you want the
// enter keystroke to stop editing
keyHandler.enter = function() {};
keyHandler.bindKey(37, function()
{
nudge(37);
});
keyHandler.bindKey(38, function()
{
nudge(38);
});
keyHandler.bindKey(39, function()
{
nudge(39);
});
keyHandler.bindKey(40, function()
{
nudge(40);
});
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:801px;height:601px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>