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">
|
2013-10-22 11:05:54 +00:00
|
|
|
var mxBasePath = '../../src';
|
|
|
|
|
|
|
|
|
|
var urlParams = (function(url)
|
|
|
|
|
{
|
|
|
|
|
var result = new Object();
|
|
|
|
|
var params = window.location.search.slice(1).split('&');
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < params.length; i++)
|
|
|
|
|
{
|
|
|
|
|
idx = params[i].indexOf('=');
|
|
|
|
|
|
|
|
|
|
if (idx > 0)
|
|
|
|
|
{
|
|
|
|
|
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
})(window.location.href);
|
|
|
|
|
|
|
|
|
|
var mxLanguage = urlParams['lang'];
|
2012-05-21 20:32:26 +00:00
|
|
|
</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)
|
|
|
|
|
{
|
2013-05-23 16:14:48 +00:00
|
|
|
// Enables rotation handle
|
|
|
|
|
mxVertexHandler.prototype.rotationEnabled = true;
|
|
|
|
|
|
2012-05-21 20:32:26 +00:00
|
|
|
// 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);
|
2014-11-10 09:02:21 +00:00
|
|
|
|
2012-05-21 20:32:26 +00:00
|
|
|
// 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);
|
|
|
|
|
|
2013-10-22 11:05:54 +00:00
|
|
|
// Defines a new action to switch between
|
|
|
|
|
// XML and graphical display
|
|
|
|
|
mxEvent.addListener(sourceInput, 'click', function()
|
2012-05-21 20:32:26 +00:00
|
|
|
{
|
2013-10-22 11:05:54 +00:00
|
|
|
editor.execute('switchView');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Create select actions in page
|
|
|
|
|
var node = document.getElementById('mainActions');
|
|
|
|
|
var buttons = ['group', 'ungroup', 'cut', 'copy', 'paste', 'delete', 'undo', 'redo', 'print', 'show'];
|
|
|
|
|
|
|
|
|
|
// Only adds image and SVG export if backend is available
|
|
|
|
|
// NOTE: The old image export in mxEditor is not used, the urlImage is used for the new export.
|
|
|
|
|
if (editor.urlImage != null)
|
|
|
|
|
{
|
|
|
|
|
// Client-side code for image export
|
|
|
|
|
var exportImage = function(editor)
|
2013-09-03 20:34:07 +00:00
|
|
|
{
|
|
|
|
|
var graph = editor.graph;
|
|
|
|
|
var scale = graph.view.scale;
|
|
|
|
|
var bounds = graph.getGraphBounds();
|
|
|
|
|
|
2013-10-22 11:05:54 +00:00
|
|
|
// New image export
|
2013-09-03 20:34:07 +00:00
|
|
|
var xmlDoc = mxUtils.createXmlDocument();
|
|
|
|
|
var root = xmlDoc.createElement('output');
|
|
|
|
|
xmlDoc.appendChild(root);
|
|
|
|
|
|
2013-10-22 11:05:54 +00:00
|
|
|
// Renders graph. Offset will be multiplied with state's scale when painting state.
|
2013-09-03 20:34:07 +00:00
|
|
|
var xmlCanvas = new mxXmlCanvas2D(root);
|
2013-10-22 11:05:54 +00:00
|
|
|
xmlCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y));
|
|
|
|
|
xmlCanvas.scale(scale);
|
2013-09-03 20:34:07 +00:00
|
|
|
|
|
|
|
|
var imgExport = new mxImageExport();
|
2013-10-22 11:05:54 +00:00
|
|
|
imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
|
|
|
|
|
|
2013-09-03 20:34:07 +00:00
|
|
|
// Puts request data together
|
2013-10-22 11:05:54 +00:00
|
|
|
var w = Math.ceil(bounds.width * scale + 2);
|
|
|
|
|
var h = Math.ceil(bounds.height * scale + 2);
|
2013-09-03 20:34:07 +00:00
|
|
|
var xml = mxUtils.getXml(root);
|
2013-09-19 07:24:45 +00:00
|
|
|
|
2013-10-22 11:05:54 +00:00
|
|
|
// Requests image if request is valid
|
|
|
|
|
if (w > 0 && h > 0)
|
|
|
|
|
{
|
|
|
|
|
var name = 'export.png';
|
|
|
|
|
var format = 'png';
|
|
|
|
|
var bg = '&bg=#FFFFFF';
|
|
|
|
|
|
|
|
|
|
new mxXmlRequest(editor.urlImage, 'filename=' + name + '&format=' + format +
|
|
|
|
|
bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
|
|
|
|
|
simulate(document, '_blank');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
editor.addAction('exportImage', exportImage);
|
|
|
|
|
|
|
|
|
|
// Client-side code for SVG export
|
|
|
|
|
var exportSvg = function(editor)
|
|
|
|
|
{
|
|
|
|
|
var graph = editor.graph;
|
|
|
|
|
var scale = graph.view.scale;
|
|
|
|
|
var bounds = graph.getGraphBounds();
|
2012-05-21 20:32:26 +00:00
|
|
|
|
2013-10-22 11:05:54 +00:00
|
|
|
// Prepares SVG document that holds the output
|
|
|
|
|
var svgDoc = mxUtils.createXmlDocument();
|
|
|
|
|
var root = (svgDoc.createElementNS != null) ?
|
|
|
|
|
svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');
|
|
|
|
|
|
|
|
|
|
if (root.style != null)
|
|
|
|
|
{
|
|
|
|
|
root.style.backgroundColor = '#FFFFFF';
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
root.setAttribute('style', 'background-color:#FFFFFF');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (svgDoc.createElementNS == null)
|
|
|
|
|
{
|
|
|
|
|
root.setAttribute('xmlns', mxConstants.NS_SVG);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
root.setAttribute('width', Math.ceil(bounds.width * scale + 2) + 'px');
|
|
|
|
|
root.setAttribute('height', Math.ceil(bounds.height * scale + 2) + 'px');
|
|
|
|
|
root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
|
|
|
|
|
root.setAttribute('version', '1.1');
|
|
|
|
|
|
|
|
|
|
// Adds group for anti-aliasing via transform
|
|
|
|
|
var group = (svgDoc.createElementNS != null) ?
|
|
|
|
|
svgDoc.createElementNS(mxConstants.NS_SVG, 'g') : svgDoc.createElement('g');
|
|
|
|
|
group.setAttribute('transform', 'translate(0.5,0.5)');
|
|
|
|
|
root.appendChild(group);
|
|
|
|
|
svgDoc.appendChild(root);
|
|
|
|
|
|
|
|
|
|
// Renders graph. Offset will be multiplied with state's scale when painting state.
|
|
|
|
|
var svgCanvas = new mxSvgCanvas2D(group);
|
|
|
|
|
svgCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y));
|
|
|
|
|
svgCanvas.scale(scale);
|
|
|
|
|
|
|
|
|
|
var imgExport = new mxImageExport();
|
|
|
|
|
imgExport.drawState(graph.getView().getState(graph.model.root), svgCanvas);
|
|
|
|
|
|
|
|
|
|
var name = 'export.svg';
|
|
|
|
|
var xml = encodeURIComponent(mxUtils.getXml(root));
|
|
|
|
|
|
|
|
|
|
new mxXmlRequest(editor.urlEcho, 'filename=' + name + '&format=svg' + '&xml=' + xml).simulate(document, "_blank");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
editor.addAction('exportSvg', exportSvg);
|
|
|
|
|
|
|
|
|
|
buttons.push('exportImage');
|
|
|
|
|
buttons.push('exportSvg');
|
|
|
|
|
};
|
2012-05-21 20:32:26 +00:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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>
|
2016-09-07 12:29:15 +00:00
|
|
|
<body onload="mxApplication('config/diagrameditor.xml');">
|
2012-05-21 20:32:26 +00:00
|
|
|
<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>
|
