2012-05-21 20:32:26 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>mxDraw Example</title>
|
|
|
|
|
<link rel="stylesheet" href="css/wordpress.css" type="text/css" media="screen" />
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
#page { background: url("images/draw/drawbg.jpg") repeat-y top; border: none; }
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
mxBasePath = '../../src';
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/javascript" src="../../src/js/mxClient.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/mxApplication.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
// Program starts here. The document.onLoad executes the
|
|
|
|
|
// mxApplication constructor with a given configuration.
|
|
|
|
|
// In the config file, the mxEditor.onInit method is
|
|
|
|
|
// overridden to invoke this global function as the
|
|
|
|
|
// last step in the editor constructor.
|
|
|
|
|
function onInit(editor)
|
|
|
|
|
{
|
|
|
|
|
// Crisp rendering in SVG except for connectors, actors, cylinder, ellipses
|
|
|
|
|
mxShape.prototype.crisp = true;
|
|
|
|
|
mxActor.prototype.crisp = false;
|
|
|
|
|
mxCylinder.prototype.crisp = false;
|
|
|
|
|
mxEllipse.prototype.crisp = false;
|
|
|
|
|
mxDoubleEllipse.prototype.crisp = false;
|
|
|
|
|
mxConnector.prototype.crisp = false;
|
|
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
|
|
|
|
|
|
// Defines an icon for creating new connections in the connection handler.
|
|
|
|
|
// This will automatically disable the highlighting of the source vertex.
|
|
|
|
|
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
|
|
|
|
|
|
|
|
|
|
// Enables connections in the graph and disables
|
|
|
|
|
// reset of zoom and translate on root change
|
|
|
|
|
// (ie. switch between XML and graphical mode).
|
|
|
|
|
editor.graph.setConnectable(true);
|
|
|
|
|
|
|
|
|
|
// Clones the source if new connection has no target
|
|
|
|
|
editor.graph.connectionHandler.setCreateTarget(true);
|
|
|
|
|
|
|
|
|
|
// Displays information about the session
|
|
|
|
|
// in the status bar
|
|
|
|
|
editor.addListener(mxEvent.SESSION, function(editor, evt)
|
|
|
|
|
{
|
|
|
|
|
var session = evt.getProperty('session');
|
|
|
|
|
|
|
|
|
|
if (session.connected)
|
|
|
|
|
{
|
|
|
|
|
var tstamp = new Date().toLocaleString();
|
|
|
|
|
editor.setStatus(tstamp+':'+
|
|
|
|
|
' '+session.sent+' bytes sent, '+
|
|
|
|
|
' '+session.received+' bytes received');
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
editor.setStatus('Not connected');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Updates the title if the root changes
|
|
|
|
|
var title = document.getElementById('title');
|
|
|
|
|
|
|
|
|
|
if (title != null)
|
|
|
|
|
{
|
|
|
|
|
var f = function(sender)
|
|
|
|
|
{
|
|
|
|
|
title.innerHTML = 'mxDraw - ' + sender.getTitle();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
editor.addListener(mxEvent.ROOT, f);
|
|
|
|
|
f(editor);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Changes the zoom on mouseWheel events
|
|
|
|
|
mxEvent.addMouseWheelListener(function (evt, up)
|
|
|
|
|
{
|
|
|
|
|
if (!mxEvent.isConsumed(evt))
|
|
|
|
|
{
|
|
|
|
|
if (up)
|
|
|
|
|
{
|
|
|
|
|
editor.execute('zoomIn');
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
editor.execute('zoomOut');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
mxEvent.consume(evt);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Defines a new action to switch between
|
|
|
|
|
// XML and graphical display
|
|
|
|
|
var textNode = document.getElementById('xml');
|
|
|
|
|
var graphNode = editor.graph.container;
|
|
|
|
|
var sourceInput = document.getElementById('source');
|
|
|
|
|
sourceInput.checked = false;
|
|
|
|
|
|
|
|
|
|
var funct = function(editor)
|
|
|
|
|
{
|
|
|
|
|
if (sourceInput.checked)
|
|
|
|
|
{
|
|
|
|
|
graphNode.style.display = 'none';
|
|
|
|
|
textNode.style.display = 'inline';
|
|
|
|
|
|
|
|
|
|
var enc = new mxCodec();
|
|
|
|
|
var node = enc.encode(editor.graph.getModel());
|
|
|
|
|
|
|
|
|
|
textNode.value = mxUtils.getPrettyXml(node);
|
|
|
|
|
textNode.originalValue = textNode.value;
|
|
|
|
|
textNode.focus();
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
graphNode.style.display = '';
|
|
|
|
|
|
|
|
|
|
if (textNode.value != textNode.originalValue)
|
|
|
|
|
{
|
|
|
|
|
var doc = mxUtils.parseXml(textNode.value);
|
|
|
|
|
var dec = new mxCodec(doc);
|
|
|
|
|
dec.decode(doc.documentElement, editor.graph.getModel());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textNode.originalValue = null;
|
|
|
|
|
|
|
|
|
|
// Makes sure nothing is selected in IE
|
|
|
|
|
if (mxClient.IS_IE)
|
|
|
|
|
{
|
|
|
|
|
mxUtils.clearSelection();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textNode.style.display = 'none';
|
|
|
|
|
|
|
|
|
|
// Moves the focus back to the graph
|
|
|
|
|
textNode.blur();
|
|
|
|
|
editor.graph.container.focus();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
editor.addAction('switchView', funct);
|
|
|
|
|
|
|
|
|
|
// Client-side code for new image export
|
|
|
|
|
var newExportImage = function(editor)
|
|
|
|
|
{
|
|
|
|
|
var scale = 1;
|
|
|
|
|
var bounds = editor.graph.getGraphBounds();
|
|
|
|
|
|
|
|
|
|
// Creates XML node to hold output
|
|
|
|
|
var xmlDoc = mxUtils.createXmlDocument();
|
|
|
|
|
var root = xmlDoc.createElement('output');
|
|
|
|
|
xmlDoc.appendChild(root);
|
|
|
|
|
|
|
|
|
|
// Creates interface for rendering output
|
|
|
|
|
var xmlCanvas = new mxXmlCanvas2D(root);
|
|
|
|
|
xmlCanvas.scale(scale);
|
|
|
|
|
xmlCanvas.translate(Math.round(-bounds.x * scale), Math.round(-bounds.y * scale));
|
|
|
|
|
|
|
|
|
|
// Renders output to interface
|
|
|
|
|
var imgExport = new mxImageExport();
|
|
|
|
|
imgExport.drawState(editor.graph.getView().getState(editor.graph.model.root), xmlCanvas);
|
|
|
|
|
|
|
|
|
|
// Puts request data together
|
|
|
|
|
var filename = 'export.png';
|
|
|
|
|
var format = 'png';
|
|
|
|
|
var bg = '#FFFFFF';
|
|
|
|
|
var w = Math.round((bounds.width + 4) * scale);
|
|
|
|
|
var h = Math.round((bounds.height + 4) * scale);
|
|
|
|
|
var xml = mxUtils.getXml(root);
|
|
|
|
|
|
|
|
|
|
// Compression is currently not used in this example
|
|
|
|
|
// Requires base64.js and redeflate.js
|
|
|
|
|
// xml = encodeURIComponent(Base64.encode(RawDeflate.deflate(xml), true));
|
|
|
|
|
|
|
|
|
|
new mxXmlRequest('/New' + editor.urlImage.substring(1), 'filename=' + filename +
|
|
|
|
|
'&format=' + format + '&bg=' + bg + '&w=' + w + '&h=' + h + '&xml=' +
|
|
|
|
|
encodeURIComponent(xml)).simulate(document, '_blank');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
editor.addAction('newExportImage', newExportImage);
|
|
|
|
|
|
|
|
|
|
// Defines a new action to switch between
|
|
|
|
|
// XML and graphical display
|
|
|
|
|
mxEvent.addListener(sourceInput, 'click', function()
|
|
|
|
|
{
|
|
|
|
|
editor.execute('switchView');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Create select actions in page
|
|
|
|
|
var node = document.getElementById('mainActions');
|
|
|
|
|
var buttons = ['group', 'delete', 'undo', 'print'];
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < buttons.length; i++)
|
|
|
|
|
{
|
|
|
|
|
var button = document.createElement('button');
|
|
|
|
|
mxUtils.write(button, mxResources.get(buttons[i]));
|
|
|
|
|
|
|
|
|
|
var factory = function(name)
|
|
|
|
|
{
|
|
|
|
|
return function()
|
|
|
|
|
{
|
|
|
|
|
editor.execute(name);
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
mxEvent.addListener(button, 'click', factory(buttons[i]));
|
|
|
|
|
node.appendChild(button);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var select = document.createElement('select');
|
|
|
|
|
var option = document.createElement('option');
|
|
|
|
|
mxUtils.writeln(option, 'More Actions...');
|
|
|
|
|
select.appendChild(option);
|
|
|
|
|
|
|
|
|
|
var items = ['redo', 'ungroup', 'cut', 'copy', 'paste', 'show', 'exportImage', 'newExportImage'];
|
|
|
|
|
|
|
|
|
|
for (var i=0; i<items.length; i++)
|
|
|
|
|
{
|
|
|
|
|
var option = document.createElement('option');
|
|
|
|
|
mxUtils.writeln(option, mxResources.get(items[i]));
|
|
|
|
|
option.setAttribute('value', items[i]);
|
|
|
|
|
select.appendChild(option);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
mxEvent.addListener(select, 'change', function(evt)
|
|
|
|
|
{
|
|
|
|
|
if (select.selectedIndex > 0)
|
|
|
|
|
{
|
|
|
|
|
var option = select.options[select.selectedIndex];
|
|
|
|
|
select.selectedIndex = 0;
|
|
|
|
|
|
|
|
|
|
if (option.value != null)
|
|
|
|
|
{
|
|
|
|
|
editor.execute(option.value);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
node.appendChild(select);
|
|
|
|
|
|
|
|
|
|
// Create select actions in page
|
|
|
|
|
var node = document.getElementById('selectActions');
|
|
|
|
|
mxUtils.write(node, 'Select: ');
|
|
|
|
|
mxUtils.linkAction(node, 'All', editor, 'selectAll');
|
|
|
|
|
mxUtils.write(node, ', ');
|
|
|
|
|
mxUtils.linkAction(node, 'None', editor, 'selectNone');
|
|
|
|
|
mxUtils.write(node, ', ');
|
|
|
|
|
mxUtils.linkAction(node, 'Vertices', editor, 'selectVertices');
|
|
|
|
|
mxUtils.write(node, ', ');
|
|
|
|
|
mxUtils.linkAction(node, 'Edges', editor, 'selectEdges');
|
|
|
|
|
|
|
|
|
|
// Create select actions in page
|
|
|
|
|
var node = document.getElementById('zoomActions');
|
|
|
|
|
mxUtils.write(node, 'Zoom: ');
|
|
|
|
|
mxUtils.linkAction(node, 'In', editor, 'zoomIn');
|
|
|
|
|
mxUtils.write(node, ', ');
|
|
|
|
|
mxUtils.linkAction(node, 'Out', editor, 'zoomOut');
|
|
|
|
|
mxUtils.write(node, ', ');
|
|
|
|
|
mxUtils.linkAction(node, 'Actual', editor, 'actualSize');
|
|
|
|
|
mxUtils.write(node, ', ');
|
|
|
|
|
mxUtils.linkAction(node, 'Fit', editor, 'fit');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onbeforeunload = function() { return mxResources.get('changesLost'); };
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="new mxApplication('config/diagrameditor.xml');">
|
|
|
|
|
<div id="page">
|
|
|
|
|
<div id="header">
|
|
|
|
|
<div id="headerimg" style="overflow:hidden;">
|
|
|
|
|
<h1 id="title">mxDraw</h1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="mainActions"
|
|
|
|
|
style="width:100%;padding-top:8px;padding-left:24px;padding-bottom:8px;">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="selectActions" style="width:100%;padding-left:54px;padding-bottom:4px;">
|
|
|
|
|
</div>
|
|
|
|
|
<table border="0" width="730px">
|
|
|
|
|
<tr>
|
|
|
|
|
<td id="toolbar" style="width:16px;padding-left:20px;" valign="top">
|
|
|
|
|
<!-- Toolbar Here -->
|
|
|
|
|
</td>
|
|
|
|
|
<td valign="top" style="border-width:1px;border-style:solid;border-color:black;">
|
|
|
|
|
<div id="graph" style="position:relative;height:480px;width:684px;overflow:hidden;cursor:default;">
|
|
|
|
|
<!-- Graph Here -->
|
|
|
|
|
<center id="splash" style="padding-top:230px;">
|
|
|
|
|
<img src="images/loading.gif">
|
|
|
|
|
</center>
|
|
|
|
|
</div>
|
2012-12-18 13:09:38 +00:00
|
|
|
<textarea id="xml" style="height:480px;width:684px;display:none;border-style:none;"></textarea>
|
2012-05-21 20:32:26 +00:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
<span style="float:right;padding-right:36px;">
|
|
|
|
|
<input id="source" type="checkbox"/>Source
|
|
|
|
|
</span>
|
|
|
|
|
<div id="zoomActions" style="width:100%;padding-left:54px;padding-top:4px;">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="footer">
|
|
|
|
|
<p id="status">
|
|
|
|
|
<!-- Status Here -->Loading...
|
|
|
|
|
</p>
|
|
|
|
|
<br/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
