drawio-offline
Version:
diagrams.net desktop
874 lines (781 loc) • 239 kB
JavaScript
/**
* Copyright (c) 2006-2017, JGraph Ltd
* Copyright (c) 2006-2017, Gaudenz Alder
*/
(function()
{
if (typeof html4 !== 'undefined')
{
/**
* Enables paste from Lucidchart
*/
html4.ATTRIBS['span::data-lucid-content'] = 0;
html4.ATTRIBS['span::data-lucid-type'] = 0;
/**
* Enables custom fonts in labels.
*/
html4.ATTRIBS['font::data-font-src'] = 0;
}
/**
* Specifies the app name. Default is document.title.
*/
Editor.prototype.appName = 'diagrams.net';
/**
* Known file types.
*/
Editor.prototype.diagramFileTypes = [
{description: 'diagramXmlDesc', extension: 'drawio', mimeType: 'text/xml'},
{description: 'diagramPngDesc', extension: 'png', mimeType: 'image/png'},
{description: 'diagramSvgDesc', extension: 'svg', mimeType: 'image/svg'},
{description: 'diagramHtmlDesc', extension: 'html', mimeType: 'text/html'},
{description: 'diagramXmlDesc', extension: 'xml', mimeType: 'text/xml'}];
/**
* Known file types.
*/
Editor.prototype.libraryFileTypes = [{description: 'Library (.drawiolib, .xml)', extensions: ['drawiolib', 'xml']}];
/**
* Additional help text for special file extensions.
*/
Editor.prototype.fileExtensions = [
{ext: 'html', title: 'filetypeHtml'},
{ext: 'png', title: 'filetypePng'},
{ext: 'svg', title: 'filetypeSvg'}];
/**
*
*/
Editor.styles = [{},
{commonStyle: {fontColor: '#5C5C5C', strokeColor: '#006658', fillColor: '#21C0A5'}},
{commonStyle: {fontColor: '#095C86', strokeColor: '#AF45ED', fillColor: '#F694C1'},
edgeStyle: {strokeColor: '#60E696'}},
{commonStyle: {fontColor: '#46495D', strokeColor: '#788AA3', fillColor: '#B2C9AB'}},
{commonStyle: {fontColor: '#5AA9E6', strokeColor: '#FF6392', fillColor: '#FFE45E'}},
{commonStyle: {fontColor: '#1D3557', strokeColor: '#457B9D', fillColor: '#A8DADC'},
graph: {background: '#F1FAEE'}},
{commonStyle: {fontColor: '#393C56', strokeColor: '#E07A5F', fillColor: '#F2CC8F'},
graph: {background: '#F4F1DE', gridColor: '#D4D0C0'}},
{commonStyle: {fontColor: '#143642', strokeColor: '#0F8B8D', fillColor: '#FAE5C7'},
edgeStyle: {strokeColor: '#A8201A'},
graph: {background: '#DAD2D8', gridColor: '#ABA4A9'}},
{commonStyle: {fontColor: '#FEFAE0', strokeColor: '#DDA15E', fillColor: '#BC6C25'},
graph: {background: '#283618', gridColor: '#48632C'}},
{commonStyle: {fontColor: '#E4FDE1', strokeColor: '#028090', fillColor: '#F45B69'},
graph: {background: '#114B5F', gridColor: '#0B3240'}},
{},
{vertexStyle: {strokeColor: '#D0CEE2', fillColor: '#FAD9D5'},
edgeStyle: {strokeColor: '#09555B'},
commonStyle: {fontColor: '#1A1A1A'}},
{vertexStyle: {strokeColor: '#BAC8D3', fillColor: '#09555B', fontColor: '#EEEEEE'},
edgeStyle: {strokeColor: '#0B4D6A'}},
{vertexStyle: {strokeColor: '#D0CEE2', fillColor: '#5D7F99'},
edgeStyle: {strokeColor: '#736CA8'},
commonStyle: {fontColor: '#1A1A1A'}},
{vertexStyle: {strokeColor: '#FFFFFF', fillColor: '#182E3E', fontColor: '#FFFFFF'},
edgeStyle: {strokeColor: '#23445D'},
graph: {background: '#FCE7CD', gridColor: '#CFBDA8'}},
{vertexStyle: {strokeColor: '#FFFFFF', fillColor: '#F08E81'},
edgeStyle: {strokeColor: '#182E3E'},
commonStyle: {fontColor: '#1A1A1A'},
graph: {background: '#B0E3E6', gridColor: '#87AEB0'}},
{vertexStyle: {strokeColor: '#909090', fillColor: '#F5AB50'},
edgeStyle: {strokeColor: '#182E3E'},
commonStyle: {fontColor: '#1A1A1A'},
graph: {background: '#EEEEEE'}},
{vertexStyle: {strokeColor: '#EEEEEE', fillColor: '#56517E', fontColor: '#FFFFFF'},
edgeStyle: {strokeColor: '#182E3E'},
graph: {background: '#FAD9D5', gridColor: '#BFA6A3'}},
{vertexStyle: {strokeColor: '#BAC8D3', fillColor: '#B1DDF0', fontColor: '#182E3E'},
edgeStyle: {strokeColor: '#EEEEEE', fontColor: '#FFFFFF'},
graph: {background: '#09555B', gridColor: '#13B4C2'}},
{vertexStyle: {fillColor: '#EEEEEE', fontColor: '#1A1A1A'},
edgeStyle: {fontColor: '#FFFFFF'},
commonStyle: {strokeColor: '#FFFFFF'},
graph: {background: '#182E3E', gridColor: '#4D94C7'}}
];
/**
*
*/
Editor.saveImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTkgMTJ2N0g1di03SDN2N2MwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0ydi03aC0yem0tNiAuNjdsMi41OS0yLjU4TDE3IDExLjVsLTUgNS01LTUgMS40MS0xLjQxTDExIDEyLjY3VjNoMnoiLz48L3N2Zz4=';
/**
* Used in the GraphViewer lightbox.
*/
Editor.closeImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/delete.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAApVBMVEUAAAD////k5OT///8AAAB1dXXMzMz9/f39/f37+/v5+fn+/v7///9iYmJaWlqFhYWnp6ejo6OHh4f////////////////7+/v5+fnx8fH///8AAAD///8bGxv7+/v5+fkoKCghISFDQ0MYGBjh4eHY2Njb29tQUFBvb29HR0c/Pz82NjYrKyu/v78SEhLu7u7s7OzV1dVVVVU7OzsVFRXAv78QEBBzqehMAAAAG3RSTlMAA/7p/vz5xZlrTiPL/v78+/v7+OXd2TYQDs8L70ZbAAABKUlEQVQoz3VS13LCMBBUXHChd8iukDslQChJ/v/TchaG4cXS+OSb1c7trU7V60OpdRz2ZtNZL4zXNlcN8BEtSG6+NxIXkeRPoBuQ1cjvZ31/VJFB10ISli6diYfH8iYO3WUNCcNlB0gTrXOtkxTo0O1aKKiBBMhhv2MNBQKoiA5wxlZo0JDzD3AYKbWacyj3fs01wxey0pyEP+R8pWKWXoqtIZ0DDg5pbki9krEKOa6LVDQsdoXEsi46Zqh69KFz7B1u7Hb2yDV8firXDKBlZ4UFiswKGRhXTS93/ECK7yxnJ3+S3y/ThpO+cfSD017nqa18aasabU0/t7d+tk0/1oMEJ1NaD67iwdF68OabFSLn+eHb0+vjy+uk8br9fdrftH0O2menfd7+AQfYM/lNjoDHAAAAAElFTkSuQmCC';
/**
*
*/
Editor.plusImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/plus.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDdCMTdENjVCOEM4MTFFNDlCRjVBNDdCODU5NjNBNUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDdCMTdENjZCOEM4MTFFNDlCRjVBNDdCODU5NjNBNUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowN0IxN0Q2M0I4QzgxMUU0OUJGNUE0N0I4NTk2M0E1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowN0IxN0Q2NEI4QzgxMUU0OUJGNUE0N0I4NTk2M0E1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtjrjmgAAAAtSURBVHjaYvz//z8DMigvLwcLdHZ2MiKLMzEQCaivkLGsrOw/dU0cAr4GCDAARQsQbTFrv10AAAAASUVORK5CYII=';
/**
*
*/
Editor.spinImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/spin.gif' : 'data:image/gif;base64,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';
/**
*
*/
Editor.globeImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTEuOTkgMkM2LjQ3IDIgMiA2LjQ4IDIgMTJzNC40NyAxMCA5Ljk5IDEwQzE3LjUyIDIyIDIyIDE3LjUyIDIyIDEyUzE3LjUyIDIgMTEuOTkgMnptNi45MyA2aC0yLjk1Yy0uMzItMS4yNS0uNzgtMi40NS0xLjM4LTMuNTYgMS44NC42MyAzLjM3IDEuOTEgNC4zMyAzLjU2ek0xMiA0LjA0Yy44MyAxLjIgMS40OCAyLjUzIDEuOTEgMy45NmgtMy44MmMuNDMtMS40MyAxLjA4LTIuNzYgMS45MS0zLjk2ek00LjI2IDE0QzQuMSAxMy4zNiA0IDEyLjY5IDQgMTJzLjEtMS4zNi4yNi0yaDMuMzhjLS4wOC42Ni0uMTQgMS4zMi0uMTQgMiAwIC42OC4wNiAxLjM0LjE0IDJINC4yNnptLjgyIDJoMi45NWMuMzIgMS4yNS43OCAyLjQ1IDEuMzggMy41Ni0xLjg0LS42My0zLjM3LTEuOS00LjMzLTMuNTZ6bTIuOTUtOEg1LjA4Yy45Ni0xLjY2IDIuNDktMi45MyA0LjMzLTMuNTZDOC44MSA1LjU1IDguMzUgNi43NSA4LjAzIDh6TTEyIDE5Ljk2Yy0uODMtMS4yLTEuNDgtMi41My0xLjkxLTMuOTZoMy44MmMtLjQzIDEuNDMtMS4wOCAyLjc2LTEuOTEgMy45NnpNMTQuMzQgMTRIOS42NmMtLjA5LS42Ni0uMTYtMS4zMi0uMTYtMiAwLS42OC4wNy0xLjM1LjE2LTJoNC42OGMuMDkuNjUuMTYgMS4zMi4xNiAyIDAgLjY4LS4wNyAxLjM0LS4xNiAyem0uMjUgNS41NmMuNi0xLjExIDEuMDYtMi4zMSAxLjM4LTMuNTZoMi45NWMtLjk2IDEuNjUtMi40OSAyLjkzLTQuMzMgMy41NnpNMTYuMzYgMTRjLjA4LS42Ni4xNC0xLjMyLjE0LTIgMC0uNjgtLjA2LTEuMzQtLjE0LTJoMy4zOGMuMTYuNjQuMjYgMS4zMS4yNiAycy0uMSAxLjM2LS4yNiAyaC0zLjM4eiIvPjwvc3ZnPg==';
/**
*
*/
Editor.commentImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEuOTkgNGMwLTEuMS0uODktMi0xLjk5LTJINGMtMS4xIDAtMiAuOS0yIDJ2MTJjMCAxLjEuOSAyIDIgMmgxNGw0IDQtLjAxLTE4ek0xOCAxNEg2di0yaDEydjJ6bTAtM0g2VjloMTJ2MnptMC0zSDZWNmgxMnYyeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=';
/**
*
*/
Editor.commentImageInverted = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABLElEQVRYR+2Wvy4FQRjFf4dINAq9XqtSaVRqXArPINEodUqlhxC5/pU6nYdQSHQeQTRHNtmVuXuXrIxv1k1sN5vMOb85c75kxMCfBvZnCsD2ErAGzAfAvUt6THUnAGwfAWfAQoB5I3kh6aBZfALYXgGeg80b31VJT9UiBRgB48CTp9Lbku7aAPvAZSGAHUm3swEgKWtUbbsj1f4JDA4AbGb24iErgUzzr7bvSrrpVcKgK5ghgKAO9E/gvwNBJRxJuu41BUEd+BFARA3+JsAWcB9x3A7NzgSqt+ALsFwAYhqgMrW9Ub8J14G5QJBugAhD2yfAaUt7T9LVxBhGmDeato/rZJtfZQHq600hygPUEIfAOTAMQALxWrQD7X7ZXpT0VqyE3xU868n9G5PzASPvpiHavBAUAAAAAElFTkSuQmCC';
/**
*
*/
Editor.userImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTJjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0em0wIDJjLTIuNjcgMC04IDEuMzQtOCA0djJoMTZ2LTJjMC0yLjY2LTUuMzMtNC04LTR6Ii8+PC9zdmc+';
/**
*
*/
Editor.shareImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggMTYuMDhjLS43NiAwLTEuNDQuMy0xLjk2Ljc3TDguOTEgMTIuN2MuMDUtLjIzLjA5LS40Ni4wOS0uN3MtLjA0LS40Ny0uMDktLjdsNy4wNS00LjExYy41NC41IDEuMjUuODEgMi4wNC44MSAxLjY2IDAgMy0xLjM0IDMtM3MtMS4zNC0zLTMtMy0zIDEuMzQtMyAzYzAgLjI0LjA0LjQ3LjA5LjdMOC4wNCA5LjgxQzcuNSA5LjMxIDYuNzkgOSA2IDljLTEuNjYgMC0zIDEuMzQtMyAzczEuMzQgMyAzIDNjLjc5IDAgMS41LS4zMSAyLjA0LS44MWw3LjEyIDQuMTZjLS4wNS4yMS0uMDguNDMtLjA4LjY1IDAgMS42MSAxLjMxIDIuOTIgMi45MiAyLjkyIDEuNjEgMCAyLjkyLTEuMzEgMi45Mi0yLjkycy0xLjMxLTIuOTItMi45Mi0yLjkyeiIvPjwvc3ZnPg==';
/**
*
*/
Editor.syncImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgNFYxTDggNWw0IDRWNmMzLjMxIDAgNiAyLjY5IDYgNiAwIDEuMDEtLjI1IDEuOTctLjcgMi44bDEuNDYgMS40NkMxOS41NCAxNS4wMyAyMCAxMy41NyAyMCAxMmMwLTQuNDItMy41OC04LTgtOHptMCAxNGMtMy4zMSAwLTYtMi42OS02LTYgMC0xLjAxLjI1LTEuOTcuNy0yLjhMNS4yNCA3Ljc0QzQuNDYgOC45NyA0IDEwLjQzIDQgMTJjMCA0LjQyIDMuNTggOCA4IDh2M2w0LTQtNC00djN6Ii8+PC9zdmc+';
/**
*
*/
Editor.syncDisabledImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgNi4zNVY0LjI2Yy0uOC4yMS0xLjU1LjU0LTIuMjMuOTZsMS40NiAxLjQ2Yy4yNS0uMTIuNS0uMjQuNzctLjMzem0tNy4xNC0uOTRsMi4zNiAyLjM2QzQuNDUgOC45OSA0IDEwLjQ0IDQgMTJjMCAyLjIxLjkxIDQuMiAyLjM2IDUuNjRMNCAyMGg2di02bC0yLjI0IDIuMjRDNi42OCAxNS4xNSA2IDEzLjY2IDYgMTJjMC0xIC4yNS0xLjk0LjY4LTIuNzdsOC4wOCA4LjA4Yy0uMjUuMTMtLjUuMjUtLjc3LjM0djIuMDljLjgtLjIxIDEuNTUtLjU0IDIuMjMtLjk2bDIuMzYgMi4zNiAxLjI3LTEuMjdMNC4xNCA0LjE0IDIuODYgNS40MXpNMjAgNGgtNnY2bDIuMjQtMi4yNEMxNy4zMiA4Ljg1IDE4IDEwLjM0IDE4IDEyYzAgMS0uMjUgMS45NC0uNjggMi43N2wxLjQ2IDEuNDZDMTkuNTUgMTUuMDEgMjAgMTMuNTYgMjAgMTJjMC0yLjIxLS45MS00LjItMi4zNi01LjY0TDIwIDR6Ii8+PC9zdmc+';
/**
*
*/
Editor.syncProblemImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyAxMmMwIDIuMjEuOTEgNC4yIDIuMzYgNS42NEwzIDIwaDZ2LTZsLTIuMjQgMi4yNEM1LjY4IDE1LjE1IDUgMTMuNjYgNSAxMmMwLTIuNjEgMS42Ny00LjgzIDQtNS42NVY0LjI2QzUuNTUgNS4xNSAzIDguMjcgMyAxMnptOCA1aDJ2LTJoLTJ2MnpNMjEgNGgtNnY2bDIuMjQtMi4yNEMxOC4zMiA4Ljg1IDE5IDEwLjM0IDE5IDEyYzAgMi42MS0xLjY3IDQuODMtNCA1LjY1djIuMDljMy40NS0uODkgNi00LjAxIDYtNy43NCAwLTIuMjEtLjkxLTQuMi0yLjM2LTUuNjRMMjEgNHptLTEwIDloMlY3aC0ydjZ6Ii8+PC9zdmc+';
/**
* Used in the GraphViewer lightbox.
*/
Editor.tweetImage = IMAGE_PATH + '/tweet.png';
/**
* Used in the GraphViewer lightbox.
*/
Editor.facebookImage = IMAGE_PATH + '/facebook.png';
/**
* Blank 1x1 pixel transparent PNG image.
*/
Editor.blankImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
/**
* Blank 1x1 pixel transparent PNG image.
*/
Editor.hiResImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA+CAMAAACLMWy1AAAAh1BMVEUAAABMTExERERBQUFBQUFFRUVAQEBCQkJAQEA6OjpDQ0NKSkpBQUFBQUFERERERERBQUFCQkJCQkJCQkJJSUlBQUFCQkJDQ0NDQ0NCQkJDQ0NBQUFBQUFCQkJBQUFCQkJCQkJDQ0NCQkJHR0dBQUFCQkJCQkJAQEBCQkJDQ0NAQEBERERCQkIk1hS2AAAAKnRSTlMAAjj96BL7PgQFRwfu3TYazKuVjRXl1V1DPCn1uLGjnWNVIgy9hU40eGqPkM38AAACG0lEQVRYw+2X63KbMBCFzwZblgGDceN74muatpLe//m6MHV3gHGFAv2RjM94MAbxzdnVsQbBDKwH8AH8MDAyafzjqYeyOG04XE7RS8nIRDXg6BlT+rA0nmtAPh+NQRDxIASIMG44rAMrGunBgHwy3uUldxggIStGKp2f+DQc2O4h4eQsX3O2IFB/oEbsjOKbStnjAEA+zJ0ylZTbgvoDn8xNyn6Dbj5Kd4GsNpABa6duQPfSdEj88TgMAhKuCWjAkgmFXPLnsD0pWd3OFGdrMugQII/eOMPEiGOzqPMIeWrcSoMCg71W1pXBPvCP+gS/OdXqQ3uW23+93XGWLl/OaBb805bNcBPoEIcVJsnHzcxpZH86u5KZ9gDby5dQCcnKqdbke4ItI4Tzd7IW9hZQt4EO6GG9b9sYuuK9Wwn8TIr2xKbF2+3Nhr+qxChJ/AI6pIfCu4z4Zowp4ZUNihz79vewzctnHDwTvQO/hCdFBzrUGDOPn2Y/F8YKT4oOATLvlhOznzmBSdFBJWtc58y7r+UVFOCQczy3wpN6pegDqHtsCPTGvH9JuTO0Dyg8icldYPk+RB6g8Aofj4m2EKBvtTmUPD9xDd1pPcSReV2U5iD/ik2yrngtvvqBfPzOvKiDTKTsCdoHZJ7pLLffgTwlJ5vJdtJV2/jiAYaLvLGhMAEDO5QcDg2M/jOw/8Zn+K3ZwJvHT7ZffgC/NvA3zcybTeIfE4EAAAAASUVORK5CYII=' : IMAGE_PATH + '/img-hi-res.png';
/**
* Blank 1x1 pixel transparent PNG image.
*/
Editor.loResImage = (mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA+CAMAAACLMWy1AAAAS1BMVEVAQEAAAAA1NTVBQUFDQ0NDQ0NFRUVERERBQUFBQUFBQUFAQEBBQUFBQUFCQkJCQkJCQkJBQUFCQkJDQ0NDQ0NCQkJCQkJCQkJGRkb5/XqTAAAAGXRSTlP+AAWODlASCsesX+Lc2LyWe3pwa1tCPjohjSJfoAAAAI1JREFUWMPt1MkKhTAMRuG0anvneXr/J71nUypKcdqI/N8yhLMKMZE1CahnClDQzMPB44ED3EgeCubgDWnWQMHpwTtKwTe+UHD4sJ94wbUEHHFGhILlYDeSnsQeabeCgsPBgB0MOZZ9oGA5GJFiJSfUULAfjLjARrhCwX7wh2YCDwVbwZkUBKqFFJRN+wOcwSgR2sREcgAAAABJRU5ErkJggg==' : IMAGE_PATH + '/img-lo-res.png';
/**
* Only needed in browsers with SVG support for export via lightbox toolbar.
*/
Editor.cameraLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAA/BJREFUWAnFl0uIjWEYx885buPSuGwmSYwtwsY1ikKSNYNclmQnadgrZSPlsnBLSlaGBdNYKY0Vdi4L4zYzIqxGxmXG//d+7//0+uY7nWMiT/2/53mf+3v7vnNKpf9M5UbrDw8Pj4m+wzmeT1FBUS6Xf+YNox6reMONukijMXUTM3NmI75PyXcJPwRWg5kS7xysDLNmfEUxpx2rceNE50IlYjyRklcLf0prY+x4BTqfmx3ZUHQaO9ISGngYq38V/1EH+ECPa+QaK1u1kVBQirDMChiS3CTeIkwWvghtwhKBpZ8g1CO2B99FynVU/KowSRgQ3mlrBsVZ1awmQlS0SGbfXglfBPbdRGMm5O8RXg2P835pDCvzWjghTHETcLpZLHwS8kTCtBEK1SN83Egam8YxyVZqc+Do5qkwS+gT9grNwkUBG6cbsG/gs3BTuC/0ChCxq4QtwgzBMdwUZBPyN4Ftfi4sYPZHktbOSRlIuutRP5jYj0ueZp88xyYcS/zZoiLyQT1IA/cTj7eSlwnrhI+JnkQbCwo2Sx/2M7VJt17wdhVtgxvrpoFnAuSAbJQ97biZAlKxBfD9wgOhV+BgIR/AZtJ4kwD5PGSj7OmmekjWEy0oAQHAS3+KpBpzXqYK3UItopHpSRMno2N+cm7gDYnfRCcr3QBqriMHLJDkeyhFfiG5aVbK+8rhtP9M6QcIEJHX5Fp9NMAyQlYiu+OOJNlODCIXyka/P23bncTdiC7OydC1+v1Bsb+5r84DK8S3Rdmf5cRUFW3bXtWUSt1Rdk6G4SyJV2o1YId+vNUxr+x5yCJiapFtcxQzLjrxboGcMxvFJwEOKnLwjIbkx/sdSmeSaUY++SwTAxV+4DJT7RVwkbk46gNCsifIItuy0e9PF33Cb4homhN5YRyzL5q5V2VNkv98kqgoGTo3YF9CnMM5Y5rItFfvBSi9JulVXOgI+VwIntkt+SaZ6weQfcovJf7zpTfl86P/wAF7Fz18NeKwmvAWCaX0Z/uMHQr42ZxvR/Rxcw5xM+9J/CJq8w2gduDhmDgso/QrBH47dEXQ1IqczyHpIOfIRtnTtV7SwO1oKXKkU3fbToFGSDHtMWcaH1WBuVYnDbRFi99iqSMySdzxXckrazUh23KBVYGIcfNBkTxca0e4ATJ0KukGYVBgr/MnlhPOtQq/ksUfCbzh+EFCjtnCUoHfjhA/OsiTv2HcEvJMELp0VakZDliTmriTdPivxU4VmEhtPrGV+KJhO7ZKt0doFZh1fgZSBWIW2AGEHwg3BUWOnKtH+suqdw07tYMfglCrWPD5mw9qVYuniaXkT0OtWaSuo5LJTY1RBf+roF9X5+y/5qU+DAAAAABJRU5ErkJggg==';
/**
* Broken image symbol for offline SVG.
*/
Editor.svgBrokenImage = Graph.createSvgImage(10, 10, '<rect x="0" y="0" width="10" height="10" stroke="#000" fill="transparent"/><path d="m 0 0 L 10 10 L 0 10 L 10 0" stroke="#000" fill="transparent"/>');
/**
* Error image for not found images
*/
Editor.errorImage = 'data:image/gif;base64,R0lGODlhEAAQAPcAAADGAIQAAISEhP8AAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEAAAAALAAAAAAQABAAAAhoAAEIFBigYMGBCAkGGMCQ4cGECxtKHBAAYUQCEzFSHLiQgMeGHjEGEAAg4oCQJz86LCkxpEqHAkwyRClxpEyXGmGaREmTIsmOL1GO/DkzI0yOE2sKIMlRJsWhCQHENDiUaVSpS5cmDAgAOw==';
/**
* Error image for not found images
*/
Editor.configurationKey = '.configuration';
/**
* Error image for not found images
*/
Editor.settingsKey = '.drawio-config';
/**
* Default value for custom libraries in mxSettings.
*/
Editor.defaultCustomLibraries = [];
/**
* Default value for custom libraries in mxSettings.
*/
Editor.enableCustomLibraries = true;
/**
* Specifies if custom properties should be enabled.
*/
Editor.enableCustomProperties = true;
/**
* Specifies if custom properties should be enabled.
*/
Editor.enableServiceWorker = urlParams['pwa'] != '0' &&
'serviceWorker' in navigator && (urlParams['offline'] == '1' ||
/.*\.diagrams\.net$/.test(window.location.hostname) ||
/.*\.draw\.io$/.test(window.location.hostname));
/**
* Specifies if XML files should be compressed. Default is true.
*/
Editor.compressXml = true;
/**
* Specifies global variables.
*/
Editor.globalVars = null;
/**
* Disables the shadow option in the format panel.
*/
Editor.shadowOptionEnabled = !mxClient.IS_SF;
/**
* Reference to the config object passed to <configure>.
*/
Editor.config = null;
/**
* Reference to the version of the last config object in
* <configure>. If this is different to the last version in
* mxSettings.parse, then the settings are reset.
*/
Editor.configVersion = null;
/**
* Default border for image export (to allow for sketch style).
*/
Editor.defaultBorder = 5;
/**
* Common properties for all edges.
*/
Editor.commonProperties = [
{name: 'comic', dispName: 'Comic', type: 'bool', defVal: false, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', '0') != '1';
}},
{name: 'jiggle', dispName: 'Jiggle', type: 'float', min: 0, defVal: 1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'comic', '0') == '1' ||
mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'fillWeight', dispName: 'Fill Weight', type: 'int', defVal: -1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'hachureGap', dispName: 'Hachure Gap', type: 'int', defVal: -1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'hachureAngle', dispName: 'Hachure Angle', type: 'int', defVal: -41, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'curveFitting', dispName: 'Curve Fitting', type: 'float', defVal: 0.95, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'simplification', dispName: 'Simplification', type: 'float', defVal: 0, min: 0, max: 1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'disableMultiStroke', dispName: 'Disable Multi Stroke', type: 'bool', defVal: false, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'disableMultiStrokeFill', dispName: 'Disable Multi Stroke Fill', type: 'bool', defVal: false, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'dashOffset', dispName: 'Dash Offset', type: 'int', defVal: -1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'dashGap', dispName: 'Dash Gap', type: 'int', defVal: -1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'zigzagOffset', dispName: 'ZigZag Offset', type: 'int', defVal: -1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'jiggle', dispName: 'Jiggle', type: 'float', min: 0, defVal: 1, isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'comic', '0') == '1' ||
mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}},
{name: 'sketchStyle', dispName: 'Sketch Style', type: 'enum', defVal: 'rough',
enumList: [{val: 'rough', dispName: 'Rough'}, {val: 'comic', dispName: 'Comic'}],
isVisible: function(state, format)
{
return mxUtils.getValue(state.style, 'sketch', (urlParams['rough'] == '1') ? '1' : '0') == '1';
}}
];
/**
* Common properties for all edges.
*/
Editor.commonEdgeProperties = [
{type: 'separator'},
{name: 'arcSize', dispName: 'Arc Size', type: 'float', min:0, defVal: mxConstants.LINE_ARCSIZE},
{name: 'sourcePortConstraint', dispName: 'Source Constraint', type: 'enum', defVal: 'none',
enumList: [{val: 'none', dispName: 'None'}, {val: 'north', dispName: 'North'}, {val: 'east', dispName: 'East'}, {val: 'south', dispName: 'South'}, {val: 'west', dispName: 'West'}]
},
{name: 'targetPortConstraint', dispName: 'Target Constraint', type: 'enum', defVal: 'none',
enumList: [{val: 'none', dispName: 'None'}, {val: 'north', dispName: 'North'}, {val: 'east', dispName: 'East'}, {val: 'south', dispName: 'South'}, {val: 'west', dispName: 'West'}]
},
{name: 'jettySize', dispName: 'Jetty Size', type: 'int', min: 0, defVal: 'auto', allowAuto: true, isVisible: function(state)
{
return mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) == 'orthogonalEdgeStyle';
}},
{name: 'fillOpacity', dispName: 'Fill Opacity', type: 'int', min: 0, max: 100, defVal: 100},
{name: 'strokeOpacity', dispName: 'Stroke Opacity', type: 'int', min: 0, max: 100, defVal: 100},
{name: 'startFill', dispName: 'Start Fill', type: 'bool', defVal: true},
{name: 'endFill', dispName: 'End Fill', type: 'bool', defVal: true},
{name: 'perimeterSpacing', dispName: 'Terminal Spacing', type: 'float', defVal: 0},
{name: 'anchorPointDirection', dispName: 'Anchor Direction', type: 'bool', defVal: true},
{name: 'snapToPoint', dispName: 'Snap to Point', type: 'bool', defVal: false},
{name: 'fixDash', dispName: 'Fixed Dash', type: 'bool', defVal: false},
{name: 'editable', dispName: 'Editable', type: 'bool', defVal: true},
{name: 'metaEdit', dispName: 'Edit Dialog', type: 'bool', defVal: false},
{name: 'backgroundOutline', dispName: 'Background Outline', type: 'bool', defVal: false},
{name: 'bendable', dispName: 'Bendable', type: 'bool', defVal: true},
{name: 'movable', dispName: 'Movable', type: 'bool', defVal: true},
{name: 'cloneable', dispName: 'Cloneable', type: 'bool', defVal: true},
{name: 'deletable', dispName: 'Deletable', type: 'bool', defVal: true},
{name: 'noJump', dispName: 'No Jumps', type: 'bool', defVal: false},
{name: 'flowAnimation', dispName: 'Flow Animation', type: 'bool', defVal: false},
{name: 'ignoreEdge', dispName: 'Ignore Edge', type: 'bool', defVal: false},
{name: 'orthogonalLoop', dispName: 'Loop Routing', type: 'bool', defVal: false},
{name: 'orthogonal', dispName: 'Orthogonal', type: 'bool', defVal: false}
].concat(Editor.commonProperties);
/**
* Common properties for all vertices.
*/
Editor.commonVertexProperties = [
{type: 'separator'},
{name: 'resizeLastRow', dispName: 'Resize Last Row', type: 'bool', getDefaultValue: function(state, format)
{
var cell = (state.vertices.length == 1 && state.edges.length == 0) ? state.vertices[0] : null;
var graph = format.editorUi.editor.graph;
var style = graph.getCellStyle(cell);
return mxUtils.getValue(style, 'resizeLastRow', '0') == '1';
}, isVisible: function(state, format)
{
var graph = format.editorUi.editor.graph;
return state.vertices.length == 1 && state.edges.length == 0 &&
graph.isTable(state.vertices[0]);
}},
{name: 'resizeLast', dispName: 'Resize Last Column', type: 'bool', getDefaultValue: function(state, format)
{
var cell = (state.vertices.length == 1 && state.edges.length == 0) ? state.vertices[0] : null;
var graph = format.editorUi.editor.graph;
var style = graph.getCellStyle(cell);
return mxUtils.getValue(style, 'resizeLast', '0') == '1';
}, isVisible: function(state, format)
{
var graph = format.editorUi.editor.graph;
return state.vertices.length == 1 && state.edges.length == 0 &&
graph.isTable(state.vertices[0]);
}},
{name: 'fillOpacity', dispName: 'Fill Opacity', type: 'int', min: 0, max: 100, defVal: 100},
{name: 'strokeOpacity', dispName: 'Stroke Opacity', type: 'int', min: 0, max: 100, defVal: 100},
{name: 'overflow', dispName: 'Text Overflow', defVal: 'visible', type: 'enum',
enumList: [{val: 'visible', dispName: 'Visible'}, {val: 'hidden', dispName: 'Hidden'}, {val: 'block', dispName: 'Block'},
{val: 'fill', dispName: 'Fill'}, {val: 'width', dispName: 'Width'}]
},
{name: 'noLabel', dispName: 'Hide Label', type: 'bool', defVal: false},
{name: 'labelPadding', dispName: 'Label Padding', type: 'float', defVal: 0},
{name: 'direction', dispName: 'Direction', type: 'enum', defVal: 'east',
enumList: [{val: 'north', dispName: 'North'}, {val: 'east', dispName: 'East'}, {val: 'south', dispName: 'South'}, {val: 'west', dispName: 'West'}]
},
{name: 'portConstraint', dispName: 'Constraint', type: 'enum', defVal: 'none',
enumList: [{val: 'none', dispName: 'None'}, {val: 'north', dispName: 'North'}, {val: 'east', dispName: 'East'}, {val: 'south', dispName: 'South'}, {val: 'west', dispName: 'West'}]
},
{name: 'portConstraintRotation', dispName: 'Rotate Constraint', type: 'bool', defVal: false},
{name: 'connectable', dispName: 'Connectable', type: 'bool', getDefaultValue: function(state, format)
{
var cell = (state.vertices.length == 1 && state.edges.length == 0) ? state.vertices[0] : null;
var graph = format.editorUi.editor.graph;
return graph.isCellConnectable(cell);
}, isVisible: function(state, format)
{
return state.vertices.length == 1 && state.edges.length == 0;
}},
{name: 'allowArrows', dispName: 'Allow Arrows', type: 'bool', defVal: true},
{name: 'snapToPoint', dispName: 'Snap to Point', type: 'bool', defVal: false},
{name: 'perimeter', dispName: 'Perimeter', defVal: 'none', type: 'enum',
enumList: [{val: 'none', dispName: 'None'},
{val: 'rectanglePerimeter', dispName: 'Rectangle'}, {val: 'ellipsePerimeter', dispName: 'Ellipse'},
{val: 'rhombusPerimeter', dispName: 'Rhombus'}, {val: 'trianglePerimeter', dispName: 'Triangle'},
{val: 'hexagonPerimeter2', dispName: 'Hexagon'}, {val: 'lifelinePerimeter', dispName: 'Lifeline'},
{val: 'orthogonalPerimeter', dispName: 'Orthogonal'}, {val: 'backbonePerimeter', dispName: 'Backbone'},
{val: 'calloutPerimeter', dispName: 'Callout'}, {val: 'parallelogramPerimeter', dispName: 'Parallelogram'},
{val: 'trapezoidPerimeter', dispName: 'Trapezoid'}, {val: 'stepPerimeter', dispName: 'Step'},
{val: 'centerPerimeter', dispName: 'Center'}]
},
{name: 'fixDash', dispName: 'Fixed Dash', type: 'bool', defVal: false},
{name: 'autosize', dispName: 'Autosize', type: 'bool', defVal: false},
{name: 'container', dispName: 'Container', type: 'bool', defVal: false, isVisible: function(state, format)
{
return state.vertices.length == 1 && state.edges.length == 0;
}},
{name: 'dropTarget', dispName: 'Drop Target', type: 'bool', getDefaultValue: function(state, format)
{
var cell = (state.vertices.length == 1 && state.edges.length == 0) ? state.vertices[0] : null;
var graph = format.editorUi.editor.graph;
return cell != null && (graph.isSwimlane(cell) || graph.model.getChildCount(cell) > 0);
}, isVisible: function(state, format)
{
return state.vertices.length == 1 && state.edges.length == 0;
}},
{name: 'collapsible', dispName: 'Collapsible', type: 'bool', getDefaultValue: function(state, format)
{
var cell = (state.vertices.length == 1 && state.edges.length == 0) ? state.vertices[0] : null;
var graph = format.editorUi.editor.graph;
return cell != null && ((graph.isContainer(cell) && state.style['collapsible'] != '0') ||
(!graph.isContainer(cell) && state.style['collapsible'] == '1'));
}, isVisible: function(state, format)
{
return state.vertices.length == 1 && state.edges.length == 0;
}},
{name: 'recursiveResize', dispName: 'Resize Children', type: 'bool', defVal: true, isVisible: function(state, format)
{
return state.vertices.length == 1 && state.edges.length == 0 &&
!format.editorUi.editor.graph.isSwimlane(state.vertices[0]) &&
mxUtils.getValue(state.style, 'childLayout', null) == null;
}},
{name: 'expand', dispName: 'Expand', type: 'bool', defVal: true},
{name: 'part', dispName: 'Part', type: 'bool', defVal: false, isVisible: function(state, format)
{
var model = format.editorUi.editor.graph.model;
return (state.vertices.length > 0) ? model.isVertex(model.getParent(state.vertices[0])) : false;
}},
{name: 'editable', dispName: 'Editable', type: 'bool', defVal: true},
{name: 'metaEdit', dispName: 'Edit Dialog', type: 'bool', defVal: false},
{name: 'backgroundOutline', dispName: 'Background Outline', type: 'bool', defVal: false},
{name: 'movable', dispName: 'Movable', type: 'bool', defVal: true},
{name: 'movableLabel', dispName: 'Movable Label', type: 'bool', defVal: false, isVisible: function(state, format)
{
var geo = (state.vertices.length > 0) ? format.editorUi.editor.graph.getCellGeometry(state.vertices[0]) : null;
return geo != null && !geo.relative;
}},
{name: 'resizable', dispName: 'Resizable', type: 'bool', defVal: true},
{name: 'resizeWidth', dispName: 'Resize Width', type: 'bool', defVal: false},
{name: 'resizeHeight', dispName: 'Resize Height', type: 'bool', defVal: false},
{name: 'rotatable', dispName: 'Rotatable', type: 'bool', defVal: true},
{name: 'cloneable', dispName: 'Cloneable', type: 'bool', defVal: true},
{name: 'deletable', dispName: 'Deletable', type: 'bool', defVal: true},
{name: 'treeFolding', dispName: 'Tree Folding', type: 'bool', defVal: false},
{name: 'treeMoving', dispName: 'Tree Moving', type: 'bool', defVal: false},
{name: 'pointerEvents', dispName: 'Pointer Events', type: 'bool', defVal: true, isVisible: function(state, format)
{
var fillColor = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, null);
return format.editorUi.editor.graph.isSwimlane(state.vertices[0]) ||
fillColor == null || fillColor == mxConstants.NONE;
}},
{name: 'moveCells', dispName: 'Move Cells on Fold', type: 'bool', defVal: false, isVisible: function(state, format)
{
return state.vertices.length > 0 && format.editorUi.editor.graph.isContainer(state.vertices[0]);
}}
].concat(Editor.commonProperties);
/**
* Default value for the CSV import dialog.
*/
Editor.defaultCsvValue = '##\n' +
'## Example CSV import. Use ## for comments and # for configuration. Paste CSV below.\n' +
'## The following names are reserved and should not be used (or ignored):\n' +
'## id, tooltip, placeholder(s), link and label (see below)\n' +
'##\n' +
'#\n' +
'## Node label with placeholders and HTML.\n' +
'## Default is \'%name_of_first_column%\'.\n' +
'#\n' +
'# label: %name%<br><i style="color:gray;">%position%</i><br><a href="mailto:%email%">Email</a>\n' +
'#\n' +
'## Node style (placeholders are replaced once).\n' +
'## Default is the current style for nodes.\n' +
'#\n' +
'# style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;\n' +
'#\n' +
'## Parent style for nodes with child nodes (placeholders are replaced once).\n' +
'#\n' +
'# parentstyle: swimlane;whiteSpace=wrap;html=1;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;\n' +
'#\n' +
'## Optional column name that contains a reference to a named style in styles.\n' +
'## Default is the current style for nodes.\n' +
'#\n' +
'# stylename: -\n' +
'#\n' +
'## JSON for named styles of the form {"name": "style", "name": "style"} where style is a cell style with\n' +
'## placeholders that are replaced once.\n' +
'#\n' +
'# styles: -\n' +
'#\n' +
'## JSON for variables in styles of the form {"name": "value", "name": "value"} where name is a string\n' +
'## that will replace a placeholder in a style.\n' +
'#\n' +
'# vars: -\n' +
'#\n' +
'## Optional column name that contains a reference to a named label in labels.\n' +
'## Default is the current label.\n' +
'#\n' +
'# labelname: -\n' +
'#\n' +
'## JSON for named labels of the form {"name": "label", "name": "label"} where label is a cell label with\n' +
'## placeholders.\n' +
'#\n' +
'# labels: -\n' +
'#\n' +
'## Uses the given column name as the identity for cells (updates existing cells).\n' +
'## Default is no identity (empty value or -).\n' +
'#\n' +
'# identity: -\n' +
'#\n' +
'## Uses the given column name as the parent reference for cells. Default is no parent (empty or -).\n' +
'## The identity above is used for resolving the reference so it must be specified.\n' +
'#\n' +
'# parent: -\n' +
'#\n' +
'## Adds a prefix to the identity of cells to make sure they do not collide with existing cells (whose\n' +
'## IDs are numbers from 0..n, sometimes with a GUID prefix in the context of realtime collaboration).\n' +
'## Default is csvimport-.\n' +
'#\n' +
'# namespace: csvimport-\n' +
'#\n' +
'## Connections between rows ("from": source colum, "to": target column).\n' +
'## Label, style and invert are optional. Defaults are \'\', current style and false.\n' +
'## If placeholders are used in the style, they are replaced with data from the source.\n' +
'## An optional placeholders can be set to target to use data from the target instead.\n' +
'## In addition to label, an optional fromlabel and tolabel can be used to name the column\n' +
'## that contains the text for the label in the edges source or target (invert ignored).\n' +
'## In addition to those, an optional source and targetlabel can be used to specify a label\n' +
'## that contains placeholders referencing the respective columns in the source or target row.\n' +
'## The label is created in the form fromlabel + sourcelabel + label + tolabel + targetlabel.\n' +
'## Additional labels can be added by using an optional labels array with entries of the\n' +
'## form {"label": string, "x": number, "y": number, "dx": number, "dy": number} where\n' +
'## x is from -1 to 1 along the edge, y is orthogonal, and dx/dy are offsets in pixels.\n' +
'## An optional placeholders with the string value "source" or "target" can be specified\n' +
'## to replace placeholders in the additional label with data from the source or target.\n' +
'## The target column may contain a comma-separated list of values.\n' +
'## Multiple connect entries are allowed.\n' +
'#\n' +
'# connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", \\\n' +
'# "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}\n' +
'# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}\n' +
'#\n' +
'## Node x-coordinate. Possible value is a column name. Default is empty. Layouts will\n' +
'## override this value.\n' +
'#\n' +
'# left: \n' +
'#\n' +
'## Node y-coordinate. Possible value is a column name. Default is empty. Layouts will\n' +
'## override this value.\n' +
'#\n' +
'# top: \n' +
'#\n' +
'## Node width. Possible value is a number (in px), auto or an @ sign followed by a column\n' +
'## name that contains the value for the width. Default is auto.\n' +
'#\n' +
'# width: auto\n' +
'#\n' +
'## Node height. Possible value is a number (in px), auto or an @ sign followed by a column\n' +
'## name that contains the value for the height. Default is auto.\n' +
'#\n' +
'# height: auto\n' +
'#\n' +
'## Padding for autosize. Default is 0.\n' +
'#\n' +
'# padding: -12\n' +
'#\n' +
'## Comma-separated list of ignored columns for metadata. (These can be\n' +
'## used for connections and styles but will not be added as metadata.)\n' +
'#\n' +
'# ignore: id,image,fill,stroke,refs,manager\n' +
'#\n' +
'## Column to be renamed to link attribute (used as link).\n' +
'#\n' +
'# link: url\n' +
'#\n' +
'## Spacing between nodes. Default is 40.\n' +
'#\n' +
'# nodespacing: 40\n' +
'#\n' +
'## Spacing between levels of hierarchical layouts. Default is 100.\n' +
'#\n' +
'# levelspacing: 100\n' +
'#\n' +
'## Spacing between parallel edges. Default is 40. Use 0 to disable.\n' +
'#\n' +
'# edgespacing: 40\n' +
'#\n' +
'## Name or JSON of layout. Possible values are auto, none, verticaltree, horizontaltree,\n' +
'## verticalflow, horizontalflow, organic, circle or a JSON string as used in Layout, Apply.\n' +
'## Default is auto.\n' +
'#\n' +
'# layout: auto\n' +
'#\n' +
'## ---- CSV below this line. First line are column names. ----\n' +
'name,position,id,location,manager,email,fill,stroke,refs,url,image\n' +
'Tessa Miller,CFO,emi,Office 1,,me@example.com,#dae8fc,#6c8ebf,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-3-128.png\n' +
'Edward Morrison,Brand Manager,emo,Office 2,Tessa Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.png\n' +
'Alison Donovan,System Admin,rdo,Office 3,Tessa Miller,me@example.com,#d5e8d4,#82b366,"emo,tva",https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-2-128.png\n' +
'Evan Valet,HR Director,tva,Office 4,Tessa Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png\n';
/**
* Compresses the given string.
*/
Editor.createRoughCanvas = function(c)
{
var rc = rough.canvas(
{
// Provides expected function but return value is not used
getContext: function()
{
return c;
}
});
rc.draw = function(drawable)
{
var sets = drawable.sets || [];
var o = drawable.options || this.getDefaultOptions();
for (var i = 0; i < sets.length; i++)
{
var drawing = sets[i];
switch (drawing.type)
{
case 'path':
if (o.stroke != null)
{
this._drawToContext(c, drawing, o);
}
break;
case 'fillPath':
this._drawToContext(c, drawing, o);
break;
case 'fillSketch':
this.fillSketch(c, drawing, o);
break;
}
}
};
rc.fillSketch = function(ctx, drawing, o)
{
var strokeColor = c.state.strokeColor;
var strokeWidth = c.state.strokeWidth;
var strokeAlpha = c.state.strokeAlpha;
var dashed = c.state.dashed;
var fweight = o.fillWeight;
if (fweight < 0)
{
fweight = o.strokeWidth / 2;
}
c.setStrokeAlpha(c.state.fillAlpha);
c.setStrokeColor(o.fill || '');
c.setStrokeWidth(fweight);
c.setDashed(false);
this._drawToContext(ctx, drawing, o);
c.setDashed(dashed);
c.setStrokeWidth(strokeWidth);
c.setStrokeColor(strokeColor);
c.setStrokeAlpha(strokeAlpha);
};
rc._drawToContext = function(ctx, drawing, o)
{
ctx.begin();
for (var i = 0; i < drawing.ops.length; i++)
{
var item = drawing.ops[i];
var data = item.data;
switch (item.op)
{
case 'move':
ctx.moveTo(data[0], data[1]);
break;
case 'bcurveTo':
ctx.curveTo(data[0], data[1], data[2], data[3], data[4], data[5]);
break;
case 'lineTo':
ctx.lineTo(data[0], data[1]);
break;
}
};
ctx.end();
if (drawing.type === 'fillPath' && o.filled)
{
ctx.fill();
}
else
{
ctx.stroke();
}
};
return rc;
};
/**
* Uses RoughJs for drawing comic shapes.
*/
(function()
{
/**
* Adds handJiggle style (jiggle=n sets jiggle)
*/
function RoughCanvas(canvas, rc, shape)
{
this.canvas = canvas;
this.rc = rc;
this.shape = shape;
// Avoids "spikes" in the output
this.canvas.setLineJoin('round');
this.canvas.setLineCap('round');
this.originalBegin = this.canvas.begin;
this.canvas.begin = mxUtils.bind(this, RoughCanvas.prototype.begin);
this.originalEnd = this.canvas.end;
this.canvas.end = mxUtils.bind(this, RoughCanvas.prototype.end);
this.originalRect = this.canvas.rect;
this.canvas.rect = mxUtils.bind(this, RoughCanvas.prototype.rect);
this.originalRoundrect = this.canvas.roundrect;
this.canvas.roundrect = mxUtils.bind(this, RoughCanvas.prototype.roundrect);
this.originalEllipse = this.canvas.ellipse;
this.canvas.ellipse = mxUtils.bind(this, RoughCanvas.prototype.ellipse);
this.originalLineTo = this.canvas.lineTo;
this.canvas.lineTo = mxUtils.bind(this, RoughCanvas.prototype.lineTo);
this.originalMoveTo = this.canvas.moveTo;
this.canvas.moveTo = mxUtils.bind(this, RoughCanvas.prototype.moveTo);
this.originalQuadTo = this.canvas.quadTo;
this.canvas.quadTo = mxUtils.bind(this, RoughCanvas.prototype.quadTo);
this.originalCurveTo = this.canvas.curveTo;
this.canvas.curveTo = mxUtils.bind(this, RoughCanvas.prototype.curveTo);
this.originalArcTo = this.canvas.arcTo;
this.canvas.arcTo = mxUtils.bind(this, RoughCanvas.prototype.arcTo);
this.originalClose = this.canvas.close;
this.canvas.close = mxUtils.bind(this, RoughCanvas.prototype.close);
this.originalFill = this.canvas.fill;
this.canvas.fill = mxUtils.bind(this, RoughCanvas.prototype.fill);
this.originalStroke = this.canvas.stroke;
this.canvas.stroke = mxUtils.bind(this, RoughCanvas.prototype.stroke);
this.originalFillAndStroke = this.canvas.fillAndStroke;
this.canvas.fillAndStroke = mxUtils.bind(this, RoughCanvas.prototype.fillAndStroke);
this.path = [];
this.passThrough = false;
};
RoughCanvas.prototype.moveOp = 'M';
RoughCanvas.prototype.lineOp = 'L';
RoughCanvas.prototype.quadOp = 'Q';
RoughCanvas.prototype.curveOp = 'C';
RoughCanvas.prototype.closeOp = 'Z';
RoughCanvas.prototype.getStyle = function(stroke, fill)
{
// Random seed created from cell ID
var seed = 1;
if (this.shape.state != null)
{
var str = this.shape.state.cell.id;
if (str != null)
{
for (var i = 0; i < str.length; i++)
{
seed = ((seed << 5) - seed + str.charCodeAt(i)) << 0;
}
}
}
var style = {strokeWidth: this.canvas.state.strokeWidth, seed: seed, preserveVertices: true};
var defs = this.rc.getDefaultOptions();
if (stroke)
{
style.stroke = this.canvas.state.strokeColor === 'none' ? 'transparent' : this.canvas.state.strokeColor;
}
else
{
delete style.stroke;
}
var gradient = null;
style.filled = fill;
if (fill)
{
style.fill = this.canvas.state.fillColor === 'none' ? '' : this.canvas.state.fillColor;
gradient = this.canvas.state.gradientColor === 'none' ? null : this.canvas.state.gradientColor;
}
else
{
style.fill = '';
}
// Applies cell style
style['bowing'] = mxUtils.getValue(this.shape.style, 'bowing', defs['bowing']);
st