diff --git a/public/js/drawio/index.html b/public/js/drawio/index.html index 04a5b3a53..8171bf784 100644 --- a/public/js/drawio/index.html +++ b/public/js/drawio/index.html @@ -456,198 +456,5 @@ } } - diff --git a/public/js/drawio/js/diagramly/App.js b/public/js/drawio/js/diagramly/App.js index ffe10a135..325e4635e 100644 --- a/public/js/drawio/js/diagramly/App.js +++ b/public/js/drawio/js/diagramly/App.js @@ -818,7 +818,6 @@ App.main = function(callback, createUi) { // Adds bundle text to resources mxResources.parse(xhr[0].getText()); - // Configuration mode if (isLocalStorage && localStorage != null && window.location.hash != null && window.location.hash.substring(0, 9) == '#_CONFIG_') @@ -3260,14 +3259,7 @@ App.prototype.start = function() else { var id = this.getDiagramId(); - - if (EditorUi.enableDrafts && urlParams['mode'] == null && - this.getServiceName() == 'draw.io' && (id == null || id.length == 0) && - !this.editor.isChromelessView()) - { - this.checkDrafts(); - } - else if (id != null && id.length > 0) + if (id != null && id.length > 0) { this.loadFile(id, null, null, mxUtils.bind(this, function() { @@ -3290,7 +3282,7 @@ App.prototype.start = function() } else if (urlParams['splash'] != '0') { - this.loadFile(); + this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true); } else if (!EditorUi.isElectronApp) { @@ -3473,6 +3465,9 @@ App.prototype.start = function() } }; +App.prototype.loadContent = function (){ + +}; /** * Checks for orphaned drafts. */ @@ -3569,6 +3564,49 @@ App.prototype.checkDrafts = function() this.removeDatabaseItem(drafts[0].key); })); } + else if (drafts.length > 1) + { + var ts = new Date(drafts[0].modified); + + var dlg = new DraftDialog(this, (drafts.length > 1) ? mxResources.get('selectDraft') : + mxResources.get('draftFound', [ts.toLocaleDateString() + ' ' + ts.toLocaleTimeString()]), + (drafts.length > 1) ? null : drafts[0].data, mxUtils.bind(this, function(index) + { + this.hideDialog(); + index = (index != '') ? index : 0; + + this.loadDraft(drafts[index].data, mxUtils.bind(this, function() + { + this.removeDatabaseItem(drafts[index].key); + })); + }), mxUtils.bind(this, function(index, success) + { + index = (index != '') ? index : 0; + + // Discard draft + this.confirm(mxResources.get('areYouSure'), null, mxUtils.bind(this, function() + { + this.removeDatabaseItem(drafts[index].key); + + if (success != null) + { + success(); + } + }), mxResources.get('no'), mxResources.get('yes')); + }), null, null, null, (drafts.length > 1) ? drafts : null); + this.showDialog(dlg.container, 640, 480, true, false, mxUtils.bind(this, function(cancel) + { + if (urlParams['splash'] != '0') + { + this.loadFile(); + } + else + { + this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true); + } + })); + dlg.init(); + } else if (urlParams['splash'] != '0') { this.loadFile(); diff --git a/public/js/drawio/js/diagramly/Pages.js b/public/js/drawio/js/diagramly/Pages.js index 052f10076..aa7a5e6be 100644 --- a/public/js/drawio/js/diagramly/Pages.js +++ b/public/js/drawio/js/diagramly/Pages.js @@ -43,7 +43,7 @@ DiagramPage.prototype.root = null; DiagramPage.prototype.viewState = null; /** - * + * */ DiagramPage.prototype.getId = function() { @@ -51,7 +51,7 @@ DiagramPage.prototype.getId = function() }; /** - * + * */ DiagramPage.prototype.getName = function() { @@ -59,7 +59,7 @@ DiagramPage.prototype.getName = function() }; /** - * + * */ DiagramPage.prototype.setName = function(value) { @@ -93,7 +93,7 @@ RenamePage.prototype.execute = function() this.page.setName(this.previous); this.name = this.previous; this.previous = tmp; - + // Required to update page name in placeholders this.ui.editor.graph.updatePlaceholders(); this.ui.editor.fireEvent(new mxEventObject('pageRenamed')); @@ -118,7 +118,7 @@ MovePage.prototype.execute = function() var tmp = this.oldIndex; this.oldIndex = this.newIndex; this.newIndex = tmp; - + // Required to update page numbers in placeholders this.ui.editor.graph.updatePlaceholders(); this.ui.editor.fireEvent(new mxEventObject('pageMoved')); @@ -139,12 +139,12 @@ function SelectPage(ui, page, viewState) this.page = page; this.previousPage = page; this.neverShown = true; - + if (page != null) { this.neverShown = page.viewState == null; this.ui.updatePageRoot(page); - + if (viewState != null) { page.viewState = viewState; @@ -159,40 +159,40 @@ function SelectPage(ui, page, viewState) SelectPage.prototype.execute = function() { var prevIndex = mxUtils.indexOf(this.ui.pages, this.previousPage); - + if (this.page != null && prevIndex >= 0) { var page = this.ui.currentPage; var editor = this.ui.editor; var graph = editor.graph; - + // Stores current diagram state in the page var data = Graph.compressNode(editor.getGraphXml(true)); mxUtils.setTextContent(page.node, data); page.viewState = graph.getViewState(); page.root = graph.model.root; - + if (page.model != null) { // Updates internal structures of offpage model page.model.rootChanged(page.root); } - + // Transitions for switching pages // var curIndex = mxUtils.indexOf(this.ui.pages, page); // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transition', null); // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transform', // (curIndex > prevIndex) ? 'translate(-50%,0)' : 'translate(50%,0)'); - + // Removes the previous cells and clears selection graph.view.clear(page.root, true); graph.clearSelection(); - + // Switches the current page this.ui.currentPage = this.previousPage; this.previousPage = page; page = this.ui.currentPage; - + // Switches the root cell and sets the view state graph.model.prefix = Editor.guid() + '-'; graph.model.rootChanged(page.root); @@ -208,16 +208,16 @@ SelectPage.prototype.execute = function() graph.blockMathRender = true; graph.sizeDidChange(); graph.blockMathRender = false; - + // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transition', 'transform 0.2s'); // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transform', 'translate(0,0)'); - + if (this.neverShown) { this.neverShown = false; graph.selectUnlockedLayer(); } - + // Fires events editor.graph.fireEvent(new mxEventObject(mxEvent.ROOT)); editor.fireEvent(new mxEventObject('pageSelected', 'change', this)); @@ -225,7 +225,7 @@ SelectPage.prototype.execute = function() }; /** - * + * */ function ChangePage(ui, page, select, index, noSelect) { @@ -248,7 +248,7 @@ ChangePage.prototype.execute = function() // Fires event to setting view state from realtime this.ui.editor.fireEvent(new mxEventObject('beforePageChange', 'change', this)); this.previousIndex = this.index; - + if (this.index == null) { var tmp = mxUtils.indexOf(this.ui.pages, this.relatedPage); @@ -260,7 +260,7 @@ ChangePage.prototype.execute = function() this.ui.pages.splice(this.index, 0, this.relatedPage); this.index = null; } - + if (!this.noSelect) { SelectPage.prototype.execute.apply(this, arguments); @@ -286,7 +286,7 @@ EditorUi.prototype.getSelectedPageIndex = function() EditorUi.prototype.getPageIndex = function(page) { var result = null; - + if (this.pages != null && page != null) { for (var i = 0; i < this.pages.length; i++) @@ -294,15 +294,15 @@ EditorUi.prototype.getSelectedPageIndex = function() if (this.pages[i] == page) { result = i; - + break; } } } - + return result; }; - + /** * Returns true if the given string contains an mxfile. */ @@ -318,7 +318,7 @@ EditorUi.prototype.getPageById = function(id) } } } - + return null; }; @@ -329,7 +329,7 @@ EditorUi.prototype.createImageForPageLink = function(src, sourcePage, sourceGrap { var comma = src.indexOf(','); var result = null; - + if (comma > 0) { var page = this.getPageById(src.substring(comma + 1)); @@ -407,7 +407,7 @@ EditorUi.prototype.initPages = function() { this.selectNextPage(false); })); - + this.actions.addAction('nextPage', mxUtils.bind(this, function() { this.selectNextPage(true); @@ -418,17 +418,17 @@ EditorUi.prototype.initPages = function() this.keyHandler.bindAction(33, true, 'previousPage', true); // Ctrl+Shift+PageUp this.keyHandler.bindAction(34, true, 'nextPage', true); // Ctrl+Shift+PageDown } - + // Updates the tabs after loading the diagram var graph = this.editor.graph; - var graphViewValidateBackground = graph.view.validateBackground; - + var graphViewValidateBackground = graph.view.validateBackground; + graph.view.validateBackground = mxUtils.bind(this, function() { if (this.tabContainer != null) { var prevHeight = this.tabContainer.style.height; - + if (this.fileNode == null || this.pages == null || (this.pages.length == 1 && urlParams['pages'] == '0')) { @@ -438,36 +438,36 @@ EditorUi.prototype.initPages = function() { this.tabContainer.style.height = this.tabContainerHeight + 'px'; } - + if (prevHeight != this.tabContainer.style.height) { this.refresh(false); } } - + graphViewValidateBackground.apply(graph.view, arguments); }); - + var lastPage = null; - + var updateTabs = mxUtils.bind(this, function() { this.updateTabContainer(); - - // Updates scrollbar positions and backgrounds after validation + + // Updates scrollbar positions and backgrounds after validation var p = this.currentPage; - + if (p != null && p != lastPage) { if (p.viewState == null || p.viewState.scrollLeft == null) { this.resetScrollbars(); - + if (graph.isLightboxView()) { this.lightboxFit(); } - + if (this.chromelessResize != null) { graph.container.scrollLeft = 0; @@ -480,16 +480,16 @@ EditorUi.prototype.initPages = function() graph.container.scrollLeft = graph.view.translate.x * graph.view.scale + p.viewState.scrollLeft; graph.container.scrollTop = graph.view.translate.y * graph.view.scale + p.viewState.scrollTop; } - + lastPage = p; } - + // Updates layers window if (this.actions.layersWindow != null) { this.actions.layersWindow.refreshLayers(); } - + // Workaround for math if tab is switched before typesetting has stopped if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined') { @@ -513,13 +513,13 @@ EditorUi.prototype.initPages = function() Editor.MathJaxClear(); } }); - + // Adds a graph model listener to update the view this.editor.graph.model.addListener(mxEvent.CHANGE, mxUtils.bind(this, function(sender, evt) { var edit = evt.getProperty('edit'); var changes = edit.changes; - + for (var i = 0; i < changes.length; i++) { if (changes[i] instanceof SelectPage || @@ -528,11 +528,11 @@ EditorUi.prototype.initPages = function() changes[i] instanceof mxRootChange) { updateTabs(); - break; + break; } } })); - + // Updates zoom in toolbar if (this.toolbar != null) { @@ -548,7 +548,7 @@ EditorUi.prototype.restoreViewState = function(page, viewState, selection) { var newPage = (page != null) ? this.getPageById(page.getId()) : null; var graph = this.editor.graph; - + if (newPage != null && this.currentPage != null && this.pages != null) { if (newPage != this.currentPage) @@ -582,7 +582,7 @@ Graph.prototype.createViewState = function(node) var bg = node.getAttribute('background'); var bgImg = this.parseBackgroundImage(node.getAttribute('backgroundImage')); var extFonts = node.getAttribute('extFonts'); - + if (extFonts) { try @@ -641,18 +641,18 @@ Graph.prototype.saveViewState = function(vs, node, ignoreTransient, resolveRefer node.setAttribute('arrows', (vs == null || vs.arrows) ? '1' : '0'); node.setAttribute('page', ((vs == null && this.defaultPageVisible ) || (vs != null && vs.pageVisible)) ? '1' : '0'); - + // Ignores fold to avoid checksum errors for lightbox mode node.setAttribute('fold', (vs == null || vs.foldingEnabled) ? '1' : '0'); } node.setAttribute('pageScale', (vs != null && vs.pageScale != null) ? vs.pageScale : mxGraph.prototype.pageScale); - + var pf = (vs != null) ? vs.pageFormat : (typeof mxSettings === 'undefined' || this.defaultPageFormat != null) ? mxGraph.prototype.pageFormat : mxSettings.getPageFormat(); - + if (pf != null) { node.setAttribute('pageWidth', pf.width); @@ -676,7 +676,7 @@ Graph.prototype.saveViewState = function(vs, node, ignoreTransient, resolveRefer node.setAttribute('math', (vs != null && vs.mathEnabled) ? '1' : '0'); node.setAttribute('shadow', (vs != null && vs.shadowVisible) ? '1' : '0'); - + if (vs != null && vs.extFonts != null && vs.extFonts.length > 0) { node.setAttribute('extFonts', vs.extFonts.map(function(ef) @@ -760,19 +760,19 @@ Graph.prototype.setViewState = function(state, removeOldExtFonts) for (var i = 0; i < oldExtFonts.length; i++) { var fontElem = document.getElementById('extFont_' + oldExtFonts[i].name); - + if (fontElem != null) { fontElem.parentNode.removeChild(fontElem); } } } - + for (var i = 0; i < this.extFonts.length; i++) { this.addExtFont(this.extFonts[i].name, this.extFonts[i].url, true); } - + if (state.scale != null) { this.view.scale = state.scale; @@ -781,21 +781,21 @@ Graph.prototype.setViewState = function(state, removeOldExtFonts) { this.view.scale = 1; } - + // Checks if current root or default parent have been removed if (this.view.currentRoot != null && !this.model.contains(this.view.currentRoot)) { this.view.currentRoot = null; } - + if (this.defaultParent != null && !this.model.contains(this.defaultParent)) { this.setDefaultParent(null); this.selectUnlockedLayer(); } - + if (state.translate != null) { this.view.translate = state.translate; @@ -827,9 +827,9 @@ Graph.prototype.setViewState = function(state, removeOldExtFonts) this.hiddenTags = []; this.extFonts = []; } - + // Implicit settings - this.pageBreaksVisible = this.pageVisible; + this.pageBreaksVisible = this.pageVisible; this.preferPageSize = this.pageVisible; this.fireEvent(new mxEventObject('viewStateChanged', 'state', state)); }; @@ -844,7 +844,7 @@ Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember) // Adds inserted fonts to font family menu Graph.recentCustomFonts[fontName.toLowerCase()] = {name: fontName, url: fontUrl}; } - + var fontId = 'extFont_' + fontName; if (document.getElementById(fontId) == null) @@ -856,29 +856,29 @@ Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember) else { var head = document.getElementsByTagName('head')[0]; - + // KNOWN: Should load fonts synchronously var style = document.createElement('style'); - + style.appendChild(document.createTextNode('@font-face {\n' + - '\tfont-family: "'+ fontName +'";\n' + + '\tfont-family: "'+ fontName +'";\n' + '\tsrc: url("'+ fontUrl +'");\n}')); - + style.setAttribute('id', fontId); var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } } - + if (!dontRemember) { - if (this.extFonts == null) + if (this.extFonts == null) { this.extFonts = []; } - + var extFonts = this.extFonts, notFound = true; - + for (var i = 0; i < extFonts.length; i++) { if (extFonts[i].name == fontName) @@ -887,7 +887,7 @@ Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember) break; } } - + if (notFound) { this.extFonts.push({name: fontName, url: fontUrl}); @@ -905,7 +905,7 @@ EditorUi.prototype.updatePageRoot = function(page, checked) { var node = this.editor.extractGraphModel(page.node, null, checked); var cause = Editor.extractParserError(node); - + if (cause) { throw new Error(cause); @@ -913,7 +913,7 @@ EditorUi.prototype.updatePageRoot = function(page, checked) else if (node != null) { page.graphModelNode = node; - + // Converts model XML into page object with root cell page.viewState = this.editor.graph.createViewState(node); var codec = new mxCodec(node.ownerDocument); @@ -930,9 +930,9 @@ EditorUi.prototype.updatePageRoot = function(page, checked) if (page.graphModelNode == null) { var node = this.editor.extractGraphModel(page.node); - + var cause = Editor.extractParserError(node); - + if (cause) { throw new Error(cause); @@ -942,13 +942,13 @@ EditorUi.prototype.updatePageRoot = function(page, checked) page.graphModelNode = node; } } - + if (page.graphModelNode != null) { - page.viewState = this.editor.graph.createViewState(page.graphModelNode); + page.viewState = this.editor.graph.createViewState(page.graphModelNode); } } - + return page; }; @@ -965,23 +965,23 @@ EditorUi.prototype.selectPage = function(page, quiet, viewState) { this.editor.graph.stopEditing(false); } - + quiet = (quiet != null) ? quiet : false; this.editor.graph.isMouseDown = false; this.editor.graph.reset(); - + var edit = this.editor.graph.model.createUndoableEdit(); - + // Special flag to bypass autosave for this edit edit.ignoreEdit = true; - + var change = new SelectPage(this, page, viewState); change.execute(); edit.add(change); edit.notify(); - + this.editor.graph.tooltipHandler.hide(); - + if (!quiet) { this.editor.graph.model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit)); @@ -995,16 +995,16 @@ EditorUi.prototype.selectPage = function(page, quiet, viewState) }; /** - * + * */ EditorUi.prototype.selectNextPage = function(forward) { var next = this.currentPage; - + if (next != null && this.pages != null) { var tmp = mxUtils.indexOf(this.pages, next); - + if (forward) { this.selectPage(this.pages[mxUtils.mod(tmp + 1, this.pages.length)]); @@ -1027,15 +1027,15 @@ EditorUi.prototype.insertPage = function(page, index) { this.editor.graph.stopEditing(false); } - + page = (page != null) ? page : this.createPage(null, this.createPageId()); index = (index != null) ? index : this.pages.length; - + // Uses model to fire event and trigger autosave var change = new ChangePage(this, page, page, index); this.editor.graph.model.execute(change); } - + return page; }; @@ -1045,12 +1045,12 @@ EditorUi.prototype.insertPage = function(page, index) EditorUi.prototype.createPageId = function() { var id = null; - + do { id = Editor.guid(); } while (this.getPageById(id) != null) - + return id; }; @@ -1061,7 +1061,7 @@ EditorUi.prototype.createPage = function(name, id) { var page = new DiagramPage(this.fileNode.ownerDocument.createElement('diagram'), id); page.setName((name != null) ? name : this.createPageName()); - + return page; }; @@ -1072,11 +1072,11 @@ EditorUi.prototype.createPageName = function() { // Creates a lookup with names var existing = {}; - + for (var i = 0; i < this.pages.length; i++) { var tmp = this.pages[i].getName(); - + if (tmp != null && tmp.length > 0) { existing[tmp] = tmp; @@ -1086,13 +1086,13 @@ EditorUi.prototype.createPageName = function() // Avoids existing names var nr = this.pages.length; var name = null; - + do { name = mxResources.get('pageWithNumber', [++nr]); } while (existing[name] != null); - + return name; }; @@ -1105,19 +1105,19 @@ EditorUi.prototype.removePage = function(page) { var graph = this.editor.graph; var tmp = mxUtils.indexOf(this.pages, page); - + if (graph.isEnabled() && tmp >= 0) { if (this.editor.graph.isEditing()) { this.editor.graph.stopEditing(false); } - + graph.model.beginUpdate(); try { var next = this.currentPage; - + if (next == page && this.pages.length > 1) { if (tmp == this.pages.length - 1) @@ -1128,7 +1128,7 @@ EditorUi.prototype.removePage = function(page) { tmp++; } - + next = this.pages[tmp]; } else if (this.pages.length <= 1) @@ -1139,7 +1139,7 @@ EditorUi.prototype.removePage = function(page) graph.model.execute(new RenamePage(this, next, mxResources.get('pageWithNumber', [1]))); } - + // Uses model to fire event to trigger autosave graph.model.execute(new ChangePage(this, page, next)); } @@ -1153,7 +1153,7 @@ EditorUi.prototype.removePage = function(page) { this.handleError(e); } - + return page; }; @@ -1163,18 +1163,18 @@ EditorUi.prototype.removePage = function(page) EditorUi.prototype.duplicatePage = function(page, name) { var newPage = null; - + try { var graph = this.editor.graph; - + if (graph.isEnabled()) { if (graph.isEditing()) { graph.stopEditing(); } - + // Clones the current page and takes a snapshot of the graph model and view state var node = page.node.cloneNode(false); node.removeAttribute('id'); @@ -1185,7 +1185,7 @@ EditorUi.prototype.duplicatePage = function(page, name) var newPage = new DiagramPage(node); newPage.root = graph.cloneCell(graph.model.root, null, cloneMap); newPage.viewState = graph.getViewState(); - + // Resets zoom and scrollbar positions newPage.viewState.scale = 1; newPage.viewState.scrollLeft = null; @@ -1193,7 +1193,7 @@ EditorUi.prototype.duplicatePage = function(page, name) newPage.viewState.currentRoot = null; newPage.viewState.defaultParent = null; newPage.setName(name); - + newPage = this.insertPage(newPage, mxUtils.indexOf(this.pages, page) + 1); // Updates custom links after inserting into the model for cells to have new IDs @@ -1204,7 +1204,7 @@ EditorUi.prototype.duplicatePage = function(page, name) { this.handleError(e); } - + return newPage; }; @@ -1227,7 +1227,7 @@ EditorUi.prototype.renamePage = function(page) this.showDialog(dlg.container, 300, 80, true, true); dlg.init(); } - + return page; } @@ -1250,7 +1250,7 @@ EditorUi.prototype.createTabContainer = function() div.style.whiteSpace = 'nowrap'; div.style.overflow = 'hidden'; div.style.height = '0px'; - + return div; }; @@ -1270,10 +1270,10 @@ EditorUi.prototype.updateTabContainer = function() wrapper.style.whiteSpace = 'nowrap'; wrapper.style.overflow = 'hidden'; wrapper.style.fontSize = '13px'; - + // Allows for negative left margin of first tab wrapper.style.marginLeft = '30px'; - + // Automatic tab width to match available width // TODO: Fix tabWidth in chromeless mode var btnWidth = (this.editor.isChromelessView()) ? 29 : 59; @@ -1294,9 +1294,9 @@ EditorUi.prototype.updateTabContainer = function() { tab.className = 'geInactivePage'; } - + tab.setAttribute('draggable', 'true'); - + mxEvent.addListener(tab, 'dragstart', mxUtils.bind(this, function(evt) { if (graph.isEnabled()) @@ -1307,7 +1307,7 @@ EditorUi.prototype.updateTabContainer = function() // LATER: Check what triggers a parse as XML on this in FF after drop evt.dataTransfer.setData('Text', ''); } - + startIndex = index; } else @@ -1316,49 +1316,49 @@ EditorUi.prototype.updateTabContainer = function() mxEvent.consume(evt); } })); - + mxEvent.addListener(tab, 'dragend', mxUtils.bind(this, function(evt) { startIndex = null; evt.stopPropagation(); evt.preventDefault(); })); - + mxEvent.addListener(tab, 'dragover', mxUtils.bind(this, function(evt) { if (startIndex != null) { evt.dataTransfer.dropEffect = 'move'; } - + evt.stopPropagation(); evt.preventDefault(); })); - + mxEvent.addListener(tab, 'drop', mxUtils.bind(this, function(evt) { if (startIndex != null && index != startIndex) { - // LATER: Shift+drag for merge, ctrl+drag for clone + // LATER: Shift+drag for merge, ctrl+drag for clone this.movePage(startIndex, index); } evt.stopPropagation(); evt.preventDefault(); })); - + wrapper.appendChild(tab); }))(i, this.createTabForPage(this.pages[i], tabWidth, this.pages[i] != this.currentPage, i + 1)); } - + this.tabContainer.innerHTML = ''; this.tabContainer.appendChild(wrapper); - + // Adds floating menu with all pages and insert option var menutab = this.createPageMenuTab(); this.tabContainer.appendChild(menutab); var insertTab = null; - + // Not chromeless and not read-only file if (this.isPageInsertTabVisible()) { @@ -1374,27 +1374,27 @@ EditorUi.prototype.updateTabContainer = function() insertTab.style.right = '0px'; wrapper.style.marginRight = '30px'; } - + var temp = this.createControlTab(4, ' ❮ '); temp.style.position = 'absolute'; temp.style.right = (this.editor.chromeless) ? '29px' : '55px'; temp.style.fontSize = '13pt'; - + this.tabContainer.appendChild(temp); - + var temp2 = this.createControlTab(4, ' ❯'); temp2.style.position = 'absolute'; temp2.style.right = (this.editor.chromeless) ? '0px' : '29px'; temp2.style.fontSize = '13pt'; - + this.tabContainer.appendChild(temp2); - + // TODO: Scroll to current page var dx = Math.max(0, this.tabContainer.clientWidth - ((this.editor.chromeless) ? 86 : 116)); wrapper.style.width = dx + 'px'; - + var fade = 50; - + mxEvent.addListener(temp, 'click', mxUtils.bind(this, function(evt) { wrapper.scrollLeft -= Math.max(20, dx - 20); @@ -1402,7 +1402,7 @@ EditorUi.prototype.updateTabContainer = function() mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade); mxEvent.consume(evt); })); - + mxUtils.setOpacity(temp, (wrapper.scrollLeft > 0) ? 100 : fade); mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade); @@ -1458,14 +1458,14 @@ EditorUi.prototype.createTab = function(hoverEnabled) mxEvent.consume(evt); } })); - + mxEvent.addListener(tab, 'mouseleave', mxUtils.bind(this, function(evt) { tab.style.backgroundColor = this.tabContainer.style.backgroundColor; mxEvent.consume(evt); })); } - + return tab; }; @@ -1485,7 +1485,7 @@ EditorUi.prototype.createControlTab = function(paddingTop, html, hoverEnabled) { mxUtils.setOpacity(tab.firstChild, 40); } - + return tab; }; @@ -1500,13 +1500,13 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) tab.style.marginLeft = '0px'; tab.style.top = '0px'; tab.style.left = '1px'; - + var div = tab.getElementsByTagName('div')[0]; div.style.display = 'inline-block'; div.style.marginTop = '5px'; div.style.width = '21px'; div.style.height = '21px'; - + mxEvent.addListener(tab, 'click', mxUtils.bind(this, function(evt) { this.editor.graph.popupMenuHandler.hideMenu(); @@ -1528,7 +1528,7 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) item.setAttribute('title', this.pages[index].getName() + ((id != null) ? ' (' + id + ')' : '') + ' [' + (index + 1)+ ']'); - + // Adds checkmark to current page if (this.pages[index] == this.currentPage) { @@ -1550,7 +1550,7 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) { addPages(); } - + if (this.editor.graph.isEnabled()) { if (!invert) @@ -1560,24 +1560,24 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) } var page = this.currentPage; - + if (page != null) { menu.addSeparator(parent); var pageName = page.getName(); - + menu.addItem(mxResources.get('removeIt', [pageName]), null, mxUtils.bind(this, function() { this.removePage(page); }), parent); - + menu.addItem(mxResources.get('renameIt', [pageName]), null, mxUtils.bind(this, function() { this.renamePage(page, page.getName()); }), parent); menu.addSeparator(parent); - + menu.addItem(mxResources.get('duplicateIt', [pageName]), null, mxUtils.bind(this, function() { this.duplicatePage(page, mxResources.get('copyOf', [page.getName()])); @@ -1593,29 +1593,29 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) addPages(); } })); - + menu.div.className += ' geMenubarMenu'; menu.smartSeparators = true; menu.showDisabled = true; menu.autoExpand = true; - + // Disables autoexpand and destroys menu when hidden menu.hideMenu = mxUtils.bind(this, function() { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); menu.destroy(); }); - + var x = mxEvent.getClientX(evt); var y = mxEvent.getClientY(evt); menu.popup(x, y, null, evt); - + // Allows hiding by clicking on document this.setCurrentMenu(menu); mxEvent.consume(evt); })); - + return tab; }; @@ -1627,18 +1627,18 @@ EditorUi.prototype.createPageInsertTab = function() var tab = this.createControlTab(4, '
'); tab.setAttribute('title', mxResources.get('insertPage')); var graph = this.editor.graph; - + mxEvent.addListener(tab, 'click', mxUtils.bind(this, function(evt) { this.insertPage(); mxEvent.consume(evt); })); - + var div = tab.getElementsByTagName('div')[0]; div.style.display = 'inline-block'; div.style.width = '21px'; div.style.height = '21px'; - + return tab; }; @@ -1655,18 +1655,18 @@ EditorUi.prototype.createTabForPage = function(page, tabWidth, hoverEnabled, pag tab.style.maxWidth = tabWidth + 'px'; tab.style.width = tabWidth + 'px'; this.addTabListeners(page, tab); - + if (tabWidth > 42) { tab.style.textOverflow = 'ellipsis'; } - + return tab; }; /** * Translates this point by the given vector. - * + * * @param {number} dx X-coordinate of the translation. * @param {number} dy Y-coordinate of the translation. */ @@ -1681,16 +1681,16 @@ EditorUi.prototype.addTabListeners = function(page, tab) this.renamePage(page) mxEvent.consume(evt); })); - + var menuWasVisible = false; var pageWasActive = false; - + mxEvent.addGestureListeners(tab, mxUtils.bind(this, function(evt) { // Do not consume event here to allow for drag and drop of tabs menuWasVisible = this.currentMenu != null; pageWasActive = page == this.currentPage; - + if (!graph.isMouseDown && !pageWasActive) { this.selectPage(page); @@ -1707,12 +1707,12 @@ EditorUi.prototype.addTabListeners = function(page, tab) if (!mxEvent.isTouchEvent(evt) || !menuWasVisible) { var menu = new mxPopupMenu(this.createPageMenu(page)); - + menu.div.className += ' geMenubarMenu'; menu.smartSeparators = true; menu.showDisabled = true; menu.autoExpand = true; - + // Disables autoexpand and destroys menu when hidden menu.hideMenu = mxUtils.bind(this, function() { @@ -1720,13 +1720,13 @@ EditorUi.prototype.addTabListeners = function(page, tab) this.resetCurrentMenu(); menu.destroy(); }); - + var x = mxEvent.getClientX(evt); var y = mxEvent.getClientY(evt); menu.popup(x, y, null, evt); this.setCurrentMenu(menu, tab); } - + mxEvent.consume(evt); } })); @@ -1741,18 +1741,18 @@ EditorUi.prototype.getLinkForPage = function(page, params, lightbox) if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp) { var file = this.getCurrentFile(); - + if (file != null && file.constructor != LocalFile && this.getServiceName() == 'draw.io') { var search = this.getSearch(['create', 'title', 'mode', 'url', 'drive', 'splash', 'state', 'clibs', 'ui', 'viewbox', 'hide-pages']); search += ((search.length == 0) ? '?' : '&') + 'page-id=' + page.getId(); - + if (params != null) { search += '&' + params.join('&'); } - + return ((lightbox && urlParams['dev'] != '1') ? EditorUi.lightboxHost : (((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp || !(/.*\.draw\.io$/.test(window.location.hostname))) ? @@ -1760,7 +1760,7 @@ EditorUi.prototype.getLinkForPage = function(page, params, lightbox) '/' + search + '#' + file.getHash(); } } - + return null; }; @@ -1778,68 +1778,68 @@ EditorUi.prototype.createPageMenu = function(page, label) { this.insertPage(null, mxUtils.indexOf(this.pages, page) + 1); }), parent); - + menu.addItem(mxResources.get('delete'), null, mxUtils.bind(this, function() { this.removePage(page); }), parent); - + menu.addItem(mxResources.get('rename'), null, mxUtils.bind(this, function() { this.renamePage(page, label); }), parent); - + var url = this.getLinkForPage(page); if (url != null) { menu.addSeparator(parent); - + menu.addItem(mxResources.get('link'), null, mxUtils.bind(this, function() { this.showPublishLinkDialog(mxResources.get('url'), true, null, null, mxUtils.bind(this, function(linkTarget, linkColor, allPages, lightbox, editLink, layers) { var params = this.createUrlParameters(linkTarget, linkColor, allPages, lightbox, editLink, layers); - + if (!allPages) { params.push('hide-pages=1'); } - + if (!graph.isSelectionEmpty()) { var bounds = graph.getBoundingBox(graph.getSelectionCells()); - + var t = graph.view.translate; var s = graph.view.scale; bounds.width /= s; bounds.height /= s; bounds.x = bounds.x / s - t.x; bounds.y = bounds.y / s - t.y; - + params.push('viewbox=' + encodeURIComponent(JSON.stringify({x: Math.round(bounds.x), y: Math.round(bounds.y), width: Math.round(bounds.width), height: Math.round(bounds.height), border: 100}))); } - + var dlg = new EmbedDialog(this, this.getLinkForPage(page, params, lightbox)); this.showDialog(dlg.container, 450, 240, true, true); dlg.init(); })); })); } - + menu.addSeparator(parent); - + menu.addItem(mxResources.get('duplicate'), null, mxUtils.bind(this, function() { this.duplicatePage(page, mxResources.get('copyOf', [page.getName()])); }), parent); - + if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && this.getServiceName() == 'draw.io') - { + { menu.addSeparator(parent); - + menu.addItem(mxResources.get('openInNewWindow'), null, mxUtils.bind(this, function() { this.editor.editAsNew(this.getFileData(true, null, null, null, true, true)); @@ -1852,7 +1852,7 @@ EditorUi.prototype.createPageMenu = function(page, label) (function() { var editorUiRefresh = EditorUi.prototype.refresh; - + EditorUi.prototype.refresh = function(sizeDidChange) { editorUiRefresh.apply(this, arguments); @@ -1871,23 +1871,23 @@ EditorUi.prototype.createPageMenu = function(page, label) (function() { var codec = new mxObjectCodec(new MovePage(), ['ui']); - + codec.beforeDecode = function(dec, node, obj) { obj.ui = dec.ui; - + return node; }; - + codec.afterDecode = function(dec, node, obj) { var tmp = obj.oldIndex; obj.oldIndex = obj.newIndex; obj.newIndex = tmp; - + return obj; }; - + mxCodecRegistry.register(codec); })(); @@ -1895,23 +1895,23 @@ EditorUi.prototype.createPageMenu = function(page, label) (function() { var codec = new mxObjectCodec(new RenamePage(), ['ui', 'page']); - + codec.beforeDecode = function(dec, node, obj) { obj.ui = dec.ui; - + return node; }; - + codec.afterDecode = function(dec, node, obj) { var tmp = obj.previous; obj.previous = obj.name; obj.name = tmp; - + return obj; }; - + mxCodecRegistry.register(codec); })(); @@ -1920,14 +1920,14 @@ EditorUi.prototype.createPageMenu = function(page, label) { var codec = new mxObjectCodec(new ChangePage(), ['ui', 'relatedPage', 'index', 'neverShown', 'page', 'previousPage']); - + var viewStateIgnored = ['defaultParent', 'currentRoot', 'scrollLeft', 'scrollTop', 'scale', 'translate', 'lastPasteXml', 'pasteCounter']; - + codec.afterEncode = function(enc, obj, node) { node.setAttribute('relatedPage', obj.relatedPage.getId()) - + if (obj.index == null) { node.setAttribute('name', obj.relatedPage.getName()); @@ -1940,13 +1940,13 @@ EditorUi.prototype.createPageMenu = function(page, label) return (mxUtils.indexOf(viewStateIgnored, key) < 0) ? value : undefined; })); } - + if (obj.relatedPage.root != null) { enc.encodeCell(obj.relatedPage.root, node); } } - + return node; }; @@ -1954,7 +1954,7 @@ EditorUi.prototype.createPageMenu = function(page, label) { obj.ui = dec.ui; obj.relatedPage = obj.ui.getPageById(node.getAttribute('relatedPage')); - + if (obj.relatedPage == null) { var temp = node.ownerDocument.createElement('diagram'); @@ -2016,6 +2016,6 @@ EditorUi.prototype.createPageMenu = function(page, label) return obj; }; - + mxCodecRegistry.register(codec); -})(); \ No newline at end of file +})(); diff --git a/public/js/drawio/js/grapheditor/Dialogs.js b/public/js/drawio/js/grapheditor/Dialogs.js index a301941d0..9ebc71158 100644 --- a/public/js/drawio/js/grapheditor/Dialogs.js +++ b/public/js/drawio/js/grapheditor/Dialogs.js @@ -13,12 +13,12 @@ var OpenDialog = function() iframe.style.borderWidth = '0px'; iframe.style.overflow = 'hidden'; iframe.frameBorder = '0'; - + var dx = 0; iframe.setAttribute('width', (((Editor.useLocalStorage) ? 640 : 320) + dx) + 'px'); iframe.setAttribute('height', (((Editor.useLocalStorage) ? 480 : 220) + dx) + 'px'); iframe.setAttribute('src', OPEN_FORM); - + this.container = iframe; }; @@ -28,10 +28,10 @@ var OpenDialog = function() var ColorDialog = function(editorUi, color, apply, cancelFn) { this.editorUi = editorUi; - + var input = document.createElement('input'); input.style.marginBottom = '10px'; - + // Required for picker to render in IE if (mxClient.IS_IE) { @@ -40,11 +40,11 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) } var applyFunction = (apply != null) ? apply : this.createApplyFunction(); - + function doApply() { var color = input.value; - + // Blocks any non-alphabetic chars in colors if (/(^#?[a-zA-Z0-9]*$)/.test(color)) { @@ -59,10 +59,10 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) } else { - editorUi.handleError({message: mxResources.get('invalidInput')}); + editorUi.handleError({message: mxResources.get('invalidInput')}); } }; - + this.init = function() { if (!mxClient.IS_TOUCH) @@ -83,16 +83,16 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) div.appendChild(mxJSColor.picker.box); var center = document.createElement('center'); - + function createRecentColorTable() { var table = addPresets((ColorDialog.recentColors.length == 0) ? ['FFFFFF'] : ColorDialog.recentColors, 11, 'FFFFFF', true); table.style.marginBottom = '8px'; - + return table; }; - + var addPresets = mxUtils.bind(this, function(presets, rowLength, defaultColor, addResetOption) { rowLength = (rowLength != null) ? rowLength : 12; @@ -106,11 +106,11 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) table.appendChild(tbody); var rows = presets.length / rowLength; - + for (var row = 0; row < rows; row++) { var tr = document.createElement('tr'); - + for (var i = 0; i < rowLength; i++) { (mxUtils.bind(this, function(clr) @@ -120,7 +120,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) td.style.padding = '0px'; td.style.width = '16px'; td.style.height = '16px'; - + if (clr == null) { clr = defaultColor; @@ -146,13 +146,13 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) td.setAttribute('title', name); } } - + tr.appendChild(td); if (clr != null) { td.style.cursor = 'pointer'; - + mxEvent.addListener(td, 'click', function() { if (clr == 'none') @@ -165,15 +165,15 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) picker.fromString(clr); } }); - + mxEvent.addListener(td, 'dblclick', doApply); } }))(presets[row * rowLength + i]); } - + tbody.appendChild(tr); } - + if (addResetOption) { var td = document.createElement('td'); @@ -186,7 +186,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) td.style.backgroundPosition = 'center center'; td.style.backgroundRepeat = 'no-repeat'; td.style.cursor = 'pointer'; - + tr.appendChild(td); mxEvent.addListener(td, 'click', function() @@ -195,9 +195,9 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) table.parentNode.replaceChild(createRecentColorTable(), table); }); } - + center.appendChild(table); - + return table; }); @@ -242,10 +242,10 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) } mxUtils.br(div); - + // Adds recent colors createRecentColorTable(); - + // Adds presets var table = addPresets(this.presetColors); table.style.marginBottom = '8px'; @@ -257,11 +257,11 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) var buttons = document.createElement('div'); buttons.style.textAlign = 'right'; buttons.style.whiteSpace = 'nowrap'; - + var cancelBtn = mxUtils.button(mxResources.get('cancel'), function() { editorUi.hideDialog(); - + if (cancelFn != null) { cancelFn(); @@ -273,16 +273,16 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) { buttons.appendChild(cancelBtn); } - + var applyBtn = mxUtils.button(mxResources.get('apply'), doApply); applyBtn.className = 'geBtn gePrimaryBtn'; buttons.appendChild(applyBtn); - + if (!editorUi.editor.cancelFirst) { buttons.appendChild(cancelBtn); } - + if (color != null) { if (color == 'none') @@ -295,7 +295,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) picker.fromString(color); } } - + div.appendChild(buttons); this.picker = picker; this.colorInput = input; @@ -307,23 +307,23 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) if (e.keyCode == 27) { editorUi.hideDialog(); - + if (cancelFn != null) { cancelFn(); } - + mxEvent.consume(e); } }); - + this.container = div; }; /** * Creates function to apply value */ -ColorDialog.prototype.presetColors = ['E6D0DE', 'CDA2BE', 'B5739D', 'E1D5E7', 'C3ABD0', 'A680B8', 'D4E1F5', 'A9C4EB', '7EA6E0', 'D5E8D4', '9AC7BF', '67AB9F', 'D5E8D4', 'B9E0A5', '97D077', 'FFF2CC', 'FFE599', 'FFD966', 'FFF4C3', 'FFCE9F', 'FFB570', 'F8CECC', 'F19C99', 'EA6B66']; +ColorDialog.prototype.presetColors = ['E6D0DE', 'CDA2BE', 'B5739D', 'E1D5E7', 'C3ABD0', 'A680B8', 'D4E1F5', 'A9C4EB', '7EA6E0', 'D5E8D4', '9AC7BF', '67AB9F', 'D5E8D4', 'B9E0A5', '97D077', 'FFF2CC', 'FFE599', 'FFD966', 'FFF4C3', 'FFCE9F', 'FFB570', 'F8CECC', 'F19C99', 'EA6B66']; /** * Creates function to apply value @@ -347,7 +347,7 @@ ColorDialog.prototype.createApplyFunction = function() return mxUtils.bind(this, function(color) { var graph = this.editorUi.editor.graph; - + graph.getModel().beginUpdate(); try { @@ -363,7 +363,7 @@ ColorDialog.prototype.createApplyFunction = function() }; /** - * + * */ ColorDialog.recentColors = []; @@ -376,7 +376,7 @@ ColorDialog.addRecentColor = function(color, max) { mxUtils.remove(color, ColorDialog.recentColors); ColorDialog.recentColors.splice(0, 0, color); - + if (ColorDialog.recentColors.length >= max) { ColorDialog.recentColors.pop(); @@ -424,7 +424,7 @@ var AboutDialog = function(editorUi) }); closeBtn.className = 'geBtn gePrimaryBtn'; div.appendChild(closeBtn); - + this.container = div; }; @@ -472,19 +472,19 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w { top.appendChild(header); } - + var nameInput = document.createElement('textarea'); - + if (noWrap) { nameInput.setAttribute('wrap', 'off'); } - + nameInput.setAttribute('spellcheck', 'false'); nameInput.setAttribute('autocorrect', 'off'); nameInput.setAttribute('autocomplete', 'off'); nameInput.setAttribute('autocapitalize', 'off'); - + mxUtils.write(nameInput, url || ''); nameInput.style.resize = 'none'; nameInput.style.outline = 'none'; @@ -494,7 +494,7 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w nameInput.style.left = '0px'; nameInput.style.height = '100%'; nameInput.style.width = '100%'; - + this.textarea = nameInput; this.init = function() @@ -512,10 +512,10 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w editorUi.editor.graph.openLink(helpLink); }); helpBtn.className = 'geBtn'; - + buttons.appendChild(helpBtn); } - + if (customButtons != null) { for (var i = 0; i < customButtons.length; i++) @@ -533,16 +533,16 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w } customBtn.className = 'geBtn'; - + buttons.appendChild(customBtn); })(customButtons[i][0], customButtons[i][1], customButtons[i][2]); } } - + var cancelBtn = mxUtils.button(cancelTitle || mxResources.get('cancel'), function() { editorUi.hideDialog(); - + if (cancelFn != null) { cancelFn(); @@ -551,17 +551,17 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w cancelBtn.setAttribute('title', 'Escape'); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { buttons.appendChild(cancelBtn); } - + if (addButtons != null) { addButtons(buttons, nameInput); } - + if (fn != null) { var genericBtn = mxUtils.button(applyTitle || mxResources.get('apply'), function() @@ -570,10 +570,10 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w { editorUi.hideDialog(); } - + fn(nameInput.value); }); - + genericBtn.setAttribute('title', 'Ctrl+Enter'); genericBtn.className = 'geBtn gePrimaryBtn'; buttons.appendChild(genericBtn); @@ -586,7 +586,7 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w } }); } - + if (!editorUi.editor.cancelFirst) { buttons.appendChild(cancelBtn); @@ -613,15 +613,15 @@ var EditDiagramDialog = function(editorUi) textarea.style.width = '600px'; textarea.style.height = '360px'; textarea.style.marginBottom = '16px'; - + textarea.value = mxUtils.getPrettyXml(editorUi.editor.getGraphXml()); div.appendChild(textarea); - + this.init = function() { textarea.focus(); }; - + // Enables dropping files if (Graph.fileSupport) { @@ -629,17 +629,17 @@ var EditDiagramDialog = function(editorUi) { evt.stopPropagation(); evt.preventDefault(); - + if (evt.dataTransfer.files.length > 0) { var file = evt.dataTransfer.files[0]; var reader = new FileReader(); - + reader.onload = function(e) { textarea.value = e.target.result; }; - + reader.readAsText(file); } else @@ -647,7 +647,7 @@ var EditDiagramDialog = function(editorUi) textarea.value = editorUi.extractGraphModelFromEvent(evt); } }; - + function handleDragOver(evt) { evt.stopPropagation(); @@ -658,18 +658,18 @@ var EditDiagramDialog = function(editorUi) textarea.addEventListener('dragover', handleDragOver, false); textarea.addEventListener('drop', handleDrop, false); } - + var cancelBtn = mxUtils.button(mxResources.get('cancel'), function() { editorUi.hideDialog(); }); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { div.appendChild(cancelBtn); } - + var select = document.createElement('select'); select.style.width = '180px'; select.className = 'geBtn'; @@ -685,7 +685,7 @@ var EditDiagramDialog = function(editorUi) var newOption = document.createElement('option'); newOption.setAttribute('value', 'new'); mxUtils.write(newOption, mxResources.get('openInNewWindow')); - + if (EditDiagramDialog.showNewWindowOption) { select.appendChild(newOption); @@ -706,7 +706,7 @@ var EditDiagramDialog = function(editorUi) // Removes all illegal control characters before parsing var data = Graph.zapGremlins(mxUtils.trim(textarea.value)); var error = null; - + if (select.value == 'new') { editorUi.hideDialog(); @@ -727,7 +727,7 @@ var EditDiagramDialog = function(editorUi) } finally { - editorUi.editor.graph.model.endUpdate(); + editorUi.editor.graph.model.endUpdate(); } } else if (select.value == 'import') @@ -739,10 +739,10 @@ var EditDiagramDialog = function(editorUi) var model = new mxGraphModel(); var codec = new mxCodec(doc); codec.decode(doc.documentElement, model); - + var children = model.getChildren(model.getChildAt(model.getRoot(), 0)); editorUi.editor.graph.setSelectionCells(editorUi.editor.graph.importCells(children)); - + // LATER: Why is hideDialog between begin-/endUpdate faster? editorUi.hideDialog(); } @@ -752,10 +752,10 @@ var EditDiagramDialog = function(editorUi) } finally { - editorUi.editor.graph.model.endUpdate(); + editorUi.editor.graph.model.endUpdate(); } } - + if (error != null) { mxUtils.alert(error.message); @@ -763,7 +763,7 @@ var EditDiagramDialog = function(editorUi) }); okBtn.className = 'geBtn gePrimaryBtn'; div.appendChild(okBtn); - + if (!editorUi.editor.cancelFirst) { div.appendChild(cancelBtn); @@ -773,7 +773,7 @@ var EditDiagramDialog = function(editorUi) }; /** - * + * */ EditDiagramDialog.showNewWindowOption = true; @@ -785,25 +785,25 @@ var ExportDialog = function(editorUi) var graph = editorUi.editor.graph; var bounds = graph.getGraphBounds(); var scale = graph.view.scale; - + var width = Math.ceil(bounds.width / scale); var height = Math.ceil(bounds.height / scale); var row, td; - + var table = document.createElement('table'); var tbody = document.createElement('tbody'); table.setAttribute('cellpadding', (mxClient.IS_SF) ? '0' : '2'); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; td.style.width = '100px'; mxUtils.write(td, mxResources.get('filename') + ':'); - + row.appendChild(td); - + var nameInput = document.createElement('input'); nameInput.setAttribute('value', editorUi.editor.getOrCreateFilename()); nameInput.style.width = '180px'; @@ -811,17 +811,17 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(nameInput); row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('format') + ':'); - + row.appendChild(td); - + var imageFormatSelect = document.createElement('select'); imageFormatSelect.style.width = '180px'; @@ -831,14 +831,14 @@ var ExportDialog = function(editorUi) imageFormatSelect.appendChild(pngOption); var gifOption = document.createElement('option'); - + if (ExportDialog.showGifOption) { gifOption.setAttribute('value', 'gif'); mxUtils.write(gifOption, mxResources.get('formatGif')); imageFormatSelect.appendChild(gifOption); } - + var jpgOption = document.createElement('option'); jpgOption.setAttribute('value', 'jpg'); mxUtils.write(jpgOption, mxResources.get('formatJpg')); @@ -848,12 +848,12 @@ var ExportDialog = function(editorUi) pdfOption.setAttribute('value', 'pdf'); mxUtils.write(pdfOption, mxResources.get('formatPdf')); imageFormatSelect.appendChild(pdfOption); - + var svgOption = document.createElement('option'); svgOption.setAttribute('value', 'svg'); mxUtils.write(svgOption, mxResources.get('formatSvg')); imageFormatSelect.appendChild(svgOption); - + if (ExportDialog.showXmlOption) { var xmlOption = document.createElement('option'); @@ -865,17 +865,17 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(imageFormatSelect); row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('zoom') + ' (%):'); - + row.appendChild(td); - + var zoomInput = document.createElement('input'); zoomInput.setAttribute('type', 'number'); zoomInput.setAttribute('value', '100'); @@ -892,9 +892,9 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('width') + ':'); - + row.appendChild(td); - + var widthInput = document.createElement('input'); widthInput.setAttribute('value', width); widthInput.style.width = '180px'; @@ -904,15 +904,15 @@ var ExportDialog = function(editorUi) row.appendChild(td); tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('height') + ':'); - + row.appendChild(td); - + var heightInput = document.createElement('input'); heightInput.setAttribute('value', height); heightInput.style.width = '180px'; @@ -922,15 +922,15 @@ var ExportDialog = function(editorUi) row.appendChild(td); tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('dpi') + ':'); - + row.appendChild(td); - + var dpiSelect = document.createElement('select'); dpiSelect.style.width = '180px'; @@ -943,17 +943,17 @@ var ExportDialog = function(editorUi) dpi200Option.setAttribute('value', '200'); mxUtils.write(dpi200Option, '200dpi'); dpiSelect.appendChild(dpi200Option); - + var dpi300Option = document.createElement('option'); dpi300Option.setAttribute('value', '300'); mxUtils.write(dpi300Option, '300dpi'); dpiSelect.appendChild(dpi300Option); - + var dpi400Option = document.createElement('option'); dpi400Option.setAttribute('value', '400'); mxUtils.write(dpi400Option, '400dpi'); dpiSelect.appendChild(dpi400Option); - + var dpiCustOption = document.createElement('option'); dpiCustOption.setAttribute('value', 'custom'); mxUtils.write(dpiCustOption, mxResources.get('custom')); @@ -966,9 +966,9 @@ var ExportDialog = function(editorUi) customDpi.setAttribute('type', 'number'); customDpi.setAttribute('min', '50'); customDpi.setAttribute('step', '50'); - + var zoomUserChanged = false; - + mxEvent.addListener(dpiSelect, 'change', function() { if (this.value == 'custom') @@ -980,18 +980,18 @@ var ExportDialog = function(editorUi) else { customDpi.value = this.value; - - if (!zoomUserChanged) + + if (!zoomUserChanged) { zoomInput.value = this.value; } } }); - + mxEvent.addListener(customDpi, 'change', function() { var dpi = parseInt(customDpi.value); - + if (isNaN(dpi) || dpi <= 0) { customDpi.style.backgroundColor = 'red'; @@ -1000,28 +1000,28 @@ var ExportDialog = function(editorUi) { customDpi.style.backgroundColor = ''; - if (!zoomUserChanged) + if (!zoomUserChanged) { zoomInput.value = dpi; } - } + } }); - + td = document.createElement('td'); td.appendChild(dpiSelect); td.appendChild(customDpi); row.appendChild(td); tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('background') + ':'); - + row.appendChild(td); - + var transparentCheckbox = document.createElement('input'); transparentCheckbox.setAttribute('type', 'checkbox'); transparentCheckbox.checked = graph.background == null || graph.background == mxConstants.NONE; @@ -1029,38 +1029,38 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(transparentCheckbox); mxUtils.write(td, mxResources.get('transparent')); - + row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('grid') + ':'); - + row.appendChild(td); - + var gridCheckbox = document.createElement('input'); gridCheckbox.setAttribute('type', 'checkbox'); gridCheckbox.checked = false; td = document.createElement('td'); td.appendChild(gridCheckbox); - + row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('borderWidth') + ':'); - + row.appendChild(td); - + var borderInput = document.createElement('input'); borderInput.setAttribute('type', 'number'); borderInput.setAttribute('value', ExportDialog.lastBorderValue); @@ -1072,13 +1072,13 @@ var ExportDialog = function(editorUi) tbody.appendChild(row); table.appendChild(tbody); - + // Handles changes in the export format function formatChanged() { var name = nameInput.value; var dot = name.lastIndexOf('.'); - + if (dot > 0) { nameInput.value = name.substring(0, dot + 1) + imageFormatSelect.value; @@ -1087,7 +1087,7 @@ var ExportDialog = function(editorUi) { nameInput.value = name + '.' + imageFormatSelect.value; } - + if (imageFormatSelect.value === 'xml') { zoomInput.setAttribute('disabled', 'true'); @@ -1102,7 +1102,7 @@ var ExportDialog = function(editorUi) heightInput.removeAttribute('disabled'); borderInput.removeAttribute('disabled'); } - + if (imageFormatSelect.value === 'png' || imageFormatSelect.value === 'svg' || imageFormatSelect.value === 'pdf') { transparentCheckbox.removeAttribute('disabled'); @@ -1111,7 +1111,7 @@ var ExportDialog = function(editorUi) { transparentCheckbox.setAttribute('disabled', 'disabled'); } - + if (imageFormatSelect.value === 'png' || imageFormatSelect.value === 'jpg' || imageFormatSelect.value === 'pdf') { gridCheckbox.removeAttribute('disabled'); @@ -1120,7 +1120,7 @@ var ExportDialog = function(editorUi) { gridCheckbox.setAttribute('disabled', 'disabled'); } - + if (imageFormatSelect.value === 'png') { dpiSelect.removeAttribute('disabled'); @@ -1132,7 +1132,7 @@ var ExportDialog = function(editorUi) customDpi.setAttribute('disabled', 'disabled'); } }; - + mxEvent.addListener(imageFormatSelect, 'change', formatChanged); formatChanged(); @@ -1146,7 +1146,7 @@ var ExportDialog = function(editorUi) { widthInput.style.backgroundColor = ''; } - + if (widthInput.value * heightInput.value > MAX_AREA || heightInput.value <= 0) { heightInput.style.backgroundColor = 'red'; @@ -1162,7 +1162,7 @@ var ExportDialog = function(editorUi) zoomUserChanged = true; var s = Math.max(0, parseFloat(zoomInput.value) || 100) / 100; zoomInput.value = parseFloat((s * 100).toFixed(2)); - + if (width > 0) { widthInput.value = Math.floor(width * s); @@ -1174,14 +1174,14 @@ var ExportDialog = function(editorUi) widthInput.value = width; heightInput.value = height; } - + checkValues(); }); mxEvent.addListener(widthInput, 'change', function() { var s = parseInt(widthInput.value) / width; - + if (s > 0) { zoomInput.value = parseFloat((s * 100).toFixed(2)); @@ -1193,14 +1193,14 @@ var ExportDialog = function(editorUi) widthInput.value = width; heightInput.value = height; } - + checkValues(); }); mxEvent.addListener(heightInput, 'change', function() { var s = parseInt(heightInput.value) / height; - + if (s > 0) { zoomInput.value = parseFloat((s * 100).toFixed(2)); @@ -1212,16 +1212,16 @@ var ExportDialog = function(editorUi) widthInput.value = width; heightInput.value = height; } - + checkValues(); }); - + row = document.createElement('tr'); td = document.createElement('td'); td.setAttribute('align', 'right'); td.style.paddingTop = '22px'; td.colSpan = 2; - + var saveBtn = mxUtils.button(mxResources.get('export'), mxUtils.bind(this, function() { if (parseInt(zoomInput.value) <= 0) @@ -1236,7 +1236,7 @@ var ExportDialog = function(editorUi) var b = Math.max(0, parseInt(borderInput.value)); var bg = graph.background; var dpi = Math.max(1, parseInt(customDpi.value)); - + if ((format == 'svg' || format == 'png' || format == 'pdf') && transparentCheckbox.checked) { bg = null; @@ -1245,19 +1245,19 @@ var ExportDialog = function(editorUi) { bg = '#ffffff'; } - + ExportDialog.lastBorderValue = b; ExportDialog.exportFile(editorUi, name, format, bg, s, b, dpi, gridCheckbox.checked); } })); saveBtn.className = 'geBtn gePrimaryBtn'; - + var cancelBtn = mxUtils.button(mxResources.get('cancel'), function() { editorUi.hideDialog(); }); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { td.appendChild(cancelBtn); @@ -1299,7 +1299,7 @@ ExportDialog.showXmlOption = true; ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi, grid) { var graph = editorUi.editor.graph; - + if (format == 'xml') { ExportDialog.saveLocalFile(editorUi, mxUtils.getXml(editorUi.editor.getGraphXml()), name, format); @@ -1311,26 +1311,26 @@ ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi, grid) else { 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((b / s - bounds.x) / graph.view.scale), Math.floor((b / s - bounds.y) / graph.view.scale)); xmlCanvas.scale(s / graph.view.scale); - + var imgExport = new mxImageExport() imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas); - + // Puts request data together var param = 'xml=' + encodeURIComponent(mxUtils.getXml(root)); var w = Math.ceil(bounds.width * s / graph.view.scale + 2 * b); var h = Math.ceil(bounds.height * s / graph.view.scale + 2 * b); - + // Requests image if request is valid if (param.length <= MAX_REQUEST_SIZE && w * h < MAX_AREA) { @@ -1378,9 +1378,9 @@ var EditDataDialog = function(ui, cell) { var div = document.createElement('div'); var graph = ui.editor.graph; - + var value = graph.getModel().getValue(cell); - + // Converts the value to an XML node if (!mxUtils.isNode(value)) { @@ -1389,13 +1389,13 @@ var EditDataDialog = function(ui, cell) obj.setAttribute('label', value || ''); value = obj; } - + var meta = {}; - + try { var temp = mxUtils.getValue(ui.editor.graph.getCurrentCellStyle(cell), 'metaData', null); - + if (temp != null) { meta = JSON.parse(temp); @@ -1405,7 +1405,7 @@ var EditDataDialog = function(ui, cell) { // ignore } - + // Creates the dialog contents var form = new mxForm('properties'); form.table.style.width = '100%'; @@ -1417,7 +1417,7 @@ var EditDataDialog = function(ui, cell) var id = (EditDataDialog.getDisplayIdForCell != null) ? EditDataDialog.getDisplayIdForCell(ui, cell) : null; - + var addRemoveButton = function(text, name) { var wrapper = document.createElement('div'); @@ -1425,13 +1425,13 @@ var EditDataDialog = function(ui, cell) wrapper.style.paddingRight = '20px'; wrapper.style.boxSizing = 'border-box'; wrapper.style.width = '100%'; - + var removeAttr = document.createElement('a'); var img = mxUtils.createImage(Dialog.prototype.closeImage); img.style.height = '9px'; img.style.fontSize = '9px'; img.style.marginBottom = (mxClient.IS_IE11) ? '-1px' : '5px'; - + removeAttr.className = 'geButton'; removeAttr.setAttribute('title', mxResources.get('delete')); removeAttr.style.position = 'absolute'; @@ -1442,23 +1442,23 @@ var EditDataDialog = function(ui, cell) removeAttr.style.height = '9px'; removeAttr.style.cursor = 'pointer'; removeAttr.appendChild(img); - + var removeAttrFn = (function(name) { return function() { var count = 0; - + for (var j = 0; j < names.length; j++) { if (names[j] == name) { texts[j] = null; form.table.deleteRow(count + ((id != null) ? 1 : 0)); - + break; } - + if (texts[j] != null) { count++; @@ -1466,34 +1466,34 @@ var EditDataDialog = function(ui, cell) } }; })(name); - + mxEvent.addListener(removeAttr, 'click', removeAttrFn); - + var parent = text.parentNode; wrapper.appendChild(text); wrapper.appendChild(removeAttr); parent.appendChild(wrapper); }; - + var addTextArea = function(index, name, value) { names[index] = name; texts[index] = form.addTextarea(names[count] + ':', value, 2); texts[index].style.width = '100%'; - + if (value.indexOf('\n') > 0) { texts[index].setAttribute('rows', '2'); } - + addRemoveButton(texts[index], name); - + if (meta[name] != null && meta[name].editable == false) { texts[index].setAttribute('disabled', 'disabled'); } }; - + var temp = []; var isLayer = graph.getModel().getParent(cell) == graph.getModel().getRoot(); @@ -1504,7 +1504,7 @@ var EditDataDialog = function(ui, cell) temp.push({name: attrs[i].nodeName, value: attrs[i].nodeValue}); } } - + // Sorts by name temp.sort(function(a, b) { @@ -1523,15 +1523,15 @@ var EditDataDialog = function(ui, cell) }); if (id != null) - { + { var text = document.createElement('div'); text.style.width = '100%'; text.style.fontSize = '11px'; text.style.textAlign = 'center'; mxUtils.write(text, id); - + var idInput = form.addField(mxResources.get('id') + ':', text); - + mxEvent.addListener(text, 'dblclick', function(evt) { if (mxEvent.isShiftDown(evt)) @@ -1561,13 +1561,13 @@ var EditDataDialog = function(ui, cell) text.setAttribute('title', 'Shift+Double Click to Edit ID'); } - + for (var i = 0; i < temp.length; i++) { addTextArea(count, temp[i].name, temp[i].value); count++; } - + var top = document.createElement('div'); top.style.position = 'absolute'; top.style.top = '30px'; @@ -1575,7 +1575,7 @@ var EditDataDialog = function(ui, cell) top.style.right = '30px'; top.style.bottom = '80px'; top.style.overflowY = 'auto'; - + top.appendChild(form.table); var newProp = document.createElement('div'); @@ -1584,7 +1584,7 @@ var EditDataDialog = function(ui, cell) newProp.style.whiteSpace = 'nowrap'; newProp.style.marginTop = '6px'; newProp.style.width = '100%'; - + var nameInput = document.createElement('input'); nameInput.setAttribute('placeholder', mxResources.get('enterPropertyName')); nameInput.setAttribute('type', 'text'); @@ -1592,11 +1592,11 @@ var EditDataDialog = function(ui, cell) nameInput.style.boxSizing = 'border-box'; nameInput.style.marginLeft = '2px'; nameInput.style.width = '100%'; - + newProp.appendChild(nameInput); top.appendChild(newProp); div.appendChild(top); - + var addBtn = mxUtils.button(mxResources.get('addProperty'), function() { var name = nameInput.value; @@ -1607,7 +1607,7 @@ var EditDataDialog = function(ui, cell) try { var idx = mxUtils.indexOf(names, name); - + if (idx >= 0 && texts[idx] != null) { texts[idx].focus(); @@ -1617,7 +1617,7 @@ var EditDataDialog = function(ui, cell) // Checks if the name is valid var clone = value.cloneNode(false); clone.setAttribute(name, ''); - + if (idx >= 0) { names.splice(idx, 1); @@ -1654,7 +1654,7 @@ var EditDataDialog = function(ui, cell) addBtn.click(); } }); - + this.init = function() { if (texts.length > 0) @@ -1666,7 +1666,7 @@ var EditDataDialog = function(ui, cell) nameInput.focus(); } }; - + addBtn.setAttribute('title', mxResources.get('addProperty')); addBtn.setAttribute('disabled', 'disabled'); addBtn.style.textOverflow = 'ellipsis'; @@ -1681,21 +1681,21 @@ var EditDataDialog = function(ui, cell) { ui.hideDialog.apply(ui, arguments); }); - + cancelBtn.setAttribute('title', 'Escape'); cancelBtn.className = 'geBtn'; - + var applyBtn = mxUtils.button(mxResources.get('apply'), function() { try { ui.hideDialog.apply(ui, arguments); - + // Clones and updates the value value = value.cloneNode(true); var removeLabel = false; - + for (var i = 0; i < names.length; i++) { if (texts[i] == null) @@ -1709,13 +1709,13 @@ var EditDataDialog = function(ui, cell) value.getAttribute('placeholders') == '1'); } } - + // Removes label if placeholder is assigned if (removeLabel) { value.removeAttribute('label'); } - + // Updates the value of the cell (undoable) graph.getModel().setValue(cell, value); } @@ -1735,7 +1735,7 @@ var EditDataDialog = function(ui, cell) applyBtn.click(); } }); - + function updateAddBtn() { if (nameInput.value.length > 0) @@ -1749,13 +1749,13 @@ var EditDataDialog = function(ui, cell) }; mxEvent.addListener(nameInput, 'keyup', updateAddBtn); - + // Catches all changes that don't fire a keyup (such as paste via mouse) mxEvent.addListener(nameInput, 'change', updateAddBtn); - + var buttons = document.createElement('div'); buttons.style.cssText = 'position:absolute;left:30px;right:30px;text-align:right;bottom:30px;height:40px;' - + if (ui.editor.graph.getModel().isVertex(cell) || ui.editor.graph.getModel().isEdge(cell)) { var replace = document.createElement('span'); @@ -1763,13 +1763,13 @@ var EditDataDialog = function(ui, cell) var input = document.createElement('input'); input.setAttribute('type', 'checkbox'); input.style.marginRight = '6px'; - + if (value.getAttribute('placeholders') == '1') { input.setAttribute('checked', 'checked'); input.defaultChecked = true; } - + mxEvent.addListener(input, 'click', function() { if (value.getAttribute('placeholders') == '1') @@ -1781,10 +1781,10 @@ var EditDataDialog = function(ui, cell) value.setAttribute('placeholders', '1'); } }); - + replace.appendChild(input); mxUtils.write(replace, mxResources.get('placeholders')); - + if (EditDataDialog.placeholderHelpLink != null) { var link = document.createElement('a'); @@ -1793,7 +1793,7 @@ var EditDataDialog = function(ui, cell) link.setAttribute('target', '_blank'); link.style.marginLeft = '8px'; link.style.cursor = 'help'; - + var icon = document.createElement('img'); mxUtils.setOpacity(icon, 50); icon.style.height = '16px'; @@ -1803,13 +1803,13 @@ var EditDataDialog = function(ui, cell) icon.style.marginTop = (mxClient.IS_IE11) ? '0px' : '-4px'; icon.setAttribute('src', Editor.helpImage); link.appendChild(icon); - + replace.appendChild(link); } - + buttons.appendChild(replace); } - + if (ui.editor.cancelFirst) { buttons.appendChild(cancelBtn); @@ -1831,12 +1831,12 @@ var EditDataDialog = function(ui, cell) EditDataDialog.getDisplayIdForCell = function(ui, cell) { var id = null; - + if (ui.editor.graph.getModel().getParent(cell) != null) { id = cell.getId(); } - + return id; }; @@ -1852,7 +1852,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) { var div = document.createElement('div'); mxUtils.write(div, mxResources.get('editLink') + ':'); - + var inner = document.createElement('div'); inner.className = 'geTitle'; inner.style.backgroundColor = 'transparent'; @@ -1861,7 +1861,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) inner.style.textOverflow = 'clip'; inner.style.cursor = 'default'; inner.style.paddingRight = '20px'; - + var linkInput = document.createElement('input'); linkInput.setAttribute('value', initialValue); linkInput.setAttribute('placeholder', 'http://www.example.com/'); @@ -1872,7 +1872,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) linkInput.style.backgroundRepeat = 'no-repeat'; linkInput.style.backgroundPosition = '100% 50%'; linkInput.style.paddingRight = '14px'; - + var cross = document.createElement('div'); cross.setAttribute('title', mxResources.get('reset')); cross.style.position = 'relative'; @@ -1884,7 +1884,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) // Workaround for inline-block not supported in IE cross.style.display = 'inline-block'; cross.style.top = '3px'; - + // Needed to block event transparency in IE cross.style.background = 'url(' + IMAGE_PATH + '/transparent.gif)'; @@ -1893,15 +1893,15 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) linkInput.value = ''; linkInput.focus(); }); - + inner.appendChild(linkInput); inner.appendChild(cross); div.appendChild(inner); - + this.init = function() { linkInput.focus(); - + if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5) { linkInput.select(); @@ -1911,7 +1911,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) document.execCommand('selectAll', false, null); } }; - + var btns = document.createElement('div'); btns.style.marginTop = '18px'; btns.style.textAlign = 'right'; @@ -1930,12 +1930,12 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) editorUi.hideDialog(); }); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { btns.appendChild(cancelBtn); } - + var mainBtn = mxUtils.button(btnLabel, function() { editorUi.hideDialog(); @@ -1943,7 +1943,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) }); mainBtn.className = 'geBtn gePrimaryBtn'; btns.appendChild(mainBtn); - + if (!editorUi.editor.cancelFirst) { btns.appendChild(cancelBtn); @@ -1955,7 +1955,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) }; /** - * + * */ var OutlineWindow = function(editorUi, x, y, w, h) { @@ -1974,12 +1974,12 @@ var OutlineWindow = function(editorUi, x, y, w, h) this.window.setResizable(true); this.window.setClosable(true); this.window.setVisible(true); - + this.window.setLocation = function(x, y) { var iw = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var ih = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; - + x = Math.max(0, Math.min(x, iw - this.table.clientWidth)); y = Math.max(0, Math.min(y, ih - this.table.clientHeight - ((urlParams['sketch'] == '1') ? 3 : 48))); @@ -1988,17 +1988,17 @@ var OutlineWindow = function(editorUi, x, y, w, h) mxWindow.prototype.setLocation.apply(this, arguments); } }; - + var resizeListener = mxUtils.bind(this, function() { var x = this.window.getX(); var y = this.window.getY(); - + this.window.setLocation(x, y); }); - + mxEvent.addListener(window, 'resize', resizeListener); - + var outline = editorUi.createOutline(this.window); this.destroy = function() @@ -2013,17 +2013,17 @@ var OutlineWindow = function(editorUi, x, y, w, h) this.window.fit(); outline.setSuspended(false); })); - + this.window.addListener(mxEvent.HIDE, mxUtils.bind(this, function() { outline.setSuspended(true); })); - + this.window.addListener(mxEvent.NORMALIZE, mxUtils.bind(this, function() { outline.setSuspended(false); })); - + this.window.addListener(mxEvent.MINIMIZE, mxUtils.bind(this, function() { outline.setSuspended(true); @@ -2067,12 +2067,12 @@ var OutlineWindow = function(editorUi, x, y, w, h) }; /** - * + * */ var LayersWindow = function(editorUi, x, y, w, h) { var graph = editorUi.editor.graph; - + var div = document.createElement('div'); div.style.userSelect = 'none'; div.style.background = (!Editor.isDarkMode()) ? '#fff' : Dialog.backdropColor; @@ -2082,7 +2082,7 @@ var LayersWindow = function(editorUi, x, y, w, h) div.style.overflow = 'auto'; var tbarHeight = (!EditorUi.compactUi) ? '30px' : '26px'; - + var listDiv = document.createElement('div') listDiv.style.backgroundColor = (!Editor.isDarkMode()) ? '#fff' : Dialog.backdropColor; listDiv.style.position = 'absolute'; @@ -2092,10 +2092,10 @@ var LayersWindow = function(editorUi, x, y, w, h) listDiv.style.top = '0px'; listDiv.style.bottom = (parseInt(tbarHeight) + 7) + 'px'; div.appendChild(listDiv); - + var dragSource = null; var dropIndex = null; - + mxEvent.addListener(div, 'dragover', function(evt) { evt.dataTransfer.dropEffect = 'move'; @@ -2103,7 +2103,7 @@ var LayersWindow = function(editorUi, x, y, w, h) evt.stopPropagation(); evt.preventDefault(); }); - + // Workaround for "no element found" error in FF mxEvent.addListener(div, 'drop', function(evt) { @@ -2114,7 +2114,7 @@ var LayersWindow = function(editorUi, x, y, w, h) var layerCount = null; var selectionLayer = null; var ldiv = document.createElement('div'); - + ldiv.className = 'geToolbarContainer'; ldiv.style.position = 'absolute'; ldiv.style.bottom = '0px'; @@ -2129,10 +2129,10 @@ var LayersWindow = function(editorUi, x, y, w, h) ldiv.style.borderStyle = 'solid'; ldiv.style.display = 'block'; ldiv.style.whiteSpace = 'nowrap'; - + var link = document.createElement('a'); link.className = 'geButton'; - + var removeLink = link.cloneNode(false); var img = document.createElement('img'); img.setAttribute('border', '0'); @@ -2156,7 +2156,7 @@ var LayersWindow = function(editorUi, x, y, w, h) { var index = graph.model.root.getIndex(selectionLayer); graph.removeCells([selectionLayer], false); - + // Creates default layer if no layer exists if (graph.model.getChildCount(graph.model.root) == 0) { @@ -2177,15 +2177,15 @@ var LayersWindow = function(editorUi, x, y, w, h) graph.model.endUpdate(); } } - + mxEvent.consume(evt); }); - + if (!graph.isEnabled()) { removeLink.className = 'geButton mxDisabled'; } - + ldiv.appendChild(removeLink); var insertLink = link.cloneNode(); @@ -2200,7 +2200,7 @@ var LayersWindow = function(editorUi, x, y, w, h) if (graph.isEnabled() && !graph.isSelectionEmpty()) { var offset = mxUtils.getOffset(insertLink); - + editorUi.showPopupMenu(mxUtils.bind(this, function(menu, parent) { for (var i = layerCount - 1; i >= 0; i--) @@ -2212,12 +2212,12 @@ var LayersWindow = function(editorUi, x, y, w, h) { graph.moveCells(graph.getSelectionCells(), 0, 0, false, child); }), parent); - + if (graph.getSelectionCount() == 1 && graph.model.isAncestor(child, graph.getSelectionCell())) { menu.addCheckmark(item, Editor.checkmarkImage); } - + }))(graph.model.getChildAt(graph.model.root, i)); } }), offset.x, offset.y + insertLink.offsetHeight, evt); @@ -2225,7 +2225,7 @@ var LayersWindow = function(editorUi, x, y, w, h) }); ldiv.appendChild(insertLink); - + var dataLink = link.cloneNode(false); dataLink.setAttribute('title', mxResources.get('editData')); @@ -2239,17 +2239,17 @@ var LayersWindow = function(editorUi, x, y, w, h) { editorUi.showDataDialog(selectionLayer); } - + mxEvent.consume(evt); }); - + if (!graph.isEnabled()) { dataLink.className = 'geButton mxDisabled'; } ldiv.appendChild(dataLink); - + function renameLayer(layer) { if (graph.isEnabled() && layer != null) @@ -2266,7 +2266,7 @@ var LayersWindow = function(editorUi, x, y, w, h) dlg.init(); } }; - + var duplicateLink = link.cloneNode(false); duplicateLink.setAttribute('title', mxResources.get('duplicate')); @@ -2299,7 +2299,7 @@ var LayersWindow = function(editorUi, x, y, w, h) } } }); - + if (!graph.isEnabled()) { duplicateLink.className = 'geButton mxDisabled'; @@ -2313,13 +2313,13 @@ var LayersWindow = function(editorUi, x, y, w, h) img = img.cloneNode(false); img.setAttribute('src', Editor.addImage); addLink.appendChild(img); - + mxEvent.addListener(addLink, 'click', function(evt) { if (graph.isEnabled()) { graph.model.beginUpdate(); - + try { var cell = graph.addCell(new mxCell(mxResources.get('untitledLayer')), graph.model.root); @@ -2330,20 +2330,20 @@ var LayersWindow = function(editorUi, x, y, w, h) graph.model.endUpdate(); } } - + mxEvent.consume(evt); }); - + if (!graph.isEnabled()) { addLink.className = 'geButton mxDisabled'; } - + ldiv.appendChild(addLink); div.appendChild(ldiv); - + var layerDivs = new mxDictionary(); - + var dot = document.createElement('span'); dot.setAttribute('title', mxResources.get('selectionOnly')); dot.innerHTML = '•'; @@ -2352,11 +2352,11 @@ var LayersWindow = function(editorUi, x, y, w, h) dot.style.fontSize = '16pt'; dot.style.right = '2px'; dot.style.top = '2px'; - + function updateLayerDot() { var div = layerDivs.get(graph.getLayerForCells(graph.getSelectionCells())); - + if (div != null) { div.appendChild(dot); @@ -2366,13 +2366,13 @@ var LayersWindow = function(editorUi, x, y, w, h) dot.parentNode.removeChild(dot); } }; - + function refresh() { layerCount = graph.model.getChildCount(graph.model.root) listDiv.innerHTML = ''; layerDivs.clear(); - + function addLayer(index, label, child, defaultParent) { var ldiv = document.createElement('div'); @@ -2390,13 +2390,13 @@ var LayersWindow = function(editorUi, x, y, w, h) ldiv.style.borderStyle = 'solid'; ldiv.style.whiteSpace = 'nowrap'; ldiv.setAttribute('title', label); - + var left = document.createElement('div'); left.style.display = 'inline-block'; left.style.width = '100%'; left.style.textOverflow = 'ellipsis'; left.style.overflow = 'hidden'; - + mxEvent.addListener(ldiv, 'dragover', function(evt) { evt.dataTransfer.dropEffect = 'move'; @@ -2404,11 +2404,11 @@ var LayersWindow = function(editorUi, x, y, w, h) evt.stopPropagation(); evt.preventDefault(); }); - + mxEvent.addListener(ldiv, 'dragstart', function(evt) { dragSource = ldiv; - + // Workaround for no DnD on DIV in FF if (mxClient.IS_FF) { @@ -2416,7 +2416,7 @@ var LayersWindow = function(editorUi, x, y, w, h) evt.dataTransfer.setData('Text', ''); } }); - + mxEvent.addListener(ldiv, 'dragend', function(evt) { if (dragSource != null && dropIndex != null) @@ -2459,7 +2459,7 @@ var LayersWindow = function(editorUi, x, y, w, h) } left.appendChild(inp); - + mxEvent.addListener(inp, 'click', function(evt) { graph.model.setVisible(child, !graph.model.isVisible(child)); @@ -2492,18 +2492,18 @@ var LayersWindow = function(editorUi, x, y, w, h) { btn.style.filter = 'invert(100%)'; } - + if (graph.isEnabled()) { btn.style.cursor = 'pointer'; } - + mxEvent.addListener(btn, 'click', function(evt) { if (graph.isEnabled()) { var value = null; - + graph.getModel().beginUpdate(); try { @@ -2519,7 +2519,7 @@ var LayersWindow = function(editorUi, x, y, w, h) { graph.removeSelectionCells(graph.getModel().getDescendants(child)); } - + mxEvent.consume(evt); } }); @@ -2539,7 +2539,7 @@ var LayersWindow = function(editorUi, x, y, w, h) left.appendChild(span); ldiv.appendChild(left); - + if (graph.isEnabled()) { // Fallback if no drag and drop is available @@ -2553,14 +2553,14 @@ var LayersWindow = function(editorUi, x, y, w, h) right.style.position = 'absolute'; right.style.right = '16px'; right.style.top = '6px'; - + // Poor man's change layer order if (index > 0) { var img2 = document.createElement('a'); - + img2.setAttribute('title', mxResources.get('toBack')); - + img2.className = 'geButton'; img2.style.cssFloat = 'none'; img2.innerHTML = '▼'; @@ -2570,24 +2570,24 @@ var LayersWindow = function(editorUi, x, y, w, h) img2.style.margin = '0px'; img2.style.marginTop = '-1px'; right.appendChild(img2); - + mxEvent.addListener(img2, 'click', function(evt) { if (graph.isEnabled()) { graph.addCell(child, graph.model.root, index - 1); } - + mxEvent.consume(evt); }); } - + if (index >= 0 && index < layerCount - 1) { var img1 = document.createElement('a'); - + img1.setAttribute('title', mxResources.get('toFront')); - + img1.className = 'geButton'; img1.style.cssFloat = 'none'; img1.innerHTML = '▲'; @@ -2597,21 +2597,21 @@ var LayersWindow = function(editorUi, x, y, w, h) img1.style.margin = '0px'; img1.style.marginTop = '-1px'; right.appendChild(img1); - + mxEvent.addListener(img1, 'click', function(evt) { if (graph.isEnabled()) { graph.addCell(child, graph.model.root, index + 1); } - + mxEvent.consume(evt); }); } - + ldiv.appendChild(right); } - + if (mxClient.IS_SVG && (!mxClient.IS_IE || document.documentMode >= 10)) { ldiv.setAttribute('draggable', 'true'); @@ -2622,7 +2622,7 @@ var LayersWindow = function(editorUi, x, y, w, h) mxEvent.addListener(ldiv, 'dblclick', function(evt) { var nodeName = mxEvent.getSource(evt).nodeName; - + if (nodeName != 'INPUT' && nodeName != 'IMG') { renameLayer(child); @@ -2646,16 +2646,16 @@ var LayersWindow = function(editorUi, x, y, w, h) if (mxEvent.isShiftDown(evt)) { - graph.setSelectionCells(child.children); + graph.setSelectionCells(child.children); } - + mxEvent.consume(evt); } }); - + listDiv.appendChild(ldiv); }; - + // Cannot be moved or deleted for (var i = layerCount - 1; i >= 0; i--) { @@ -2665,7 +2665,7 @@ var LayersWindow = function(editorUi, x, y, w, h) mxResources.get('background'), child, child); }))(graph.model.getChildAt(graph.model.root, i)); } - + var label = graph.convertValueToString(selectionLayer) || mxResources.get('background'); removeLink.setAttribute('title', mxResources.get('removeIt', [label])); duplicateLink.setAttribute('title', mxResources.get('duplicateIt', [label])); @@ -2674,14 +2674,14 @@ var LayersWindow = function(editorUi, x, y, w, h) { insertLink.className = 'geButton mxDisabled'; } - + updateLayerDot(); }; refresh(); graph.model.addListener(mxEvent.CHANGE, refresh); graph.addListener('defaultParentChanged', refresh); - + graph.selectionModel.addListener(mxEvent.CHANGE, function() { if (graph.isSelectionEmpty()) @@ -2692,7 +2692,7 @@ var LayersWindow = function(editorUi, x, y, w, h) { insertLink.className = 'geButton'; } - + updateLayerDot(); }); @@ -2703,25 +2703,25 @@ var LayersWindow = function(editorUi, x, y, w, h) this.window.setResizable(true); this.window.setClosable(true); this.window.setVisible(true); - + this.init = function() { - listDiv.scrollTop = listDiv.scrollHeight - listDiv.clientHeight; + listDiv.scrollTop = listDiv.scrollHeight - listDiv.clientHeight; }; this.window.addListener(mxEvent.SHOW, mxUtils.bind(this, function() { this.window.fit(); })); - + // Make refresh available via instance this.refreshLayers = refresh; - + this.window.setLocation = function(x, y) { var iw = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var ih = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; - + x = Math.max(0, Math.min(x, iw - this.table.clientWidth)); y = Math.max(0, Math.min(y, ih - this.table.clientHeight - ((urlParams['sketch'] == '1') ? 3 : 48))); @@ -2730,15 +2730,15 @@ var LayersWindow = function(editorUi, x, y, w, h) mxWindow.prototype.setLocation.apply(this, arguments); } }; - + var resizeListener = mxUtils.bind(this, function() { var x = this.window.getX(); var y = this.window.getY(); - + this.window.setLocation(x, y); }); - + mxEvent.addListener(window, 'resize', resizeListener); this.destroy = function() diff --git a/public/js/drawio/js/grapheditor/EditorUi.js b/public/js/drawio/js/grapheditor/EditorUi.js index c635bfe19..1d9fc0051 100644 --- a/public/js/drawio/js/grapheditor/EditorUi.js +++ b/public/js/drawio/js/grapheditor/EditorUi.js @@ -1761,7 +1761,7 @@ EditorUi.prototype.createShapePicker = function(x, y, source, callback, directio } graph.container.appendChild(div); - console.log(1111) + var addCell = mxUtils.bind(this, function(cell) { // Wrapper needed to catch events @@ -4181,7 +4181,7 @@ EditorUi.prototype.refresh = function(sizeDidChange) if (this.toolbar != null) { - this.toolbarContainer.style.top = this.menubarHeight + 'px'; + this.toolbarContainer.style.top = '0px';//this.menubarHeight + 'px'; this.toolbarContainer.style.height = this.toolbarHeight + 'px'; tmp += this.toolbarHeight; } @@ -4321,8 +4321,7 @@ EditorUi.prototype.createSidebarFooterContainer = function() EditorUi.prototype.createUi = function() { // Creates menubar - this.menubar = (this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar')); - + this.menubar = null;//(this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar')); if (this.menubar != null) { this.menubarContainer.appendChild(this.menubar.container); @@ -4403,6 +4402,162 @@ EditorUi.prototype.createUi = function() this.refresh(); })); } + + + var editorUi = this; + var graph = editorUi.editor.graph; + var getPos = function () { + var svg = null; + var childNodes = graph.container.childNodes; + for (var i = 0; i < childNodes.length; i++) { + if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') { + svg = childNodes[i]; + break; + } + } + var data = { + p1: {left: 0, top: 0}, + p2: {left: 0, top: 0}, + }; + if (svg != null) { + data = { + p1: { + left: svg.clientWidth / 2, + top: svg.clientHeight / 2, + }, + p2: { + left: graph.container.clientWidth / 2 + graph.container.scrollLeft, + top: graph.container.clientHeight / 2 + graph.container.scrollTop, + } + }; + } + return { + left: data.p2.left - data.p1.left, + top: data.p2.top - data.p1.top, + }; + } + + var setPos = function (diff) { + var svg = null; + var childNodes = graph.container.childNodes; + for (var i = 0; i < childNodes.length; i++) { + if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') { + svg = childNodes[i]; + break; + } + } + if (svg == null) { + return; + } + graph.container.scrollLeft = svg.clientWidth / 2 + diff.left - graph.container.clientWidth / 2; + graph.container.scrollTop = svg.clientHeight / 2 + diff.top - graph.container.clientHeight / 2; + } + + var newXml; + var newPos; + var randXml; + var backupParams; + var changePost = function (immediately) { + var randTmp = (randXml = Math.random()); + setTimeout(() => { + if (randTmp != randXml) { + return; + } + if (!backupParams) { + return; + } + newPos = getPos(); + newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml()); + if (backupParams.xml && backupParams.xml.replace(/^/, '') == newXml.replace(/^/, '')) { + if (backupParams.scale && backupParams.scale == graph.getView().scale) { + if (typeof backupParams.diffpos === "object" && Math.abs(backupParams.diffpos.left - newPos.left) < 10 && Math.abs(backupParams.diffpos.top - newPos.top) < 10) { + return; + } + } + } + backupParams.xml = newXml; + window.parent.postMessage({ + act: 'change', + params: { + xml: newXml, + scale: graph.getView().scale, + diffpos: newPos, + } + }, '*'); + }, immediately === true ? 0 : 200) + } + + graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() { changePost(true) })); + graph.getView().addListener(mxEvent.SCALE, mxUtils.bind(editorUi, function() {changePost(true) })); + var container = document.getElementsByClassName('geDiagramContainer')[0]; + container.addEventListener("scroll", changePost); + + window.addEventListener("message", function(event){ + var data = event.data; + switch (data.act) { + case 'setXml': + try { + backupParams = data.params; + editorUi.editor.setGraphXml(mxUtils.parseXml(data.params.xml).documentElement); + typeof data.params.scale === "number" && graph.zoomTo(data.params.scale); + typeof data.params.diffpos === "object" && setPos(data.params.diffpos); + } catch (e) { + + } + break; + + case 'exportPNG': + try { + (function (name, scale, type) { + name = name || '未命名'; + type = type || 'png'; + scale = scale || 1; + var graph = editorUi.editor.graph; + var bounds = graph.getGraphBounds(); + var width = Math.ceil(bounds.width / graph.view.scale * scale); + var height = Math.ceil(bounds.height / graph.view.scale * scale); + var source = '\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0)) + var image = new Image() + image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source) + var canvas = document.createElement('canvas') + canvas.width = width + canvas.height = height + var context = canvas.getContext('2d') + context.fillStyle = '#fff' + context.fillRect(0, 0, 10000, 10000) + image.onload = function () { + context.drawImage(image, 0, 0) + if (type == 'imageContent') { + window.parent.postMessage({ + act: 'imageContent', + params: { + name: name, + width: width, + height: height, + content: canvas.toDataURL(`image/${type}`) + } + }, '*'); + } else { + var a = document.createElement('a') + a.download = `${name}.${type}` + a.href = canvas.toDataURL(`image/${type}`) + a.click() + } + } + })(data.params.name, data.params.scale, data.params.type); + } catch (e) { + + } + break; + } + }); + + window.parent.postMessage({ + act: 'ready', + params: {} + }, '*'); + + }; /** diff --git a/resources/assets/statics/public/js/drawio/index.html b/resources/assets/statics/public/js/drawio/index.html index 04a5b3a53..8171bf784 100644 --- a/resources/assets/statics/public/js/drawio/index.html +++ b/resources/assets/statics/public/js/drawio/index.html @@ -456,198 +456,5 @@ } } - diff --git a/resources/assets/statics/public/js/drawio/js/diagramly/App.js b/resources/assets/statics/public/js/drawio/js/diagramly/App.js index ffe10a135..325e4635e 100644 --- a/resources/assets/statics/public/js/drawio/js/diagramly/App.js +++ b/resources/assets/statics/public/js/drawio/js/diagramly/App.js @@ -818,7 +818,6 @@ App.main = function(callback, createUi) { // Adds bundle text to resources mxResources.parse(xhr[0].getText()); - // Configuration mode if (isLocalStorage && localStorage != null && window.location.hash != null && window.location.hash.substring(0, 9) == '#_CONFIG_') @@ -3260,14 +3259,7 @@ App.prototype.start = function() else { var id = this.getDiagramId(); - - if (EditorUi.enableDrafts && urlParams['mode'] == null && - this.getServiceName() == 'draw.io' && (id == null || id.length == 0) && - !this.editor.isChromelessView()) - { - this.checkDrafts(); - } - else if (id != null && id.length > 0) + if (id != null && id.length > 0) { this.loadFile(id, null, null, mxUtils.bind(this, function() { @@ -3290,7 +3282,7 @@ App.prototype.start = function() } else if (urlParams['splash'] != '0') { - this.loadFile(); + this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true); } else if (!EditorUi.isElectronApp) { @@ -3473,6 +3465,9 @@ App.prototype.start = function() } }; +App.prototype.loadContent = function (){ + +}; /** * Checks for orphaned drafts. */ @@ -3569,6 +3564,49 @@ App.prototype.checkDrafts = function() this.removeDatabaseItem(drafts[0].key); })); } + else if (drafts.length > 1) + { + var ts = new Date(drafts[0].modified); + + var dlg = new DraftDialog(this, (drafts.length > 1) ? mxResources.get('selectDraft') : + mxResources.get('draftFound', [ts.toLocaleDateString() + ' ' + ts.toLocaleTimeString()]), + (drafts.length > 1) ? null : drafts[0].data, mxUtils.bind(this, function(index) + { + this.hideDialog(); + index = (index != '') ? index : 0; + + this.loadDraft(drafts[index].data, mxUtils.bind(this, function() + { + this.removeDatabaseItem(drafts[index].key); + })); + }), mxUtils.bind(this, function(index, success) + { + index = (index != '') ? index : 0; + + // Discard draft + this.confirm(mxResources.get('areYouSure'), null, mxUtils.bind(this, function() + { + this.removeDatabaseItem(drafts[index].key); + + if (success != null) + { + success(); + } + }), mxResources.get('no'), mxResources.get('yes')); + }), null, null, null, (drafts.length > 1) ? drafts : null); + this.showDialog(dlg.container, 640, 480, true, false, mxUtils.bind(this, function(cancel) + { + if (urlParams['splash'] != '0') + { + this.loadFile(); + } + else + { + this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true); + } + })); + dlg.init(); + } else if (urlParams['splash'] != '0') { this.loadFile(); diff --git a/resources/assets/statics/public/js/drawio/js/diagramly/Pages.js b/resources/assets/statics/public/js/drawio/js/diagramly/Pages.js index 052f10076..aa7a5e6be 100644 --- a/resources/assets/statics/public/js/drawio/js/diagramly/Pages.js +++ b/resources/assets/statics/public/js/drawio/js/diagramly/Pages.js @@ -43,7 +43,7 @@ DiagramPage.prototype.root = null; DiagramPage.prototype.viewState = null; /** - * + * */ DiagramPage.prototype.getId = function() { @@ -51,7 +51,7 @@ DiagramPage.prototype.getId = function() }; /** - * + * */ DiagramPage.prototype.getName = function() { @@ -59,7 +59,7 @@ DiagramPage.prototype.getName = function() }; /** - * + * */ DiagramPage.prototype.setName = function(value) { @@ -93,7 +93,7 @@ RenamePage.prototype.execute = function() this.page.setName(this.previous); this.name = this.previous; this.previous = tmp; - + // Required to update page name in placeholders this.ui.editor.graph.updatePlaceholders(); this.ui.editor.fireEvent(new mxEventObject('pageRenamed')); @@ -118,7 +118,7 @@ MovePage.prototype.execute = function() var tmp = this.oldIndex; this.oldIndex = this.newIndex; this.newIndex = tmp; - + // Required to update page numbers in placeholders this.ui.editor.graph.updatePlaceholders(); this.ui.editor.fireEvent(new mxEventObject('pageMoved')); @@ -139,12 +139,12 @@ function SelectPage(ui, page, viewState) this.page = page; this.previousPage = page; this.neverShown = true; - + if (page != null) { this.neverShown = page.viewState == null; this.ui.updatePageRoot(page); - + if (viewState != null) { page.viewState = viewState; @@ -159,40 +159,40 @@ function SelectPage(ui, page, viewState) SelectPage.prototype.execute = function() { var prevIndex = mxUtils.indexOf(this.ui.pages, this.previousPage); - + if (this.page != null && prevIndex >= 0) { var page = this.ui.currentPage; var editor = this.ui.editor; var graph = editor.graph; - + // Stores current diagram state in the page var data = Graph.compressNode(editor.getGraphXml(true)); mxUtils.setTextContent(page.node, data); page.viewState = graph.getViewState(); page.root = graph.model.root; - + if (page.model != null) { // Updates internal structures of offpage model page.model.rootChanged(page.root); } - + // Transitions for switching pages // var curIndex = mxUtils.indexOf(this.ui.pages, page); // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transition', null); // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transform', // (curIndex > prevIndex) ? 'translate(-50%,0)' : 'translate(50%,0)'); - + // Removes the previous cells and clears selection graph.view.clear(page.root, true); graph.clearSelection(); - + // Switches the current page this.ui.currentPage = this.previousPage; this.previousPage = page; page = this.ui.currentPage; - + // Switches the root cell and sets the view state graph.model.prefix = Editor.guid() + '-'; graph.model.rootChanged(page.root); @@ -208,16 +208,16 @@ SelectPage.prototype.execute = function() graph.blockMathRender = true; graph.sizeDidChange(); graph.blockMathRender = false; - + // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transition', 'transform 0.2s'); // mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transform', 'translate(0,0)'); - + if (this.neverShown) { this.neverShown = false; graph.selectUnlockedLayer(); } - + // Fires events editor.graph.fireEvent(new mxEventObject(mxEvent.ROOT)); editor.fireEvent(new mxEventObject('pageSelected', 'change', this)); @@ -225,7 +225,7 @@ SelectPage.prototype.execute = function() }; /** - * + * */ function ChangePage(ui, page, select, index, noSelect) { @@ -248,7 +248,7 @@ ChangePage.prototype.execute = function() // Fires event to setting view state from realtime this.ui.editor.fireEvent(new mxEventObject('beforePageChange', 'change', this)); this.previousIndex = this.index; - + if (this.index == null) { var tmp = mxUtils.indexOf(this.ui.pages, this.relatedPage); @@ -260,7 +260,7 @@ ChangePage.prototype.execute = function() this.ui.pages.splice(this.index, 0, this.relatedPage); this.index = null; } - + if (!this.noSelect) { SelectPage.prototype.execute.apply(this, arguments); @@ -286,7 +286,7 @@ EditorUi.prototype.getSelectedPageIndex = function() EditorUi.prototype.getPageIndex = function(page) { var result = null; - + if (this.pages != null && page != null) { for (var i = 0; i < this.pages.length; i++) @@ -294,15 +294,15 @@ EditorUi.prototype.getSelectedPageIndex = function() if (this.pages[i] == page) { result = i; - + break; } } } - + return result; }; - + /** * Returns true if the given string contains an mxfile. */ @@ -318,7 +318,7 @@ EditorUi.prototype.getPageById = function(id) } } } - + return null; }; @@ -329,7 +329,7 @@ EditorUi.prototype.createImageForPageLink = function(src, sourcePage, sourceGrap { var comma = src.indexOf(','); var result = null; - + if (comma > 0) { var page = this.getPageById(src.substring(comma + 1)); @@ -407,7 +407,7 @@ EditorUi.prototype.initPages = function() { this.selectNextPage(false); })); - + this.actions.addAction('nextPage', mxUtils.bind(this, function() { this.selectNextPage(true); @@ -418,17 +418,17 @@ EditorUi.prototype.initPages = function() this.keyHandler.bindAction(33, true, 'previousPage', true); // Ctrl+Shift+PageUp this.keyHandler.bindAction(34, true, 'nextPage', true); // Ctrl+Shift+PageDown } - + // Updates the tabs after loading the diagram var graph = this.editor.graph; - var graphViewValidateBackground = graph.view.validateBackground; - + var graphViewValidateBackground = graph.view.validateBackground; + graph.view.validateBackground = mxUtils.bind(this, function() { if (this.tabContainer != null) { var prevHeight = this.tabContainer.style.height; - + if (this.fileNode == null || this.pages == null || (this.pages.length == 1 && urlParams['pages'] == '0')) { @@ -438,36 +438,36 @@ EditorUi.prototype.initPages = function() { this.tabContainer.style.height = this.tabContainerHeight + 'px'; } - + if (prevHeight != this.tabContainer.style.height) { this.refresh(false); } } - + graphViewValidateBackground.apply(graph.view, arguments); }); - + var lastPage = null; - + var updateTabs = mxUtils.bind(this, function() { this.updateTabContainer(); - - // Updates scrollbar positions and backgrounds after validation + + // Updates scrollbar positions and backgrounds after validation var p = this.currentPage; - + if (p != null && p != lastPage) { if (p.viewState == null || p.viewState.scrollLeft == null) { this.resetScrollbars(); - + if (graph.isLightboxView()) { this.lightboxFit(); } - + if (this.chromelessResize != null) { graph.container.scrollLeft = 0; @@ -480,16 +480,16 @@ EditorUi.prototype.initPages = function() graph.container.scrollLeft = graph.view.translate.x * graph.view.scale + p.viewState.scrollLeft; graph.container.scrollTop = graph.view.translate.y * graph.view.scale + p.viewState.scrollTop; } - + lastPage = p; } - + // Updates layers window if (this.actions.layersWindow != null) { this.actions.layersWindow.refreshLayers(); } - + // Workaround for math if tab is switched before typesetting has stopped if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined') { @@ -513,13 +513,13 @@ EditorUi.prototype.initPages = function() Editor.MathJaxClear(); } }); - + // Adds a graph model listener to update the view this.editor.graph.model.addListener(mxEvent.CHANGE, mxUtils.bind(this, function(sender, evt) { var edit = evt.getProperty('edit'); var changes = edit.changes; - + for (var i = 0; i < changes.length; i++) { if (changes[i] instanceof SelectPage || @@ -528,11 +528,11 @@ EditorUi.prototype.initPages = function() changes[i] instanceof mxRootChange) { updateTabs(); - break; + break; } } })); - + // Updates zoom in toolbar if (this.toolbar != null) { @@ -548,7 +548,7 @@ EditorUi.prototype.restoreViewState = function(page, viewState, selection) { var newPage = (page != null) ? this.getPageById(page.getId()) : null; var graph = this.editor.graph; - + if (newPage != null && this.currentPage != null && this.pages != null) { if (newPage != this.currentPage) @@ -582,7 +582,7 @@ Graph.prototype.createViewState = function(node) var bg = node.getAttribute('background'); var bgImg = this.parseBackgroundImage(node.getAttribute('backgroundImage')); var extFonts = node.getAttribute('extFonts'); - + if (extFonts) { try @@ -641,18 +641,18 @@ Graph.prototype.saveViewState = function(vs, node, ignoreTransient, resolveRefer node.setAttribute('arrows', (vs == null || vs.arrows) ? '1' : '0'); node.setAttribute('page', ((vs == null && this.defaultPageVisible ) || (vs != null && vs.pageVisible)) ? '1' : '0'); - + // Ignores fold to avoid checksum errors for lightbox mode node.setAttribute('fold', (vs == null || vs.foldingEnabled) ? '1' : '0'); } node.setAttribute('pageScale', (vs != null && vs.pageScale != null) ? vs.pageScale : mxGraph.prototype.pageScale); - + var pf = (vs != null) ? vs.pageFormat : (typeof mxSettings === 'undefined' || this.defaultPageFormat != null) ? mxGraph.prototype.pageFormat : mxSettings.getPageFormat(); - + if (pf != null) { node.setAttribute('pageWidth', pf.width); @@ -676,7 +676,7 @@ Graph.prototype.saveViewState = function(vs, node, ignoreTransient, resolveRefer node.setAttribute('math', (vs != null && vs.mathEnabled) ? '1' : '0'); node.setAttribute('shadow', (vs != null && vs.shadowVisible) ? '1' : '0'); - + if (vs != null && vs.extFonts != null && vs.extFonts.length > 0) { node.setAttribute('extFonts', vs.extFonts.map(function(ef) @@ -760,19 +760,19 @@ Graph.prototype.setViewState = function(state, removeOldExtFonts) for (var i = 0; i < oldExtFonts.length; i++) { var fontElem = document.getElementById('extFont_' + oldExtFonts[i].name); - + if (fontElem != null) { fontElem.parentNode.removeChild(fontElem); } } } - + for (var i = 0; i < this.extFonts.length; i++) { this.addExtFont(this.extFonts[i].name, this.extFonts[i].url, true); } - + if (state.scale != null) { this.view.scale = state.scale; @@ -781,21 +781,21 @@ Graph.prototype.setViewState = function(state, removeOldExtFonts) { this.view.scale = 1; } - + // Checks if current root or default parent have been removed if (this.view.currentRoot != null && !this.model.contains(this.view.currentRoot)) { this.view.currentRoot = null; } - + if (this.defaultParent != null && !this.model.contains(this.defaultParent)) { this.setDefaultParent(null); this.selectUnlockedLayer(); } - + if (state.translate != null) { this.view.translate = state.translate; @@ -827,9 +827,9 @@ Graph.prototype.setViewState = function(state, removeOldExtFonts) this.hiddenTags = []; this.extFonts = []; } - + // Implicit settings - this.pageBreaksVisible = this.pageVisible; + this.pageBreaksVisible = this.pageVisible; this.preferPageSize = this.pageVisible; this.fireEvent(new mxEventObject('viewStateChanged', 'state', state)); }; @@ -844,7 +844,7 @@ Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember) // Adds inserted fonts to font family menu Graph.recentCustomFonts[fontName.toLowerCase()] = {name: fontName, url: fontUrl}; } - + var fontId = 'extFont_' + fontName; if (document.getElementById(fontId) == null) @@ -856,29 +856,29 @@ Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember) else { var head = document.getElementsByTagName('head')[0]; - + // KNOWN: Should load fonts synchronously var style = document.createElement('style'); - + style.appendChild(document.createTextNode('@font-face {\n' + - '\tfont-family: "'+ fontName +'";\n' + + '\tfont-family: "'+ fontName +'";\n' + '\tsrc: url("'+ fontUrl +'");\n}')); - + style.setAttribute('id', fontId); var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } } - + if (!dontRemember) { - if (this.extFonts == null) + if (this.extFonts == null) { this.extFonts = []; } - + var extFonts = this.extFonts, notFound = true; - + for (var i = 0; i < extFonts.length; i++) { if (extFonts[i].name == fontName) @@ -887,7 +887,7 @@ Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember) break; } } - + if (notFound) { this.extFonts.push({name: fontName, url: fontUrl}); @@ -905,7 +905,7 @@ EditorUi.prototype.updatePageRoot = function(page, checked) { var node = this.editor.extractGraphModel(page.node, null, checked); var cause = Editor.extractParserError(node); - + if (cause) { throw new Error(cause); @@ -913,7 +913,7 @@ EditorUi.prototype.updatePageRoot = function(page, checked) else if (node != null) { page.graphModelNode = node; - + // Converts model XML into page object with root cell page.viewState = this.editor.graph.createViewState(node); var codec = new mxCodec(node.ownerDocument); @@ -930,9 +930,9 @@ EditorUi.prototype.updatePageRoot = function(page, checked) if (page.graphModelNode == null) { var node = this.editor.extractGraphModel(page.node); - + var cause = Editor.extractParserError(node); - + if (cause) { throw new Error(cause); @@ -942,13 +942,13 @@ EditorUi.prototype.updatePageRoot = function(page, checked) page.graphModelNode = node; } } - + if (page.graphModelNode != null) { - page.viewState = this.editor.graph.createViewState(page.graphModelNode); + page.viewState = this.editor.graph.createViewState(page.graphModelNode); } } - + return page; }; @@ -965,23 +965,23 @@ EditorUi.prototype.selectPage = function(page, quiet, viewState) { this.editor.graph.stopEditing(false); } - + quiet = (quiet != null) ? quiet : false; this.editor.graph.isMouseDown = false; this.editor.graph.reset(); - + var edit = this.editor.graph.model.createUndoableEdit(); - + // Special flag to bypass autosave for this edit edit.ignoreEdit = true; - + var change = new SelectPage(this, page, viewState); change.execute(); edit.add(change); edit.notify(); - + this.editor.graph.tooltipHandler.hide(); - + if (!quiet) { this.editor.graph.model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit)); @@ -995,16 +995,16 @@ EditorUi.prototype.selectPage = function(page, quiet, viewState) }; /** - * + * */ EditorUi.prototype.selectNextPage = function(forward) { var next = this.currentPage; - + if (next != null && this.pages != null) { var tmp = mxUtils.indexOf(this.pages, next); - + if (forward) { this.selectPage(this.pages[mxUtils.mod(tmp + 1, this.pages.length)]); @@ -1027,15 +1027,15 @@ EditorUi.prototype.insertPage = function(page, index) { this.editor.graph.stopEditing(false); } - + page = (page != null) ? page : this.createPage(null, this.createPageId()); index = (index != null) ? index : this.pages.length; - + // Uses model to fire event and trigger autosave var change = new ChangePage(this, page, page, index); this.editor.graph.model.execute(change); } - + return page; }; @@ -1045,12 +1045,12 @@ EditorUi.prototype.insertPage = function(page, index) EditorUi.prototype.createPageId = function() { var id = null; - + do { id = Editor.guid(); } while (this.getPageById(id) != null) - + return id; }; @@ -1061,7 +1061,7 @@ EditorUi.prototype.createPage = function(name, id) { var page = new DiagramPage(this.fileNode.ownerDocument.createElement('diagram'), id); page.setName((name != null) ? name : this.createPageName()); - + return page; }; @@ -1072,11 +1072,11 @@ EditorUi.prototype.createPageName = function() { // Creates a lookup with names var existing = {}; - + for (var i = 0; i < this.pages.length; i++) { var tmp = this.pages[i].getName(); - + if (tmp != null && tmp.length > 0) { existing[tmp] = tmp; @@ -1086,13 +1086,13 @@ EditorUi.prototype.createPageName = function() // Avoids existing names var nr = this.pages.length; var name = null; - + do { name = mxResources.get('pageWithNumber', [++nr]); } while (existing[name] != null); - + return name; }; @@ -1105,19 +1105,19 @@ EditorUi.prototype.removePage = function(page) { var graph = this.editor.graph; var tmp = mxUtils.indexOf(this.pages, page); - + if (graph.isEnabled() && tmp >= 0) { if (this.editor.graph.isEditing()) { this.editor.graph.stopEditing(false); } - + graph.model.beginUpdate(); try { var next = this.currentPage; - + if (next == page && this.pages.length > 1) { if (tmp == this.pages.length - 1) @@ -1128,7 +1128,7 @@ EditorUi.prototype.removePage = function(page) { tmp++; } - + next = this.pages[tmp]; } else if (this.pages.length <= 1) @@ -1139,7 +1139,7 @@ EditorUi.prototype.removePage = function(page) graph.model.execute(new RenamePage(this, next, mxResources.get('pageWithNumber', [1]))); } - + // Uses model to fire event to trigger autosave graph.model.execute(new ChangePage(this, page, next)); } @@ -1153,7 +1153,7 @@ EditorUi.prototype.removePage = function(page) { this.handleError(e); } - + return page; }; @@ -1163,18 +1163,18 @@ EditorUi.prototype.removePage = function(page) EditorUi.prototype.duplicatePage = function(page, name) { var newPage = null; - + try { var graph = this.editor.graph; - + if (graph.isEnabled()) { if (graph.isEditing()) { graph.stopEditing(); } - + // Clones the current page and takes a snapshot of the graph model and view state var node = page.node.cloneNode(false); node.removeAttribute('id'); @@ -1185,7 +1185,7 @@ EditorUi.prototype.duplicatePage = function(page, name) var newPage = new DiagramPage(node); newPage.root = graph.cloneCell(graph.model.root, null, cloneMap); newPage.viewState = graph.getViewState(); - + // Resets zoom and scrollbar positions newPage.viewState.scale = 1; newPage.viewState.scrollLeft = null; @@ -1193,7 +1193,7 @@ EditorUi.prototype.duplicatePage = function(page, name) newPage.viewState.currentRoot = null; newPage.viewState.defaultParent = null; newPage.setName(name); - + newPage = this.insertPage(newPage, mxUtils.indexOf(this.pages, page) + 1); // Updates custom links after inserting into the model for cells to have new IDs @@ -1204,7 +1204,7 @@ EditorUi.prototype.duplicatePage = function(page, name) { this.handleError(e); } - + return newPage; }; @@ -1227,7 +1227,7 @@ EditorUi.prototype.renamePage = function(page) this.showDialog(dlg.container, 300, 80, true, true); dlg.init(); } - + return page; } @@ -1250,7 +1250,7 @@ EditorUi.prototype.createTabContainer = function() div.style.whiteSpace = 'nowrap'; div.style.overflow = 'hidden'; div.style.height = '0px'; - + return div; }; @@ -1270,10 +1270,10 @@ EditorUi.prototype.updateTabContainer = function() wrapper.style.whiteSpace = 'nowrap'; wrapper.style.overflow = 'hidden'; wrapper.style.fontSize = '13px'; - + // Allows for negative left margin of first tab wrapper.style.marginLeft = '30px'; - + // Automatic tab width to match available width // TODO: Fix tabWidth in chromeless mode var btnWidth = (this.editor.isChromelessView()) ? 29 : 59; @@ -1294,9 +1294,9 @@ EditorUi.prototype.updateTabContainer = function() { tab.className = 'geInactivePage'; } - + tab.setAttribute('draggable', 'true'); - + mxEvent.addListener(tab, 'dragstart', mxUtils.bind(this, function(evt) { if (graph.isEnabled()) @@ -1307,7 +1307,7 @@ EditorUi.prototype.updateTabContainer = function() // LATER: Check what triggers a parse as XML on this in FF after drop evt.dataTransfer.setData('Text', ''); } - + startIndex = index; } else @@ -1316,49 +1316,49 @@ EditorUi.prototype.updateTabContainer = function() mxEvent.consume(evt); } })); - + mxEvent.addListener(tab, 'dragend', mxUtils.bind(this, function(evt) { startIndex = null; evt.stopPropagation(); evt.preventDefault(); })); - + mxEvent.addListener(tab, 'dragover', mxUtils.bind(this, function(evt) { if (startIndex != null) { evt.dataTransfer.dropEffect = 'move'; } - + evt.stopPropagation(); evt.preventDefault(); })); - + mxEvent.addListener(tab, 'drop', mxUtils.bind(this, function(evt) { if (startIndex != null && index != startIndex) { - // LATER: Shift+drag for merge, ctrl+drag for clone + // LATER: Shift+drag for merge, ctrl+drag for clone this.movePage(startIndex, index); } evt.stopPropagation(); evt.preventDefault(); })); - + wrapper.appendChild(tab); }))(i, this.createTabForPage(this.pages[i], tabWidth, this.pages[i] != this.currentPage, i + 1)); } - + this.tabContainer.innerHTML = ''; this.tabContainer.appendChild(wrapper); - + // Adds floating menu with all pages and insert option var menutab = this.createPageMenuTab(); this.tabContainer.appendChild(menutab); var insertTab = null; - + // Not chromeless and not read-only file if (this.isPageInsertTabVisible()) { @@ -1374,27 +1374,27 @@ EditorUi.prototype.updateTabContainer = function() insertTab.style.right = '0px'; wrapper.style.marginRight = '30px'; } - + var temp = this.createControlTab(4, ' ❮ '); temp.style.position = 'absolute'; temp.style.right = (this.editor.chromeless) ? '29px' : '55px'; temp.style.fontSize = '13pt'; - + this.tabContainer.appendChild(temp); - + var temp2 = this.createControlTab(4, ' ❯'); temp2.style.position = 'absolute'; temp2.style.right = (this.editor.chromeless) ? '0px' : '29px'; temp2.style.fontSize = '13pt'; - + this.tabContainer.appendChild(temp2); - + // TODO: Scroll to current page var dx = Math.max(0, this.tabContainer.clientWidth - ((this.editor.chromeless) ? 86 : 116)); wrapper.style.width = dx + 'px'; - + var fade = 50; - + mxEvent.addListener(temp, 'click', mxUtils.bind(this, function(evt) { wrapper.scrollLeft -= Math.max(20, dx - 20); @@ -1402,7 +1402,7 @@ EditorUi.prototype.updateTabContainer = function() mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade); mxEvent.consume(evt); })); - + mxUtils.setOpacity(temp, (wrapper.scrollLeft > 0) ? 100 : fade); mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade); @@ -1458,14 +1458,14 @@ EditorUi.prototype.createTab = function(hoverEnabled) mxEvent.consume(evt); } })); - + mxEvent.addListener(tab, 'mouseleave', mxUtils.bind(this, function(evt) { tab.style.backgroundColor = this.tabContainer.style.backgroundColor; mxEvent.consume(evt); })); } - + return tab; }; @@ -1485,7 +1485,7 @@ EditorUi.prototype.createControlTab = function(paddingTop, html, hoverEnabled) { mxUtils.setOpacity(tab.firstChild, 40); } - + return tab; }; @@ -1500,13 +1500,13 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) tab.style.marginLeft = '0px'; tab.style.top = '0px'; tab.style.left = '1px'; - + var div = tab.getElementsByTagName('div')[0]; div.style.display = 'inline-block'; div.style.marginTop = '5px'; div.style.width = '21px'; div.style.height = '21px'; - + mxEvent.addListener(tab, 'click', mxUtils.bind(this, function(evt) { this.editor.graph.popupMenuHandler.hideMenu(); @@ -1528,7 +1528,7 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) item.setAttribute('title', this.pages[index].getName() + ((id != null) ? ' (' + id + ')' : '') + ' [' + (index + 1)+ ']'); - + // Adds checkmark to current page if (this.pages[index] == this.currentPage) { @@ -1550,7 +1550,7 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) { addPages(); } - + if (this.editor.graph.isEnabled()) { if (!invert) @@ -1560,24 +1560,24 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) } var page = this.currentPage; - + if (page != null) { menu.addSeparator(parent); var pageName = page.getName(); - + menu.addItem(mxResources.get('removeIt', [pageName]), null, mxUtils.bind(this, function() { this.removePage(page); }), parent); - + menu.addItem(mxResources.get('renameIt', [pageName]), null, mxUtils.bind(this, function() { this.renamePage(page, page.getName()); }), parent); menu.addSeparator(parent); - + menu.addItem(mxResources.get('duplicateIt', [pageName]), null, mxUtils.bind(this, function() { this.duplicatePage(page, mxResources.get('copyOf', [page.getName()])); @@ -1593,29 +1593,29 @@ EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert) addPages(); } })); - + menu.div.className += ' geMenubarMenu'; menu.smartSeparators = true; menu.showDisabled = true; menu.autoExpand = true; - + // Disables autoexpand and destroys menu when hidden menu.hideMenu = mxUtils.bind(this, function() { mxPopupMenu.prototype.hideMenu.apply(menu, arguments); menu.destroy(); }); - + var x = mxEvent.getClientX(evt); var y = mxEvent.getClientY(evt); menu.popup(x, y, null, evt); - + // Allows hiding by clicking on document this.setCurrentMenu(menu); mxEvent.consume(evt); })); - + return tab; }; @@ -1627,18 +1627,18 @@ EditorUi.prototype.createPageInsertTab = function() var tab = this.createControlTab(4, '
'); tab.setAttribute('title', mxResources.get('insertPage')); var graph = this.editor.graph; - + mxEvent.addListener(tab, 'click', mxUtils.bind(this, function(evt) { this.insertPage(); mxEvent.consume(evt); })); - + var div = tab.getElementsByTagName('div')[0]; div.style.display = 'inline-block'; div.style.width = '21px'; div.style.height = '21px'; - + return tab; }; @@ -1655,18 +1655,18 @@ EditorUi.prototype.createTabForPage = function(page, tabWidth, hoverEnabled, pag tab.style.maxWidth = tabWidth + 'px'; tab.style.width = tabWidth + 'px'; this.addTabListeners(page, tab); - + if (tabWidth > 42) { tab.style.textOverflow = 'ellipsis'; } - + return tab; }; /** * Translates this point by the given vector. - * + * * @param {number} dx X-coordinate of the translation. * @param {number} dy Y-coordinate of the translation. */ @@ -1681,16 +1681,16 @@ EditorUi.prototype.addTabListeners = function(page, tab) this.renamePage(page) mxEvent.consume(evt); })); - + var menuWasVisible = false; var pageWasActive = false; - + mxEvent.addGestureListeners(tab, mxUtils.bind(this, function(evt) { // Do not consume event here to allow for drag and drop of tabs menuWasVisible = this.currentMenu != null; pageWasActive = page == this.currentPage; - + if (!graph.isMouseDown && !pageWasActive) { this.selectPage(page); @@ -1707,12 +1707,12 @@ EditorUi.prototype.addTabListeners = function(page, tab) if (!mxEvent.isTouchEvent(evt) || !menuWasVisible) { var menu = new mxPopupMenu(this.createPageMenu(page)); - + menu.div.className += ' geMenubarMenu'; menu.smartSeparators = true; menu.showDisabled = true; menu.autoExpand = true; - + // Disables autoexpand and destroys menu when hidden menu.hideMenu = mxUtils.bind(this, function() { @@ -1720,13 +1720,13 @@ EditorUi.prototype.addTabListeners = function(page, tab) this.resetCurrentMenu(); menu.destroy(); }); - + var x = mxEvent.getClientX(evt); var y = mxEvent.getClientY(evt); menu.popup(x, y, null, evt); this.setCurrentMenu(menu, tab); } - + mxEvent.consume(evt); } })); @@ -1741,18 +1741,18 @@ EditorUi.prototype.getLinkForPage = function(page, params, lightbox) if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp) { var file = this.getCurrentFile(); - + if (file != null && file.constructor != LocalFile && this.getServiceName() == 'draw.io') { var search = this.getSearch(['create', 'title', 'mode', 'url', 'drive', 'splash', 'state', 'clibs', 'ui', 'viewbox', 'hide-pages']); search += ((search.length == 0) ? '?' : '&') + 'page-id=' + page.getId(); - + if (params != null) { search += '&' + params.join('&'); } - + return ((lightbox && urlParams['dev'] != '1') ? EditorUi.lightboxHost : (((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp || !(/.*\.draw\.io$/.test(window.location.hostname))) ? @@ -1760,7 +1760,7 @@ EditorUi.prototype.getLinkForPage = function(page, params, lightbox) '/' + search + '#' + file.getHash(); } } - + return null; }; @@ -1778,68 +1778,68 @@ EditorUi.prototype.createPageMenu = function(page, label) { this.insertPage(null, mxUtils.indexOf(this.pages, page) + 1); }), parent); - + menu.addItem(mxResources.get('delete'), null, mxUtils.bind(this, function() { this.removePage(page); }), parent); - + menu.addItem(mxResources.get('rename'), null, mxUtils.bind(this, function() { this.renamePage(page, label); }), parent); - + var url = this.getLinkForPage(page); if (url != null) { menu.addSeparator(parent); - + menu.addItem(mxResources.get('link'), null, mxUtils.bind(this, function() { this.showPublishLinkDialog(mxResources.get('url'), true, null, null, mxUtils.bind(this, function(linkTarget, linkColor, allPages, lightbox, editLink, layers) { var params = this.createUrlParameters(linkTarget, linkColor, allPages, lightbox, editLink, layers); - + if (!allPages) { params.push('hide-pages=1'); } - + if (!graph.isSelectionEmpty()) { var bounds = graph.getBoundingBox(graph.getSelectionCells()); - + var t = graph.view.translate; var s = graph.view.scale; bounds.width /= s; bounds.height /= s; bounds.x = bounds.x / s - t.x; bounds.y = bounds.y / s - t.y; - + params.push('viewbox=' + encodeURIComponent(JSON.stringify({x: Math.round(bounds.x), y: Math.round(bounds.y), width: Math.round(bounds.width), height: Math.round(bounds.height), border: 100}))); } - + var dlg = new EmbedDialog(this, this.getLinkForPage(page, params, lightbox)); this.showDialog(dlg.container, 450, 240, true, true); dlg.init(); })); })); } - + menu.addSeparator(parent); - + menu.addItem(mxResources.get('duplicate'), null, mxUtils.bind(this, function() { this.duplicatePage(page, mxResources.get('copyOf', [page.getName()])); }), parent); - + if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && this.getServiceName() == 'draw.io') - { + { menu.addSeparator(parent); - + menu.addItem(mxResources.get('openInNewWindow'), null, mxUtils.bind(this, function() { this.editor.editAsNew(this.getFileData(true, null, null, null, true, true)); @@ -1852,7 +1852,7 @@ EditorUi.prototype.createPageMenu = function(page, label) (function() { var editorUiRefresh = EditorUi.prototype.refresh; - + EditorUi.prototype.refresh = function(sizeDidChange) { editorUiRefresh.apply(this, arguments); @@ -1871,23 +1871,23 @@ EditorUi.prototype.createPageMenu = function(page, label) (function() { var codec = new mxObjectCodec(new MovePage(), ['ui']); - + codec.beforeDecode = function(dec, node, obj) { obj.ui = dec.ui; - + return node; }; - + codec.afterDecode = function(dec, node, obj) { var tmp = obj.oldIndex; obj.oldIndex = obj.newIndex; obj.newIndex = tmp; - + return obj; }; - + mxCodecRegistry.register(codec); })(); @@ -1895,23 +1895,23 @@ EditorUi.prototype.createPageMenu = function(page, label) (function() { var codec = new mxObjectCodec(new RenamePage(), ['ui', 'page']); - + codec.beforeDecode = function(dec, node, obj) { obj.ui = dec.ui; - + return node; }; - + codec.afterDecode = function(dec, node, obj) { var tmp = obj.previous; obj.previous = obj.name; obj.name = tmp; - + return obj; }; - + mxCodecRegistry.register(codec); })(); @@ -1920,14 +1920,14 @@ EditorUi.prototype.createPageMenu = function(page, label) { var codec = new mxObjectCodec(new ChangePage(), ['ui', 'relatedPage', 'index', 'neverShown', 'page', 'previousPage']); - + var viewStateIgnored = ['defaultParent', 'currentRoot', 'scrollLeft', 'scrollTop', 'scale', 'translate', 'lastPasteXml', 'pasteCounter']; - + codec.afterEncode = function(enc, obj, node) { node.setAttribute('relatedPage', obj.relatedPage.getId()) - + if (obj.index == null) { node.setAttribute('name', obj.relatedPage.getName()); @@ -1940,13 +1940,13 @@ EditorUi.prototype.createPageMenu = function(page, label) return (mxUtils.indexOf(viewStateIgnored, key) < 0) ? value : undefined; })); } - + if (obj.relatedPage.root != null) { enc.encodeCell(obj.relatedPage.root, node); } } - + return node; }; @@ -1954,7 +1954,7 @@ EditorUi.prototype.createPageMenu = function(page, label) { obj.ui = dec.ui; obj.relatedPage = obj.ui.getPageById(node.getAttribute('relatedPage')); - + if (obj.relatedPage == null) { var temp = node.ownerDocument.createElement('diagram'); @@ -2016,6 +2016,6 @@ EditorUi.prototype.createPageMenu = function(page, label) return obj; }; - + mxCodecRegistry.register(codec); -})(); \ No newline at end of file +})(); diff --git a/resources/assets/statics/public/js/drawio/js/grapheditor/Dialogs.js b/resources/assets/statics/public/js/drawio/js/grapheditor/Dialogs.js index a301941d0..9ebc71158 100644 --- a/resources/assets/statics/public/js/drawio/js/grapheditor/Dialogs.js +++ b/resources/assets/statics/public/js/drawio/js/grapheditor/Dialogs.js @@ -13,12 +13,12 @@ var OpenDialog = function() iframe.style.borderWidth = '0px'; iframe.style.overflow = 'hidden'; iframe.frameBorder = '0'; - + var dx = 0; iframe.setAttribute('width', (((Editor.useLocalStorage) ? 640 : 320) + dx) + 'px'); iframe.setAttribute('height', (((Editor.useLocalStorage) ? 480 : 220) + dx) + 'px'); iframe.setAttribute('src', OPEN_FORM); - + this.container = iframe; }; @@ -28,10 +28,10 @@ var OpenDialog = function() var ColorDialog = function(editorUi, color, apply, cancelFn) { this.editorUi = editorUi; - + var input = document.createElement('input'); input.style.marginBottom = '10px'; - + // Required for picker to render in IE if (mxClient.IS_IE) { @@ -40,11 +40,11 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) } var applyFunction = (apply != null) ? apply : this.createApplyFunction(); - + function doApply() { var color = input.value; - + // Blocks any non-alphabetic chars in colors if (/(^#?[a-zA-Z0-9]*$)/.test(color)) { @@ -59,10 +59,10 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) } else { - editorUi.handleError({message: mxResources.get('invalidInput')}); + editorUi.handleError({message: mxResources.get('invalidInput')}); } }; - + this.init = function() { if (!mxClient.IS_TOUCH) @@ -83,16 +83,16 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) div.appendChild(mxJSColor.picker.box); var center = document.createElement('center'); - + function createRecentColorTable() { var table = addPresets((ColorDialog.recentColors.length == 0) ? ['FFFFFF'] : ColorDialog.recentColors, 11, 'FFFFFF', true); table.style.marginBottom = '8px'; - + return table; }; - + var addPresets = mxUtils.bind(this, function(presets, rowLength, defaultColor, addResetOption) { rowLength = (rowLength != null) ? rowLength : 12; @@ -106,11 +106,11 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) table.appendChild(tbody); var rows = presets.length / rowLength; - + for (var row = 0; row < rows; row++) { var tr = document.createElement('tr'); - + for (var i = 0; i < rowLength; i++) { (mxUtils.bind(this, function(clr) @@ -120,7 +120,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) td.style.padding = '0px'; td.style.width = '16px'; td.style.height = '16px'; - + if (clr == null) { clr = defaultColor; @@ -146,13 +146,13 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) td.setAttribute('title', name); } } - + tr.appendChild(td); if (clr != null) { td.style.cursor = 'pointer'; - + mxEvent.addListener(td, 'click', function() { if (clr == 'none') @@ -165,15 +165,15 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) picker.fromString(clr); } }); - + mxEvent.addListener(td, 'dblclick', doApply); } }))(presets[row * rowLength + i]); } - + tbody.appendChild(tr); } - + if (addResetOption) { var td = document.createElement('td'); @@ -186,7 +186,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) td.style.backgroundPosition = 'center center'; td.style.backgroundRepeat = 'no-repeat'; td.style.cursor = 'pointer'; - + tr.appendChild(td); mxEvent.addListener(td, 'click', function() @@ -195,9 +195,9 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) table.parentNode.replaceChild(createRecentColorTable(), table); }); } - + center.appendChild(table); - + return table; }); @@ -242,10 +242,10 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) } mxUtils.br(div); - + // Adds recent colors createRecentColorTable(); - + // Adds presets var table = addPresets(this.presetColors); table.style.marginBottom = '8px'; @@ -257,11 +257,11 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) var buttons = document.createElement('div'); buttons.style.textAlign = 'right'; buttons.style.whiteSpace = 'nowrap'; - + var cancelBtn = mxUtils.button(mxResources.get('cancel'), function() { editorUi.hideDialog(); - + if (cancelFn != null) { cancelFn(); @@ -273,16 +273,16 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) { buttons.appendChild(cancelBtn); } - + var applyBtn = mxUtils.button(mxResources.get('apply'), doApply); applyBtn.className = 'geBtn gePrimaryBtn'; buttons.appendChild(applyBtn); - + if (!editorUi.editor.cancelFirst) { buttons.appendChild(cancelBtn); } - + if (color != null) { if (color == 'none') @@ -295,7 +295,7 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) picker.fromString(color); } } - + div.appendChild(buttons); this.picker = picker; this.colorInput = input; @@ -307,23 +307,23 @@ var ColorDialog = function(editorUi, color, apply, cancelFn) if (e.keyCode == 27) { editorUi.hideDialog(); - + if (cancelFn != null) { cancelFn(); } - + mxEvent.consume(e); } }); - + this.container = div; }; /** * Creates function to apply value */ -ColorDialog.prototype.presetColors = ['E6D0DE', 'CDA2BE', 'B5739D', 'E1D5E7', 'C3ABD0', 'A680B8', 'D4E1F5', 'A9C4EB', '7EA6E0', 'D5E8D4', '9AC7BF', '67AB9F', 'D5E8D4', 'B9E0A5', '97D077', 'FFF2CC', 'FFE599', 'FFD966', 'FFF4C3', 'FFCE9F', 'FFB570', 'F8CECC', 'F19C99', 'EA6B66']; +ColorDialog.prototype.presetColors = ['E6D0DE', 'CDA2BE', 'B5739D', 'E1D5E7', 'C3ABD0', 'A680B8', 'D4E1F5', 'A9C4EB', '7EA6E0', 'D5E8D4', '9AC7BF', '67AB9F', 'D5E8D4', 'B9E0A5', '97D077', 'FFF2CC', 'FFE599', 'FFD966', 'FFF4C3', 'FFCE9F', 'FFB570', 'F8CECC', 'F19C99', 'EA6B66']; /** * Creates function to apply value @@ -347,7 +347,7 @@ ColorDialog.prototype.createApplyFunction = function() return mxUtils.bind(this, function(color) { var graph = this.editorUi.editor.graph; - + graph.getModel().beginUpdate(); try { @@ -363,7 +363,7 @@ ColorDialog.prototype.createApplyFunction = function() }; /** - * + * */ ColorDialog.recentColors = []; @@ -376,7 +376,7 @@ ColorDialog.addRecentColor = function(color, max) { mxUtils.remove(color, ColorDialog.recentColors); ColorDialog.recentColors.splice(0, 0, color); - + if (ColorDialog.recentColors.length >= max) { ColorDialog.recentColors.pop(); @@ -424,7 +424,7 @@ var AboutDialog = function(editorUi) }); closeBtn.className = 'geBtn gePrimaryBtn'; div.appendChild(closeBtn); - + this.container = div; }; @@ -472,19 +472,19 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w { top.appendChild(header); } - + var nameInput = document.createElement('textarea'); - + if (noWrap) { nameInput.setAttribute('wrap', 'off'); } - + nameInput.setAttribute('spellcheck', 'false'); nameInput.setAttribute('autocorrect', 'off'); nameInput.setAttribute('autocomplete', 'off'); nameInput.setAttribute('autocapitalize', 'off'); - + mxUtils.write(nameInput, url || ''); nameInput.style.resize = 'none'; nameInput.style.outline = 'none'; @@ -494,7 +494,7 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w nameInput.style.left = '0px'; nameInput.style.height = '100%'; nameInput.style.width = '100%'; - + this.textarea = nameInput; this.init = function() @@ -512,10 +512,10 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w editorUi.editor.graph.openLink(helpLink); }); helpBtn.className = 'geBtn'; - + buttons.appendChild(helpBtn); } - + if (customButtons != null) { for (var i = 0; i < customButtons.length; i++) @@ -533,16 +533,16 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w } customBtn.className = 'geBtn'; - + buttons.appendChild(customBtn); })(customButtons[i][0], customButtons[i][1], customButtons[i][2]); } } - + var cancelBtn = mxUtils.button(cancelTitle || mxResources.get('cancel'), function() { editorUi.hideDialog(); - + if (cancelFn != null) { cancelFn(); @@ -551,17 +551,17 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w cancelBtn.setAttribute('title', 'Escape'); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { buttons.appendChild(cancelBtn); } - + if (addButtons != null) { addButtons(buttons, nameInput); } - + if (fn != null) { var genericBtn = mxUtils.button(applyTitle || mxResources.get('apply'), function() @@ -570,10 +570,10 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w { editorUi.hideDialog(); } - + fn(nameInput.value); }); - + genericBtn.setAttribute('title', 'Ctrl+Enter'); genericBtn.className = 'geBtn gePrimaryBtn'; buttons.appendChild(genericBtn); @@ -586,7 +586,7 @@ var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w } }); } - + if (!editorUi.editor.cancelFirst) { buttons.appendChild(cancelBtn); @@ -613,15 +613,15 @@ var EditDiagramDialog = function(editorUi) textarea.style.width = '600px'; textarea.style.height = '360px'; textarea.style.marginBottom = '16px'; - + textarea.value = mxUtils.getPrettyXml(editorUi.editor.getGraphXml()); div.appendChild(textarea); - + this.init = function() { textarea.focus(); }; - + // Enables dropping files if (Graph.fileSupport) { @@ -629,17 +629,17 @@ var EditDiagramDialog = function(editorUi) { evt.stopPropagation(); evt.preventDefault(); - + if (evt.dataTransfer.files.length > 0) { var file = evt.dataTransfer.files[0]; var reader = new FileReader(); - + reader.onload = function(e) { textarea.value = e.target.result; }; - + reader.readAsText(file); } else @@ -647,7 +647,7 @@ var EditDiagramDialog = function(editorUi) textarea.value = editorUi.extractGraphModelFromEvent(evt); } }; - + function handleDragOver(evt) { evt.stopPropagation(); @@ -658,18 +658,18 @@ var EditDiagramDialog = function(editorUi) textarea.addEventListener('dragover', handleDragOver, false); textarea.addEventListener('drop', handleDrop, false); } - + var cancelBtn = mxUtils.button(mxResources.get('cancel'), function() { editorUi.hideDialog(); }); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { div.appendChild(cancelBtn); } - + var select = document.createElement('select'); select.style.width = '180px'; select.className = 'geBtn'; @@ -685,7 +685,7 @@ var EditDiagramDialog = function(editorUi) var newOption = document.createElement('option'); newOption.setAttribute('value', 'new'); mxUtils.write(newOption, mxResources.get('openInNewWindow')); - + if (EditDiagramDialog.showNewWindowOption) { select.appendChild(newOption); @@ -706,7 +706,7 @@ var EditDiagramDialog = function(editorUi) // Removes all illegal control characters before parsing var data = Graph.zapGremlins(mxUtils.trim(textarea.value)); var error = null; - + if (select.value == 'new') { editorUi.hideDialog(); @@ -727,7 +727,7 @@ var EditDiagramDialog = function(editorUi) } finally { - editorUi.editor.graph.model.endUpdate(); + editorUi.editor.graph.model.endUpdate(); } } else if (select.value == 'import') @@ -739,10 +739,10 @@ var EditDiagramDialog = function(editorUi) var model = new mxGraphModel(); var codec = new mxCodec(doc); codec.decode(doc.documentElement, model); - + var children = model.getChildren(model.getChildAt(model.getRoot(), 0)); editorUi.editor.graph.setSelectionCells(editorUi.editor.graph.importCells(children)); - + // LATER: Why is hideDialog between begin-/endUpdate faster? editorUi.hideDialog(); } @@ -752,10 +752,10 @@ var EditDiagramDialog = function(editorUi) } finally { - editorUi.editor.graph.model.endUpdate(); + editorUi.editor.graph.model.endUpdate(); } } - + if (error != null) { mxUtils.alert(error.message); @@ -763,7 +763,7 @@ var EditDiagramDialog = function(editorUi) }); okBtn.className = 'geBtn gePrimaryBtn'; div.appendChild(okBtn); - + if (!editorUi.editor.cancelFirst) { div.appendChild(cancelBtn); @@ -773,7 +773,7 @@ var EditDiagramDialog = function(editorUi) }; /** - * + * */ EditDiagramDialog.showNewWindowOption = true; @@ -785,25 +785,25 @@ var ExportDialog = function(editorUi) var graph = editorUi.editor.graph; var bounds = graph.getGraphBounds(); var scale = graph.view.scale; - + var width = Math.ceil(bounds.width / scale); var height = Math.ceil(bounds.height / scale); var row, td; - + var table = document.createElement('table'); var tbody = document.createElement('tbody'); table.setAttribute('cellpadding', (mxClient.IS_SF) ? '0' : '2'); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; td.style.width = '100px'; mxUtils.write(td, mxResources.get('filename') + ':'); - + row.appendChild(td); - + var nameInput = document.createElement('input'); nameInput.setAttribute('value', editorUi.editor.getOrCreateFilename()); nameInput.style.width = '180px'; @@ -811,17 +811,17 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(nameInput); row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('format') + ':'); - + row.appendChild(td); - + var imageFormatSelect = document.createElement('select'); imageFormatSelect.style.width = '180px'; @@ -831,14 +831,14 @@ var ExportDialog = function(editorUi) imageFormatSelect.appendChild(pngOption); var gifOption = document.createElement('option'); - + if (ExportDialog.showGifOption) { gifOption.setAttribute('value', 'gif'); mxUtils.write(gifOption, mxResources.get('formatGif')); imageFormatSelect.appendChild(gifOption); } - + var jpgOption = document.createElement('option'); jpgOption.setAttribute('value', 'jpg'); mxUtils.write(jpgOption, mxResources.get('formatJpg')); @@ -848,12 +848,12 @@ var ExportDialog = function(editorUi) pdfOption.setAttribute('value', 'pdf'); mxUtils.write(pdfOption, mxResources.get('formatPdf')); imageFormatSelect.appendChild(pdfOption); - + var svgOption = document.createElement('option'); svgOption.setAttribute('value', 'svg'); mxUtils.write(svgOption, mxResources.get('formatSvg')); imageFormatSelect.appendChild(svgOption); - + if (ExportDialog.showXmlOption) { var xmlOption = document.createElement('option'); @@ -865,17 +865,17 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(imageFormatSelect); row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('zoom') + ' (%):'); - + row.appendChild(td); - + var zoomInput = document.createElement('input'); zoomInput.setAttribute('type', 'number'); zoomInput.setAttribute('value', '100'); @@ -892,9 +892,9 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('width') + ':'); - + row.appendChild(td); - + var widthInput = document.createElement('input'); widthInput.setAttribute('value', width); widthInput.style.width = '180px'; @@ -904,15 +904,15 @@ var ExportDialog = function(editorUi) row.appendChild(td); tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('height') + ':'); - + row.appendChild(td); - + var heightInput = document.createElement('input'); heightInput.setAttribute('value', height); heightInput.style.width = '180px'; @@ -922,15 +922,15 @@ var ExportDialog = function(editorUi) row.appendChild(td); tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('dpi') + ':'); - + row.appendChild(td); - + var dpiSelect = document.createElement('select'); dpiSelect.style.width = '180px'; @@ -943,17 +943,17 @@ var ExportDialog = function(editorUi) dpi200Option.setAttribute('value', '200'); mxUtils.write(dpi200Option, '200dpi'); dpiSelect.appendChild(dpi200Option); - + var dpi300Option = document.createElement('option'); dpi300Option.setAttribute('value', '300'); mxUtils.write(dpi300Option, '300dpi'); dpiSelect.appendChild(dpi300Option); - + var dpi400Option = document.createElement('option'); dpi400Option.setAttribute('value', '400'); mxUtils.write(dpi400Option, '400dpi'); dpiSelect.appendChild(dpi400Option); - + var dpiCustOption = document.createElement('option'); dpiCustOption.setAttribute('value', 'custom'); mxUtils.write(dpiCustOption, mxResources.get('custom')); @@ -966,9 +966,9 @@ var ExportDialog = function(editorUi) customDpi.setAttribute('type', 'number'); customDpi.setAttribute('min', '50'); customDpi.setAttribute('step', '50'); - + var zoomUserChanged = false; - + mxEvent.addListener(dpiSelect, 'change', function() { if (this.value == 'custom') @@ -980,18 +980,18 @@ var ExportDialog = function(editorUi) else { customDpi.value = this.value; - - if (!zoomUserChanged) + + if (!zoomUserChanged) { zoomInput.value = this.value; } } }); - + mxEvent.addListener(customDpi, 'change', function() { var dpi = parseInt(customDpi.value); - + if (isNaN(dpi) || dpi <= 0) { customDpi.style.backgroundColor = 'red'; @@ -1000,28 +1000,28 @@ var ExportDialog = function(editorUi) { customDpi.style.backgroundColor = ''; - if (!zoomUserChanged) + if (!zoomUserChanged) { zoomInput.value = dpi; } - } + } }); - + td = document.createElement('td'); td.appendChild(dpiSelect); td.appendChild(customDpi); row.appendChild(td); tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('background') + ':'); - + row.appendChild(td); - + var transparentCheckbox = document.createElement('input'); transparentCheckbox.setAttribute('type', 'checkbox'); transparentCheckbox.checked = graph.background == null || graph.background == mxConstants.NONE; @@ -1029,38 +1029,38 @@ var ExportDialog = function(editorUi) td = document.createElement('td'); td.appendChild(transparentCheckbox); mxUtils.write(td, mxResources.get('transparent')); - + row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); - + td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('grid') + ':'); - + row.appendChild(td); - + var gridCheckbox = document.createElement('input'); gridCheckbox.setAttribute('type', 'checkbox'); gridCheckbox.checked = false; td = document.createElement('td'); td.appendChild(gridCheckbox); - + row.appendChild(td); - + tbody.appendChild(row); - + row = document.createElement('tr'); td = document.createElement('td'); td.style.fontSize = '10pt'; mxUtils.write(td, mxResources.get('borderWidth') + ':'); - + row.appendChild(td); - + var borderInput = document.createElement('input'); borderInput.setAttribute('type', 'number'); borderInput.setAttribute('value', ExportDialog.lastBorderValue); @@ -1072,13 +1072,13 @@ var ExportDialog = function(editorUi) tbody.appendChild(row); table.appendChild(tbody); - + // Handles changes in the export format function formatChanged() { var name = nameInput.value; var dot = name.lastIndexOf('.'); - + if (dot > 0) { nameInput.value = name.substring(0, dot + 1) + imageFormatSelect.value; @@ -1087,7 +1087,7 @@ var ExportDialog = function(editorUi) { nameInput.value = name + '.' + imageFormatSelect.value; } - + if (imageFormatSelect.value === 'xml') { zoomInput.setAttribute('disabled', 'true'); @@ -1102,7 +1102,7 @@ var ExportDialog = function(editorUi) heightInput.removeAttribute('disabled'); borderInput.removeAttribute('disabled'); } - + if (imageFormatSelect.value === 'png' || imageFormatSelect.value === 'svg' || imageFormatSelect.value === 'pdf') { transparentCheckbox.removeAttribute('disabled'); @@ -1111,7 +1111,7 @@ var ExportDialog = function(editorUi) { transparentCheckbox.setAttribute('disabled', 'disabled'); } - + if (imageFormatSelect.value === 'png' || imageFormatSelect.value === 'jpg' || imageFormatSelect.value === 'pdf') { gridCheckbox.removeAttribute('disabled'); @@ -1120,7 +1120,7 @@ var ExportDialog = function(editorUi) { gridCheckbox.setAttribute('disabled', 'disabled'); } - + if (imageFormatSelect.value === 'png') { dpiSelect.removeAttribute('disabled'); @@ -1132,7 +1132,7 @@ var ExportDialog = function(editorUi) customDpi.setAttribute('disabled', 'disabled'); } }; - + mxEvent.addListener(imageFormatSelect, 'change', formatChanged); formatChanged(); @@ -1146,7 +1146,7 @@ var ExportDialog = function(editorUi) { widthInput.style.backgroundColor = ''; } - + if (widthInput.value * heightInput.value > MAX_AREA || heightInput.value <= 0) { heightInput.style.backgroundColor = 'red'; @@ -1162,7 +1162,7 @@ var ExportDialog = function(editorUi) zoomUserChanged = true; var s = Math.max(0, parseFloat(zoomInput.value) || 100) / 100; zoomInput.value = parseFloat((s * 100).toFixed(2)); - + if (width > 0) { widthInput.value = Math.floor(width * s); @@ -1174,14 +1174,14 @@ var ExportDialog = function(editorUi) widthInput.value = width; heightInput.value = height; } - + checkValues(); }); mxEvent.addListener(widthInput, 'change', function() { var s = parseInt(widthInput.value) / width; - + if (s > 0) { zoomInput.value = parseFloat((s * 100).toFixed(2)); @@ -1193,14 +1193,14 @@ var ExportDialog = function(editorUi) widthInput.value = width; heightInput.value = height; } - + checkValues(); }); mxEvent.addListener(heightInput, 'change', function() { var s = parseInt(heightInput.value) / height; - + if (s > 0) { zoomInput.value = parseFloat((s * 100).toFixed(2)); @@ -1212,16 +1212,16 @@ var ExportDialog = function(editorUi) widthInput.value = width; heightInput.value = height; } - + checkValues(); }); - + row = document.createElement('tr'); td = document.createElement('td'); td.setAttribute('align', 'right'); td.style.paddingTop = '22px'; td.colSpan = 2; - + var saveBtn = mxUtils.button(mxResources.get('export'), mxUtils.bind(this, function() { if (parseInt(zoomInput.value) <= 0) @@ -1236,7 +1236,7 @@ var ExportDialog = function(editorUi) var b = Math.max(0, parseInt(borderInput.value)); var bg = graph.background; var dpi = Math.max(1, parseInt(customDpi.value)); - + if ((format == 'svg' || format == 'png' || format == 'pdf') && transparentCheckbox.checked) { bg = null; @@ -1245,19 +1245,19 @@ var ExportDialog = function(editorUi) { bg = '#ffffff'; } - + ExportDialog.lastBorderValue = b; ExportDialog.exportFile(editorUi, name, format, bg, s, b, dpi, gridCheckbox.checked); } })); saveBtn.className = 'geBtn gePrimaryBtn'; - + var cancelBtn = mxUtils.button(mxResources.get('cancel'), function() { editorUi.hideDialog(); }); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { td.appendChild(cancelBtn); @@ -1299,7 +1299,7 @@ ExportDialog.showXmlOption = true; ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi, grid) { var graph = editorUi.editor.graph; - + if (format == 'xml') { ExportDialog.saveLocalFile(editorUi, mxUtils.getXml(editorUi.editor.getGraphXml()), name, format); @@ -1311,26 +1311,26 @@ ExportDialog.exportFile = function(editorUi, name, format, bg, s, b, dpi, grid) else { 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((b / s - bounds.x) / graph.view.scale), Math.floor((b / s - bounds.y) / graph.view.scale)); xmlCanvas.scale(s / graph.view.scale); - + var imgExport = new mxImageExport() imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas); - + // Puts request data together var param = 'xml=' + encodeURIComponent(mxUtils.getXml(root)); var w = Math.ceil(bounds.width * s / graph.view.scale + 2 * b); var h = Math.ceil(bounds.height * s / graph.view.scale + 2 * b); - + // Requests image if request is valid if (param.length <= MAX_REQUEST_SIZE && w * h < MAX_AREA) { @@ -1378,9 +1378,9 @@ var EditDataDialog = function(ui, cell) { var div = document.createElement('div'); var graph = ui.editor.graph; - + var value = graph.getModel().getValue(cell); - + // Converts the value to an XML node if (!mxUtils.isNode(value)) { @@ -1389,13 +1389,13 @@ var EditDataDialog = function(ui, cell) obj.setAttribute('label', value || ''); value = obj; } - + var meta = {}; - + try { var temp = mxUtils.getValue(ui.editor.graph.getCurrentCellStyle(cell), 'metaData', null); - + if (temp != null) { meta = JSON.parse(temp); @@ -1405,7 +1405,7 @@ var EditDataDialog = function(ui, cell) { // ignore } - + // Creates the dialog contents var form = new mxForm('properties'); form.table.style.width = '100%'; @@ -1417,7 +1417,7 @@ var EditDataDialog = function(ui, cell) var id = (EditDataDialog.getDisplayIdForCell != null) ? EditDataDialog.getDisplayIdForCell(ui, cell) : null; - + var addRemoveButton = function(text, name) { var wrapper = document.createElement('div'); @@ -1425,13 +1425,13 @@ var EditDataDialog = function(ui, cell) wrapper.style.paddingRight = '20px'; wrapper.style.boxSizing = 'border-box'; wrapper.style.width = '100%'; - + var removeAttr = document.createElement('a'); var img = mxUtils.createImage(Dialog.prototype.closeImage); img.style.height = '9px'; img.style.fontSize = '9px'; img.style.marginBottom = (mxClient.IS_IE11) ? '-1px' : '5px'; - + removeAttr.className = 'geButton'; removeAttr.setAttribute('title', mxResources.get('delete')); removeAttr.style.position = 'absolute'; @@ -1442,23 +1442,23 @@ var EditDataDialog = function(ui, cell) removeAttr.style.height = '9px'; removeAttr.style.cursor = 'pointer'; removeAttr.appendChild(img); - + var removeAttrFn = (function(name) { return function() { var count = 0; - + for (var j = 0; j < names.length; j++) { if (names[j] == name) { texts[j] = null; form.table.deleteRow(count + ((id != null) ? 1 : 0)); - + break; } - + if (texts[j] != null) { count++; @@ -1466,34 +1466,34 @@ var EditDataDialog = function(ui, cell) } }; })(name); - + mxEvent.addListener(removeAttr, 'click', removeAttrFn); - + var parent = text.parentNode; wrapper.appendChild(text); wrapper.appendChild(removeAttr); parent.appendChild(wrapper); }; - + var addTextArea = function(index, name, value) { names[index] = name; texts[index] = form.addTextarea(names[count] + ':', value, 2); texts[index].style.width = '100%'; - + if (value.indexOf('\n') > 0) { texts[index].setAttribute('rows', '2'); } - + addRemoveButton(texts[index], name); - + if (meta[name] != null && meta[name].editable == false) { texts[index].setAttribute('disabled', 'disabled'); } }; - + var temp = []; var isLayer = graph.getModel().getParent(cell) == graph.getModel().getRoot(); @@ -1504,7 +1504,7 @@ var EditDataDialog = function(ui, cell) temp.push({name: attrs[i].nodeName, value: attrs[i].nodeValue}); } } - + // Sorts by name temp.sort(function(a, b) { @@ -1523,15 +1523,15 @@ var EditDataDialog = function(ui, cell) }); if (id != null) - { + { var text = document.createElement('div'); text.style.width = '100%'; text.style.fontSize = '11px'; text.style.textAlign = 'center'; mxUtils.write(text, id); - + var idInput = form.addField(mxResources.get('id') + ':', text); - + mxEvent.addListener(text, 'dblclick', function(evt) { if (mxEvent.isShiftDown(evt)) @@ -1561,13 +1561,13 @@ var EditDataDialog = function(ui, cell) text.setAttribute('title', 'Shift+Double Click to Edit ID'); } - + for (var i = 0; i < temp.length; i++) { addTextArea(count, temp[i].name, temp[i].value); count++; } - + var top = document.createElement('div'); top.style.position = 'absolute'; top.style.top = '30px'; @@ -1575,7 +1575,7 @@ var EditDataDialog = function(ui, cell) top.style.right = '30px'; top.style.bottom = '80px'; top.style.overflowY = 'auto'; - + top.appendChild(form.table); var newProp = document.createElement('div'); @@ -1584,7 +1584,7 @@ var EditDataDialog = function(ui, cell) newProp.style.whiteSpace = 'nowrap'; newProp.style.marginTop = '6px'; newProp.style.width = '100%'; - + var nameInput = document.createElement('input'); nameInput.setAttribute('placeholder', mxResources.get('enterPropertyName')); nameInput.setAttribute('type', 'text'); @@ -1592,11 +1592,11 @@ var EditDataDialog = function(ui, cell) nameInput.style.boxSizing = 'border-box'; nameInput.style.marginLeft = '2px'; nameInput.style.width = '100%'; - + newProp.appendChild(nameInput); top.appendChild(newProp); div.appendChild(top); - + var addBtn = mxUtils.button(mxResources.get('addProperty'), function() { var name = nameInput.value; @@ -1607,7 +1607,7 @@ var EditDataDialog = function(ui, cell) try { var idx = mxUtils.indexOf(names, name); - + if (idx >= 0 && texts[idx] != null) { texts[idx].focus(); @@ -1617,7 +1617,7 @@ var EditDataDialog = function(ui, cell) // Checks if the name is valid var clone = value.cloneNode(false); clone.setAttribute(name, ''); - + if (idx >= 0) { names.splice(idx, 1); @@ -1654,7 +1654,7 @@ var EditDataDialog = function(ui, cell) addBtn.click(); } }); - + this.init = function() { if (texts.length > 0) @@ -1666,7 +1666,7 @@ var EditDataDialog = function(ui, cell) nameInput.focus(); } }; - + addBtn.setAttribute('title', mxResources.get('addProperty')); addBtn.setAttribute('disabled', 'disabled'); addBtn.style.textOverflow = 'ellipsis'; @@ -1681,21 +1681,21 @@ var EditDataDialog = function(ui, cell) { ui.hideDialog.apply(ui, arguments); }); - + cancelBtn.setAttribute('title', 'Escape'); cancelBtn.className = 'geBtn'; - + var applyBtn = mxUtils.button(mxResources.get('apply'), function() { try { ui.hideDialog.apply(ui, arguments); - + // Clones and updates the value value = value.cloneNode(true); var removeLabel = false; - + for (var i = 0; i < names.length; i++) { if (texts[i] == null) @@ -1709,13 +1709,13 @@ var EditDataDialog = function(ui, cell) value.getAttribute('placeholders') == '1'); } } - + // Removes label if placeholder is assigned if (removeLabel) { value.removeAttribute('label'); } - + // Updates the value of the cell (undoable) graph.getModel().setValue(cell, value); } @@ -1735,7 +1735,7 @@ var EditDataDialog = function(ui, cell) applyBtn.click(); } }); - + function updateAddBtn() { if (nameInput.value.length > 0) @@ -1749,13 +1749,13 @@ var EditDataDialog = function(ui, cell) }; mxEvent.addListener(nameInput, 'keyup', updateAddBtn); - + // Catches all changes that don't fire a keyup (such as paste via mouse) mxEvent.addListener(nameInput, 'change', updateAddBtn); - + var buttons = document.createElement('div'); buttons.style.cssText = 'position:absolute;left:30px;right:30px;text-align:right;bottom:30px;height:40px;' - + if (ui.editor.graph.getModel().isVertex(cell) || ui.editor.graph.getModel().isEdge(cell)) { var replace = document.createElement('span'); @@ -1763,13 +1763,13 @@ var EditDataDialog = function(ui, cell) var input = document.createElement('input'); input.setAttribute('type', 'checkbox'); input.style.marginRight = '6px'; - + if (value.getAttribute('placeholders') == '1') { input.setAttribute('checked', 'checked'); input.defaultChecked = true; } - + mxEvent.addListener(input, 'click', function() { if (value.getAttribute('placeholders') == '1') @@ -1781,10 +1781,10 @@ var EditDataDialog = function(ui, cell) value.setAttribute('placeholders', '1'); } }); - + replace.appendChild(input); mxUtils.write(replace, mxResources.get('placeholders')); - + if (EditDataDialog.placeholderHelpLink != null) { var link = document.createElement('a'); @@ -1793,7 +1793,7 @@ var EditDataDialog = function(ui, cell) link.setAttribute('target', '_blank'); link.style.marginLeft = '8px'; link.style.cursor = 'help'; - + var icon = document.createElement('img'); mxUtils.setOpacity(icon, 50); icon.style.height = '16px'; @@ -1803,13 +1803,13 @@ var EditDataDialog = function(ui, cell) icon.style.marginTop = (mxClient.IS_IE11) ? '0px' : '-4px'; icon.setAttribute('src', Editor.helpImage); link.appendChild(icon); - + replace.appendChild(link); } - + buttons.appendChild(replace); } - + if (ui.editor.cancelFirst) { buttons.appendChild(cancelBtn); @@ -1831,12 +1831,12 @@ var EditDataDialog = function(ui, cell) EditDataDialog.getDisplayIdForCell = function(ui, cell) { var id = null; - + if (ui.editor.graph.getModel().getParent(cell) != null) { id = cell.getId(); } - + return id; }; @@ -1852,7 +1852,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) { var div = document.createElement('div'); mxUtils.write(div, mxResources.get('editLink') + ':'); - + var inner = document.createElement('div'); inner.className = 'geTitle'; inner.style.backgroundColor = 'transparent'; @@ -1861,7 +1861,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) inner.style.textOverflow = 'clip'; inner.style.cursor = 'default'; inner.style.paddingRight = '20px'; - + var linkInput = document.createElement('input'); linkInput.setAttribute('value', initialValue); linkInput.setAttribute('placeholder', 'http://www.example.com/'); @@ -1872,7 +1872,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) linkInput.style.backgroundRepeat = 'no-repeat'; linkInput.style.backgroundPosition = '100% 50%'; linkInput.style.paddingRight = '14px'; - + var cross = document.createElement('div'); cross.setAttribute('title', mxResources.get('reset')); cross.style.position = 'relative'; @@ -1884,7 +1884,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) // Workaround for inline-block not supported in IE cross.style.display = 'inline-block'; cross.style.top = '3px'; - + // Needed to block event transparency in IE cross.style.background = 'url(' + IMAGE_PATH + '/transparent.gif)'; @@ -1893,15 +1893,15 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) linkInput.value = ''; linkInput.focus(); }); - + inner.appendChild(linkInput); inner.appendChild(cross); div.appendChild(inner); - + this.init = function() { linkInput.focus(); - + if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5) { linkInput.select(); @@ -1911,7 +1911,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) document.execCommand('selectAll', false, null); } }; - + var btns = document.createElement('div'); btns.style.marginTop = '18px'; btns.style.textAlign = 'right'; @@ -1930,12 +1930,12 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) editorUi.hideDialog(); }); cancelBtn.className = 'geBtn'; - + if (editorUi.editor.cancelFirst) { btns.appendChild(cancelBtn); } - + var mainBtn = mxUtils.button(btnLabel, function() { editorUi.hideDialog(); @@ -1943,7 +1943,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) }); mainBtn.className = 'geBtn gePrimaryBtn'; btns.appendChild(mainBtn); - + if (!editorUi.editor.cancelFirst) { btns.appendChild(cancelBtn); @@ -1955,7 +1955,7 @@ var LinkDialog = function(editorUi, initialValue, btnLabel, fn) }; /** - * + * */ var OutlineWindow = function(editorUi, x, y, w, h) { @@ -1974,12 +1974,12 @@ var OutlineWindow = function(editorUi, x, y, w, h) this.window.setResizable(true); this.window.setClosable(true); this.window.setVisible(true); - + this.window.setLocation = function(x, y) { var iw = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var ih = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; - + x = Math.max(0, Math.min(x, iw - this.table.clientWidth)); y = Math.max(0, Math.min(y, ih - this.table.clientHeight - ((urlParams['sketch'] == '1') ? 3 : 48))); @@ -1988,17 +1988,17 @@ var OutlineWindow = function(editorUi, x, y, w, h) mxWindow.prototype.setLocation.apply(this, arguments); } }; - + var resizeListener = mxUtils.bind(this, function() { var x = this.window.getX(); var y = this.window.getY(); - + this.window.setLocation(x, y); }); - + mxEvent.addListener(window, 'resize', resizeListener); - + var outline = editorUi.createOutline(this.window); this.destroy = function() @@ -2013,17 +2013,17 @@ var OutlineWindow = function(editorUi, x, y, w, h) this.window.fit(); outline.setSuspended(false); })); - + this.window.addListener(mxEvent.HIDE, mxUtils.bind(this, function() { outline.setSuspended(true); })); - + this.window.addListener(mxEvent.NORMALIZE, mxUtils.bind(this, function() { outline.setSuspended(false); })); - + this.window.addListener(mxEvent.MINIMIZE, mxUtils.bind(this, function() { outline.setSuspended(true); @@ -2067,12 +2067,12 @@ var OutlineWindow = function(editorUi, x, y, w, h) }; /** - * + * */ var LayersWindow = function(editorUi, x, y, w, h) { var graph = editorUi.editor.graph; - + var div = document.createElement('div'); div.style.userSelect = 'none'; div.style.background = (!Editor.isDarkMode()) ? '#fff' : Dialog.backdropColor; @@ -2082,7 +2082,7 @@ var LayersWindow = function(editorUi, x, y, w, h) div.style.overflow = 'auto'; var tbarHeight = (!EditorUi.compactUi) ? '30px' : '26px'; - + var listDiv = document.createElement('div') listDiv.style.backgroundColor = (!Editor.isDarkMode()) ? '#fff' : Dialog.backdropColor; listDiv.style.position = 'absolute'; @@ -2092,10 +2092,10 @@ var LayersWindow = function(editorUi, x, y, w, h) listDiv.style.top = '0px'; listDiv.style.bottom = (parseInt(tbarHeight) + 7) + 'px'; div.appendChild(listDiv); - + var dragSource = null; var dropIndex = null; - + mxEvent.addListener(div, 'dragover', function(evt) { evt.dataTransfer.dropEffect = 'move'; @@ -2103,7 +2103,7 @@ var LayersWindow = function(editorUi, x, y, w, h) evt.stopPropagation(); evt.preventDefault(); }); - + // Workaround for "no element found" error in FF mxEvent.addListener(div, 'drop', function(evt) { @@ -2114,7 +2114,7 @@ var LayersWindow = function(editorUi, x, y, w, h) var layerCount = null; var selectionLayer = null; var ldiv = document.createElement('div'); - + ldiv.className = 'geToolbarContainer'; ldiv.style.position = 'absolute'; ldiv.style.bottom = '0px'; @@ -2129,10 +2129,10 @@ var LayersWindow = function(editorUi, x, y, w, h) ldiv.style.borderStyle = 'solid'; ldiv.style.display = 'block'; ldiv.style.whiteSpace = 'nowrap'; - + var link = document.createElement('a'); link.className = 'geButton'; - + var removeLink = link.cloneNode(false); var img = document.createElement('img'); img.setAttribute('border', '0'); @@ -2156,7 +2156,7 @@ var LayersWindow = function(editorUi, x, y, w, h) { var index = graph.model.root.getIndex(selectionLayer); graph.removeCells([selectionLayer], false); - + // Creates default layer if no layer exists if (graph.model.getChildCount(graph.model.root) == 0) { @@ -2177,15 +2177,15 @@ var LayersWindow = function(editorUi, x, y, w, h) graph.model.endUpdate(); } } - + mxEvent.consume(evt); }); - + if (!graph.isEnabled()) { removeLink.className = 'geButton mxDisabled'; } - + ldiv.appendChild(removeLink); var insertLink = link.cloneNode(); @@ -2200,7 +2200,7 @@ var LayersWindow = function(editorUi, x, y, w, h) if (graph.isEnabled() && !graph.isSelectionEmpty()) { var offset = mxUtils.getOffset(insertLink); - + editorUi.showPopupMenu(mxUtils.bind(this, function(menu, parent) { for (var i = layerCount - 1; i >= 0; i--) @@ -2212,12 +2212,12 @@ var LayersWindow = function(editorUi, x, y, w, h) { graph.moveCells(graph.getSelectionCells(), 0, 0, false, child); }), parent); - + if (graph.getSelectionCount() == 1 && graph.model.isAncestor(child, graph.getSelectionCell())) { menu.addCheckmark(item, Editor.checkmarkImage); } - + }))(graph.model.getChildAt(graph.model.root, i)); } }), offset.x, offset.y + insertLink.offsetHeight, evt); @@ -2225,7 +2225,7 @@ var LayersWindow = function(editorUi, x, y, w, h) }); ldiv.appendChild(insertLink); - + var dataLink = link.cloneNode(false); dataLink.setAttribute('title', mxResources.get('editData')); @@ -2239,17 +2239,17 @@ var LayersWindow = function(editorUi, x, y, w, h) { editorUi.showDataDialog(selectionLayer); } - + mxEvent.consume(evt); }); - + if (!graph.isEnabled()) { dataLink.className = 'geButton mxDisabled'; } ldiv.appendChild(dataLink); - + function renameLayer(layer) { if (graph.isEnabled() && layer != null) @@ -2266,7 +2266,7 @@ var LayersWindow = function(editorUi, x, y, w, h) dlg.init(); } }; - + var duplicateLink = link.cloneNode(false); duplicateLink.setAttribute('title', mxResources.get('duplicate')); @@ -2299,7 +2299,7 @@ var LayersWindow = function(editorUi, x, y, w, h) } } }); - + if (!graph.isEnabled()) { duplicateLink.className = 'geButton mxDisabled'; @@ -2313,13 +2313,13 @@ var LayersWindow = function(editorUi, x, y, w, h) img = img.cloneNode(false); img.setAttribute('src', Editor.addImage); addLink.appendChild(img); - + mxEvent.addListener(addLink, 'click', function(evt) { if (graph.isEnabled()) { graph.model.beginUpdate(); - + try { var cell = graph.addCell(new mxCell(mxResources.get('untitledLayer')), graph.model.root); @@ -2330,20 +2330,20 @@ var LayersWindow = function(editorUi, x, y, w, h) graph.model.endUpdate(); } } - + mxEvent.consume(evt); }); - + if (!graph.isEnabled()) { addLink.className = 'geButton mxDisabled'; } - + ldiv.appendChild(addLink); div.appendChild(ldiv); - + var layerDivs = new mxDictionary(); - + var dot = document.createElement('span'); dot.setAttribute('title', mxResources.get('selectionOnly')); dot.innerHTML = '•'; @@ -2352,11 +2352,11 @@ var LayersWindow = function(editorUi, x, y, w, h) dot.style.fontSize = '16pt'; dot.style.right = '2px'; dot.style.top = '2px'; - + function updateLayerDot() { var div = layerDivs.get(graph.getLayerForCells(graph.getSelectionCells())); - + if (div != null) { div.appendChild(dot); @@ -2366,13 +2366,13 @@ var LayersWindow = function(editorUi, x, y, w, h) dot.parentNode.removeChild(dot); } }; - + function refresh() { layerCount = graph.model.getChildCount(graph.model.root) listDiv.innerHTML = ''; layerDivs.clear(); - + function addLayer(index, label, child, defaultParent) { var ldiv = document.createElement('div'); @@ -2390,13 +2390,13 @@ var LayersWindow = function(editorUi, x, y, w, h) ldiv.style.borderStyle = 'solid'; ldiv.style.whiteSpace = 'nowrap'; ldiv.setAttribute('title', label); - + var left = document.createElement('div'); left.style.display = 'inline-block'; left.style.width = '100%'; left.style.textOverflow = 'ellipsis'; left.style.overflow = 'hidden'; - + mxEvent.addListener(ldiv, 'dragover', function(evt) { evt.dataTransfer.dropEffect = 'move'; @@ -2404,11 +2404,11 @@ var LayersWindow = function(editorUi, x, y, w, h) evt.stopPropagation(); evt.preventDefault(); }); - + mxEvent.addListener(ldiv, 'dragstart', function(evt) { dragSource = ldiv; - + // Workaround for no DnD on DIV in FF if (mxClient.IS_FF) { @@ -2416,7 +2416,7 @@ var LayersWindow = function(editorUi, x, y, w, h) evt.dataTransfer.setData('Text', ''); } }); - + mxEvent.addListener(ldiv, 'dragend', function(evt) { if (dragSource != null && dropIndex != null) @@ -2459,7 +2459,7 @@ var LayersWindow = function(editorUi, x, y, w, h) } left.appendChild(inp); - + mxEvent.addListener(inp, 'click', function(evt) { graph.model.setVisible(child, !graph.model.isVisible(child)); @@ -2492,18 +2492,18 @@ var LayersWindow = function(editorUi, x, y, w, h) { btn.style.filter = 'invert(100%)'; } - + if (graph.isEnabled()) { btn.style.cursor = 'pointer'; } - + mxEvent.addListener(btn, 'click', function(evt) { if (graph.isEnabled()) { var value = null; - + graph.getModel().beginUpdate(); try { @@ -2519,7 +2519,7 @@ var LayersWindow = function(editorUi, x, y, w, h) { graph.removeSelectionCells(graph.getModel().getDescendants(child)); } - + mxEvent.consume(evt); } }); @@ -2539,7 +2539,7 @@ var LayersWindow = function(editorUi, x, y, w, h) left.appendChild(span); ldiv.appendChild(left); - + if (graph.isEnabled()) { // Fallback if no drag and drop is available @@ -2553,14 +2553,14 @@ var LayersWindow = function(editorUi, x, y, w, h) right.style.position = 'absolute'; right.style.right = '16px'; right.style.top = '6px'; - + // Poor man's change layer order if (index > 0) { var img2 = document.createElement('a'); - + img2.setAttribute('title', mxResources.get('toBack')); - + img2.className = 'geButton'; img2.style.cssFloat = 'none'; img2.innerHTML = '▼'; @@ -2570,24 +2570,24 @@ var LayersWindow = function(editorUi, x, y, w, h) img2.style.margin = '0px'; img2.style.marginTop = '-1px'; right.appendChild(img2); - + mxEvent.addListener(img2, 'click', function(evt) { if (graph.isEnabled()) { graph.addCell(child, graph.model.root, index - 1); } - + mxEvent.consume(evt); }); } - + if (index >= 0 && index < layerCount - 1) { var img1 = document.createElement('a'); - + img1.setAttribute('title', mxResources.get('toFront')); - + img1.className = 'geButton'; img1.style.cssFloat = 'none'; img1.innerHTML = '▲'; @@ -2597,21 +2597,21 @@ var LayersWindow = function(editorUi, x, y, w, h) img1.style.margin = '0px'; img1.style.marginTop = '-1px'; right.appendChild(img1); - + mxEvent.addListener(img1, 'click', function(evt) { if (graph.isEnabled()) { graph.addCell(child, graph.model.root, index + 1); } - + mxEvent.consume(evt); }); } - + ldiv.appendChild(right); } - + if (mxClient.IS_SVG && (!mxClient.IS_IE || document.documentMode >= 10)) { ldiv.setAttribute('draggable', 'true'); @@ -2622,7 +2622,7 @@ var LayersWindow = function(editorUi, x, y, w, h) mxEvent.addListener(ldiv, 'dblclick', function(evt) { var nodeName = mxEvent.getSource(evt).nodeName; - + if (nodeName != 'INPUT' && nodeName != 'IMG') { renameLayer(child); @@ -2646,16 +2646,16 @@ var LayersWindow = function(editorUi, x, y, w, h) if (mxEvent.isShiftDown(evt)) { - graph.setSelectionCells(child.children); + graph.setSelectionCells(child.children); } - + mxEvent.consume(evt); } }); - + listDiv.appendChild(ldiv); }; - + // Cannot be moved or deleted for (var i = layerCount - 1; i >= 0; i--) { @@ -2665,7 +2665,7 @@ var LayersWindow = function(editorUi, x, y, w, h) mxResources.get('background'), child, child); }))(graph.model.getChildAt(graph.model.root, i)); } - + var label = graph.convertValueToString(selectionLayer) || mxResources.get('background'); removeLink.setAttribute('title', mxResources.get('removeIt', [label])); duplicateLink.setAttribute('title', mxResources.get('duplicateIt', [label])); @@ -2674,14 +2674,14 @@ var LayersWindow = function(editorUi, x, y, w, h) { insertLink.className = 'geButton mxDisabled'; } - + updateLayerDot(); }; refresh(); graph.model.addListener(mxEvent.CHANGE, refresh); graph.addListener('defaultParentChanged', refresh); - + graph.selectionModel.addListener(mxEvent.CHANGE, function() { if (graph.isSelectionEmpty()) @@ -2692,7 +2692,7 @@ var LayersWindow = function(editorUi, x, y, w, h) { insertLink.className = 'geButton'; } - + updateLayerDot(); }); @@ -2703,25 +2703,25 @@ var LayersWindow = function(editorUi, x, y, w, h) this.window.setResizable(true); this.window.setClosable(true); this.window.setVisible(true); - + this.init = function() { - listDiv.scrollTop = listDiv.scrollHeight - listDiv.clientHeight; + listDiv.scrollTop = listDiv.scrollHeight - listDiv.clientHeight; }; this.window.addListener(mxEvent.SHOW, mxUtils.bind(this, function() { this.window.fit(); })); - + // Make refresh available via instance this.refreshLayers = refresh; - + this.window.setLocation = function(x, y) { var iw = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var ih = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; - + x = Math.max(0, Math.min(x, iw - this.table.clientWidth)); y = Math.max(0, Math.min(y, ih - this.table.clientHeight - ((urlParams['sketch'] == '1') ? 3 : 48))); @@ -2730,15 +2730,15 @@ var LayersWindow = function(editorUi, x, y, w, h) mxWindow.prototype.setLocation.apply(this, arguments); } }; - + var resizeListener = mxUtils.bind(this, function() { var x = this.window.getX(); var y = this.window.getY(); - + this.window.setLocation(x, y); }); - + mxEvent.addListener(window, 'resize', resizeListener); this.destroy = function() diff --git a/resources/assets/statics/public/js/drawio/js/grapheditor/EditorUi.js b/resources/assets/statics/public/js/drawio/js/grapheditor/EditorUi.js index 53259ab8d..1d9fc0051 100644 --- a/resources/assets/statics/public/js/drawio/js/grapheditor/EditorUi.js +++ b/resources/assets/statics/public/js/drawio/js/grapheditor/EditorUi.js @@ -4181,7 +4181,7 @@ EditorUi.prototype.refresh = function(sizeDidChange) if (this.toolbar != null) { - this.toolbarContainer.style.top = this.menubarHeight + 'px'; + this.toolbarContainer.style.top = '0px';//this.menubarHeight + 'px'; this.toolbarContainer.style.height = this.toolbarHeight + 'px'; tmp += this.toolbarHeight; } @@ -4321,8 +4321,7 @@ EditorUi.prototype.createSidebarFooterContainer = function() EditorUi.prototype.createUi = function() { // Creates menubar - this.menubar = (this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar')); - + this.menubar = null;//(this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar')); if (this.menubar != null) { this.menubarContainer.appendChild(this.menubar.container); @@ -4403,6 +4402,162 @@ EditorUi.prototype.createUi = function() this.refresh(); })); } + + + var editorUi = this; + var graph = editorUi.editor.graph; + var getPos = function () { + var svg = null; + var childNodes = graph.container.childNodes; + for (var i = 0; i < childNodes.length; i++) { + if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') { + svg = childNodes[i]; + break; + } + } + var data = { + p1: {left: 0, top: 0}, + p2: {left: 0, top: 0}, + }; + if (svg != null) { + data = { + p1: { + left: svg.clientWidth / 2, + top: svg.clientHeight / 2, + }, + p2: { + left: graph.container.clientWidth / 2 + graph.container.scrollLeft, + top: graph.container.clientHeight / 2 + graph.container.scrollTop, + } + }; + } + return { + left: data.p2.left - data.p1.left, + top: data.p2.top - data.p1.top, + }; + } + + var setPos = function (diff) { + var svg = null; + var childNodes = graph.container.childNodes; + for (var i = 0; i < childNodes.length; i++) { + if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') { + svg = childNodes[i]; + break; + } + } + if (svg == null) { + return; + } + graph.container.scrollLeft = svg.clientWidth / 2 + diff.left - graph.container.clientWidth / 2; + graph.container.scrollTop = svg.clientHeight / 2 + diff.top - graph.container.clientHeight / 2; + } + + var newXml; + var newPos; + var randXml; + var backupParams; + var changePost = function (immediately) { + var randTmp = (randXml = Math.random()); + setTimeout(() => { + if (randTmp != randXml) { + return; + } + if (!backupParams) { + return; + } + newPos = getPos(); + newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml()); + if (backupParams.xml && backupParams.xml.replace(/^/, '') == newXml.replace(/^/, '')) { + if (backupParams.scale && backupParams.scale == graph.getView().scale) { + if (typeof backupParams.diffpos === "object" && Math.abs(backupParams.diffpos.left - newPos.left) < 10 && Math.abs(backupParams.diffpos.top - newPos.top) < 10) { + return; + } + } + } + backupParams.xml = newXml; + window.parent.postMessage({ + act: 'change', + params: { + xml: newXml, + scale: graph.getView().scale, + diffpos: newPos, + } + }, '*'); + }, immediately === true ? 0 : 200) + } + + graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() { changePost(true) })); + graph.getView().addListener(mxEvent.SCALE, mxUtils.bind(editorUi, function() {changePost(true) })); + var container = document.getElementsByClassName('geDiagramContainer')[0]; + container.addEventListener("scroll", changePost); + + window.addEventListener("message", function(event){ + var data = event.data; + switch (data.act) { + case 'setXml': + try { + backupParams = data.params; + editorUi.editor.setGraphXml(mxUtils.parseXml(data.params.xml).documentElement); + typeof data.params.scale === "number" && graph.zoomTo(data.params.scale); + typeof data.params.diffpos === "object" && setPos(data.params.diffpos); + } catch (e) { + + } + break; + + case 'exportPNG': + try { + (function (name, scale, type) { + name = name || '未命名'; + type = type || 'png'; + scale = scale || 1; + var graph = editorUi.editor.graph; + var bounds = graph.getGraphBounds(); + var width = Math.ceil(bounds.width / graph.view.scale * scale); + var height = Math.ceil(bounds.height / graph.view.scale * scale); + var source = '\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0)) + var image = new Image() + image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source) + var canvas = document.createElement('canvas') + canvas.width = width + canvas.height = height + var context = canvas.getContext('2d') + context.fillStyle = '#fff' + context.fillRect(0, 0, 10000, 10000) + image.onload = function () { + context.drawImage(image, 0, 0) + if (type == 'imageContent') { + window.parent.postMessage({ + act: 'imageContent', + params: { + name: name, + width: width, + height: height, + content: canvas.toDataURL(`image/${type}`) + } + }, '*'); + } else { + var a = document.createElement('a') + a.download = `${name}.${type}` + a.href = canvas.toDataURL(`image/${type}`) + a.click() + } + } + })(data.params.name, data.params.scale, data.params.type); + } catch (e) { + + } + break; + } + }); + + window.parent.postMessage({ + act: 'ready', + params: {} + }, '*'); + + }; /**