| <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"> |
| 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']; |
| </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) |
| { |
| // Enables rotation handle |
| mxVertexHandler.prototype.rotationEnabled = true; |
| |
| // 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); |
| |
| // 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', '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) |
| { |
| var graph = editor.graph; |
| var scale = graph.view.scale; |
| var bounds = graph.getGraphBounds(); |
| |
| // New image export |
| var xmlDoc = mxUtils.createXmlDocument(); |
| var root = xmlDoc.createElement('output'); |
| xmlDoc.appendChild(root); |
| |
| // Renders graph. Offset will be multiplied with state's scale when painting state. |
| var xmlCanvas = new mxXmlCanvas2D(root); |
| xmlCanvas.translate(Math.floor(1 / scale - bounds.x), Math.floor(1 / scale - bounds.y)); |
| xmlCanvas.scale(scale); |
| |
| var imgExport = new mxImageExport(); |
| imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas); |
| |
| // Puts request data together |
| var w = Math.ceil(bounds.width * scale + 2); |
| var h = Math.ceil(bounds.height * scale + 2); |
| var xml = mxUtils.getXml(root); |
| |
| // 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(); |
| |
| // 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'); |
| }; |
| |
| 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> |
| <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> |
| <textarea id="xml" style="height:480px;width:684px;display:none;border-style:none;"></textarea> |
| </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> |