15.9.5 release

ChangeLog

@@ -1,3 +1,15 @@
+13-DEC-2021: 15.9.5
+
+- Ctrl disables copy if enabled by default
+- Uses action state for (un)group buttons
+- Altered AWS group styles for better usability
+- Fixes no pointerEvents for no (fill)opacity
+- Fixes for AWS container usability
+- Uses lazyZoom and adds trackpad in outline window
+- Fixes dark mode support in browser picker
+- Fixes ignored stroke option in SVG getBBox https://github.com/jgraph/drawio/issues/2484
+- 
+
 08-DEC-2021: 15.9.4
 
 - Adds mxShape.intersectsRectangle

VERSION

@@ -1 +1 @@
-15.9.4
+15.9.5

src/main/webapp/js/diagramly/Editor.js

@@ -539,6 +539,8 @@
         	
         	return format.editorUi.editor.graph.isSwimlane(state.vertices[0]) ||
         		fillColor == null || fillColor == mxConstants.NONE ||
+				mxUtils.getValue(state.style, mxConstants.STYLE_FILL_OPACITY, 100) == 0 ||
+				mxUtils.getValue(state.style, mxConstants.STYLE_OPACITY, 100) == 0 ||
 				state.style['pointerEvents'] != null;
         }},
         {name: 'moveCells', dispName: 'Move Cells on Fold', type: 'bool', defVal: false, isVisible: function(state, format)

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

@@ -7413,18 +7413,43 @@
 			{
 				try
 				{
-					EditorUi.logEvent({category: 'LUCIDCHART-IMPORT-FILE',
-						action: 'size_' + data.length});
-					EditorUi.debug('convertLucidChart', data);
-				}
-				catch (e)
-				{
-					// ignore
-				}
-				
-				try
-				{
-					success(LucidImporter.importState(JSON.parse(data)));
+					var obj = JSON.parse(data);
+					success(LucidImporter.importState(obj));
+
+					try
+					{
+						EditorUi.logEvent({category: 'LUCIDCHART-IMPORT-FILE',
+							action: 'size_' + data.length});
+
+							if (window.console != null && urlParams['test'] == '1')
+							{
+								var args = [new Date().toISOString(), 'convertLucidChart', obj];
+
+								if (obj.state != null)
+								{
+									args.push(JSON.parse(obj.state));
+								}
+		
+								if (obj.svgThumbs != null)
+								{
+									for (var i = 0; i < obj.svgThumbs.length; i++)
+									{
+										args.push(Editor.createSvgDataUri(obj.svgThumbs[i]));
+									}
+								}
+
+								if (obj.thumb != null)
+								{
+									args.push(obj.thumb);
+								}
+
+								console.log.apply(console, args);
+							}
+					}
+					catch (e)
+					{
+						// ignore
+					}
 				}
 				catch (e)
 				{

src/main/webapp/js/diagramly/sidebar/Sidebar-AWS4.js

@@ -202,7 +202,8 @@
 
 	Sidebar.prototype.addAWS4GroupsPalette = function(s, gn, sb, pts)
 	{
-		var n4 = pts + 'outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;' + mxConstants.STYLE_SHAPE + "=mxgraph.aws4.";
+		var n4 = pts + 'outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;' + mxConstants.STYLE_SHAPE + "=mxgraph.aws4.";
+		
 		var dt = 'aws amazon web service groups group ';
 		
 		this.addPaletteFunctions('aws4Groups', 'AWS / Groups', false,

src/main/webapp/js/grapheditor/Dialogs.js

@@ -2015,6 +2015,7 @@ var OutlineWindow = function(editorUi, x, y, w, h)
 
 	var zoomInAction = editorUi.actions.get('zoomIn');
 	var zoomOutAction = editorUi.actions.get('zoomOut');
+
 	mxEvent.addMouseWheelListener(function(evt, up)
 	{
 		var outlineWheel = false;
@@ -2033,14 +2034,16 @@ var OutlineWindow = function(editorUi, x, y, w, h)
 
 		if (outlineWheel)
 		{
-			if (up)
-			{
-				zoomInAction.funct();
-			}
-			else
+			var factor = graph.zoomFactor;
+
+			// Slower zoom for pinch gesture on trackpad
+			if (evt.deltaY != null && Math.round(evt.deltaY) != evt.deltaY)
 			{
-				zoomOutAction.funct();
+				factor = 1 + (Math.abs(evt.deltaY) / 20) * (factor - 1);
 			}
+
+			graph.lazyZoom(up, null, null, factor);
+			mxEvent.consume(evt);
 		}
 	});
 };

src/main/webapp/js/grapheditor/EditorUi.js

@@ -2904,9 +2904,11 @@ EditorUi.prototype.initCanvas = function()
 
 			scrollPosition = new mxPoint(graph.container.scrollLeft, graph.container.scrollTop);
 			
-			var cx = (ignoreCursorPosition) ? graph.container.scrollLeft + graph.container.clientWidth / 2 :
+			var cx = (ignoreCursorPosition || cursorPosition == null) ?
+				graph.container.scrollLeft + graph.container.clientWidth / 2 :
 				cursorPosition.x + graph.container.scrollLeft - graph.container.offsetLeft;
-			var cy = (ignoreCursorPosition) ? graph.container.scrollTop + graph.container.clientHeight / 2 :
+			var cy = (ignoreCursorPosition || cursorPosition == null) ?
+				graph.container.scrollTop + graph.container.clientHeight / 2 :
 				cursorPosition.y + graph.container.scrollTop - graph.container.offsetTop;
 			mainGroup.style.transformOrigin = cx + 'px ' + cy + 'px';
 			mainGroup.style.transform = 'scale(' + this.cumulativeZoomFactor + ')';
@@ -3802,6 +3804,9 @@ EditorUi.prototype.updateActionStates = function()
 	var vertexSelected = false;
 	var groupSelected = false;
 	var edgeSelected = false;
+	var tableSelected = false;
+	var rowSelected = false;
+	var cellSelected = false;
 	var selected = false;
 	var editable = [];
 
@@ -3813,6 +3818,10 @@ EditorUi.prototype.updateActionStates = function()
     	{
     		var cell = cells[i];
 
+			tableSelected = tableSelected || graph.isTable(cell);
+			cellSelected = cellSelected || graph.isTableCell(cell);
+			rowSelected = rowSelected || graph.isTableRow(cell);
+ 
 			if (graph.isCellEditable(cell))
 			{
 				editable.push(cell);
@@ -3861,9 +3870,11 @@ EditorUi.prototype.updateActionStates = function()
 	this.actions.get('wordWrap').setEnabled(vertexSelected);
 	this.actions.get('autosize').setEnabled(vertexSelected);
    	var oneVertexSelected = vertexSelected && graph.getSelectionCount() == 1;
-	this.actions.get('group').setEnabled(graph.getSelectionCount() > 1 ||
-		(oneVertexSelected && !graph.isContainer(graph.getSelectionCell())));
-	this.actions.get('ungroup').setEnabled(groupSelected);
+	this.actions.get('group').setEnabled((graph.getSelectionCount() > 1 ||
+		(oneVertexSelected && !graph.isContainer(graph.getSelectionCell()) &&
+		graph.model.getChildCount(graph.getSelectionCell()) == 0)) &&
+		!rowSelected && !cellSelected);
+	this.actions.get('ungroup').setEnabled(groupSelected && !rowSelected && !cellSelected);
    	this.actions.get('removeFromGroup').setEnabled(oneVertexSelected &&
    		graph.getModel().isVertex(graph.getModel().getParent(editable[0])));
 

src/main/webapp/js/grapheditor/Format.js

@@ -848,6 +848,32 @@ BaseFormatPanel.prototype.createTitle = function(title)
 	return div;
 };
 
+/**
+ * 
+ */
+BaseFormatPanel.prototype.addAction = function(div, action, width)
+{
+	var result = false;
+
+	if (action != null && action.isEnabled())
+	{
+		var btn = mxUtils.button(action.label, function(evt)
+		{
+			action.funct();
+		});
+		
+		var short = (action.shortcut != null) ? ' (' + action.shortcut + ')' : '';
+		btn.setAttribute('title', action.label + short);
+		width = (width != null) ? width : 210;
+		btn.style.width = width + 'px';
+		btn.style.marginBottom = '2px';
+		div.appendChild(btn);
+		result = true;
+	}
+
+	return result;
+};
+
 /**
  * 
  */
@@ -1965,42 +1991,21 @@ ArrangePanel.prototype.addGroupOps = function(div)
 	div.style.paddingTop = '8px';
 	div.style.paddingBottom = '6px';
 
-	if (graph.getSelectionCount() > 1)
+	if (this.addAction(div, ui.actions.get('group')))
 	{
-		btn = mxUtils.button(mxResources.get('group'), function(evt)
-		{
-			ui.actions.get('group').funct();
-		})
-		
-		btn.setAttribute('title', mxResources.get('group') + ' (' + this.editorUi.actions.get('group').shortcut + ')');
-		btn.style.width = '210px';
-		btn.style.marginBottom = '2px';
-		div.appendChild(btn);
+		mxUtils.br(div);
 		count++;
 	}
-	else if (ss.cells.length == 1 && !graph.getModel().isEdge(cell) && !graph.isSwimlane(cell) &&
-		!graph.isTable(cell) && !ss.row && !ss.cell && graph.getModel().getChildCount(cell) > 0)
+
+	if (this.addAction(div, ui.actions.get('ungroup')))
 	{
-		btn = mxUtils.button(mxResources.get('ungroup'), function(evt)
-		{
-			ui.actions.get('ungroup').funct();
-		})
-		
-		btn.setAttribute('title', mxResources.get('ungroup') + ' (' +
-			this.editorUi.actions.get('ungroup').shortcut + ')');
-		btn.style.width = '210px';
-		btn.style.marginBottom = '2px';
-		div.appendChild(btn);
+		mxUtils.br(div);
 		count++;
 	}
-	
+
 	if (graph.getModel().isVertex(graph.getSelectionCell()))
 	{
-		if (count > 0)
-		{
-			mxUtils.br(div);
-			count = 0;
-		}
+		count = 0;
 		
 		var btn = mxUtils.button(mxResources.get('copySize'), function(evt)
 		{

src/main/webapp/js/grapheditor/Graph.js

@@ -239,13 +239,13 @@ mxShape.prototype.getConstraints = function(style, w, h)
 mxImageShape.prototype.getImageDataUri = function()
 {
 	var src = this.image;
-	
+
 	if (src.substring(0, 26) == 'data:image/svg+xml;base64,' && this.style != null &&
 		mxUtils.getValue(this.style, 'clipSvg', '0') == '1')
 	{
 		if (this.clippedSvg == null || this.clippedImage != src)
 		{
-			this.clippedSvg = Graph.clipSvgDataUri(src);
+			this.clippedSvg = Graph.clipSvgDataUri(src, true);
 			this.clippedImage = src;
 		}
 		
@@ -1716,7 +1716,7 @@ Graph.sanitizeSvg = function(div)
  * and returns the updated data URI with all script tags and event
  * handlers removed.
  */
-Graph.clipSvgDataUri = function(dataUri)
+Graph.clipSvgDataUri = function(dataUri, ignorePreserveAspect)
 {
 	// LATER Add workaround for non-default NS declarations with empty URI not allowed in IE11
 	if (!mxClient.IS_IE && !mxClient.IS_IE11 && dataUri != null &&
@@ -1745,63 +1745,67 @@ Graph.clipSvgDataUri = function(dataUri)
 
 				if (svgs.length > 0)
 				{
-					document.body.appendChild(div);
-					
-					try
+					// Avoids getBBox as it ignores stroke option
+					if (ignorePreserveAspect || svgs[0].getAttribute('preserveAspectRatio') != null)
 					{
-						var fx = 1;
-						var fy = 1;
-						var w = svgs[0].getAttribute('width');
-						var h = svgs[0].getAttribute('height');
+						document.body.appendChild(div);
 						
-						if (w != null && w.charAt(w.length - 1) != '%')
-						{
-							w = parseFloat(w);
-						}
-						else
-						{
-							w = NaN;
-						}
-						
-						if (h != null && h.charAt(h.length - 1) != '%')
-						{
-							h = parseFloat(h);
-						}
-						else
-						{
-							h = NaN;
-						}
-						
-						var vb = svgs[0].getAttribute('viewBox');
-						
-						if (vb != null && !isNaN(w) && !isNaN(h))
+						try
 						{
-							var tokens = vb.split(' ');
-
-							if (vb.length >= 4)
+							var fx = 1;
+							var fy = 1;
+							var w = svgs[0].getAttribute('width');
+							var h = svgs[0].getAttribute('height');
+							
+							if (w != null && w.charAt(w.length - 1) != '%')
 							{
-								fx = parseFloat(tokens[2]) / w;
-								fy = parseFloat(tokens[3]) / h;
+								w = parseFloat(w);
+							}
+							else
+							{
+								w = NaN;
+							}
+							
+							if (h != null && h.charAt(h.length - 1) != '%')
+							{
+								h = parseFloat(h);
+							}
+							else
+							{
+								h = NaN;
+							}
+							
+							var vb = svgs[0].getAttribute('viewBox');
+							
+							if (vb != null && !isNaN(w) && !isNaN(h))
+							{
+								var tokens = vb.split(' ');
+
+								if (vb.length >= 4)
+								{
+									fx = parseFloat(tokens[2]) / w;
+									fy = parseFloat(tokens[3]) / h;
+								}
 							}
-						}
 
-						var size = svgs[0].getBBox();
+							var size = svgs[0].getBBox();
 
-						if (size.width > 0 && size.height > 0)
+							if (size.width > 0 && size.height > 0)
+							{
+								div.getElementsByTagName('svg')[0].setAttribute('viewBox', size.x +
+									' ' + size.y + ' ' + size.width + ' ' + size.height);
+								div.getElementsByTagName('svg')[0].setAttribute('width', size.width / fx);
+								div.getElementsByTagName('svg')[0].setAttribute('height', size.height / fy);
+							}
+						}
+						catch (e)
 						{
-							div.getElementsByTagName('svg')[0].setAttribute('viewBox', size.x +
-								' ' + size.y + ' ' + size.width + ' ' + size.height);
-							div.getElementsByTagName('svg')[0].setAttribute('width', size.width / fx);
-							div.getElementsByTagName('svg')[0].setAttribute('height', size.height / fy);
+							// ignore
+						}
+						finally
+						{	
+							document.body.removeChild(div);
 						}
-					}
-					catch (e)
-					{
-						// ignore
-					}
-					finally
-					{	
-						document.body.removeChild(div);
 					}
 					
 					dataUri = Editor.createSvgDataUri(mxUtils.getXml(svgs[0]));
@@ -7398,7 +7402,7 @@ if (typeof mxVertexHandler != 'undefined')
 		var mxConnectionHandlerCreateTarget = mxConnectionHandler.prototype.isCreateTarget;
 		mxConnectionHandler.prototype.isCreateTarget = function(evt)
 		{
-			return this.graph.isCloneEvent(evt) || mxConnectionHandlerCreateTarget.apply(this, arguments);
+			return this.graph.isCloneEvent(evt) != mxConnectionHandlerCreateTarget.apply(this, arguments);
 		};
 
 		// Overrides highlight shape for connection points

src/main/webapp/js/open.js

@@ -54,7 +54,7 @@ function main()
 					if (filesInfo.length == 0)
 					{
 						window.parent.mxUtils.write(div, window.parent.mxResources.get('noFiles'));
-						div.style.color = (window.parent.uiTheme == 'dark') ? '#cccccc' : '';
+						div.style.color = (window.parent.Editor.isDarkMode()) ? '#cccccc' : '';
 						window.parent.mxUtils.br(div);
 					}
 					else
@@ -67,8 +67,8 @@ function main()
 						
 						var table = document.createElement('table');
 						var hrow = document.createElement('tr');
-						hrow.style.backgroundColor = (window.parent.uiTheme == 'dark') ? '#000' : '#D6D6D6';
-						hrow.style.color = (window.parent.uiTheme == 'dark') ? '#cccccc' : '';
+						hrow.style.backgroundColor = (window.parent.Editor.isDarkMode()) ? '#000' : '#D6D6D6';
+						hrow.style.color = (window.parent.Editor.isDarkMode()) ? '#cccccc' : '';
 						hrow.style.height = '25px';
 						hrow.style.textAlign = 'left';
 						table.appendChild(hrow);
@@ -96,12 +96,12 @@ function main()
 							if (fileInfo.title.length > 0)
 							{
 								var row = document.createElement('tr');
-								row.style.color = (window.parent.uiTheme == 'dark') ? '#cccccc' : '';
+								row.style.color = (window.parent.Editor.isDarkMode()) ? '#cccccc' : '';
 								table.appendChild(row);
 								
 								if (i & 1 == 1)
 								{
-									row.style.backgroundColor = (window.parent.uiTheme == 'dark') ? '#000' : '#E6E6E6';
+									row.style.backgroundColor = (window.parent.Editor.isDarkMode()) ? '#000' : '#E6E6E6';
 								}
 									
 								var nameTd = document.createElement('td');
@@ -136,7 +136,7 @@ function main()
 								img.style.display = 'inline-block';
 								ctrlTd.appendChild(img);
 								
-								if (window.parent.uiTheme == 'dark')
+								if (window.parent.Editor.isDarkMode())
 								{
 									img.style.filter = 'invert(100%)';
 								}

src/main/webapp/plugins/cConf-1-4-8.js

@@ -552,6 +552,7 @@ Draw.loadPlugin(function(ui)
 		
 		var inner = this.container.querySelector('.geTitle'), urlInput = inner.querySelector('input[type="text"]'), urlCheck = urlInput.previousSibling;
 		
+		urlInput.style.width = '680px';
 		var lbl = document.createElement('div');
 		mxUtils.write(lbl, mxResources.get('confAnchor') + ':');
 		inner.appendChild(lbl);
@@ -889,7 +890,7 @@ Draw.loadPlugin(function(ui)
 	ui.showLinkDialog = function(value, btnLabel, fn)
 	{
 		var dlg = new LinkDialog(this, value, btnLabel, fn, true);
-		this.showDialog(dlg.container, 700, 470, true, true);
+		this.showDialog(dlg.container, 710, 470, true, true);
 		dlg.init();
 	};
 	

src/main/webapp/resources/dia_ar.txt

@@ -97,7 +97,7 @@ chatWindowTitle=‫دردشة‬
 chooseAnOption=‫اختر خيارا‬
 chromeApp=‫تطبيق Chrome‬
 collaborativeEditingNotice=‫ملاحظات مهمة عن مشاركة التعديل‬
-compare=‫قارن‬
+compare=‫يقارن‬
 compressed=‫مضغوط‬
 commitMessage=‫أكد علي تسجيل الرسالة‬
 configLinkWarn=‫هذة الوصلة تقوم بتغيرات علي draw.io . اضغط علي موافق لو كنت تثق فيمن ارسله اليك‬

src/main/webapp/resources/dia_eu.txt

@@ -352,7 +352,7 @@ fullscreen=Pantaila osoa
 gap=Tartea
 gcp=GCP
 general=Orokorra
-getNotionChromeExtension=Get the Notion Chrome Extension
+getNotionChromeExtension=Eskuratu Notion Chrome gehigarria
 github=GitHub
 gitlab=GitLab
 gliffy=Gliffy
@@ -1168,5 +1168,5 @@ contactOwner=Contact Owner
 viewerOnlyMsg=Ezin dituzu diagramak editatu plataforma mugikorrean, mesedez erabili mahaigaineko bezeroa edo web arakatzailea.
 website=Webgunea
 check4Updates=Bilat eguneraketak
-attWriteFailedRetry={1}: Attachment write failed, trying again in {2} seconds...
-confPartialPageList=We couldn't fetch all pages due to an error in Confluence. Continuing using {1} pages only.
+attWriteFailedRetry={1}: Eranskinaren idazketa huts egin du, berriro saiatuko da {2} segundo barru...
+confPartialPageList=Ezin izan ditugu orrialde guztiak eskuratu konfluentzia errore bat dela medio. {1} orrialde soilik erabiliko dira.

src/main/webapp/shapes/mxAWS4.js

@@ -218,6 +218,8 @@ mxShapeAws4Group.prototype.paintVertexShape = function(c, x, y, w, h)
 	if (stencil != null)
 	{
 		var strokeColor = mxUtils.getValue(this.state.style, 'strokeColor', '#000000');
+		size = mxUtils.getValue(this.state.style, 'grIconSize', size);
+		c.setFillAlpha(this.strokeOpacity / 100);
 		c.setFillColor(strokeColor);
 		c.setStrokeColor('none');
 		stencil.drawShape(c, this, 0, 0, size, size);
@@ -286,6 +288,8 @@ mxShapeAws4GroupCenter.prototype.paintVertexShape = function(c, x, y, w, h)
 	if (stencil != null)
 	{
 		var strokeColor = mxUtils.getValue(this.state.style, 'strokeColor', '#000000');
+		size = mxUtils.getValue(this.state.style, 'grIconSize', size);
+		c.setFillAlpha(this.strokeOpacity / 100);
 		c.setFillColor(strokeColor);
 		c.setStrokeColor('none');
 		stencil.drawShape(c, this, (w - size) * 0.5, 0, size, size);
@@ -410,6 +414,8 @@ mxShapeAws4Group2.prototype.paintVertexShape = function(c, x, y, w, h)
 
 	if (stencil != null)
 	{
+		size = mxUtils.getValue(this.state.style, 'grIconSize', size);
+		c.setFillAlpha(this.strokeOpacity / 100);
 		c.setFillColor('#ffffff');
 		c.setStrokeColor('none');
 		stencil.drawShape(c, this, size * 0.1, size * 0.1, size * 0.8, size * 0.8);