26.0.6 release

2025-01-15 18:20:29 +00:00 · 2025-01-15 18:20:29 +00:00 · 2808a4a94d
parent ab8f923d05
commit 2808a4a94d
12 changed files with 9299 additions and 9168 deletions
--- a/16
+++ b/16
@ -1,9 +1,21 @@
-06-JAN-2024: 26.0.4
+15-JAN-2025: 26.0.6
+
+- Various dark mode improvements
+
+10-JAN-2025: 26.0.5
+
+- Fixes Ctrl+Shift+G to enable grid [jgraph/drawio#4825]
+- Replaces three dots with layers icon [jgraph/drawio-desktop#1953]
+- Mermaid2drawio: Added support for new flowchart shapes and fixed [jgraph/drawio-#4832]
+- Adds editableCssRules=.* for imported SVG images [jgraph/drawio#4721]
+- Adds default and font keyword for stencil colors [jgraph/drawio#4723]
+
+06-JAN-2025: 26.0.4

 - Disables dark mode in viewer by default [jgraph/drawio#3701]
 - Adds dark mode option in embed dialog

-03-JAN-2024: 26.0.3
+03-JAN-2025: 26.0.3

 - Fixes slope angle property for parallelogram and hexagon [jgraph/drawio#3672]
 - Adds arcSize property for chevron [jgraph/drawio#4813]
--- a/2
+++ b/2
@ -1 +1 @@
-26.0.4
+26.0.6
--- a/src/main/webapp/clear.html
+++ b/src/main/webapp/clear.html
@ -3,10 +3,70 @@
 <head>
 	<title>Clear diagrams.net Cache</title>
 	<meta charset="utf-8">
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>Clear diagrams.net Cache</title>
+	<style type="text/css">
+		@media only screen {
+			body {
+				font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
+					Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+				background: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));
+				color: light-dark(rgb(18, 18, 18), white);
+				margin: 10px 5% 10px 5%;
+				color-scheme: dark;
+				font-size: 16px;
+			}
+			textarea {
+				box-sizing: border-box;
+				font-family: monospace;
+				color: lightgray;
+				resize: vertical;
+				font-size: inherit;
+				border-radius: 4px;
+				padding: 4px;
+			}
+			button {
+				background: #1a4cad;
+				border-radius: 4px;
+				padding: 10px;
+				border: none;
+			}
+			button {
+				cursor: default;
+				opacity: 0.9;
+			}
+			button:hover:not(:disabled) {
+				opacity: 1;
+			}
+			button:active:not(:disabled) {
+				filter:invert(1);
+			}
+			input {
+				padding: 2px 6px;
+				margin: 0 0 0 4px;
+				font-size: inherit;
+			}
+		}
+	</style>
 </head>
-<body style="font-size: large;">
+<body>
+	<div style="display:flex;opacity:0.9;align-items:center;padding:20px 0 10px 0;">
+		<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
+			<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
+			stroke="currentColor" fill="none" />
+			<line y2="72.394" x2="75.076" y1="43.384" x1="58.068" stroke-miterlimit="10" stroke-width="3.5008"
+			stroke="currentColor" fill="none" />
+			<path
+			d="M52.773,77.084c0,1.954-1.599,3.553-3.553,3.553H36.999c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
+			fill="currentColor" />
+			<path
+			d="M67.762,48.074c0,1.954-1.599,3.553-3.553,3.553H51.988c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553H64.21c1.954,0,3.553,1.599,3.553,3.553V48.074z"
+			fill="currentColor" />
+			<path
+			d="M82.752,77.084c0,1.954-1.599,3.553-3.553,3.553H66.977c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
+			fill="currentColor" />
+		</svg>
+		<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
+	</div>
 	<script src="js/app.min.js"></script>
 	<script src="js/clear.js"></script>
 </body>
--- a/src/main/webapp/js/app.min.js
+++ b/src/main/webapp/js/app.min.js
--- a/src/main/webapp/js/clear.js
+++ b/src/main/webapp/js/clear.js
@ -11,6 +11,7 @@ try
 		document.body.appendChild(document.createElement('br'));
 	};
 	
+	writeln('');
 	write('Clearing Cached version ' + EditorUi.VERSION + '...');

 	navigator.serviceWorker.getRegistrations().then(function(registrations)
@ -29,10 +30,11 @@ try
 			writeln('OK');
 		}
 		
-		var link = document.createElement('a');
-		link.style.marginRight = '6px';
-		link.setAttribute('href', 'javascript:window.location.reload();');
-		link.appendChild(document.createTextNode('Reload'));
+		writeln('');
+		var link = document.createElement('button');
+		link.style.margin = '4px';
+		link.setAttribute('onclick', 'window.location.reload();');
+		link.appendChild(document.createTextNode('Update'));
 		document.body.appendChild(link);

 		if ((/test\.draw\.io$/.test(window.location.hostname)) ||
@ -40,7 +42,7 @@ try
 			(/app\.diagrams\.net$/.test(window.location.hostname)))
 		{
 			link = link.cloneNode(false);
-			link.setAttribute('href', './');
+			link.setAttribute('onclick', 'window.location.href = "/.";');
 			link.appendChild(document.createTextNode('Start App'));
 			document.body.appendChild(link);
 		}
--- a/src/main/webapp/js/integrate.min.js
+++ b/src/main/webapp/js/integrate.min.js
--- a/src/main/webapp/js/viewer-static.min.js
+++ b/src/main/webapp/js/viewer-static.min.js
--- a/src/main/webapp/js/viewer.min.js
+++ b/src/main/webapp/js/viewer.min.js
--- a/src/main/webapp/service-worker.js
+++ b/src/main/webapp/service-worker.js
--- a/src/main/webapp/service-worker.js.map
+++ b/src/main/webapp/service-worker.js.map
--- a/src/main/webapp/styles/atlas.css
+++ b/src/main/webapp/styles/atlas.css
@ -28,7 +28,7 @@ body > .geToolbarContainer .geLabel, body > .geToolbarContainer .geButton {
 	box-shadow: none !important;
 	border: 1px solid transparent !important;
 }
-body > .geToolbarContainer {
+body > .geToolbarContainer:not(.geDarkMode *) {
 	background: #f5f5f5 !important;
 	border-bottom: 1px solid #ccc !important;
 	-webkit-box-shadow: none !important;
@ -38,9 +38,11 @@ body > .geToolbarContainer {
 body > .geToolbarContainer > .geToolbar {
 	padding-top:4px !important;
 }
+body > .geToolbarContainer > .geToolbar .geSeparator:not(.geDarkMode *) {
+	background:#cccccc !important;
+}
 body > .geToolbarContainer > .geToolbar .geSeparator {
 	width:1px !important;
-	background:#cccccc !important;
 	margin-top:3px;
 	height:24px;
 }
@ -51,7 +53,7 @@ body > .geToolbarContainer > .geToolbar .geSeparator {
 	height:18px;
 	_height:31px;
 }
-html body .geStatus .geStatusAlert {
+html body .geStatus .geStatusAlert:not(.geDarkMode *) {
 	color:#ffffff !important;
 	font-size:12px;
 	border:none;
@ -63,11 +65,11 @@ html body .geStatus .geStatusAlert {
 	-moz-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
 	box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
 }
-html body .geStatus .geStatusAlert:hover {
+html body .geStatus .geStatusAlert:hover:not(.geDarkMode *) {
    background-color: #2d6ca2;
    background-image: linear-gradient(rgb(90, 148, 211) 0px, rgb(54, 115, 181) 100%);
 }
-html body .geStatus .geStatusMessage {
+html body .geStatus .geStatusMessage:not(.geDarkMode *) {
 	color:#ffffff !important;
 	font-size:12px;
 	border:none;
@ -79,21 +81,10 @@ html body .geStatus .geStatusMessage {
 	-moz-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
 	box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
 }
-html body .geStatus .geStatusMessage:hover {
+html body .geStatus .geStatusMessage:hover:not(.geDarkMode *) {
    background-color: #2d6ca2;
    background-image: linear-gradient(rgb(90, 148, 211) 0px, rgb(54, 115, 181) 100%);
 }
-html body div.mxWindow .geToolbarContainer {
-	font-size:11px !important;	
-	color: #000000 !important;
-	-webkit-box-shadow: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
-	border-width: 0px 0px 1px !important;
-	border-color: rgb(195, 195, 195) !important;
-	border-style: solid !important;
-	border-bottom:1px solid #e0e0e0;
-}
 html body div.mxWindow .geButton, .mxWindow .geLabel {
 	-webkit-box-shadow: none !important;
 	-moz-box-shadow: none !important;
@ -101,27 +92,6 @@ html body div.mxWindow .geButton, .mxWindow .geLabel {
 	background-image: none !important;
 	border:1px solid transparent !important;
 }
-div.mxWindow .geButton {
-	margin:1px !important;
-}
-div.mxWindow .geLabel {
-	padding:3px 5px 3px 5px !important;
-	margin:2px;
-}
-div.mxWindow .geButton:hover, .mxWindow .geLabel:hover {
-	-webkit-box-shadow: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
-	background: none !important;
-	border:1px solid gray;
-}
-div.mxWindow .geButton:active, .mxWindow .geLabel:active {
-	-webkit-box-shadow: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
-	background-image: none !important;
-	border:1px solid black;
-}
 body > .geToolbarContainer .geButton {
 	margin:0px -1px 0px 0px !important;
 	height:20px;
@ -133,10 +103,10 @@ html body .geSidebarContainer .geTitle {
 	font-size:13px;
 	padding:8px 0px 8px 16px;
 }
-html body .geMenubarContainer * {
+html body .geMenubarContainer *:not(.geDarkMode *) {
 	color: #DEEBFF;
 }
-html body .geMenubarContainer .geStatus {
+html body .geMenubarContainer .geStatus:not(.geDarkMode *) {
 	color: rgb(179, 179, 179);
 }
 .geMenubarContainer .geItem:hover:not(.geStatus) {
@ -149,14 +119,15 @@ html body .geToolbarContainer .geLabel {
 .geToolbar .geSeparator {
 	width:0px !important;
 }
-.geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel, .geSidebar, .geSidebarContainer .geTitle, .geSidebar .geItem, .mxPopupMenuItem {
+.geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel,
+.geSidebar, .geSidebarContainer .geTitle, .geSidebar .geItem, .mxPopupMenuItem {
 	-webkit-transition: none;
 	-moz-transition: none;
 	-o-transition: none;
 	-ms-transition: none;
 	transition: none;
 }
-html body .geMenubarContainer {
+html body .geMenubarContainer:not(.geDarkMode *) {
 	background-color: #0049B0;
 	color: #ffffff;
 	font-size: 14px;
@ -179,7 +150,7 @@ html body .geSidebarContainer .geToolbarContainer .geLabel {
 	margin:2px !important;
 	padding:4px !important;
 }
-html body .geToolbar {
+html body .geToolbar:not(.geDarkMode *) {
 	margin:0px;
 	padding:8px 10px 0px 10px;
 	-webkit-box-shadow:none;
@ -194,7 +165,7 @@ html body .geMenubarContainer .mxDisabled {
 html .geButtonContainer {
 	padding-right:10px;
 }
-.geDialogTitle {
+.geDialogTitle:not(.geDarkMode *) {
 	box-sizing:border-box;
 	white-space:nowrap;
 	background:rgb(32, 80, 129);
@ -204,7 +175,7 @@ html .geButtonContainer {
 	text-align:center;
 	color:white;
 }
-.geDialogFooter {
+.geDialogFooter:not(.geDarkMode *) {
 	background:whiteSmoke;
 	white-space:nowrap;
 	text-align:right;
@ -215,7 +186,7 @@ html .geButtonContainer {
 html .geNotification-bell {
  opacity: 1;
 }
-html .geNotification-bell * {
+html .geNotification-bell *:not(.geDarkMode *) {
  background-color: #DEEBFF;
  box-shadow: 0px 0px 10px #DEEBFF;
 }
--- a/src/main/webapp/styles/grapheditor.css
+++ b/src/main/webapp/styles/grapheditor.css
@ -26,12 +26,13 @@ html body.geSimple.geDarkMode .geMenubarContainer .geToolbarButton {
 html body.geEditor.geMinimal:not(.geDarkMode) div.diagramContainer button.gePrimaryBtn,
 html body.geEditor.geMinimal:not(.geDarkMode) .mxWindow button.gePrimaryBtn,
 html body.geEditor.geMinimal:not(.geDarkMode) .geDialog button.gePrimaryBtn,
-html body.geEditor.geSimple .gePrimaryBtn {
+html body.geEditor .gePrimaryBtn {
 	background: light-dark(#29b6f2, var(--dark-accent-color));
+	color:light-dark(#ffffff, var(--dark-text-color));
 	box-shadow: none;
 	border: none;
 }
-html body.geEditor.geSimple .gePrimaryBtn:hover:not([disabled]) {
+html body.geEditor .gePrimaryBtn:hover:not([disabled]) {
 	background: light-dark(#12a2e0, var(--dark-active-accent-color));
 	box-shadow: none;
 	border: none;
@ -239,7 +240,7 @@ html body.geDarkMode .geVsplit, html body.geDarkMode table.mxPopupMenu hr {
 }
 html body.geDarkMode .geToolbarContainer .geButton:hover, html body.geDarkMode .geToolbarContainer .geButton:active,
 html body.geDarkMode .geToolbarContainer .geLabel:hover, html body.geDarkMode .geToolbarContainer .geLabel:active,
-html body.geDarkMode .geVsplit:hover, html .geSidebarContainer button:active:not([disabled]) {
+html body.geDarkMode .geVsplit:hover {
 	background-color:var(--dark-color);
 }
 html body.geDarkMode .geToolbarContainer .geButton.geAdaptiveAsset:hover {
@ -527,6 +528,7 @@ a.geStatus .geStatusMessage {
 .geEditor select:hover:not([disabled]), .geColorBtn:hover:not([disabled]) {
 	background-color:light-dark(var(--border-color), var(--dark-border-color));
 }
+.geToolbarContainer .geButton:active, .geToolbarContainer .geLabel:active,
 .geEditor button:active:not([disabled], .geBigButton, .geShareBtn),
 .geColorBtn:active:not([disabled]) {
 	opacity:0.7;
@ -602,20 +604,6 @@ html .geColorBtn {
 html .geColorBtn:disabled {
 	opacity:0.5;
 }
-html .geEditor .gePrimaryBtn {
-	background:linear-gradient(light-dark(#4d90fe, var(--dark-accent-color)) 0px, light-dark(#4787ed, var(--dark-accent-color)) 100%);
-	border:1px solid light-dark(#3079ed, transparent);
-	color:light-dark(#ffffff, var(--dark-text-color));
-}
-html .geEditor .gePrimaryBtn:hover:not([disabled]), html .geEditor .gePrimaryBtn:focus {
-	background:linear-gradient(light-dark(#4d90fe, var(--dark-active-accent-color)) 0px, light-dark(#357ae8, var(--dark-active-accent-color)) 100%);
-	border:1px solid light-dark(#2f5bb7, transparent);
-}
-.geEditor button.geShareBtn {
-	background-color:#F2931E;
-	border-color:#F08705;
-	color:#000000;
-}
 .geAlertLink {
 	color:#843534;
 	font-weight:700;
@ -647,11 +635,6 @@ html .geToolbarButton:active:not([disabled]) {
 }
 .geToolbarContainer .geButton:hover {
 	opacity:1;
-	background: #eee;
-	border-radius:2px;
-}
-.geToolbarContainer .geButton:active, .geToolbarContainer .geLabel:active {
-	background: #F8C382;
 }
 .geToolbarContainer .geLabel:hover {
 	background: #eee;
@ -776,6 +759,9 @@ div.mxWindow .geButton {
 	border-radius:8px;
 }
 .geActiveItem {
+	background-color:light-dark(var(--border-color), var(--dark-border-color));
+}
+.geAdaptiveAsset.geActiveItem {
 	background-color:light-dark(var(--border-color), var(--dark-inverse-active-color));
 }
 .geTabMenuButton {
 @ -1 +1 @@
 .0.4
 .0.6