20.8.15 release

ChangeLog

@@ -1,3 +1,10 @@
+01-FEB-2023: 20.8.15
+
+- Adds debug output, improves UX in Notion extension
+- Fixes clipping of start screen checkbox in dialog
+- Fixes vertical alignment of show start screen item
+- Fixes CSS for default action button [drawio-desktop-1219]
+
 31-JAN-2023: 20.8.14
 
 - Updates in-place editor after scroll and UI change
@@ -5,11 +12,11 @@
 - Limit convert labels to SVG option to online draw.io only
 - [conf cloud] Adds config option to disable the automatic generation of the preview images from the page view ["disableEmbedAutoImgGen": true] [DID-7251]
 - Ignore events on selection border and parent shape
-- Fixes library save, improves error handling [3323]
+- Fixes library save, improves error handling [drawio-3323]
 
 26-JAN-2023: 20.8.13
 
-- Fixes NPE when changing colors from toolbar [3315]
+- Fixes NPE when changing colors from toolbar [drawio-3315]
 
 26-JAN-2023: 20.8.12
 

VERSION

@@ -1 +1 @@
-20.8.14
+20.8.15

src/main/webapp/js/diagramly/Devel.js

@@ -92,7 +92,7 @@ if (!mxIsElectron && location.protocol !== 'http:')
 				'img-src * data: blob:; ' +
 				'media-src * data:; ' +
 				'font-src * about:; ' +
-				'style-src \'self\' https://fonts.googleapis.com \'unsafe-inline\'' +
+				'style-src \'self\' https://fonts.googleapis.com \'unsafe-inline\'; ' +
 				'base-uri \'none\';' +
 				'object-src \'none\';' +
 				'worker-src https://viewer.diagrams.net/service-worker.js;'

src/main/webapp/js/diagramly/Dialogs.js

@@ -3332,10 +3332,6 @@ var NewDialog = function(editorUi, compact, showName, callback, createOnly, canc
 					mxEvent.addGestureListeners(magnify, mouseDownHandler, null, mouseUpHandler);
 				}, function(e)
 				{
-					templateXml = null;
-					preview.innerHTML = '';
-					preview.appendChild(previewText);
-
 					editorUi.handleError(e);
 				}
 			);

src/main/webapp/js/diagramly/EditorUi.js

@@ -12092,14 +12092,22 @@
 				{
 					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.inlineSizeChanged();
+						this.editor.graph.refresh();
+						this.fitWindows();
 					});
-		
+
+					this.addListener('editInlineStart', mxUtils.bind(this, function()
+					{
+						fullscreenElt.style.backgroundImage = 'url(' + ((!Editor.inlineFullscreen) ?
+							Editor.fullscreenImage : Editor.fullscreenExitImage) + ')';
+					}));
+					
 					this.addListener('inlineFullscreenChanged', inlineFullscreenChanged);
 					footer.appendChild(this.createMenuItem('exit', Editor.closeImage));
 				}
@@ -13574,17 +13582,14 @@
 	{
 		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);
+			this.diagramContainer.setAttribute('data-scrollState',
+				JSON.stringify(this.saveScrollState()));
 			
+			// Send request for fullscreen to parent
 			var parent = window.opener || window.parent;
 			parent.postMessage(JSON.stringify({
 				event: 'resize',
-				fullscreen: Editor.inlineFullscreen,
+				fullscreen: value,
 				rect: this.diagramContainer.getBoundingClientRect()
 			}), '*');
 		}
@@ -13636,10 +13641,13 @@
 				var gb = graph.getGraphBounds();
 				var tokens = bounds.split(' ');
 
+				var ds = mxUtils.getDocumentSize();
 				this.diagramContainer.style.top = tokens[0];
 				this.diagramContainer.style.left = tokens[1];
-				var w = gb.width + 50;
-				var h = gb.height + 46;
+				var w = Math.min(gb.width + 50, ds.width -
+						parseInt(this.diagramContainer.style.left) - 20);
+				var h = Math.min(gb.height + 46, ds.height -
+						parseInt(this.diagramContainer.style.top) - 20);
 				this.diagramContainer.style.width = ((this.minInlineWidth != null) ?
 					Math.max(this.minInlineWidth, w) : w) + 'px';
 				this.diagramContainer.style.height = ((this.minInlineHeight != null) ?
@@ -15583,6 +15591,36 @@
 						if (data.viewport != null)
 						{
 							this.embedViewport = data.viewport;
+							this.editor.graph.refresh();
+						}
+
+						return;
+					}
+					else if (data.action == 'fullscreenChanged')
+					{
+						var scrollState = null;
+
+						try
+						{
+							var temp = this.diagramContainer.getAttribute('data-scrollState');
+
+							if (temp != null) 
+							{
+								this.diagramContainer.removeAttribute('data-scrollState');
+								scrollState = JSON.parse(temp);
+							}
+						}
+						catch (e)
+						{
+							// ignore
+						}
+
+						Editor.inlineFullscreen = data.value;
+						this.fireEvent(new mxEventObject('inlineFullscreenChanged'));
+
+						if (scrollState != null)
+						{
+							this.restoreScrollState(scrollState);
 						}
 
 						return;
@@ -15979,6 +16017,11 @@
 								graph.container.scrollTop -= border;
 								graph.container.scrollLeft -= border;
 								this.fireEvent(new mxEventObject('editInlineStart', 'data', [data]));
+
+								window.setTimeout(mxUtils.bind(this, function()
+								{
+									graph.container.focus();
+								}), 0);
 							});
 						}
 						

src/main/webapp/js/diagramly/Menus.js

@@ -1088,7 +1088,7 @@
 				// Moves show start screen option to configuration dialog in sketch
 				var splashCb = document.createElement('input');
 				splashCb.setAttribute('type', 'checkbox');
-				splashCb.style.marginRight = '4px';
+				splashCb.style.marginRight = '8px';
 				splashCb.checked = mxSettings.getShowStartScreen();
 				splashCb.defaultChecked = splashCb.checked;
 
@@ -1096,10 +1096,12 @@
 					Editor.currentTheme == 'simple' || Editor.currentTheme == 'min'))
 				{
 					var showSplash = document.createElement('span');
+					showSplash.style.display = 'flex';
+					showSplash.style.alignItems = 'center';
 					showSplash.style['float'] = 'right';
 					showSplash.style.cursor = 'pointer';
 					showSplash.style.userSelect = 'none';
-					showSplash.style.marginTop = '-4px';
+					showSplash.style.marginTop = '-3px';
 					showSplash.appendChild(splashCb);
 					mxUtils.write(showSplash, mxResources.get('showStartScreen'));
 

src/main/webapp/styles/dark.css

@@ -94,6 +94,8 @@ html body .geSidebarContainer div.geDropTarget {
 html body.geEditor .gePrimaryBtn:not([disabled]),
 html body.geEditor .geBigButton:not([disabled]) {
 	background:var(--header-color);
+	border: 1px solid var(--border-color);
+	color:#aaaaaa;
 }
 html body.geEditor .geBtn, html body.geEditor button,
 html body.geEditor button:hover:not([disabled]),

src/main/webapp/styles/grapheditor.css

@@ -721,7 +721,7 @@ html body div.geActivePage, .geRuler {
 	width:21px;
 	height:21px;
 }
-.geBaseButton {
+.geEditor .geBaseButton {
 	padding:10px;
 	border-radius:6px;
 	border:1px solid #c0c0c0;
@@ -729,10 +729,10 @@ html body div.geActivePage, .geRuler {
 	background-color:#ececec;
 	background-image:linear-gradient(#ececec 0%, #fcfcfc 100%);
 }
-.geBaseButton:hover {
+.geEditor .geBaseButton:hover {
 	background:#ececec;
 }
-.geBigButton {
+.geEditor .geBigButton {
 	color:#ffffff;
 	border: none;
 	padding:4px 10px;
@@ -745,11 +745,12 @@ html body div.geActivePage, .geRuler {
 	overflow:hidden;
 	text-overflow: ellipsis;
 }
-.geBigButton:hover {
+.geEditor .geBigButton:hover {
 	background-color:#0065ff;
 }
-.geBigButton:active {
+.geEditor .geBigButton:active {
 	background-color:#0747a6;
+	opacity:1;
 }
 html body .geBigStandardButton {
 	color: #344563;