diff options
Diffstat (limited to 'src/main/webapp/js/diagramly/EditorUi.js')
| -rw-r--r-- | src/main/webapp/js/diagramly/EditorUi.js | 960 |
1 files changed, 755 insertions, 205 deletions
diff --git a/src/main/webapp/js/diagramly/EditorUi.js b/src/main/webapp/js/diagramly/EditorUi.js index 6d15e8e0..c35a5b78 100644 --- a/src/main/webapp/js/diagramly/EditorUi.js +++ b/src/main/webapp/js/diagramly/EditorUi.js @@ -12,7 +12,7 @@ /** * Overrides compact UI setting. */ - EditorUi.compactUi = uiTheme != 'atlas'; + EditorUi.compactUi = Editor.currentTheme != 'atlas'; /** * Overrides default grid color for dark mode @@ -3773,7 +3773,7 @@ */ EditorUi.initTheme = function() { - if (uiTheme == 'atlas') + if (Editor.currentTheme == 'atlas') { mxClient.link('stylesheet', STYLE_PATH + '/atlas.css'); @@ -3789,24 +3789,10 @@ } // Implements the sketch-min UI - if (urlParams['sketch'] == '1') + if (Editor.currentTheme == 'sketch') { - if (typeof Menus !== 'undefined') - { - Menus.prototype.defaultFonts = Menus.prototype.defaultFonts.concat(Editor.sketchFonts); - } - - Graph.prototype.defaultVertexStyle = {'hachureGap': '4'}; - Graph.prototype.defaultEdgeStyle = {'edgeStyle': 'none', 'rounded': '0', 'curved': '1', - 'jettySize': 'auto', 'orthogonalLoop': '1', 'endArrow': 'open', 'startSize': '14', 'endSize': '14', - 'sourcePerimeterSpacing': '8', 'targetPerimeterSpacing': '8'}; - Editor.configurationKey = '.sketch-configuration'; Editor.settingsKey = '.sketch-config'; - Graph.prototype.defaultGridEnabled = urlParams['grid'] == '1'; - Graph.prototype.defaultPageVisible = urlParams['pv'] == '1'; - Graph.prototype.defaultEdgeLength = 120; - Editor.fitWindowBorders = new mxRectangle(60, 30, 30, 30); } }; @@ -3886,40 +3872,47 @@ */ EditorUi.prototype.createSidebarFooterContainer = function() { - var div = this.createDiv('geSidebarContainer geSidebarFooter'); - div.style.position = 'absolute'; - div.style.overflow = 'hidden'; - - var elt2 = document.createElement('a'); - elt2.className = 'geTitle'; - elt2.style.color = '#DF6C0C'; - elt2.style.fontWeight = 'bold'; - elt2.style.height = '100%'; - elt2.style.paddingTop = '9px'; - elt2.innerHTML = '<span>+</span>'; - - var span = elt2.getElementsByTagName('span')[0]; - span.style.fontSize = '18px'; - span.style.marginRight = '5px'; + if (urlParams['embedInline'] != '1') + { + var div = this.createDiv('geSidebarContainer geSidebarFooter'); + div.style.position = 'absolute'; + div.style.overflow = 'hidden'; + + var elt2 = document.createElement('a'); + elt2.className = 'geTitle'; + elt2.style.color = '#DF6C0C'; + elt2.style.fontWeight = 'bold'; + elt2.style.height = '100%'; + elt2.style.paddingTop = '9px'; + elt2.innerHTML = '<span>+</span>'; + + var span = elt2.getElementsByTagName('span')[0]; + span.style.fontSize = '18px'; + span.style.marginRight = '5px'; - mxUtils.write(elt2, mxResources.get('moreShapes') + '...'); + mxUtils.write(elt2, mxResources.get('moreShapes') + '...'); - // Prevents focus - mxEvent.addListener(elt2, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', - mxUtils.bind(this, function(evt) - { - evt.preventDefault(); - })); - - mxEvent.addListener(elt2, 'click', mxUtils.bind(this, function(evt) + // Prevents focus + mxEvent.addListener(elt2, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', + mxUtils.bind(this, function(evt) + { + evt.preventDefault(); + })); + + mxEvent.addListener(elt2, 'click', mxUtils.bind(this, function(evt) + { + this.actions.get('shapes').funct(); + mxEvent.consume(evt); + })); + + div.appendChild(elt2); + + return div; + } + else { - this.actions.get('shapes').funct(); - mxEvent.consume(evt); - })); - - div.appendChild(elt2); - - return div; + return null; + } }; /** @@ -6237,13 +6230,11 @@ var txtSettingsSelect = document.createElement('select'); txtSettingsSelect.style.maxWidth = '260px'; txtSettingsSelect.style.marginLeft = '8px'; - txtSettingsSelect.style.marginRight = '10px'; txtSettingsSelect.style.marginBottom = '16px'; - txtSettingsSelect.className = 'geBtn'; var noneOption = document.createElement('option'); noneOption.setAttribute('value', 'none'); - mxUtils.write(noneOption, mxResources.get('noChange')); + mxUtils.write(noneOption, mxResources.get('default')); txtSettingsSelect.appendChild(noneOption); var embedFontsOption = document.createElement('option'); @@ -6307,8 +6298,6 @@ var linkSelect = document.createElement('select'); linkSelect.style.maxWidth = '260px'; linkSelect.style.marginLeft = '8px'; - linkSelect.style.marginRight = '10px'; - linkSelect.className = 'geBtn'; var autoOption = document.createElement('option'); autoOption.setAttribute('value', 'auto'); @@ -9329,7 +9318,7 @@ var ui = this; var graph = this.editor.graph; - + // Stops panning while freehand is active if (Graph.touchStyle) { @@ -10281,10 +10270,45 @@ } })); - if (Editor.currentTheme == 'simple') + // Overrides mxWindow.fit to allow for embedViewport + var ui = this; + + mxWindow.prototype.fit = function() + { + if (!Editor.inlineFullscreen && ui.embedViewport != null) + { + var left = parseInt(this.div.offsetLeft); + var width = parseInt(this.div.offsetWidth); + var right = ui.embedViewport.x + ui.embedViewport.width; + var top = parseInt(this.div.offsetTop); + var height = parseInt(this.div.offsetHeight); + var bottom = ui.embedViewport.y + ui.embedViewport.height; + + this.div.style.left = Math.max(ui.embedViewport.x, Math.min(left, right - width)) + 'px'; + this.div.style.top = Math.max(ui.embedViewport.y, Math.min(top, bottom - height)) + 'px'; + this.div.style.height = Math.min(ui.embedViewport.height, parseInt(this.div.style.height)) + 'px'; + this.div.style.width = Math.min(ui.embedViewport.width, parseInt(this.div.style.width)) + 'px'; + } + else + { + mxUtils.fit(this.div); + } + }; + + // Activates scheme in UI + if (Editor.currentTheme == 'simple' || + Editor.currentTheme == 'sketch') { + var theme = Editor.currentTheme; Editor.currentTheme = ''; - this.doSetCurrentTheme('simple', 0); + this.doSetCurrentTheme(theme, 0, mxUtils.bind(this, function() + { + if (urlParams['embedInline'] == '1') + { + // Inline embed mode must be initialized after setting current theme + this.initializeInlineEmbedMode(); + } + })); } if (!mxClient.IS_IE && !mxClient.IS_IE11 && urlParams['dark'] != '0' && @@ -10293,12 +10317,13 @@ { var darkMode = false; - if (this.isSettingsEnabled()) + if (window.matchMedia && this.isAutoDarkMode()) + { + darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + } + else if (this.isSettingsEnabled() && mxSettings.settings.darkMode === true) { - darkMode = (mxSettings.settings.darkMode == 'auto' || - urlParams['dark'] == 'auto') ? window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches : - mxSettings.settings.darkMode === true; + darkMode = true; } if (darkMode || uiTheme == 'dark' || urlParams['dark'] == '1') @@ -10306,8 +10331,171 @@ this.setDarkMode(true); } } + + if (window.matchMedia) + { + // Automatically updates theme when system setting changes + window.matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', mxUtils.bind(this, function (e) + { + if (this.isAutoDarkMode()) + { + this.setDarkMode(e.matches); + } + })); + } + else if (this.isSettingsEnabled() && mxSettings.settings.darkMode === true) + { + darkMode = true; + } this.installSettings(); + + if (urlParams['prefetchFonts'] == '1') + { + ui.editor.loadFonts(); + } + }; + + /** + * Initializes embed inline mode. + */ + EditorUi.prototype.initializeInlineEmbedMode = function() + { + var footer = this.sketchFooterMenuElt; + var toolbar = this.sketchMainMenuElt; + var picker = this.sketchPickerMenuElt; + var graph = this.editor.graph; + picker.style.transform = ''; + + mxEvent.addGestureListeners(this.diagramContainer.parentNode, mxUtils.bind(this, function(evt) + { + if (mxEvent.getSource(evt) == this.diagramContainer.parentNode) + { + this.embedExitPoint = new mxPoint( + mxEvent.getClientX(evt), + mxEvent.getClientY(evt)); + this.sendEmbeddedSvgExport(); + } + })); + + document.body.style.cursor = 'text'; + + var div = document.createElement('div'); + div.style.position = 'absolute'; + div.style.width = '10px'; + div.style.height = '10px'; + div.style.borderRadius = '5px'; + div.style.border = '1px solid gray'; + div.style.background = '#ffffff'; + div.style.cursor = 'row-resize'; + + this.diagramContainer.parentNode.appendChild(div); + this.bottomResizer = div; + + var x0 = null; + var y0 = null; + var w0 = null; + var h0 = null; + + mxEvent.addGestureListeners(div, mxUtils.bind(this, function(evt) + { + h0 = parseInt(this.diagramContainer.style.height); + y0 = mxEvent.getClientY(evt); + graph.popupMenuHandler.hideMenu(); + mxEvent.consume(evt); + })); + + div = div.cloneNode(false); + div.style.cursor = 'col-resize'; + this.diagramContainer.parentNode.appendChild(div); + this.rightResizer = div; + + mxEvent.addGestureListeners(div, mxUtils.bind(this, function(evt) + { + w0 = parseInt(this.diagramContainer.style.width); + x0 = mxEvent.getClientX(evt); + graph.popupMenuHandler.hideMenu(); + mxEvent.consume(evt); + })); + + mxEvent.addGestureListeners(document.body, null, mxUtils.bind(this, function(evt) + { + var changed = false; + + if (x0 != null) + { + this.diagramContainer.style.width = Math.max(20, + w0 + mxEvent.getClientX(evt) - x0) + 'px'; + changed = true; + } + + if (y0 != null) + { + this.diagramContainer.style.height = Math.max(20, + h0 + mxEvent.getClientY(evt) - y0) + 'px'; + changed = true; + } + + if (changed) + { + var parent = window.opener || window.parent; + parent.postMessage(JSON.stringify({ + event: 'resize', + fullscreen: Editor.inlineFullscreen, + rect: this.diagramContainer.getBoundingClientRect() + }), '*'); + this.inlineSizeChanged(); + this.refresh(); + } + }), function(evt) + { + if (x0 != null || y0 != null) + { + mxEvent.consume(evt); + } + + x0 = null; + y0 = null; + }); + + document.body.style.backgroundColor = 'transparent'; + this.diagramContainer.style.borderRadius = '4px'; + this.bottomResizer.style.visibility = 'hidden'; + this.rightResizer.style.visibility = 'hidden'; + this.sketchMenubarElt.style.display = 'none'; + toolbar.style.visibility = 'hidden'; + footer.style.visibility = 'hidden'; + picker.style.display = 'none'; + + this.addListener('editInlineStart', mxUtils.bind(this, function(evt) + { + this.inlineSizeChanged(); + this.fitWindows(); + })); + this.addListener('darkModeChanged', mxUtils.bind(this, function(evt) + { + this.inlineSizeChanged(); + })); + this.addListener('editInlineStop', mxUtils.bind(this, function(evt) + { + this.diagramContainer.style.width = '10px'; + this.diagramContainer.style.height = '10px'; + this.diagramContainer.style.border = ''; + this.bottomResizer.style.visibility = 'hidden'; + this.rightResizer.style.visibility = 'hidden'; + toolbar.style.visibility = 'hidden'; + footer.style.visibility = 'hidden'; + picker.style.display = 'none'; + })); + + // Overridden to avoid reset of scrollbars + this.windowResized = mxUtils.bind(this, function() + { + // do nothing + }); + + this.inlineSizeChanged(); }; /** @@ -10602,36 +10790,40 @@ /** * Changes the current UI theme. */ - EditorUi.prototype.doSetCurrentTheme = function(value, delay) + EditorUi.prototype.doSetCurrentTheme = function(value, delay, post) { + delay = (delay != null) ? delay : 100; + function isDefault(theme) { return theme == '' || theme == 'dark' || theme == 'kennedy' || theme == null; }; + function isSimple(theme) + { + return theme == 'simple' || (delay == 0 && + theme == 'sketch'); + }; + var curr = Editor.currentTheme; value = (isDefault(value)) ? 'default' : value; curr = (isDefault(curr)) ? 'default' : curr; - // From kennedy to sketch or vice versa - var transition = (curr == 'simple' && value == 'default' || - curr == 'default' && value == 'simple'); + var simpleValue = isSimple(value); + var simpleCurr = isSimple(curr); + + // From kennedy to simple or sketch or vice versa + var transition = (simpleCurr && value == 'default') || + (curr == 'default' && simpleValue); + var noRestart = transition && (value != 'sketch' && curr != 'sketch'); if (transition && !this.themeSwitching) { Editor.currentTheme = value; this.themeSwitching = true; + var scrollState = this.saveScrollState(); - // Saves scroll position - var t = this.editor.graph.view.translate; - var tx = t.x; - var ty = t.y; - var off = mxUtils.getOffset(this.editor.graph.container); - var x = this.editor.graph.container.scrollLeft - off.x; - var y = this.editor.graph.container.scrollTop - off.y; - - delay = (delay != null) ? delay : 100; mxUtils.setPrefixedStyle(this.container.style, 'transition', 'all ' + delay + 'ms'); if (delay == 0) @@ -10645,9 +10837,13 @@ window.setTimeout(mxUtils.bind(this, function() { - if (curr == 'simple' && value == 'default') + if (simpleCurr && value == 'default') { - this.sidebarFooterContainer.style.display = 'block'; + if (this.sidebarFooterContainer != null) + { + this.sidebarFooterContainer.style.display = 'block'; + } + this.menubarContainer.style.display = 'block'; this.toolbarContainer.style.display = 'block'; this.tabContainer.style.display = 'block'; @@ -10656,9 +10852,13 @@ this.menubarHeight = App.prototype.menubarHeight; this.formatWidth = EditorUi.prototype.formatWidth; } - else if (curr == 'default' && value == 'simple') + else if (curr == 'default' && simpleValue) { - this.sidebarFooterContainer.style.display = 'none'; + if (this.sidebarFooterContainer != null) + { + this.sidebarFooterContainer.style.display = 'none'; + } + this.menubarContainer.style.display = 'none'; this.toolbarContainer.style.display = 'none'; this.tabContainer.style.display = 'none'; @@ -10673,26 +10873,27 @@ window.setTimeout(mxUtils.bind(this, function() { this.fireEvent(new mxEventObject('currentThemeChanged')); - - // Restores scroll position + this.editor.fireEvent(new mxEventObject('statusChanged')); this.editor.graph.refresh(); - var s = this.editor.graph.view.scale; - off = mxUtils.getOffset(this.editor.graph.container); - this.editor.graph.container.scrollLeft = x + off.x + (t.x - tx) * s; - this.editor.graph.container.scrollTop = y + off.y + (t.y - ty) * s; + this.restoreScrollState(scrollState); this.container.style.opacity = ''; window.setTimeout(mxUtils.bind(this, function() { mxUtils.setPrefixedStyle(this.container.style, 'transition', null); delete this.themeSwitching; + + if (post != null) + { + post(); + } }), delay); }), delay); }), delay); }), 0); } - return transition; + return noRestart; }; /** @@ -10705,7 +10906,7 @@ mxEvent.addListener(parent, 'mouseenter', mxUtils.bind(this, function() { - if (this.editor.getStatus() != '') + if (Editor.currentTheme == 'sketch' && this.editor.getStatus() != '') { this.statusContainer.style.display = 'inline-block'; } @@ -10713,7 +10914,7 @@ mxEvent.addListener(parent, 'mouseleave', mxUtils.bind(this, function() { - if (!visible) + if (Editor.currentTheme == 'sketch' && !visible) { this.statusContainer.style.display = 'none'; } @@ -10721,7 +10922,7 @@ var statusChanged = mxUtils.bind(this, function() { - if (Editor.currentTheme == 'simple' || urlParams['sketch'] == '1') + if (Editor.currentTheme == 'sketch') { var elt = (this.statusContainer.firstChild != null && typeof this.statusContainer.firstChild.getAttribute === 'function') ? @@ -10746,7 +10947,7 @@ // Checks size of container without status this.statusContainer.style.display = 'none'; - var empty = parent.clientWidth < 26; + var empty = parent.clientWidth <= 32; // Hides container if empty and no status parent.style.visibility = (empty && this.editor.getStatus() == '') ? @@ -10759,6 +10960,13 @@ visible = true; } } + else if (Editor.currentTheme == 'simple') + { + // Required for flex layout gaps to be applied correctly + this.statusContainer.style.display = 'inline-block'; + this.statusContainer.style.display = (this.statusContainer.clientWidth == 0) + ? 'none' : 'inline-block'; + } }); this.editor.addListener('statusChanged', statusChanged); @@ -10817,7 +11025,7 @@ // TODO: Check what hides sidebarContainer this.sidebarContainer.style.display = ''; - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { // Format window this.createFormatWindow(); @@ -10851,6 +11059,57 @@ /** * Overrides image dialog to add image search and Google+. */ + EditorUi.prototype.fitWindows = function() + { + if (this.sidebarWindow != null) + { + this.sidebarWindow.window.fit(); + } + + if (this.formatWindow != null) + { + this.formatWindow.window.fit(); + } + + if (this.freehandWindow != null) + { + this.freehandWindow.window.fit(); + } + + if (this.actions.outlineWindow != null) + { + this.actions.outlineWindow.window.fit(); + } + + if (this.actions.layersWindow != null) + { + this.actions.layersWindow.window.fit(); + } + + if (this.menus.tagsWindow != null) + { + this.menus.tagsWindow.window.fit(); + } + + if (this.menus.findWindow != null) + { + this.menus.findWindow.window.fit(); + } + + if (this.menus.findReplaceWindow != null) + { + this.menus.findReplaceWindow.window.fit(); + } + + if (this.menus.commentsWindow != null) + { + this.menus.commentsWindow.window.fit(); + } + }; + + /** + * Overrides image dialog to add image search and Google+. + */ EditorUi.prototype.destroyWindows = function() { if (this.sidebarWindow != null) @@ -10920,10 +11179,10 @@ if (this.menus != null) { - this.menus.autoPopup = value != 'simple'; + this.menus.autoPopup = value != 'simple' && value != 'sketch'; } - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { mxWindow.prototype.closeImage = Graph.createSvgImage(18, 10, '<path d="M 5 1 L 13 9 M 13 1 L 5 9" stroke="#C0C0C0" stroke-width="2"/>').src; @@ -10959,7 +11218,7 @@ */ EditorUi.prototype.switchCssForTheme = function(value) { - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { if (this.sketchStyleElt == null) { @@ -10984,7 +11243,7 @@ */ EditorUi.prototype.createWrapperForTheme = function(value) { - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { if (this.sketchWrapperElt == null) { @@ -11008,7 +11267,7 @@ */ EditorUi.prototype.createMainMenuForTheme = function(value) { - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { if (this.sketchMainMenuElt == null) { @@ -11032,7 +11291,7 @@ */ EditorUi.prototype.createFooterMenuForTheme = function(value) { - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { if (this.sketchFooterMenuElt == null) { @@ -11129,6 +11388,24 @@ }))(elt); footer.appendChild(this.createMenuItem('zoomIn', Editor.plusImage)); + + if (urlParams['embedInline'] == '1') + { + var fullscreenElt = this.createMenuItem('fullscreen', Editor.fullscreenImage); + footer.appendChild(fullscreenElt); + + var inlineFullscreenChanged = mxUtils.bind(this, function() + { + fullscreenElt.style.backgroundImage = 'url(' + ((!Editor.inlineFullscreen) ? + Editor.fullscreenImage : Editor.fullscreenExitImage) + ')'; + this.diagramContainer.style.background = (Editor.inlineFullscreen) ? + (Editor.isDarkMode() ? Editor.darkColor : '#ffffff') : 'transparent'; + this.inlineSizeChanged(); + }); + + this.addListener('inlineFullscreenChanged', inlineFullscreenChanged); + footer.appendChild(this.createMenuItem('exit', Editor.closeImage)); + } this.sketchWrapperElt.appendChild(this.sketchFooterMenuElt); } @@ -11140,10 +11417,11 @@ */ EditorUi.prototype.createPickerMenuForTheme = function(value) { - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { if (this.sketchPickerMenuElt == null) { + var graph = this.editor.graph; this.sketchPickerMenuElt = document.createElement('div'); this.sketchPickerMenuElt.className = 'geToolbarContainer'; this.sketchPickerMenuElt.style.cssText = 'position:absolute;left:10px;border-radius:4px;' + @@ -11156,14 +11434,17 @@ var foldImg = document.createElement('a'); foldImg.style.padding = '0px'; foldImg.style.boxShadow = 'none'; - foldImg.className = 'geMenuItem'; + foldImg.className = 'geMenuItem geAdaptiveAsset'; foldImg.style.display = 'block'; foldImg.style.width = '100%'; foldImg.style.height = '14px'; - foldImg.style.backgroundImage = 'url(' + mxWindow.prototype.normalizeImage + ')'; - foldImg.style.backgroundPosition = 'top center'; + foldImg.style.margin = '6px 0 2px 0'; + foldImg.style.backgroundImage = 'url(' + Editor.expandMoreImage + ')'; + foldImg.style.backgroundPosition = 'center center'; foldImg.style.backgroundRepeat = 'no-repeat'; - foldImg.setAttribute('title', 'Minimize'/*TODO:mxResources.get('minimize')*/); + foldImg.style.backgroundSize = '22px'; + mxUtils.setOpacity(foldImg, 40); + foldImg.setAttribute('title', mxResources.get('collapseExpand')); var freehandElt = this.createMenuItem('insertFreehand', Editor.freehandImage, true); @@ -11173,14 +11454,31 @@ freehandElt.style.height = '30px'; freehandElt.style.opacity = '0.7'; - var insertElt = this.createMenu('insert', Editor.shapesImage); + var insertElt = this.createMenu('insert', Editor.plusImage); insertElt.style.backgroundSize = ''; - insertElt.style.marginBottom = '4px'; insertElt.style.display = 'block'; insertElt.style.width = '30px'; insertElt.style.height = '30px'; - insertElt.style.padding = '4px'; + insertElt.style.padding = '4px 4px 0px 3px'; insertElt.style.opacity = '0.7'; + + var shapesElt = insertElt.cloneNode(true); + shapesElt.style.backgroundImage = 'url(' + Editor.shapesImage + ')'; + mxEvent.addListener(shapesElt, 'click', mxUtils.bind(this, function(evt) + { + var off = mxUtils.getOffset(insertElt); + this.showShapePicker(this.diagramContainer.scrollLeft + off.x + insertElt.offsetWidth + 8, + this.diagramContainer.scrollTop + off.y + 10, null, null, null, null, + mxUtils.bind(this, function(cells) + { + return graph.getCenterInsertPoint(graph.getBoundingBoxFromGeometry(cells, true)); + })); + + mxEvent.consume(evt); + })); + + insertElt.style.backgroundSize = '24px'; + insertElt.style.marginBottom = '4px'; var collapsed = false; @@ -11226,7 +11524,7 @@ // Append sidebar elements addElt(this.sidebar.createVertexTemplate('text;strokeColor=none;fillColor=none;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;', - 60, 30, 'Text', mxResources.get('text') + ' (A)', true, false, null, true, true), + 60, 30, 'Text', mxResources.get('text') + ' (A)', true, false, null, true), mxResources.get('text') + ' (A)', null, 'A'); addElt(this.sidebar.createVertexTemplate('shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;' + 'fontColor=#000000;darkOpacity=0.05;fillColor=#FFF9B2;strokeColor=none;fillStyle=solid;' + @@ -11264,6 +11562,8 @@ true, null, true, false), mxResources.get('arrow')); addElt(freehandElt, mxResources.get('freehand') + ' (X)', null, 'X'); + + this.sketchPickerMenuElt.appendChild(shapesElt); this.sketchPickerMenuElt.appendChild(insertElt); } @@ -11278,15 +11578,15 @@ if (collapsed) { mxUtils.setPrefixedStyle(picker.style, 'transform', 'translate(0, -50%)'); - picker.style.padding = '8px 6px 4px'; + picker.style.padding = '0px 4px 4px'; picker.style.width = '48px'; picker.style.top = '50%'; picker.style.bottom = ''; picker.style.height = ''; - foldImg.style.backgroundImage = 'url(' + mxWindow.prototype.normalizeImage + ')'; - foldImg.setAttribute('title', 'Minimize'/*TODO:mxResources.get('minimize')*/); + foldImg.style.backgroundImage = 'url(' + Editor.expandMoreImage + ')'; foldImg.style.width = '100%'; foldImg.style.height = '14px'; + foldImg.style.margin = '6px 0 2px 0'; collapsed = false; initPicker(); } @@ -11299,10 +11599,10 @@ picker.style.bottom = '12px'; picker.style.padding = '0px'; picker.style.top = ''; - foldImg.style.backgroundImage = 'url(' + Editor.plusImage + ')'; - foldImg.setAttribute('title', mxResources.get('insert')); + foldImg.style.backgroundImage = 'url(' + Editor.expandLessImage + ')'; foldImg.style.width = '24px'; foldImg.style.height = '24px'; + foldImg.style.margin = '0px'; collapsed = true; } })); @@ -11321,7 +11621,7 @@ */ EditorUi.prototype.createMenubarForTheme = function(value) { - if (value == 'simple') + if (value == 'simple' || value == 'sketch') { if (this.sketchMenubarElt == null) { @@ -11330,22 +11630,30 @@ this.sketchMenubarElt.style.cssText = 'display:flex;position:absolute;right:12px;top:10px;height:44px;' + 'border-radius:4px;padding:7px 12px;overflow:hidden;z-index:1;flex-wrap:nowrap;user-select:none;' + 'box-sizing:border-box;border-bottom:1px solid lightgray;max-width:calc(100% - 170px);' + - 'min-width:40px;justify-content:flex-end;align-items:center;'; + 'justify-content:flex-end;align-items:center;gap:6px;'; this.sketchWrapperElt.appendChild(this.sketchMenubarElt); - // Moves menu away if picker overlaps - var refreshMenu = mxUtils.bind(this, function() + if (urlParams['embedInline'] != '1') { - var overflow = (this.sketchPickerMenuElt.offsetTop - - this.sketchPickerMenuElt.offsetHeight / 2 < 58); - this.sketchMainMenuElt.style.left = (overflow) ? '70px' : '10px'; - this.sketchMenubarElt.style.maxWidth = (overflow) ? - 'calc(100% - 230px)' : 'calc(100% - 170px)'; - - }); + // Moves menu away if picker overlaps + var refreshMenu = mxUtils.bind(this, function() + { + var overflow = (this.sketchPickerMenuElt.offsetTop - + this.sketchPickerMenuElt.offsetHeight / 2 < 58); + this.sketchMainMenuElt.style.left = (overflow) ? '70px' : '10px'; + this.sketchMenubarElt.style.maxWidth = (overflow) ? + 'calc(100% - 230px)' : 'calc(100% - 170px)'; + + }); + + refreshMenu(); + mxEvent.addListener(window, 'resize', refreshMenu); + } - refreshMenu(); - mxEvent.addListener(window, 'resize', refreshMenu); + if (urlParams['embed'] != '1' && this.getServiceName() != 'atlassian') + { + this.installStatusMinimizer(this.sketchMenubarElt); + } } if (this.statusContainer != null) @@ -11416,11 +11724,11 @@ /** * Overrides image dialog to add image search and Google+. */ - EditorUi.prototype.createMenu = function(key, img, className) + EditorUi.prototype.createMenu = function(key, img, className, clickFn) { className = (className != null) ? className : 'geToolbarButton'; var menu = this.menus.get(key); - var elt = this.menubar.addMenu(mxResources.get(key), menu.funct); + var elt = this.menubar.addMenu(mxResources.get(key), menu.funct, null, clickFn); elt.className = className; elt.style.display = 'inline-block'; @@ -11545,9 +11853,56 @@ { this.formatWindow.window.fit(); })); + + var toggleMinimized = this.formatWindow.window.toggleMinimized; + var w = 240; + + this.formatWindow.window.toggleMinimized = function() + { + toggleMinimized.apply(this, arguments); + + if (this.minimized) + { + w = parseInt(this.div.style.width); + this.div.style.width = '140px'; + this.table.style.width = '140px'; + this.div.style.left = (parseInt(this.div.style.left) + w - 140) + 'px'; + } + else + { + this.div.style.width = w + 'px'; + this.table.style.width = this.div.style.width; + this.div.style.left = (Math.max(0, parseInt(this.div.style.left) - w + 140)) + 'px'; + } + + this.fit(); + }; + + mxEvent.addListener(this.formatWindow.window.title, 'dblclick', mxUtils.bind(this, function(evt) + { + if (mxEvent.getSource(evt) == this.formatWindow.window.title) + { + this.formatWindow.window.toggleMinimized(); + } + })); this.formatWindow.window.minimumSize = new mxRectangle(0, 0, 240, 80); - this.formatWindow.window.setVisible(false); + + // Sets initial state for format window + if (Editor.currentTheme == 'sketch') + { + var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + var ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + + if (iw < 1200 || ih < 708) + { + this.formatWindow.window.toggleMinimized(); + } + } + else + { + this.formatWindow.window.setVisible(false); + } } }; @@ -11597,15 +11952,20 @@ */ EditorUi.prototype.refresh = function(sizeDidChange) { + if (this.sketchWrapperElt != null && this.sketchWrapperElt.parentNode != null) { sizeDidChange = (sizeDidChange != null) ? sizeDidChange : true; - var off = this.getDiagramContainerOffset(); - - this.diagramContainer.style.left = off.x + 'px'; - this.diagramContainer.style.top = off.y + 'px'; - this.diagramContainer.style.right = '0'; - this.diagramContainer.style.bottom = '0'; + + if (urlParams['embedInline'] != '1') + { + var off = this.getDiagramContainerOffset(); + + this.diagramContainer.style.left = off.x + 'px'; + this.diagramContainer.style.top = off.y + 'px'; + this.diagramContainer.style.right = '0'; + this.diagramContainer.style.bottom = '0'; + } if (sizeDidChange) { @@ -11640,8 +12000,6 @@ this.actions.get('shapes').funct(); })); - // var menuObj = new Menubar(this, container); - var addMenu = mxUtils.bind(this, function(id, label) { var elt = this.createMenu(id, null, 'geTitle'); @@ -11718,10 +12076,12 @@ var w = Math.min(this.diagramContainer.parentNode.clientWidth - 10, 218); var h = (urlParams['embedInline'] == '1') ? 650 : Math.min(this.diagramContainer.parentNode.clientHeight, 650); + var simpleTheme = Editor.currentTheme == 'simple' || + Editor.currentTheme == 'sketch'; this.sidebarWindow = new WrapperWindow(this, mxResources.get('shapes'), - (Editor.currentTheme == 'simple' && urlParams['embedInline'] != '1') ? 66 : 10, - (Editor.currentTheme == 'simple' && urlParams['embedInline'] != '1') ? + (simpleTheme && urlParams['embedInline'] != '1') ? 66 : 10, + (simpleTheme && urlParams['embedInline'] != '1') ? Math.max(30, (this.diagramContainer.parentNode.clientHeight - h) / 2) : 56, w - 6, h - 6, mxUtils.bind(this, function(container) { @@ -11858,6 +12218,54 @@ ((mxClient.IS_IOS) ? 'html input[type=checkbox], html input[type=radio] { height:12px; }' : '') + ((urlParams['sketch'] == '1') ? 'a.geStatus > div { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }' : ''); }; + + /** + * Returns the current state of the dark mode. + */ + EditorUi.prototype.isAutoDarkMode = function() + { + return urlParams['dark'] == 'auto' || (this.isSettingsEnabled() && + mxSettings.settings.darkMode == 'auto'); + }; + + /** + * Sets dark mode and persists the setting. + */ + EditorUi.prototype.setAndPersistDarkMode = function(value) + { + var actual = value; + + if (value == 'auto') + { + actual = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + this.setDarkMode(actual); + mxSettings.settings.darkMode = value; + mxSettings.save(); + + var theme = mxSettings.getUi(); + + if (value != 'auto' && theme != 'atlas' && theme != 'min' && + theme != 'sketch' && theme != 'simple') + { + this.setCurrentTheme((!Editor.isDarkMode()) ? 'kennedy' : 'dark', true); + } + }; + + /** + * Sets dark mode and persists the setting. + */ + EditorUi.prototype.setAndPersistLanguage = function(value) + { + mxSettings.setLanguage(value); + mxSettings.save(); + + // Shows dialog in new language + mxClient.language = value; + mxResources.loadDefaultBundle = false; + mxResources.add(RESOURCE_BASE); + }; /** * Dynamic change of dark mode. @@ -12011,28 +12419,163 @@ }; /** + * Saves scroll position + */ + EditorUi.prototype.saveScrollState = function() + { + var t = this.editor.graph.view.translate; + var off = mxUtils.getOffset(this.diagramContainer); + var x = this.diagramContainer.scrollLeft - off.x; + var y = this.diagramContainer.scrollTop - off.y; + + if (this.embedViewport != null) + { + if (!Editor.inlineFullscreen) + { + x += this.embedViewport.x; + y += this.embedViewport.y; + } + else + { + x -= this.embedViewport.x; + y -= this.embedViewport.y; + } + } + + return {x: x, y: y, tx: t.x, ty: t.y}; + }; + + /** + * Dynamic change of dark mode. + */ + EditorUi.prototype.restoreScrollState = function(state) + { + var s = this.editor.graph.view.scale; + var t = this.editor.graph.view.translate; + var off = mxUtils.getOffset(this.diagramContainer); + + this.diagramContainer.scrollLeft = state.x + off.x + (t.x - state.tx) * s; + this.diagramContainer.scrollTop = state.y + off.y + (t.y - state.ty) * s; + }; + + /** * Dynamic change of dark mode. */ EditorUi.prototype.setInlineFullscreen = function(value) { if (Editor.inlineFullscreen != value) { + var scrollState = this.saveScrollState(); Editor.inlineFullscreen = value; this.fireEvent(new mxEventObject('inlineFullscreenChanged')); - + this.fitWindows(); + this.editor.graph.refresh(); + this.restoreScrollState(scrollState); + var parent = window.opener || window.parent; parent.postMessage(JSON.stringify({ event: 'resize', fullscreen: Editor.inlineFullscreen, rect: this.diagramContainer.getBoundingClientRect() }), '*'); + } + }; - window.setTimeout(mxUtils.bind(this, function() + /** + * Invokes to update the UI after a size change in inline embed mode. + */ + EditorUi.prototype.inlineSizeChanged = function() + { + var footer = this.sketchFooterMenuElt; + var toolbar = this.sketchMainMenuElt; + var picker = this.sketchPickerMenuElt; + var graph = this.editor.graph; + + if (Editor.inlineFullscreen) + { + toolbar.style.left = '10px'; + toolbar.style.top = '10px'; + + picker.style.left = '10px'; + picker.style.top = '60px'; + + footer.style.top = '10px'; + footer.style.right = '12px'; + footer.style.left = ''; + + if (this.diagramContainer.getAttribute('data-bounds') == null) { - this.refresh(); - this.actions.get('resetView').funct(); - }), 10); + this.diagramContainer.setAttribute('data-bounds', this.diagramContainer.style.top + ' ' + + this.diagramContainer.style.left + ' ' + this.diagramContainer.style.width + ' ' + + this.diagramContainer.style.height); + + this.diagramContainer.style.top = '0px'; + this.diagramContainer.style.left = '0px'; + this.diagramContainer.style.bottom = '0px'; + this.diagramContainer.style.right = '0px'; + this.diagramContainer.style.width = ''; + this.diagramContainer.style.height = ''; + } } + else + { + var bounds = this.diagramContainer.getAttribute('data-bounds'); + + if (bounds != null) + { + this.diagramContainer.removeAttribute('data-bounds'); + var gb = graph.getGraphBounds(); + var tokens = bounds.split(' '); + + this.diagramContainer.style.top = tokens[0]; + this.diagramContainer.style.left = tokens[1]; + this.diagramContainer.style.width = (gb.width + 50) + 'px'; + this.diagramContainer.style.height = (gb.height + 46) + 'px'; + this.diagramContainer.style.bottom = ''; + this.diagramContainer.style.right = ''; + + var parent = window.opener || window.parent; + parent.postMessage(JSON.stringify({ + event: 'resize', + rect: this.diagramContainer.getBoundingClientRect() + }), '*'); + } + + toolbar.style.left = this.diagramContainer.offsetLeft + 'px'; + toolbar.style.top = (this.diagramContainer.offsetTop - + toolbar.offsetHeight - 4) + 'px'; + + picker.style.display = ''; + picker.style.left = (this.diagramContainer.offsetLeft - + picker.offsetWidth - 4) + 'px'; + picker.style.top = this.diagramContainer.offsetTop + 'px'; + + footer.style.left = (this.diagramContainer.offsetLeft + + this.diagramContainer.offsetWidth - + footer.offsetWidth) + 'px'; + footer.style.top = toolbar.style.top; + footer.style.right = ''; + + this.bottomResizer.style.left = (this.diagramContainer.offsetLeft + + (this.diagramContainer.offsetWidth - + this.bottomResizer.offsetWidth) / 2) + 'px'; + this.bottomResizer.style.top = (this.diagramContainer.offsetTop + + this.diagramContainer.offsetHeight - + this.bottomResizer.offsetHeight / 2 - 1) + 'px'; + + this.rightResizer.style.left = (this.diagramContainer.offsetLeft + + this.diagramContainer.offsetWidth - + this.rightResizer.offsetWidth / 2 - 1) + 'px'; + this.rightResizer.style.top = (this.diagramContainer.offsetTop + + (this.diagramContainer.offsetHeight - + this.bottomResizer.offsetHeight) / 2) + 'px'; + this.diagramContainer.style.background = 'transparent'; + } + + this.bottomResizer.style.visibility = (Editor.inlineFullscreen) ? 'hidden' : ''; + this.rightResizer.style.visibility = this.bottomResizer.style.visibility; + toolbar.style.visibility = ''; + footer.style.visibility = ''; }; /** @@ -12085,7 +12628,7 @@ setStyle(graph.defaultEdgeStyle, 'fontSize', parseInt(this.menus.defaultFontSize) - 4); } - if (Editor.currentTheme == 'simple') + if (Editor.currentTheme == 'simple' || Editor.currentTheme == 'sketch') { setStyle(graph.defaultEdgeStyle, 'edgeStyle', 'none'); setStyle(graph.defaultEdgeStyle, 'curved', '1'); @@ -13352,15 +13895,15 @@ { this.diagramContainer.style.visibility = (enabled) ? '' : 'hidden'; this.formatContainer.style.visibility = (enabled) ? '' : 'hidden'; - this.sidebarFooterContainer.style.display = (enabled) ? '' : 'none'; this.sidebarContainer.style.display = (enabled) ? '' : 'none'; - this.hsplit.style.display = (enabled) ? '' : 'none'; + this.hsplit.style.display = (enabled && Editor.currentTheme != 'simple' && + Editor.currentTheme != 'sketch' && Editor.currentTheme != 'min') + ? '' : 'none'; this.editor.graph.setEnabled(enabled); - - if (this.ruler != null) + + if (this.sidebarFooterContainer != null) { - this.ruler.hRuler.container.style.visibility = (enabled) ? '' : 'hidden'; - this.ruler.vRuler.container.style.visibility = (enabled) ? '' : 'hidden'; + this.sidebarFooterContainer.style.display = (enabled) ? '' : 'none'; } if (this.tabContainer != null) @@ -13368,6 +13911,12 @@ this.tabContainer.style.visibility = (enabled) ? '' : 'hidden'; } + if (this.ruler != null) + { + this.ruler.hRuler.container.style.visibility = (enabled) ? '' : 'hidden'; + this.ruler.vRuler.container.style.visibility = (enabled) ? '' : 'hidden'; + } + if (!enabled) { if (this.actions.outlineWindow != null) @@ -14315,7 +14864,7 @@ this.diagramContainer.style.width = data.rect.width + 'px'; this.diagramContainer.style.bottom = ''; this.diagramContainer.style.right = ''; - + afterLoad = mxUtils.bind(this, function() { var graph = this.editor.graph; @@ -14621,77 +15170,77 @@ */ EditorUi.prototype.addEmbedButtons = function() { - if (urlParams['embedInline'] != '1') - { - var div = document.createElement('div'); - div.style.display = 'inline-block'; + var div = document.createElement('div'); + div.style.display = 'inline-block'; - var button = document.createElement('button'); - button.className = 'geBigButton'; + var button = document.createElement('button'); + button.className = 'geBigButton'; - if (urlParams['noSaveBtn'] == '1') + if (urlParams['noSaveBtn'] == '1') + { + if (urlParams['saveAndExit'] != '0') { - if (urlParams['saveAndExit'] != '0') - { - div.appendChild(this.createEmbedButton(urlParams['publishClose'] == '1' ? - mxResources.get('publish') : mxResources.get('saveAndExit'), - this.actions.get('saveAndExit').funct, null, true)); - } + div.appendChild(this.createEmbedButton(urlParams['publishClose'] == '1' ? + mxResources.get('publish') : mxResources.get('saveAndExit'), + this.actions.get('saveAndExit').funct, null, true)); } - else + } + else + { + div.appendChild(this.createEmbedButton(mxResources.get('save'), mxUtils.bind(this, function() { - div.appendChild(this.createEmbedButton(mxResources.get('save'), - this.actions.get('save').funct, Editor.ctrlKey + '+S', true)); - - if (urlParams['saveAndExit'] == '1') - { - div.appendChild(this.createEmbedButton(mxResources.get('saveAndExit'), - this.actions.get('saveAndExit').funct)); - } - } - - if (urlParams['noExitBtn'] != '1') + this.actions.get('save').funct(false); + }), Editor.ctrlKey + '+S', true)); + + if (urlParams['saveAndExit'] == '1') { - div.appendChild(this.createEmbedButton(urlParams['publishClose'] == '1' ? - mxResources.get('close') : mxResources.get('exit'), - this.actions.get('exit').funct)); + div.appendChild(this.createEmbedButton(mxResources.get('saveAndExit'), + this.actions.get('saveAndExit').funct)); } + } + + if (urlParams['noExitBtn'] != '1') + { + div.appendChild(this.createEmbedButton(urlParams['publishClose'] == '1' ? + mxResources.get('close') : mxResources.get('exit'), + this.actions.get('exit').funct)); + } - if (Editor.currentTheme == 'simple' || - Editor.currentTheme == 'min') + if (Editor.currentTheme == 'simple' || + Editor.currentTheme == 'sketch' || + Editor.currentTheme == 'min') + { + if (this.buttonContainer != null) { - if (this.buttonContainer != null) + div.style.position = 'relative'; + + if (Editor.currentTheme != 'simple') { - div.style.position = 'relative'; + div.style.marginRight = '4px'; - if (Editor.currentTheme != 'simple') + if (urlParams['sketch'] != '1') { - div.style.marginRight = '4px'; - - if (urlParams['sketch'] != '1') - { - div.style.marginTop = '6px'; - this.buttonContainer.style.top = '6px'; - } - else - { - this.buttonContainer.style.top = '0px'; - } + div.style.marginTop = '6px'; + this.buttonContainer.style.top = '6px'; + } + else + { + this.buttonContainer.style.top = '0px'; } - - this.buttonContainer.appendChild(div); - this.editor.fireEvent(new mxEventObject('statusChanged')); } + + this.buttonContainer.appendChild(div); + this.editor.fireEvent(new mxEventObject('statusChanged')); } - else if (this.menubar != null) - { - div.style.position = 'absolute'; - div.style.padding = '2px'; - div.style.right = '62px'; + } + else if (this.menubar != null) + { + div.style.position = 'absolute'; + div.style.padding = '2px'; + div.style.right = '62px'; - this.toolbar.container.appendChild(div); - this.toolbar.staticElements.push(div); - } + this.toolbar.container.appendChild(div); + this.toolbar.staticElements.push(div); } }; @@ -15726,8 +16275,9 @@ this.actions.get('image').setEnabled(active); this.actions.get('zoomIn').setEnabled(active); this.actions.get('zoomOut').setEnabled(active); + this.actions.get('smartFit').setEnabled(active); this.actions.get('resetView').setEnabled(active); - this.actions.get('toggleDarkMode').setEnabled(uiTheme != 'atlas'); + this.actions.get('toggleDarkMode').setEnabled(Editor.currentTheme != 'atlas'); // Updates undo history states this.actions.get('undo').setEnabled(this.canUndo() && editable); |