2012-05-21 20:32:26 +00:00
|
|
|
<!--
|
2013-04-04 11:51:15 +00:00
|
|
|
$Id: grapheditor.html,v 1.4 2012/05/11 07:55:25 gaudenz Exp $
|
2012-05-21 20:32:26 +00:00
|
|
|
Copyright (c) 2006-2010, JGraph Ltd
|
|
|
|
|
|
|
|
|
|
Graph Editor example for mxGraph. This example demonstrates using
|
|
|
|
|
mxGraph inside an ExtJs panel, and integrating tooltips, popupmenus,
|
|
|
|
|
toolbars and dialogs into mxGraph.
|
|
|
|
|
-->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Graph Editor</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css" />
|
|
|
|
|
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base.js"></script>
|
|
|
|
|
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- 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>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/grapheditor.css" />
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="js/GraphEditor.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/MainPanel.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/LibraryPanel.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/DiagramStore.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/DiagramPanel.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
// Enables guides
|
|
|
|
|
mxGraphHandler.prototype.guidesEnabled = true;
|
|
|
|
|
|
|
|
|
|
// Alt disables guides
|
|
|
|
|
mxGuide.prototype.isEnabledForEvent = function(evt)
|
|
|
|
|
{
|
|
|
|
|
return !mxEvent.isAltDown(evt);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Enables snapping waypoints to terminals
|
|
|
|
|
mxEdgeHandler.prototype.snapToTerminals = true;
|
|
|
|
|
|
|
|
|
|
// Replaces the built-in alert dialog with ExtJs message dialog (can't
|
|
|
|
|
// replace confirm and prompt as they are callback-based and we require
|
|
|
|
|
// a synchronous call with a return value).
|
|
|
|
|
// Ext.MessageBox.prompt('Prompt', message, null, null, null, defaultValue);
|
|
|
|
|
// Ext.MessageBox.confirm('Confirm', message);
|
|
|
|
|
mxUtils.alert = function(message)
|
|
|
|
|
{
|
|
|
|
|
Ext.example.msg(message, '', '');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/* To add a new accordion in the LibraryPanel.js, use the following
|
|
|
|
|
code:
|
|
|
|
|
|
|
|
|
|
this.myAccordion = this.root.appendChild(
|
|
|
|
|
new Ext.tree.TreeNode({
|
|
|
|
|
text:'Title',
|
|
|
|
|
cls:'feeds-node',
|
|
|
|
|
expanded:false
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
To add new vertices to this new accordion, you can create a new
|
|
|
|
|
method as follows (or use the panel parameter of
|
|
|
|
|
insertVertexTemplate) in GraphEditor.js:
|
|
|
|
|
|
|
|
|
|
function insertAccordionTemplate(panel, graph, label, icon, style, width, height)
|
|
|
|
|
{
|
|
|
|
|
var myAccordionNode = panel.myAccordion;
|
|
|
|
|
return insertVertexTemplate(panel, graph, label, icon, style, width, height, '', myAccordionNode);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
This can then be used to add new vertices as follows:
|
|
|
|
|
|
|
|
|
|
insertAccordionTemplate(library, graph, 'Title', '../../images/cloud.gif', 'ellipse;shape=cloud', 90, 70);
|
|
|
|
|
*/
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="main(); /* see js/GraphEditor.js */ ">
|
|
|
|
|
<div id="header"><div style="float:right;margin:5px;" class="x-small-editor"></div></div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
