/** * Copyright (c) 2006-2012, JGraph Ltd */ /** * Editor constructor executed on page load. */ Editor = function(chromeless, themes, model, graph) { mxEventSource.call(this); this.chromeless = (chromeless != null) ? chromeless : this.chromeless; this.initStencilRegistry(); this.graph = graph || this.createGraph(themes, model); this.undoManager = this.createUndoManager(); this.status = ''; this.getOrCreateFilename = function() { return this.filename || mxResources.get('drawing', [Editor.pageCounter]) + '.xml'; }; this.getFilename = function() { return this.filename; }; // Sets the status and fires a statusChanged event this.setStatus = function(value) { this.status = value; this.fireEvent(new mxEventObject('statusChanged')); }; // Returns the current status this.getStatus = function() { return this.status; }; // Updates modified state if graph changes this.graphChangeListener = function(sender, eventObject) { var edit = (eventObject != null) ? eventObject.getProperty('edit') : null; if (edit == null || !edit.ignoreEdit) { this.setModified(true); } }; this.graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(this, function() { this.graphChangeListener.apply(this, arguments); })); // Sets persistent graph state defaults this.graph.resetViewOnRootChange = false; this.init(); }; /** * Counts open editor tabs (must be global for cross-window access) */ Editor.pageCounter = 0; // Cross-domain window access is not allowed in FF, so if we // were opened from another domain then this will fail. (function() { if (!mxClient.IS_FF) // https://drawio.atlassian.net/browse/DS-795 { try { var op = window; while (op.opener != null && typeof op.opener.Editor !== 'undefined' && !isNaN(op.opener.Editor.pageCounter)) { op = op.opener; } // Increments the counter in the first opener in the chain if (op != null) { op.Editor.pageCounter++; Editor.pageCounter = op.Editor.pageCounter; } } catch (e) { // ignore } } })(); /** * Specifies if local storage should be used (eg. on the iPad which has no filesystem) */ Editor.useLocalStorage = typeof(Storage) != 'undefined' && mxClient.IS_IOS; /** * Images below are for lightbox and embedding toolbars. */ Editor.helpImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC5BxTwAAAAH3RSTlMAlUF8boNQIE0LBgOgkGlHNSwqFIx/dGVUOjApmV9ezNACSAAAAIVJREFUGNNtjNsOgzAMQ5NeoVcKDAZs+//PXLKI8YKlWvaRU7jXuFpb9qsbdK05XILUiE8JHQox1Pv3OgFUzf1AGqWqUg+QBwLF0YAeegBlCNgRWOpB5vUfTCmeoHQ/wNdy0jLH/cM+b+wLTw4n/7ACEmHVVy8h6qy8V7MNcGowWpsNbvUFcGUEdSi1s/oAAAAASUVORK5CYII=' : IMAGE_PATH + '/help.png'; /** * Sets the default font size. */ Editor.checkmarkImage = (mxClient.IS_SVG) ? 'data:image/gif;base64,R0lGODlhFQAVAMQfAGxsbHx8fIqKioaGhvb29nJycvr6+sDAwJqamltbW5OTk+np6YGBgeTk5Ly8vJiYmP39/fLy8qWlpa6ursjIyOLi4vj4+N/f3+3t7fT09LCwsHZ2dubm5r6+vmZmZv///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEY4NTZERTQ5QUFBMTFFMUE5MTVDOTM5MUZGMTE3M0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEY4NTZERTU5QUFBMTFFMUE5MTVDOTM5MUZGMTE3M0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Rjg1NkRFMjlBQUExMUUxQTkxNUM5MzkxRkYxMTczRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Rjg1NkRFMzlBQUExMUUxQTkxNUM5MzkxRkYxMTczRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAB8ALAAAAAAVABUAAAVI4CeOZGmeaKqubKtylktSgCOLRyLd3+QJEJnh4VHcMoOfYQXQLBcBD4PA6ngGlIInEHEhPOANRkaIFhq8SuHCE1Hb8Lh8LgsBADs=' : IMAGE_PATH + '/checkmark.gif'; /** * Images below are for lightbox and embedding toolbars. */ Editor.maximizeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABXRSTlMA758vX1Pw3BoAAABJSURBVAjXY8AJQkODGBhUQ0MhbAUGBiYY24CBgRnGFmZgMISwgwwDGRhEhVVBbAVmEQYGRwMmBjIAQi/CTIRd6G5AuA3dzYQBAHj0EFdHkvV4AAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.zoomOutImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAElBMVEUAAAAAAAAsLCxxcXEhISFgYGChjTUxAAAAAXRSTlMAQObYZgAAAEdJREFUCNdjIAMwCQrB2YKCggJQJqMwA7MglK1owMBgqABVApITgLJZXFxgbIQ4Qj3CHIT5ggoIe5kgNkM1KSDYKBKqxPkDAPo5BAZBE54hAAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.zoomInImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAElBMVEUAAAAAAAAsLCwhISFxcXFgYGBavKaoAAAAAXRSTlMAQObYZgAAAElJREFUCNdjIAMwCQrB2YKCggJQJqMIA4sglK3owMzgqABVwsDMwCgAZTMbG8PYCHGEeoQ5CPMFFRD2MkFshmpSQLBRJFSJ8wcAEqcEM2uhl2MAAAAASUVORK5CYII='; /** * Specifies the image URL to be used for the transparent background. */ Editor.zoomFitImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAD1BMVEUAAAAAAAAwMDBwcHBgYGC1xl09AAAAAXRSTlMAQObYZgAAAEFJREFUCNdjIAMwCQrB2YKCggJQJqMwA7MglK1owMBgqABVApITwMdGqEeYgzBfUAFhLxPEZqgmBQQbRUKFOH8AAK5OA3lA+FFOAAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.layersImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAaVBMVEUAAAAgICAICAgdHR0PDw8WFhYICAgLCwsXFxcvLy8ODg4uLi4iIiIqKiokJCQYGBgKCgonJycFBQUCAgIqKiocHBwcHBwODg4eHh4cHBwnJycJCQkUFBQqKiojIyMuLi4ZGRkgICAEBATOWYXAAAAAGnRSTlMAD7+fnz8/H7/ff18/77+vr5+fn39/b28fH2xSoKsAAACQSURBVBjTrYxJEsMgDARZZMAY73sgCcn/HxnhKtnk7j6oRq0psfuoyndZ/SuODkHPLzfVT6KeyPePnJ7KrnkRjWMXTn4SMnN8mXe2SSM3ts8L/ZUxxrbAULSYJJULE0Iw9pjpenoICcgcX61mGgTgtCv9Be99pzCoDhNQWQnchD1mup5++CYGcoQexajZbfwAj/0MD8ZOaUgAAAAASUVORK5CYII='; /** * Specifies the image URL to be used for the transparent background. */ Editor.previousImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAh0lEQVQ4je3UsQnCUBCA4U8hpa1NsoEjpHQJS0dxADdwEMuMIJkgA1hYChbGQgMi+JC8q4L/AB/vDu7x74cWWEZhJU44RmA1zujR5GIbXF9YNrjD/Q0bDRY4fEBZ4P4LlgTnCbAf84pUM8/9hY08tMUtEoQ1LpEgrNBFglChFXR6Q6GfwwR6AGKJMF74Vtt3AAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.nextImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAi0lEQVQ4jeXUIQ7CUAwA0MeGxWI2yylwnALJUdBcgYvM7QYLmjOQIAkIPmJZghiIvypoUtX0tfnJL38X5ZfaEgUeUcManFBHgS0SLlhHggk3bCPBhCf2keCQR8wjwYTDp6YiZxJmOU1jGw7vGALescuBxsArNlOwd/CM1VSM/ut1qCIw+uOwiMJ+OF4CQzBCXm3hyAAAAABJRU5ErkJggg=='; /** * Specifies the image URL to be used for the transparent background. */ Editor.zoomOutLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+vTcKMM96GRBHwXxi0YaX1HLrKWhiHpWEOnOr52Vb2xKSDcT19PKv5l/Ngdk8+viAAABJklEQVQ4y4WT2XaDMAxEvWD2nSSUNEnTJN3r//+9Sj7ILAY6L0ijC4ONYVZRpo6cByrz2YKSUGorGTpz71lPVHvT+avoB5wIkU/mxk8veceSuNoLg44IzziXjvpih72wKQnm8yc2UoiP/LAd8jQfe2Xf4Pq+2EyYIvv9wbzHHCgwxDdlBtWZOdqDfTCVgqpygQpsZaojVAVc9UjQxnAJDIBhiQv84tq3gMQCAVTxVoSibXJf8tMuc7e1TB/DCmejBNg/w1Y3c+AM5vv4w7xM59/oXamrHaLVqPQ+OTCnmMZxgz0SdL5zji0/ld6j88qGa5KIiBB6WeJGKfUKwSMKLuXgvl1TW0tm5R9UQL/efSDYsnzxD8CinhBsTTdugJatKpJwf8v+ADb8QmvW7AeAAAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.zoomInLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+vTcKMM96GRBHwXxi0YaX1HLrKWhiHpWEOnOr52Vb2xKSDcT19PKv5l/Ngdk8+viAAABKElEQVQ4y4WT6WKCMBCENwkBwn2oFKvWqr3L+79es4EkQIDOH2d3Pxk2ABiJlB8JCXjqw4LikHVGLHTm3nM3UeVN5690GBBN0GwyV/3kkrUQR+WeKnREeKpzaXWd77CmJiXGfPIEI4V4yQ9TIW/ntlcMBe731Vts9w5TWG8F5j3mQI4hvrKpdGeYA7CX9qAcl650gVJartxRuhyHVghF8idQAIbFLvCLu28BsQEC6aKtCK6Pyb3JT7PmbmtNH8Ny56CotD/2qOs5cJbuffxgXmCib+xddVU5RNOhkvvkhTlFehzVWCOh3++MYElOhfdovaImnRYVmqDdsuhNp1QrBBE6uGC2+3ZNjGdg5B94oD+9uyVgWT79BwAxEBTWdOu3bWBVgsn/N/AHUD9IC01Oe40AAAAASUVORK5CYII='; /** * Specifies the image URL to be used for the transparent background. */ Editor.actualSizeLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA+vTcKMM96GRBHwXxi0YaX1HLrKWhiHpWEOnOr52Vb2xKSDcT19PKv5l/Ngdk8+viAAABIUlEQVQ4y4WT2XqDIBCFBxDc9yTWNEnTJN3r+79eGT4BEbXnaubMr8dBBaM450dCQp4LWFAascGIRd48eB4cNYE7f6XjgGiCFs5c+dml6CFN6j1V6IQIlHPpdV/usKcmJcV88gQTRXjLD9Mhb+fWq8YG9/uCmTCFjeeDeY85UGKIUGUuqzN42kv7oCouq9oHamlzVR1lVfpAIu1QVRiW+sAv7r4FpAYIZZVsRXB9TP5Dfpo1d1trCgzz1iiptH/sUbdz4CzN9+mLeXHn3+hdddd4RDegsrvzwZwSs2GLPRJidAqCLTlVwaMPqpYMWjTWBB2WRW86pVkhSKyDK2bdt2tmagZG4sBD/evdLQHLEvQfAOKRoLCmG1FAB6uKmby+gz+REDn7O5+EwQAAAABJRU5ErkJggg=='; /** * Specifies the image URL to be used for the transparent background. */ Editor.layersLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAmVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7///+bnZkkAAAAMnRSTlMABPr8ByiD88KsTi/rvJb272mjeUA1CuPe1M/KjVxYHxMP6KZ0S9nYzGRGGRaznpGIbzaGUf0AAAHESURBVDjLbZLZYoIwEEVDgLCjbKIgAlqXqt3m/z+uNwu1rcyDhjl3ktnYL7OY254C0VX3yWFZfzDrOClbbgKxi0YDHjwl4jbnRkXxJS/C1YP3DbBhD1n7Ex4uaAqdVDb3yJ/4J/3nJD2to/ngQz/DfUvzMp4JJ5sSCaF5oXmemgQDfDxzbi+Kq4sU+vNcuAmx94JtyOP2DD4Epz2asWSCz4Z/4fECxyNj9zC9xNLHcdPEO+awDKeSaUu0W4twZQiO2hYVisTR3RCtK/c1X6t4xMEpiGqXqVntEBLolkZZsKY4QtwH6jzq67dEHlJysB1aNOD3XT7n1UkasQN59L4yC2RELMDSeCRtz3yV22Ub3ozIUTknYx8JWqDdQxbUes98cR2kZtUSveF/bAhcedwEWmlxIkpZUy4XOCb6VBjjxHvbwo/1lBAHHi2JCr0NI570QhyHq/DhJoE2lLgyA4RVe6KmZ47O/3b86MCP0HWa73A8/C3SUc5Qc1ajt6fgpXJ+RGpMvDSchepZDOOQRcZVIKcK90x2D7etqtI+56+u6n3sPriO6nfphitR4+O2m3EbM7lh3me1FM1o+LMI887rN+s3/wZdTFlpNVJiOAAAAABJRU5ErkJggg=='; /** * Specifies the image URL to be used for the transparent background. */ Editor.closeLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAuvAIg/dDM/QlOeuFhj0S5s4vKgzjxJRQNiLSey0AAADNSURBVDjLfZLbEoMgDEQjRRRs1XqX///QNmOHJSnjPkHOGR7IEmeoGtJZstnwjqbRfIsmgEdtPCqe9Ynz7ZSc07rE2QiSc+qv8TvjRXA2PDUm3dpe82iJhOEUfxJJo3aCv+jKmRmH4lcCjCjeh9GWOdL/GZZkXH3PYYDrHBnfc4D/RVZf5sjoC1was+Y6HQxwaUxFvq/a0Pv343VCTxfBSRiB+ab3M3eiQZXmMNBJ3Y8pGRZtYQ7DgHMXJEdPLTaN/qBjzJOBc3nmNcbsA16bMR0oLqf+AAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.editLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAgJsrThgAAABcSURBVBjThc6xDcAgDATAd8MQTEPW8TRUmYCGnzLRYyOlIV+dZFtvkICTFGqiJEzAG0/Uje9oL+e5Vu4F5yUYJxxqGKhQZ0eBvmgwYQLQaARKD1hbiPyDR0QOeAC31EyNe5X/kAAAAABJRU5ErkJggg=='; /** * Specifies the image URL to be used for the transparent background. */ Editor.previousLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMA7fci493c0MW8uJ6CZks4MxQHEZL6ewAAAFZJREFUOMvdkskRgDAMA4lDwg2B7b9XOlge/KKvdsa25KFb5XlRvxXC/DNBEv8IFNjBgGdDgXtFgTyhwDXiQAUHCvwa4Uv6mR6UR+1led2mVonvl+tML45qCQNQLIx7AAAAAElFTkSuQmCC'; /** * Specifies the image URL to be used for the transparent background. */ Editor.nextLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMA7fci493c0MW8uJ6CZks4MxQHEZL6ewAAAFRJREFUOMvd0skRgCAQBVEFwQ0V7fxzNQP6wI05v6pZ/kyj1b7FNgik2gQzzLcAwiUAigHOTwDHK4A1CmB5BJANJG1hQ9qafYcqFlZP3IFc9eVGrR+iIgkDQRUXIAAAAABJRU5ErkJggg=='; // Editor inherits from mxEventSource mxUtils.extend(Editor, mxEventSource); /** * Stores initial state of mxClient.NO_FO. */ Editor.prototype.originalNoForeignObject = mxClient.NO_FO; /** * Specifies the image URL to be used for the transparent background. */ Editor.prototype.transparentImage = (mxClient.IS_SVG) ? 'data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7' : IMAGE_PATH + '/transparent.gif'; /** * Specifies if the canvas should be extended in all directions. Default is true. */ Editor.prototype.extendCanvas = true; /** * Specifies if the app should run in chromeless mode. Default is false. * This default is only used if the contructor argument is null. */ Editor.prototype.chromeless = false; /** * Specifies the order of OK/Cancel buttons in dialogs. Default is true. * Cancel first is used on Macs, Windows/Confluence uses cancel last. */ Editor.prototype.cancelFirst = true; /** * Specifies if the editor is enabled. Default is true. */ Editor.prototype.enabled = true; /** * Contains the name which was used for the last save. Default value is null. */ Editor.prototype.filename = null; /** * Contains the current modified state of the diagram. This is false for * new diagrams and after the diagram was saved. */ Editor.prototype.modified = false; /** * Specifies if the diagram should be saved automatically if possible. Default * is true. */ Editor.prototype.autosave = true; /** * Specifies the top spacing for the initial page view. Default is 0. */ Editor.prototype.initialTopSpacing = 0; /** * Specifies the app name. Default is document.title. */ Editor.prototype.appName = document.title; /** * */ Editor.prototype.editBlankUrl = window.location.protocol + '//' + window.location.host + '/?client=1'; /** * */ Editor.prototype.editBlankFallbackUrl = window.location.protocol + '//' + window.location.host + '/?create=drawdata&splash=0'; /** * Initializes the environment. */ Editor.prototype.init = function() { }; /** * Sets the XML node for the current diagram. */ Editor.prototype.setAutosave = function(value) { this.autosave = value; this.fireEvent(new mxEventObject('autosaveChanged')); }; /** * */ Editor.prototype.getEditBlankUrl = function(params, fallback) { return ((fallback) ? this.editBlankFallbackUrl : this.editBlankUrl) + params; } /** * */ Editor.prototype.editAsNew = function(xml, title) { var p = (title != null) ? '&title=' + encodeURIComponent(title) : ''; if (typeof window.postMessage !== 'undefined' && (document.documentMode == null || document.documentMode >= 10)) { var wnd = null; var receive = mxUtils.bind(this, function(evt) { if (evt.data == 'ready' && evt.source == wnd) { wnd.postMessage(xml, '*'); mxEvent.removeListener(window, 'message', receive); } }); mxEvent.addListener(window, 'message', receive); wnd = window.open(this.getEditBlankUrl(p, false)); } else { // Data is pulled from global variable after tab loads window.drawdata = xml; window.open(this.getEditBlankUrl(p, true)); } }; /** * Sets the XML node for the current diagram. */ Editor.prototype.createGraph = function(themes, model) { var graph = new Graph(null, model, null, null, themes); graph.transparentBackground = false; // Opens all links in a new window while editing if (!this.chromeless) { graph.isBlankLink = function(href) { return !this.isExternalProtocol(href); }; } return graph; }; /** * Sets the XML node for the current diagram. */ Editor.prototype.resetGraph = function() { this.graph.gridEnabled = !this.chromeless || urlParams['grid'] == '1'; this.graph.graphHandler.guidesEnabled = true; this.graph.setTooltips(true); this.graph.setConnectable(true); this.graph.foldingEnabled = true; this.graph.scrollbars = this.graph.defaultScrollbars; this.graph.pageVisible = this.graph.defaultPageVisible; this.graph.pageBreaksVisible = this.graph.pageVisible; this.graph.preferPageSize = this.graph.pageBreaksVisible; this.graph.background = this.graph.defaultGraphBackground; this.graph.pageScale = mxGraph.prototype.pageScale; this.graph.pageFormat = mxGraph.prototype.pageFormat; this.updateGraphComponents(); this.graph.view.setScale(1); }; /** * Sets the XML node for the current diagram. */ Editor.prototype.readGraphState = function(node) { this.graph.gridEnabled = node.getAttribute('grid') != '0' && (!this.chromeless || urlParams['grid'] == '1'); this.graph.gridSize = parseFloat(node.getAttribute('gridSize')) || mxGraph.prototype.gridSize; this.graph.graphHandler.guidesEnabled = node.getAttribute('guides') != '0'; this.graph.setTooltips(node.getAttribute('tooltips') != '0'); this.graph.setConnectable(node.getAttribute('connect') != '0'); this.graph.connectionArrowsEnabled = node.getAttribute('arrows') != '0'; this.graph.foldingEnabled = node.getAttribute('fold') != '0'; if (this.chromeless && this.graph.foldingEnabled) { this.graph.foldingEnabled = urlParams['nav'] == '1'; this.graph.cellRenderer.forceControlClickHandler = this.graph.foldingEnabled; } var ps = node.getAttribute('pageScale'); if (ps != null) { this.graph.pageScale = ps; } else { this.graph.pageScale = mxGraph.prototype.pageScale; } if (!this.graph.lightbox) { var pv = node.getAttribute('page'); if (pv != null) { this.graph.pageVisible = (pv != '0'); } else { this.graph.pageVisible = this.graph.defaultPageVisible; } } else { this.graph.pageVisible = false; } this.graph.pageBreaksVisible = this.graph.pageVisible; this.graph.preferPageSize = this.graph.pageBreaksVisible; var pw = node.getAttribute('pageWidth'); var ph = node.getAttribute('pageHeight'); if (pw != null && ph != null) { this.graph.pageFormat = new mxRectangle(0, 0, parseFloat(pw), parseFloat(ph)); } // Loads the persistent state settings var bg = node.getAttribute('background'); if (bg != null && bg.length > 0) { this.graph.background = bg; } else { this.graph.background = this.graph.defaultGraphBackground; } }; /** * Sets the XML node for the current diagram. */ Editor.prototype.setGraphXml = function(node) { if (node != null) { var dec = new mxCodec(node.ownerDocument); if (node.nodeName == 'mxGraphModel') { this.graph.model.beginUpdate(); try { this.graph.model.clear(); this.graph.view.scale = 1; this.readGraphState(node); this.updateGraphComponents(); dec.decode(node, this.graph.getModel()); } finally { this.graph.model.endUpdate(); } this.fireEvent(new mxEventObject('resetGraphView')); } else if (node.nodeName == 'root') { this.resetGraph(); // Workaround for invalid XML output in Firefox 20 due to bug in mxUtils.getXml var wrapper = dec.document.createElement('mxGraphModel'); wrapper.appendChild(node); dec.decode(wrapper, this.graph.getModel()); this.updateGraphComponents(); this.fireEvent(new mxEventObject('resetGraphView')); } else { throw { message: mxResources.get('cannotOpenFile'), node: node, toString: function() { return this.message; } }; } } else { this.resetGraph(); this.graph.model.clear(); this.fireEvent(new mxEventObject('resetGraphView')); } }; /** * Returns the XML node that represents the current diagram. */ Editor.prototype.getGraphXml = function(ignoreSelection) { ignoreSelection = (ignoreSelection != null) ? ignoreSelection : true; var node = null; if (ignoreSelection) { var enc = new mxCodec(mxUtils.createXmlDocument()); node = enc.encode(this.graph.getModel()); } else { node = this.graph.encodeCells(mxUtils.sortCells(this.graph.model.getTopmostCells( this.graph.getSelectionCells()))); } if (this.graph.view.translate.x != 0 || this.graph.view.translate.y != 0) { node.setAttribute('dx', Math.round(this.graph.view.translate.x * 100) / 100); node.setAttribute('dy', Math.round(this.graph.view.translate.y * 100) / 100); } node.setAttribute('grid', (this.graph.isGridEnabled()) ? '1' : '0'); node.setAttribute('gridSize', this.graph.gridSize); node.setAttribute('guides', (this.graph.graphHandler.guidesEnabled) ? '1' : '0'); node.setAttribute('tooltips', (this.graph.tooltipHandler.isEnabled()) ? '1' : '0'); node.setAttribute('connect', (this.graph.connectionHandler.isEnabled()) ? '1' : '0'); node.setAttribute('arrows', (this.graph.connectionArrowsEnabled) ? '1' : '0'); node.setAttribute('fold', (this.graph.foldingEnabled) ? '1' : '0'); node.setAttribute('page', (this.graph.pageVisible) ? '1' : '0'); node.setAttribute('pageScale', this.graph.pageScale); node.setAttribute('pageWidth', this.graph.pageFormat.width); node.setAttribute('pageHeight', this.graph.pageFormat.height); if (this.graph.background != null) { node.setAttribute('background', this.graph.background); } return node; }; /** * Keeps the graph container in sync with the persistent graph state */ Editor.prototype.updateGraphComponents = function() { var graph = this.graph; if (graph.container != null) { graph.view.validateBackground(); graph.container.style.overflow = (graph.scrollbars) ? 'auto' : 'hidden'; this.fireEvent(new mxEventObject('updateGraphComponents')); } }; /** * Sets the modified flag. */ Editor.prototype.setModified = function(value) { this.modified = value; }; /** * Sets the filename. */ Editor.prototype.setFilename = function(value) { this.filename = value; }; /** * Creates and returns a new undo manager. */ Editor.prototype.createUndoManager = function() { var graph = this.graph; var undoMgr = new mxUndoManager(); this.undoListener = function(sender, evt) { undoMgr.undoableEditHappened(evt.getProperty('edit')); }; // Installs the command history var listener = mxUtils.bind(this, function(sender, evt) { this.undoListener.apply(this, arguments); }); graph.getModel().addListener(mxEvent.UNDO, listener); graph.getView().addListener(mxEvent.UNDO, listener); // Keeps the selection in sync with the history var undoHandler = function(sender, evt) { var cand = graph.getSelectionCellsForChanges(evt.getProperty('edit').changes); var model = graph.getModel(); var cells = []; for (var i = 0; i < cand.length; i++) { if ((model.isVertex(cand[i]) || model.isEdge(cand[i])) && graph.view.getState(cand[i]) != null) { cells.push(cand[i]); } } graph.setSelectionCells(cells); }; undoMgr.addListener(mxEvent.UNDO, undoHandler); undoMgr.addListener(mxEvent.REDO, undoHandler); return undoMgr; }; /** * Adds basic stencil set (no namespace). */ Editor.prototype.initStencilRegistry = function() { }; /** * Creates and returns a new undo manager. */ Editor.prototype.destroy = function() { if (this.graph != null) { this.graph.destroy(); this.graph = null; } }; /** * Class for asynchronously opening a new window and loading a file at the same * time. This acts as a bridge between the open dialog and the new editor. */ OpenFile = function(done) { this.producer = null; this.consumer = null; this.done = done; }; /** * Registers the editor from the new window. */ OpenFile.prototype.setConsumer = function(value) { this.consumer = value; this.execute(); }; /** * Sets the data from the loaded file. */ OpenFile.prototype.setData = function(value, filename) { this.data = value; this.filename = filename; this.execute(); }; /** * Displays an error message. */ OpenFile.prototype.error = function(msg) { this.cancel(true); mxUtils.alert(msg); }; /** * Consumes the data. */ OpenFile.prototype.execute = function() { if (this.consumer != null && this.data != null) { this.cancel(false); this.consumer(this.data, this.filename); } }; /** * Cancels the operation. */ OpenFile.prototype.cancel = function(cancel) { if (this.done != null) { this.done((cancel != null) ? cancel : true); } }; /** * Static overrides */ (function() { // Uses HTML for background pages (to support grid background image) mxGraphView.prototype.validateBackgroundPage = function() { var graph = this.graph; if (graph.container != null && !graph.transparentBackground) { if (graph.pageVisible) { var bounds = this.getBackgroundPageBounds(); if (this.backgroundPageShape == null) { // Finds first element in graph container var firstChild = graph.container.firstChild; while (firstChild != null && firstChild.nodeType != mxConstants.NODETYPE_ELEMENT) { firstChild = firstChild.nextSibling; } if (firstChild != null) { this.backgroundPageShape = this.createBackgroundPageShape(bounds); this.backgroundPageShape.scale = 1; // Shadow filter causes problems in outline window in quirks mode. IE8 standards // also has known rendering issues inside mxWindow but not using shadow is worse. this.backgroundPageShape.isShadow = !mxClient.IS_QUIRKS; this.backgroundPageShape.dialect = mxConstants.DIALECT_STRICTHTML; this.backgroundPageShape.init(graph.container); // Required for the browser to render the background page in correct order firstChild.style.position = 'absolute'; graph.container.insertBefore(this.backgroundPageShape.node, firstChild); this.backgroundPageShape.redraw(); this.backgroundPageShape.node.className = 'geBackgroundPage'; // Adds listener for double click handling on background mxEvent.addListener(this.backgroundPageShape.node, 'dblclick', mxUtils.bind(this, function(evt) { graph.dblClick(evt); }) ); // Adds basic listeners for graph event dispatching outside of the // container and finishing the handling of a single gesture mxEvent.addGestureListeners(this.backgroundPageShape.node, mxUtils.bind(this, function(evt) { graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt)); }), mxUtils.bind(this, function(evt) { // Hides the tooltip if mouse is outside container if (graph.tooltipHandler != null && graph.tooltipHandler.isHideOnHover()) { graph.tooltipHandler.hide(); } if (graph.isMouseDown && !mxEvent.isConsumed(evt)) { graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt)); } }), mxUtils.bind(this, function(evt) { graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt)); }) ); } } else { this.backgroundPageShape.scale = 1; this.backgroundPageShape.bounds = bounds; this.backgroundPageShape.redraw(); } } else if (this.backgroundPageShape != null) { this.backgroundPageShape.destroy(); this.backgroundPageShape = null; } this.validateBackgroundStyles(); } }; // Updates the CSS of the background to draw the grid mxGraphView.prototype.validateBackgroundStyles = function() { var graph = this.graph; var color = (graph.background == null || graph.background == mxConstants.NONE) ? '#ffffff' : graph.background; var gridColor = (this.gridColor != color.toLowerCase()) ? this.gridColor : '#ffffff'; var image = 'none'; var position = ''; if (graph.isGridEnabled()) { var phase = 10; if (mxClient.IS_SVG) { // Generates the SVG required for drawing the dynamic grid image = unescape(encodeURIComponent(this.createSvgGrid(gridColor))); image = (window.btoa) ? btoa(image) : Base64.encode(image, true); image = 'url(' + 'data:image/svg+xml;base64,' + image + ')' phase = graph.gridSize * this.scale * this.gridSteps; } else { // Fallback to grid wallpaper with fixed size image = 'url(' + this.gridImage + ')'; } var x0 = 0; var y0 = 0; if (graph.view.backgroundPageShape != null) { var bds = this.getBackgroundPageBounds(); x0 = 1 + bds.x; y0 = 1 + bds.y; } // Computes the offset to maintain origin for grid position = -Math.round(phase - mxUtils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' + -Math.round(phase - mxUtils.mod(this.translate.y * this.scale - y0, phase)) + 'px'; } var canvas = graph.view.canvas; if (canvas.ownerSVGElement != null) { canvas = canvas.ownerSVGElement; } if (graph.view.backgroundPageShape != null) { graph.view.backgroundPageShape.node.style.backgroundPosition = position; graph.view.backgroundPageShape.node.style.backgroundImage = image; graph.view.backgroundPageShape.node.style.backgroundColor = color; graph.container.className = 'geDiagramContainer geDiagramBackdrop'; canvas.style.backgroundImage = 'none'; canvas.style.backgroundColor = ''; } else { graph.container.className = 'geDiagramContainer'; canvas.style.backgroundPosition = position; canvas.style.backgroundColor = color; canvas.style.backgroundImage = image; } }; // Returns the SVG required for painting the background grid. mxGraphView.prototype.createSvgGrid = function(color) { var tmp = this.graph.gridSize * this.scale; while (tmp < this.minGridSize) { tmp *= 2; } var tmp2 = this.gridSteps * tmp; // Small grid lines var d = []; for (var i = 1; i < this.gridSteps; i++) { var tmp3 = i * tmp; d.push('M 0 ' + tmp3 + ' L ' + tmp2 + ' ' + tmp3 + ' M ' + tmp3 + ' 0 L ' + tmp3 + ' ' + tmp2); } // KNOWN: Rounding errors for certain scales (eg. 144%, 121% in Chrome, FF and Safari). Workaround // in Chrome is to use 100% for the svg size, but this results in blurred grid for large diagrams. var size = tmp2; var svg = '' + '' + '' + '' + ''; return svg; }; // Adds panning for the grid with no page view and disabled scrollbars var mxGraphPanGraph = mxGraph.prototype.panGraph; mxGraph.prototype.panGraph = function(dx, dy) { mxGraphPanGraph.apply(this, arguments); if (this.shiftPreview1 != null) { var canvas = this.view.canvas; if (canvas.ownerSVGElement != null) { canvas = canvas.ownerSVGElement; } var phase = this.gridSize * this.view.scale * this.view.gridSteps; var position = -Math.round(phase - mxUtils.mod(this.view.translate.x * this.view.scale + dx, phase)) + 'px ' + -Math.round(phase - mxUtils.mod(this.view.translate.y * this.view.scale + dy, phase)) + 'px'; canvas.style.backgroundPosition = position; } }; // Draws page breaks only within the page mxGraph.prototype.updatePageBreaks = function(visible, width, height) { var scale = this.view.scale; var tr = this.view.translate; var fmt = this.pageFormat; var ps = scale * this.pageScale; var bounds2 = this.view.getBackgroundPageBounds(); width = bounds2.width; height = bounds2.height; var bounds = new mxRectangle(scale * tr.x, scale * tr.y, fmt.width * ps, fmt.height * ps); // Does not show page breaks if the scale is too small visible = visible && Math.min(bounds.width, bounds.height) > this.minPageBreakDist; var horizontalCount = (visible) ? Math.ceil(height / bounds.height) - 1 : 0; var verticalCount = (visible) ? Math.ceil(width / bounds.width) - 1 : 0; var right = bounds2.x + width; var bottom = bounds2.y + height; if (this.horizontalPageBreaks == null && horizontalCount > 0) { this.horizontalPageBreaks = []; } if (this.verticalPageBreaks == null && verticalCount > 0) { this.verticalPageBreaks = []; } var drawPageBreaks = mxUtils.bind(this, function(breaks) { if (breaks != null) { var count = (breaks == this.horizontalPageBreaks) ? horizontalCount : verticalCount; for (var i = 0; i <= count; i++) { var pts = (breaks == this.horizontalPageBreaks) ? [new mxPoint(Math.round(bounds2.x), Math.round(bounds2.y + (i + 1) * bounds.height)), new mxPoint(Math.round(right), Math.round(bounds2.y + (i + 1) * bounds.height))] : [new mxPoint(Math.round(bounds2.x + (i + 1) * bounds.width), Math.round(bounds2.y)), new mxPoint(Math.round(bounds2.x + (i + 1) * bounds.width), Math.round(bottom))]; if (breaks[i] != null) { breaks[i].points = pts; breaks[i].redraw(); } else { var pageBreak = new mxPolyline(pts, this.pageBreakColor); pageBreak.dialect = this.dialect; pageBreak.isDashed = this.pageBreakDashed; pageBreak.pointerEvents = false; pageBreak.init(this.view.backgroundPane); pageBreak.redraw(); breaks[i] = pageBreak; } } for (var i = count; i < breaks.length; i++) { breaks[i].destroy(); } breaks.splice(count, breaks.length - count); } }); drawPageBreaks(this.horizontalPageBreaks); drawPageBreaks(this.verticalPageBreaks); }; // Disables removing relative children from parents var mxGraphHandlerShouldRemoveCellsFromParent = mxGraphHandler.prototype.shouldRemoveCellsFromParent; mxGraphHandler.prototype.shouldRemoveCellsFromParent = function(parent, cells, evt) { for (var i = 0; i < cells.length; i++) { if (this.graph.getModel().isVertex(cells[i])) { var geo = this.graph.getCellGeometry(cells[i]); if (geo != null && geo.relative) { return false; } } } return mxGraphHandlerShouldRemoveCellsFromParent.apply(this, arguments); }; // Overrides to ignore hotspot only for target terminal var mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker; mxConnectionHandler.prototype.createMarker = function() { var marker = mxConnectionHandlerCreateMarker.apply(this, arguments); marker.intersects = mxUtils.bind(this, function(state, evt) { if (this.isConnecting()) { return true; } return mxCellMarker.prototype.intersects.apply(marker, arguments); }); return marker; }; // Creates background page shape mxGraphView.prototype.createBackgroundPageShape = function(bounds) { return new mxRectangleShape(bounds, '#ffffff', '#cacaca'); }; // Fits the number of background pages to the graph mxGraphView.prototype.getBackgroundPageBounds = function() { var gb = this.getGraphBounds(); // Computes unscaled, untranslated graph bounds var x = (gb.width > 0) ? gb.x / this.scale - this.translate.x : 0; var y = (gb.height > 0) ? gb.y / this.scale - this.translate.y : 0; var w = gb.width / this.scale; var h = gb.height / this.scale; var fmt = this.graph.pageFormat; var ps = this.graph.pageScale; var pw = fmt.width * ps; var ph = fmt.height * ps; var x0 = Math.floor(Math.min(0, x) / pw); var y0 = Math.floor(Math.min(0, y) / ph); var xe = Math.ceil(Math.max(1, x + w) / pw); var ye = Math.ceil(Math.max(1, y + h) / ph); var rows = xe - x0; var cols = ye - y0; var bounds = new mxRectangle(this.scale * (this.translate.x + x0 * pw), this.scale * (this.translate.y + y0 * ph), this.scale * rows * pw, this.scale * cols * ph); return bounds; }; // Add panning for background page in VML var graphPanGraph = mxGraph.prototype.panGraph; mxGraph.prototype.panGraph = function(dx, dy) { graphPanGraph.apply(this, arguments); if ((this.dialect != mxConstants.DIALECT_SVG && this.view.backgroundPageShape != null) && (!this.useScrollbarsForPanning || !mxUtils.hasScrollbars(this.container))) { this.view.backgroundPageShape.node.style.marginLeft = dx + 'px'; this.view.backgroundPageShape.node.style.marginTop = dy + 'px'; } }; /** * Consumes click events for disabled menu items. */ var mxPopupMenuAddItem = mxPopupMenu.prototype.addItem; mxPopupMenu.prototype.addItem = function(title, image, funct, parent, iconCls, enabled) { var result = mxPopupMenuAddItem.apply(this, arguments); if (enabled != null && !enabled) { mxEvent.addListener(result, 'mousedown', function(evt) { mxEvent.consume(evt); }); } return result; }; // Selects ancestors before descendants var graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent; mxGraphHandler.prototype.getInitialCellForEvent = function(me) { var model = this.graph.getModel(); var psel = model.getParent(this.graph.getSelectionCell()); var cell = graphHandlerGetInitialCellForEvent.apply(this, arguments); var parent = model.getParent(cell); if (psel == null || (psel != cell && psel != parent)) { while (!this.graph.isCellSelected(cell) && !this.graph.isCellSelected(parent) && model.isVertex(parent) && !this.graph.isContainer(parent)) { cell = parent; parent = this.graph.getModel().getParent(cell); } } return cell; }; // Selection is delayed to mouseup if ancestor is selected var graphHandlerIsDelayedSelection = mxGraphHandler.prototype.isDelayedSelection; mxGraphHandler.prototype.isDelayedSelection = function(cell, me) { var result = graphHandlerIsDelayedSelection.apply(this, arguments); if (!result) { var model = this.graph.getModel(); var parent = model.getParent(cell); while (parent != null) { // Inconsistency for unselected parent swimlane is intended for easier moving // of stack layouts where the container title section is too far away if (this.graph.isCellSelected(parent) && model.isVertex(parent)) { result = true; break; } parent = model.getParent(parent); } } return result; }; // Delayed selection of parent group mxGraphHandler.prototype.selectDelayed = function(me) { if (!this.graph.popupMenuHandler.isPopupTrigger(me)) { var cell = me.getCell(); if (cell == null) { cell = this.cell; } // Selects folded cell for hit on folding icon var state = this.graph.view.getState(cell) if (state != null && me.isSource(state.control)) { this.graph.selectCellForEvent(cell, me.getEvent()); } else { var model = this.graph.getModel(); var parent = model.getParent(cell); while (!this.graph.isCellSelected(parent) && model.isVertex(parent)) { cell = parent; parent = model.getParent(cell); } this.graph.selectCellForEvent(cell, me.getEvent()); } } }; // Returns last selected ancestor mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) { var cell = me.getCell(); var model = this.graph.getModel(); var parent = model.getParent(cell); while (model.isVertex(parent) && !this.graph.isContainer(parent)) { if (this.graph.isCellSelected(parent)) { cell = parent; } parent = model.getParent(parent); } return cell; }; })();