13.5.2 release

ChangeLog

@@ -1,3 +1,9 @@
+24-JUL-2020: 13.5.2
+
+- Fixes auth for OneDrive viewer
+- Fixes viewer links
+- Uses mxGraph 4.2.1 beta 8
+
 22-JUL-2020: 13.5.1
 
 - Removes official Azure icons for licensing reasons

VERSION

@@ -1 +1 @@
-13.5.1
+13.5.2

src/main/webapp/electron.js

@@ -1227,14 +1227,31 @@ function exportDiagram(event, args, directFinalize)
 				}
 				else if (args.format == 'pdf')
 				{
-					contents.printToPDF(pdfOptions).then((data) => 
+					if (args.print)
 					{
-						event.reply('export-success', data);
-					})
-					.catch((error) => 
+						pdfOptions.scaleFactor = args.pageScale;
+						pdfOptions.pageSize = {
+							width: args.pageWidth * MICRON_TO_PIXEL,
+							height: (args.pageHeight + 2) * MICRON_TO_PIXEL
+						};
+						 
+						contents.print(pdfOptions, (success, errorType) => 
+						{
+							//Consider all as success
+							event.reply('export-success', {});
+						});
+					}
+					else
 					{
-						event.reply('export-error', error);
-					});
+						contents.printToPDF(pdfOptions).then((data) => 
+						{
+							event.reply('export-success', data);
+						})
+						.catch((error) => 
+						{
+							event.reply('export-error', error);
+						});
+					}
 				}
 				else if (args.format == 'svg')
 				{
@@ -1264,21 +1281,10 @@ function exportDiagram(event, args, directFinalize)
 				});
 			}
 			
-			contents.send('render', {
-				xml: args.xml,
-				format: args.format,
-				w: args.w,
-				h: args.h,
-				border: args.border || 0,
-				bg: args.bg,
-				"from": args["from"],
-				to: args.to,
-				pageId: args.pageId,
-				allPages: args.allPages,
-				scale: args.scale || 1,
-				extras: args.extras,
-				uncompressed: args.uncompressed
-			});
+			args.border = args.border || 0;
+			args.scale = args.scale || 1;
+			
+			contents.send('render', args);
 	    });
 	}
 	catch (e)

src/main/webapp/export3.html

@@ -485,10 +485,45 @@
 				graph.pdfPageVisible = false;
 				
 				// Handles PDF output where the output should match the page format if the page is visible
-				if (data.format == 'pdf' && xmlDoc.documentElement.getAttribute('page') == '1' && data.w == 0 && data.h == 0 && data.scale == 1)
+				if (data.print || (data.format == 'pdf' && xmlDoc.documentElement.getAttribute('page') == '1' && data.w == 0 && data.h == 0 && data.scale == 1))
 				{
-					var pw = xmlDoc.documentElement.getAttribute('pageWidth');
-					var ph = xmlDoc.documentElement.getAttribute('pageHeight');
+					//Electron printing
+					var printScale = 1;
+					
+					if (data.print)
+					{
+						var gb = graph.getGraphBounds();
+						printScale = data.pageScale;
+				
+						if (isNaN(printScale))
+						{
+							printScale = 1;
+						}
+						
+						// Workaround to match available paper size in actual print output
+						printScale *= 0.75;
+						
+						if (data.fit)
+						{
+							var h = parseInt(data.sheetsAcross);
+							var v = parseInt(data.sheetsDown);
+							
+							data.scale = Math.min((data.pageHeight * v) / (gb.height / graph.view.scale),
+									(data.pageWidth * h) / (gb.width / graph.view.scale));
+						}
+						else
+						{
+							data.scale = data.scale / graph.pageScale;
+							
+							if (isNaN(data.scale))
+							{
+								printScale = 1 / graph.pageScale;
+							}
+						}
+					}
+					
+					var pw = data.pageWidth || xmlDoc.documentElement.getAttribute('pageWidth');
+					var ph = data.pageHeight || xmlDoc.documentElement.getAttribute('pageHeight');
 					graph.pdfPageVisible = true;
 					
 					if (pw != null && ph != null)
@@ -496,7 +531,7 @@
 						graph.pageFormat = new mxRectangle(0, 0, parseFloat(pw), parseFloat(ph));
 					}
 					
-					var ps = xmlDoc.documentElement.getAttribute('pageScale');
+					var ps = data.pageScale || xmlDoc.documentElement.getAttribute('pageScale');
 					
 					if (ps != null)
 					{
@@ -640,8 +675,8 @@
 				if (graph.pdfPageVisible)
 				{
 					var pf = graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT;
-					var scale = 1 / graph.pageScale;
-					var autoOrigin = false;
+					var scale = data.print? data.scale : 1 / graph.pageScale;
+					var autoOrigin = data.fit || false;
 					var border = 0;
 	
 					// Negative coordinates are cropped or shifted if page visible
@@ -651,13 +686,17 @@
 			
 					// Applies print scale
 					pf = mxRectangle.fromRectangle(pf);
-					pf.width = Math.ceil(pf.width) + 1; //The 1 extra pixels to prevent cutting the cells on the right edge of the page
-					pf.height = Math.ceil(pf.height);
+					pf.width = Math.ceil(pf.width * printScale) + 1; //The 1 extra pixels to prevent cutting the cells on the right edge of the page
+					pf.height = Math.ceil(pf.height * printScale);
+					scale *= printScale;
 					
 					// Starts at first visible page
-					var layout = graph.getPageLayout();
-					x0 -= layout.x * pf.width;
-					y0 -= layout.y * pf.height;
+					if (autoOrigin)
+					{
+						var layout = graph.getPageLayout();
+						x0 -= layout.x * pf.width;
+						y0 -= layout.y * pf.height;
+					}
 					
 					if (preview == null)
 					{

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

@@ -6847,7 +6847,14 @@
 			var pagesTo = pagesToInput.value;
 			var ignorePages = !allPagesRadio.checked;
 			var pv = null;
-						
+			
+			if (mxIsElectron)
+			{
+				PrintDialog.electronPrint(editorUi, allPagesRadio.checked, pagesFrom, pagesTo, 
+						fitRadio.checked, sheetsAcrossInput.value, sheetsDownInput.value, parseInt(zoomInput.value) / 100, parseInt(pageScaleInput.value) / 100, accessor.get());
+				return;
+			}
+			
 			if (ignorePages)
 			{
 				ignorePages = pagesFrom == currentPage && pagesTo == currentPage;

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

@@ -5021,7 +5021,10 @@
 		
 		if (lightbox)
 		{
-			params.push('lightbox=1');
+			if (urlParams['dev'] == '1')
+			{
+				params.push('lightbox=1');
+			}
 
 			if (linkTarget != 'auto')
 			{
@@ -5030,7 +5033,8 @@
 			
 			if (linkColor != null && linkColor != mxConstants.NONE)
 			{
-				params.push('highlight=' + ((linkColor.charAt(0) == '#') ? linkColor.substring(1) : linkColor));
+				params.push('highlight=' + ((linkColor.charAt(0) == '#') ?
+					linkColor.substring(1) : linkColor));
 			}
 			
 			if (editLink != null && editLink.length > 0)
@@ -5063,7 +5067,7 @@
 	 */
 	EditorUi.prototype.createLink = function(linkTarget, linkColor, allPages, lightbox, editLink, layers, url, ignoreFile, params)
 	{
-		params = (params != null) ? params : this.createUrlParameters(linkTarget, linkColor, allPages, false, editLink, layers);
+		params = (params != null) ? params : this.createUrlParameters(linkTarget, linkColor, allPages, lightbox, editLink, layers);
 		var file = this.getCurrentFile();
 		var addTitle = true;
 		var data = '';
@@ -5094,9 +5098,10 @@
 		{
 			params.push('title=' + encodeURIComponent(file.getTitle()));
 		}
-
-		return ((lightbox) ? EditorUi.lightboxHost : (((mxClient.IS_CHROMEAPP ||
-			EditorUi.isElectronApp || !(/.*\.draw\.io$/.test(window.location.hostname))) ?
+		
+		return ((lightbox && urlParams['dev'] != '1') ? EditorUi.lightboxHost :
+			(((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp ||
+			!(/.*\.draw\.io$/.test(window.location.hostname))) ?
 			EditorUi.drawHost : 'https://' + window.location.host))) + '/' +
 			((params.length > 0) ? '?' + params.join('&') : '') + data;
 	};

src/main/webapp/js/diagramly/ElectronApp.js

@@ -1,6 +1,7 @@
 window.PLUGINS_BASE_PATH = '.';
 window.TEMPLATE_PATH = 'templates';
 window.DRAW_MATH_URL = 'math';
+window.DRAWIO_BASE_URL = '.'; //Prevent access to online website since it is not allowed
 FeedbackDialog.feedbackUrl = 'https://log.draw.io/email';
 
 //Disables eval for JS (uses shapes.min.js)
@@ -17,27 +18,35 @@ mxStencilRegistry.allowEval = false;
 	// Disables new window option in edit diagram dialog
 	EditDiagramDialog.showNewWindowOption = false;
 
-	// Redirects printing to iframe to avoid document.write
-	var printDialogCreatePrintPreview = PrintDialog.createPrintPreview; 
+	PrintDialog.previewEnabled = false;
 	
-	PrintDialog.createPrintPreview = function()
+	PrintDialog.electronPrint = function(editorUi, allPages, pagesFrom, pagesTo, 
+			fit, sheetsAcross, sheetsDown, zoom, pageScale, pageFormat)
 	{
-		var iframe = document.createElement('iframe');
-		document.body.appendChild(iframe);
-
-		var result = printDialogCreatePrintPreview.apply(this, arguments);
-		result.wnd = iframe.contentWindow;
-		result.iframe = iframe;
-				
-		// Workaround for lost gradients in print output
-		result.previousGetBaseUrl = mxSvgCanvas2D.prototype.getBaseUrl;
+		var xml = '';
+		var file = editorUi.getCurrentFile();
 		
-		mxSvgCanvas2D.prototype.getBaseUrl = function()
+		if (file)
 		{
-			return '';
-		};
+			file.updateFileData();
+			xml = file.getData();
+		}
 		
-		return result;
+		new mxElectronRequest('export', {
+			print: true,
+			format: 'pdf',
+			xml: xml,
+			from: pagesFrom - 1,
+			to: pagesTo - 1,
+			allPages: allPages,
+			pageWidth: pageFormat.width,
+			pageHeight: pageFormat.height,
+			pageScale: pageScale,
+			fit: fit,
+			sheetsAcross: sheetsAcross,
+			sheetsDown: sheetsDown,
+			scale: zoom
+		}).send(function(){}, function(){});
 	};
 	
 	var oldWindowOpen = window.open;
@@ -134,33 +143,6 @@ mxStencilRegistry.allowEval = false;
 		origAppMain.apply(this, arguments);
 	};
 	
-	mxPrintPreview.prototype.addPageBreak = function(doc)
-	{
-		// Do nothing
-	};
-
-	mxPrintPreview.prototype.closeDocument = function()
-	{
-		var doc = this.wnd.document;
-		
-		// Removes all event handlers in the print output
-		mxEvent.release(doc.body);
-	};
-	
-	PrintDialog.printPreview = function(preview)
-	{
-		if (preview.iframe != null)
-		{
-			preview.iframe.contentWindow.print();
-			preview.iframe.parentNode.removeChild(preview.iframe);
-		
-			mxSvgCanvas2D.prototype.getBaseUrl = preview.previousGetBaseUrl;
-			preview.iframe = null;
-		}
-	};
-	
-	PrintDialog.previewEnabled = false;
-	
 	var menusInit = Menus.prototype.init;
 	Menus.prototype.init = function()
 	{

src/main/webapp/js/diagramly/Extensions.js

@@ -98,14 +98,14 @@ LucidImporter = {};
 			'DisplayBlock': 'shape=display',
 			'OffPageLinkBlock': 'shape=offPageConnector',
 			'BraceNoteBlock': cs,
-			'NoteBlock': 'shape=partialRectangle;right=0', //s + flowchart.annotation_1
+			'NoteBlock': cs,
 //Containers
 			'AdvancedSwimLaneBlock': cs,
 			'AdvancedSwimLaneBlockRotated': cs,
 			'RectangleContainerBlock': 'container=1;collapsible=0',
 			'DiamondContainerBlock':  'shape=rhombus;fillColor=none;container=1',
 			'RoundedRectangleContainerBlock': 'fillColor=none;container=1;rounded=1;absoluteArcSize=1;arcSize=24',
-			'CircleContainerBlock': 'shape=ellipse;fillColor=none;container=1',
+			'CircleContainerBlock': 'ellipse;fillColor=none;container=1',
 			'PillContainerBlock': 'arcSize=50;fillColor=none;container=1',
 			'BraceBlock': cs,
 			'BracketBlock': cs,
@@ -212,7 +212,7 @@ LucidImporter = {};
 			'MindMapBlock' : '',
 			'MindMapStadiumBlock' : 'arcSize=50',
 			'MindMapCloud' : 'shape=cloud',
-			'MindMapCircle' : 'shape=ellipse',
+			'MindMapCircle' : 'ellipse',
 			'MindMapIsoscelesTriangleBlock' : 'shape=triangle;direction=north',
 			'MindMapDiamondBlock' : 'shape=rhombus',
 			'MindMapPentagonBlock' : s + 'basic.pentagon',
@@ -234,19 +234,19 @@ LucidImporter = {};
 			'UMLTextBlock': cs,
 //UML Use Case
 			'UMLActorBlock': 'shape=umlActor;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;whiteSpace=nowrap',
-			'UMLUseCaseBlock': 'shape=ellipse',
-			'UMLCircleContainerBlock': 'shape=ellipse;container=1',
+			'UMLUseCaseBlock': 'ellipse',
+			'UMLCircleContainerBlock': 'ellipse;container=1',
 			'UMLRectangleContainerBlock': 'container=1',
 //UML State/Activity			
 			'UMLOptionLoopBlock' : s + 'sysml.package2;xSize=90;overflow=fill',
 			'UMLAlternativeBlock2' : s + 'sysml.package2;xSize=90;overflow=fill',
-			'UMLStartBlock' : 'shape=ellipse;fillColor=#000000',
+			'UMLStartBlock' : 'ellipse;fillColor=#000000',
 			'UMLStateBlock' : 'rounded=1;arcSize=20',
 			'UMLDecisionBlock' : 'shape=rhombus;',
 			'UMLHForkJoinBlock' : 'fillColor=#000000',
 			'UMLVForkJoinBlock' : 'fillColor=#000000',
 			'UMLFlowFinalBlock' : s + 'flowchart.or',
-			'UMLHistoryStateBlock' : 'shape=ellipse',
+			'UMLHistoryStateBlock' : 'ellipse',
 			'UMLEndBlock' : s + 'bpmn.shape;outline=end;symbol=terminate;strokeColor=#000000;fillColor=#ffffff',
 			'UMLObjectBlock' : '',
 			'UMLSendSignalBlock' : s + 'sysml.sendSigAct',
@@ -268,7 +268,7 @@ LucidImporter = {};
 //UML Component
 			'UMLComponentBlock' : 'shape=component;align=left;spacingLeft=36',
 			'UMLNodeBlock' : 'shape=cube;size=12;flipH=1',
-			'UMLComponentInterfaceBlock' : 'shape=ellipse',
+			'UMLComponentInterfaceBlock' : 'ellipse',
 			'UMLComponentBoxBlock' : cs, //TODO
 //			'UMLAssemblyConnectorBlock' NA
 			'UMLProvidedInterfaceBlock' : 'shape=lollipop;direction=south',
@@ -278,7 +278,7 @@ LucidImporter = {};
 //UML Entity Relationship
 			'UMLEntityBlock' : '',
 			'UMLWeakEntityBlock' : 'shape=ext;double=1',
-			'UMLAttributeBlock' : 'shape=ellipse',
+			'UMLAttributeBlock' : 'ellipse',
 			'UMLMultivaluedAttributeBlock' : 'shape=doubleEllipse',
 			'UMLRelationshipBlock' : 'shape=rhombus',
 			'UMLWeakRelationshipBlock' : 'shape=rhombus;double=1',
@@ -293,10 +293,11 @@ LucidImporter = {};
 			'BPMNAdvancedPoolBlock' : cs,
 			'BPMNAdvancedPoolBlockRotated' : cs,
 			'BPMNBlackPool' : cs,
+			'BPMNTextAnnotation' : cs,
 //Data Flow
 			'DFDExternalEntityBlock' : cs,
 			'DFDExternalEntityBlock2' : '',
-			'YDMDFDProcessBlock' : 'shape=ellipse',
+			'YDMDFDProcessBlock' : 'ellipse',
 			'YDMDFDDataStoreBlock' : 'shape=partialRectangle;right=0;left=0',
 			'GSDFDProcessBlock' : 'shape=swimlane;rounded=1;arcSize=10',
 			'GSDFDProcessBlock2' : 'rounded=1;arcSize=10;',
@@ -1821,7 +1822,7 @@ LucidImporter = {};
 //Miscellaneous
 			'EE_Plus' : s + 'ios7.misc.flagged',
 			'EE_Negative' : 'shape=line',
-			'EE_InverterContact' : 'shape=ellipse',
+			'EE_InverterContact' : 'ellipse',
 			'EE_Voltmeter' : s + 'electrical.instruments.voltmeter',
 			'EE_Ammeter' : s + 'electrical.instruments.ampermeter',
 			'EE_SineWave' : s + 'electrical.waveforms.sine_wave',
@@ -2144,16 +2145,16 @@ LucidImporter = {};
 			'fpCubicleDouble14x8' : s + 'floorplan.wallU;wallThickness=3',
 			'fpCubicleEnclosed11x9' : s + 'floorplan.wallU;wallThickness=3',
 //Tables & Chairs
-			'fpTableConferenceOval' : 'shape=ellipse',
+			'fpTableConferenceOval' : 'ellipse',
 			'fpTableConferenceBoat' : '',
 			'fpTableConferenceRectangle' : '',
-			'fpTableDiningRound' : 'shape=ellipse',
+			'fpTableDiningRound' : 'ellipse',
 			'fpTableDiningSquare' : '',
 			'fpChairOffice' : s + 'floorplan.office_chair',
 			'fpChairExecutive' : s + 'floorplan.office_chair',
 			'fpChairLobby' : s + 'floorplan.office_chair',
 			'fpChairDining' : s + 'floorplan.chair',
-			'fpChairBarstool' : 'shape=ellipse',
+			'fpChairBarstool' : 'ellipse',
 //Cubicles - Prebuilt
 //Tables - Prebuilt
 //Cabinets - we don't have corresponding stencils, just rounded rectangles			
@@ -2199,7 +2200,7 @@ LucidImporter = {};
 //Appliances
 			'fpApplianceWasher' : '',
 			'fpApplianceDryer' : '',
-			'fpApplianceWaterHeater' : 'shape=ellipse',
+			'fpApplianceWaterHeater' : 'ellipse',
 //			'fpApplianceRefrigerator' NA
 			'fpApplianceStoveOven' : s + 'floorplan.range_1',
 			'fpStoveOvenSixBurner' : s + 'floorplan.range_2',
@@ -2284,8 +2285,8 @@ LucidImporter = {};
 			'PENuclear' : s + 'electrical.waveforms.sine_wave',
 //			'PEPneumatic' NA
 //			'PEHydraulicSignalLine' NA
-			'PEMechanicalLink' : 'shape=ellipse',
-			'PESolderedSolvent' : 'shape=ellipse',
+			'PEMechanicalLink' : 'ellipse',
+			'PESolderedSolvent' : 'ellipse',
 			'PEDoubleContainment' : 'shape=hexagon;perimeter=hexagonPerimeter2',
 			'PEFlange' : s + 'pid.piping.double_flange',
 			'PEFlange2' : s + 'pid.piping.flange_in;flipH=1',
@@ -2413,23 +2414,23 @@ LucidImporter = {};
 //			'PEOrificeBlock' NA
 			'PERotameterBlock' : s + 'pid.flow_sensors.rotameter;flipH=1;verticalLabelPosition=bottom;verticalAlign=top',
 //Venn Gradient
-			'VennGradientColor1' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor2' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor3' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor4' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor5' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor6' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor7' : 'shape=ellipse;fillOpacity=35',
-			'VennGradientColor8' : 'shape=ellipse;fillOpacity=35',
+			'VennGradientColor1' : 'ellipse;fillOpacity=35',
+			'VennGradientColor2' : 'ellipse;fillOpacity=35',
+			'VennGradientColor3' : 'ellipse;fillOpacity=35',
+			'VennGradientColor4' : 'ellipse;fillOpacity=35',
+			'VennGradientColor5' : 'ellipse;fillOpacity=35',
+			'VennGradientColor6' : 'ellipse;fillOpacity=35',
+			'VennGradientColor7' : 'ellipse;fillOpacity=35',
+			'VennGradientColor8' : 'ellipse;fillOpacity=35',
 //Venn Plain
-			'VennPlainColor1' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor2' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor3' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor4' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor5' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor6' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor7' : 'shape=ellipse;fillOpacity=35',
-			'VennPlainColor8' : 'shape=ellipse;fillOpacity=35',
+			'VennPlainColor1' : 'ellipse;fillOpacity=35',
+			'VennPlainColor2' : 'ellipse;fillOpacity=35',
+			'VennPlainColor3' : 'ellipse;fillOpacity=35',
+			'VennPlainColor4' : 'ellipse;fillOpacity=35',
+			'VennPlainColor5' : 'ellipse;fillOpacity=35',
+			'VennPlainColor6' : 'ellipse;fillOpacity=35',
+			'VennPlainColor7' : 'ellipse;fillOpacity=35',
+			'VennPlainColor8' : 'ellipse;fillOpacity=35',
 //iOS Devices
 			'iOS7DeviceiPhone5Portrait' : s + 'ios.iPhone;bgStyle=bgGreen', //TODO
 			'iOS7DeviceiPhone5Landscape' : s + 'ios.iPhone;bgStyle=bgGreen', //TODO
@@ -2663,12 +2664,12 @@ LucidImporter = {};
 			'Image_ipad_arrow_icon' : s + 'ios.iArrowIcon;fillColor=#8BbEff;fillColor2=#135Ec8;strokeColor=#ffffff',
 			'Image_ipad_arrow' : s + 'ios7.misc.more',
 			'Image_ipad_checkmark' : s + 'ios7.misc.check',
-			'Image_ipad_check_off' : 'shape=ellipse', //TODO
-			'Image_ipad_location_dot' : 'shape=ellipse',
-			'Image_ipad_mark_as_read' : 'shape=ellipse',
+			'Image_ipad_check_off' : 'ellipse', //TODO
+			'Image_ipad_location_dot' : 'ellipse',
+			'Image_ipad_mark_as_read' : 'ellipse',
 			'Image_ipad_pin_green' : s + 'ios.iPin;fillColor2=#00dd00;fillColor3=#004400;strokeColor=#006600',
 			'Image_ipad_pin_red' : s + 'ios.iPin;fillColor2=#dd0000;fillColor3=#440000;strokeColor=#660000',
-			'Image_ipad_radio_off' : 'shape=ellipse', //TODO
+			'Image_ipad_radio_off' : 'ellipse', //TODO
 			'Image_ipad_checkbox_off' : 'absoluteArcSize=1;arcSize=' + arcSize + ';rounded=1', //TODO
 			'Image_ipad_indicator' : 'absoluteArcSize=1;arcSize=' + arcSize + ';rounded=1;fillColor=#e8878E;gradientColor=#BD1421;strokeColor=#ffffff',
 //iOS 6 iPhone Elements
@@ -2729,12 +2730,12 @@ LucidImporter = {};
 			'Image_iphone_arrow_icon' : s + 'ios.iArrowIcon;fillColor=#8BbEff;fillColor2=#135Ec8;strokeColor=#ffffff',
 			'Image_iphone_arrow' : s + 'ios7.misc.more',
 			'Image_iphone_checkmark' : s + 'ios7.misc.check',
-			'Image_iphone_check_off' : 'shape=ellipse', //TODO
-			'Image_iphone_location_dot' : 'shape=ellipse',
-			'Image_iphone_mark_as_read' : 'shape=ellipse',
+			'Image_iphone_check_off' : 'ellipse', //TODO
+			'Image_iphone_location_dot' : 'ellipse',
+			'Image_iphone_mark_as_read' : 'ellipse',
 			'Image_iphone_pin_green' : s + 'ios.iPin;fillColor2=#00dd00;fillColor3=#004400;strokeColor=#006600',
 			'Image_iphone_pin_red' : s + 'ios.iPin;fillColor2=#dd0000;fillColor3=#440000;strokeColor=#660000',
-			'Image_iphone_radio_off' : 'shape=ellipse', //TODO
+			'Image_iphone_radio_off' : 'ellipse', //TODO
 			'Image_iphone_checkbox_off' : '', //TODO
 			'Image_iphone_indicator' : 'fillColor=#e8878E;gradientColor=#BD1421;strokeColor=#ffffff',
 			'Image_iphone_thread_count' : '',
@@ -5275,7 +5276,8 @@ LucidImporter = {};
 	
 	function createVertex(obj, graph)
 	{
-		var p = getAction(obj).Properties;
+		var a = getAction(obj);
+		var p = a.Properties;
 		var b = p.BoundingBox;
 
 		if (obj.Class != null && (obj.Class.substring(0, 3) === "AWS" || obj.Class.substring(0, 6) === "Amazon" ) && !obj.Class.includes('AWS19'))
@@ -5288,23 +5290,16 @@ LucidImporter = {};
 	    v.vertex = true;
 	    updateCell(v, obj, graph);
 	    
+	    //Store z-order to use it in groups
+		v.zOrder = p.ZOrder;
+	    
 	    //FillOpacity affects icon also, so create a parent as a background color
 	    if (v != null && v.style.indexOf(';grIcon=') >= 0)
     	{
 	    	var parent = new mxCell('', new mxGeometry(v.geometry.x, v.geometry.y,
 	    			v.geometry.width, v.geometry.height), vertexStyle);
 	    	parent.vertex = true;
-	    	var a = getAction(obj);
-			
-			if (a != null)
-			{
-				var p = (a.Properties != null) ? a.Properties : a;
-
-				if (p != null)
-				{
-					parent.style += addAllStyles(parent.style, p, a, parent);
-				}
-			}
+			parent.style += addAllStyles(parent.style, p, a, parent);
 			
 		    v.geometry.x = 0;
 		    v.geometry.y = 0;
@@ -5313,6 +5308,8 @@ LucidImporter = {};
 		    v = parent;
     	}
 	    
+	    handleTextRotation(v, p);
+	    
 	    return v;
 	};
 	
@@ -5464,20 +5461,15 @@ LucidImporter = {};
 			var group = new mxCell('', new mxGeometry(), 'group;dropTarget=0;');
 			group.vertex = true;
 			var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-			var members = obj.Members;
-				
+			var members = obj.Members, memberCells = [];
+			
 			for (var key in members)
 			{
 				var v = lookup[key];
 				
 				if (v != null)
 				{
-					minX = Math.min(minX, v.geometry.x);
-					minY = Math.min(minY, v.geometry.y);
-					maxX = Math.max(maxX, v.geometry.x + v.geometry.width);
-					maxY = Math.max(maxY, v.geometry.y + v.geometry.height);
-					v.parent = group;
-					group.insert(v);
+					memberCells.push(v);
 				}
 				else
 				{
@@ -5486,6 +5478,25 @@ LucidImporter = {};
 				}
 			}
 			
+			memberCells.sort(function(a, b)
+			{
+				var ai = a.zOrder;
+				var bi = b.zOrder;
+				
+				return (ai != null && bi != null) ? ai - bi : 0;
+			});
+			
+			for (var i = 0; i < memberCells.length; i++)
+			{
+				var v = memberCells[i];
+				minX = Math.min(minX, v.geometry.x);
+				minY = Math.min(minY, v.geometry.y);
+				maxX = Math.max(maxX, v.geometry.x + v.geometry.width);
+				maxY = Math.max(maxY, v.geometry.y + v.geometry.height);
+				v.parent = group;
+				group.insert(v, i);
+			}
+			
 			group.geometry.x = minX;
 			group.geometry.y = minY;
 			group.geometry.width = maxX - minX;
@@ -5993,6 +6004,9 @@ LucidImporter = {};
 		v = new mxCell('', new mxGeometry(x, y, w, h), vertexStyle);
 	    v.vertex = true;
 
+	    //Store z-order to use it in groups
+		v.zOrder = p.ZOrder;
+		
 	    var cls = (obj.Class != null) ? obj.Class : (a != null) ? a.Class : null;
 	    
 	    //composite shapes
@@ -6902,14 +6916,14 @@ LucidImporter = {};
 				
 				if (p.Checked)
 				{
-					dot = new mxCell('', new mxGeometry(w * 0.15, h * 0.15, w * 0.7, h * 0.7), 'shape=ellipse;fillColor=#33B5E5;strokeWidth=1;');
+					dot = new mxCell('', new mxGeometry(w * 0.15, h * 0.15, w * 0.7, h * 0.7), 'ellipse;fillColor=#33B5E5;strokeWidth=1;');
 					dot.vertex = true;
 					v.insert(dot);
 				}
 
 				if (p.Scheme == 'Dark')
 				{
-					v.style += 'shape=ellipse;strokeWidth=1;strokeColor=#272727;';
+					v.style += 'shape=ellipse;perimeter=ellipsePerimeter;strokeWidth=1;strokeColor=#272727;';
 					
 					if (p.Checked)
 					{
@@ -6923,7 +6937,7 @@ LucidImporter = {};
 				}
 				else
 				{
-					v.style += 'shape=ellipse;strokeWidth=1;fillColor=#ffffff;strokeColor=#5C5C5C;';
+					v.style += 'shape=ellipse;perimeter=ellipsePerimeter;strokeWidth=1;fillColor=#ffffff;strokeColor=#5C5C5C;';
 					
 					if (p.Checked)
 					{
@@ -8591,7 +8605,7 @@ LucidImporter = {};
 				v.value = 'FIFO';
 				break;
 			case 'VSMGoSeeProductionBlock' :
-				v.style += 'shape=ellipse;';
+				v.style += 'shape=ellipse;perimeter=ellipsePerimeter;';
 				v.value = convertText(p.Text);
 				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
 				
@@ -8772,7 +8786,7 @@ LucidImporter = {};
 			case 'NET_RingNetwork' :
 				v.style += 'strokeColor=none;fillColor=none;';
 				
-			   	var cell = new mxCell('', new mxGeometry(w * 0.25, h * 0.25, w * 0.5, h * 0.5), 'html=1;shape=ellipse;perimeter=ellipsePerimeter;strokeColor=#29AAE1;strokeWidth=2;');
+			   	var cell = new mxCell('', new mxGeometry(w * 0.25, h * 0.25, w * 0.5, h * 0.5), 'ellipse;html=1;strokeColor=#29AAE1;strokeWidth=2;');
 			   	cell.vertex = true;
 			   	v.insert(cell);
 			   	var cells = [cell];
@@ -8931,7 +8945,7 @@ LucidImporter = {};
 				v.value = convertText(p.Text);
 				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
 				
-				var item1 = new mxCell('', new mxGeometry(0, 0, 17, 17), 'shape=ellipse;fillColor=#808080;part=1;');
+				var item1 = new mxCell('', new mxGeometry(0, 0, 17, 17), 'ellipse;fillColor=#808080;part=1;');
 				item1.vertex = true;
 				v.insert(item1);
 				item1.style += addAllStyles(item1.style, p, a, item1);
@@ -9102,7 +9116,7 @@ LucidImporter = {};
 				v.value = convertText(p.Text);
 				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
 				
-				var item1 = new mxCell('', new mxGeometry(w * 0.04, h * 0.06, w * 0.18, h * 0.28), 'shape=ellipse;fillColor=#808080;part=1;');
+				var item1 = new mxCell('', new mxGeometry(w * 0.04, h * 0.06, w * 0.18, h * 0.28), 'ellipse;fillColor=#808080;part=1;');
 				item1.vertex = true;
 				v.insert(item1);
 				item1.style += addAllStyles(item1.style, p, a, item1);
@@ -9128,7 +9142,7 @@ LucidImporter = {};
 				edge1.geometry.points = wp;
 				select.push(graph.addCell(edge1, null, null, null, null));
 	
-				var item3 = new mxCell('', new mxGeometry(w * 0.6, h * 0.06, w * 0.18, h * 0.28), 'shape=ellipse;fillColor=#808080;part=1;');
+				var item3 = new mxCell('', new mxGeometry(w * 0.6, h * 0.06, w * 0.18, h * 0.28), 'ellipse;fillColor=#808080;part=1;');
 				item3.vertex = true;
 				v.insert(item3);
 				item3.style += 
@@ -9350,7 +9364,7 @@ LucidImporter = {};
 				v.value = convertText(p.Text);
 				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
 				
-				var item1 = new mxCell('', new mxGeometry(0, 0, 17, 17), 'shape=ellipse;fillColor=#808080;part=1;');
+				var item1 = new mxCell('', new mxGeometry(0, 0, 17, 17), 'ellipse;fillColor=#808080;part=1;');
 				item1.vertex = true;
 				v.insert(item1);
 				item1.style += addAllStyles(item1.style, p, a, item1);
@@ -9463,7 +9477,7 @@ LucidImporter = {};
 				
 				for (var i = 0; i < p.LightCount; i++)
 				{
-					item2[i] = new mxCell('', new mxGeometry(lightOffset + lightW * i + (lightW - trueW) / 2, h * 0.25, trueW, h * 0.75), 'part=1;shape=ellipse;');
+					item2[i] = new mxCell('', new mxGeometry(lightOffset + lightW * i + (lightW - trueW) / 2, h * 0.25, trueW, h * 0.75), 'ellipse;part=1;');
 					item2[i].vertex = true;
 					v.insert(item2[i]);
 					item2[i].style += addAllStyles(item2[i].style, p, a, item2[i]);
@@ -9745,7 +9759,7 @@ LucidImporter = {};
 				
 			case 'PEMotorDrivenTurbineBlock' :
 				
-				v.style += 'shape=ellipse;'; 
+				v.style += 'shape=ellipse;perimeter=ellipsePerimeter;'; 
 				v.value = convertText(p.Text);
 				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
 				
@@ -10055,7 +10069,7 @@ LucidImporter = {};
 				item1.style += getLabelStyle(p.Title, isLastLblHTML);
 				item1.style += addAllStyles(item1.style, p, a, item1, isLastLblHTML);
 				
-				var item2 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), 'part=1;shape=ellipse;strokeColor=#008cff;resizable=0;fillColor=none;html=1;');
+				var item2 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), 'ellipse;part=1;strokeColor=#008cff;resizable=0;fillColor=none;html=1;');
 			   	item2.geometry.relative = true;
 			   	item2.geometry.offset = new mxPoint(-25, -10);
 				item2.vertex = true;
@@ -10605,7 +10619,7 @@ LucidImporter = {};
 				
 				for (var i = 0; i < p.Options; i++)
 				{
-					item1[i] = new mxCell('', new mxGeometry(0, i * itemH + itemH * 0.5 - 5, 10, 10), 'shape=ellipse;labelPosition=right;part=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=3;');
+					item1[i] = new mxCell('', new mxGeometry(0, i * itemH + itemH * 0.5 - 5, 10, 10), 'ellipse;labelPosition=right;part=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=3;');
 					item1[i].vertex = true;
 					v.insert(item1[i]);
 					item1[i].value = convertText(p['Option_' + (i + 1)]);
@@ -10625,7 +10639,7 @@ LucidImporter = {};
 								fc = 'fillColor=#000000;'
 							}
 							
-							item2[i] = new mxCell('', new mxGeometry(2.5, 2.5, 5, 5), 'shape=ellipse;');
+							item2[i] = new mxCell('', new mxGeometry(2.5, 2.5, 5, 5), 'ellipse;');
 							item2[i].vertex = true;
 							item1[i].insert(item2[i]);
 							item2[i].style += fc; 
@@ -10644,7 +10658,7 @@ LucidImporter = {};
 				
 				for (var i = 0; i < p.Options; i++)
 				{
-					item1[i] = new mxCell('', new mxGeometry(i * itemW, h * 0.5 - 5, 10, 10), 'shape=ellipse;labelPosition=right;part=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=3;');
+					item1[i] = new mxCell('', new mxGeometry(i * itemW, h * 0.5 - 5, 10, 10), 'ellipse;labelPosition=right;part=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=3;');
 					item1[i].vertex = true;
 					v.insert(item1[i]);
 					item1[i].value = convertText(p['Option_' + (i + 1)]);
@@ -10664,7 +10678,7 @@ LucidImporter = {};
 								fc = 'fillColor=#000000;'
 							}
 							
-							item2[i] = new mxCell('', new mxGeometry(2, 2, 6, 6), 'shape=ellipse;part=1;');
+							item2[i] = new mxCell('', new mxGeometry(2, 2, 6, 6), 'ellipse;part=1;');
 							item2[i].vertex = true;
 							item1[i].insert(item2[i]);
 							item2[i].style += fc; 
@@ -10966,7 +10980,7 @@ LucidImporter = {};
 					{
 						if (p.Icons[(i + 1)] == 'dot')
 						{
-							icon[i] = new mxCell('', new mxGeometry(0, 0.5, 8, 8), 'shape=ellipse;strokeColor=none;');
+							icon[i] = new mxCell('', new mxGeometry(0, 0.5, 8, 8), 'ellipse;strokeColor=none;');
 							icon[i].geometry.offset = new mxPoint(6, -4);
 						}
 						else if (p.Icons[(i + 1)] == 'check')
@@ -11040,7 +11054,7 @@ LucidImporter = {};
 				break;
 			case 'UI2CalloutBlock' :
 				v.value = convertText(p.Txt);
-				v.style += 'shape=ellipse;' +
+				v.style += 'shape=ellipse;perimeter=ellipsePerimeter;' +
 					getLabelStyle(p.Txt, isLastLblHTML);
 				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
 				
@@ -11060,7 +11074,7 @@ LucidImporter = {};
 					getLabelStyle(p.Title, isLastLblHTML);
 				item1.style += addAllStyles(item1.style, p, a, item1, isLastLblHTML);
 				
-				var item2 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), 'part=1;shape=ellipse;strokeColor=#008cff;resizable=0;fillColor=none;html=1;');
+				var item2 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), 'ellipse;part=1;strokeColor=#008cff;resizable=0;fillColor=none;html=1;');
 			   	item2.geometry.relative = true;
 			   	item2.geometry.offset = new mxPoint(-25, -10);
 				item2.vertex = true;
@@ -11712,34 +11726,42 @@ LucidImporter = {};
 				break;
 			case 'BraceBlock':
 			case 'BraceBlockRotated':
-				var sideStyle = addAllStyles(v.style, p, a, v, isLastLblHTML);
-				var rotation = getRotation(p, a, v);
-				v.style = 'group;' + rotation;
-				var sideWidth = Math.min((rotation? w : h) * 0.14, 100);
-				var dim = rotation? (w - sideWidth) / 2 : 0;
-				var left = new mxCell('', new mxGeometry(dim, dim, sideWidth, h), 'shape=curlyBracket;rounded=1;' + sideStyle);
-				left.vertex = true;
-				var right = new mxCell('', new mxGeometry(rotation? dim : w - sideWidth, -dim, sideWidth, h), 'shape=curlyBracket;rounded=1;flipH=1;' + sideStyle);
-				right.vertex = true;
-				
-				v.insert(left);
-				v.insert(right);
-				break;
 			case 'BracketBlock':
 			case 'BracketBlockRotated':
+				var bracketStyle = cls.indexOf('Bracket') == 0? 'size=0;arcSize=50;' : '';
 				var sideStyle = addAllStyles(v.style, p, a, v, isLastLblHTML);
 				var rotation = getRotation(p, a, v);
 				v.style = 'group;' + rotation;
 				var sideWidth = Math.min((rotation? w : h) * 0.14, 100);
-				var dim = rotation? (w - sideWidth) / 2 : 0;
-				var left = new mxCell('', new mxGeometry(dim, dim, sideWidth, h), 'shape=curlyBracket;rounded=1;size=0;arcSize=50;' + sideStyle);
+				var left = new mxCell('', new mxGeometry(0, 0, sideWidth, h), 'shape=curlyBracket;rounded=1;' + bracketStyle + sideStyle);
 				left.vertex = true;
-				var right = new mxCell('', new mxGeometry(rotation? dim : w - sideWidth, -dim, sideWidth, h), 'shape=curlyBracket;rounded=1;flipH=1;size=0;arcSize=50;' + sideStyle);
+				left.geometry.relative = true;
+				var right = new mxCell('', new mxGeometry(1 - sideWidth / w, 0, sideWidth, h), 'shape=curlyBracket;rounded=1;flipH=1;' + bracketStyle + sideStyle);
 				right.vertex = true;
+				right.geometry.relative = true;
 				
 				v.insert(left);
 				v.insert(right);
 				break;
+			case 'BPMNTextAnnotation':
+			case 'NoteBlock':
+				p.InsetMargin = null;
+				v.value = convertText(p.Text);
+				v.style = 'group;spacingLeft=8;align=left;spacing=0;strokeColor=none;';
+				v.style += addAllStyles(v.style, p, a, v, isLastLblHTML);
+				
+				if (v.style.indexOf('verticalAlign') < 0)
+				{
+					v.style += 'verticalAlign=middle;';
+				}
+				
+				var side = new mxCell('', new mxGeometry(0, 0, 8, h), 'shape=partialRectangle;right=0;fillColor=none;');
+				side.geometry.relative = true;
+				side.vertex = true;
+				side.style += addAllStyles(side.style, p, a, v, isLastLblHTML);
+				
+				v.insert(side);
+				break;
 		}
 
 		if (v.style && v.style.indexOf('html') < 0)
@@ -11747,9 +11769,55 @@ LucidImporter = {};
 			v.style += 'html=1;';
 		}
 		
+		handleTextRotation(v, p);
+		
 	    return v;
 	};
 	
+	function handleTextRotation(v, p)
+	{
+		if (p.Text_TRotation)
+		{
+			try
+			{
+				var deg = mxUtils.toDegree(p.Text_TRotation);
+				
+				if (deg != 0 && v.value)
+				{
+					var w = v.geometry.width, h = v.geometry.height;
+					var lblW = w, lblH = h, x = 0, y = 0;
+					
+					if (deg == -90 || deg == -270)
+					{
+						lblW = h;
+						lblH = w;
+						var diff = Math.abs(h - w) / 2;
+						x = diff / w;
+						y = -diff/ h;
+					}
+					
+					deg += mxUtils.toDegree(p.Rotation);
+					
+					//Remove fill and stroke colors + rotation from vertex style
+					var style = v.style.split(';').filter(function(s)
+					{
+						return s.indexOf('fillColor=') < 0 && s.indexOf('strokeColor=') < 0 && s.indexOf('rotation=') < 0;
+					}).join(';');
+					
+					var lbl = new mxCell(v.value, new mxGeometry(x, y, lblW, lblH), style + 'fillColor=none;strokeColor=none;rotation=' + deg + ';');
+					v.value = null;
+					lbl.geometry.relative = true;
+					lbl.vertex = true;
+					v.insert(lbl);
+				}
+			}
+			catch(e)
+			{
+				console.log(e); //Ignore
+			}
+		}
+	};
+	
 	//TODO A lot of work is still needed to build the cell, do the layout, ...
 	function createOrgChart(obj, graph, lookup, queue)
 	{

src/main/webapp/js/diagramly/OneDriveClient.js

@@ -32,6 +32,9 @@ OneDriveClient.prototype.clientId = window.DRAWIO_MSGRAPH_CLIENT_ID || ((window.
 
 OneDriveClient.prototype.clientId = window.location.hostname == 'app.diagrams.net' ?
 		'b5ff67d6-3155-4fca-965a-59a3655c4476' : OneDriveClient.prototype.clientId;
+
+OneDriveClient.prototype.clientId = window.location.hostname == 'viewer.diagrams.net' ?
+		'417a451a-a343-4788-b6c1-901e63182565' : OneDriveClient.prototype.clientId;
 /**
  * OAuth 2.0 scopes for installing Drive Apps.
  */

src/main/webapp/js/diagramly/OneDriveFile.js

@@ -6,8 +6,6 @@ OneDriveFile = function(ui, data, meta)
 {
 	DrawioFile.call(this, ui, data);
 	
-	console.log('meta', meta);
-	
 	this.meta = meta;
 };
 

src/main/webapp/js/diagramly/Pages.js

@@ -1589,7 +1589,7 @@ EditorUi.prototype.addTabListeners = function(page, tab)
  * Returns an absolute URL to the given page or null of absolute links
  * to pages are not supported in this file.
  */
-EditorUi.prototype.getLinkForPage = function(page, params)
+EditorUi.prototype.getLinkForPage = function(page, params, lightbox)
 {
 	if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)
 	{
@@ -1606,7 +1606,11 @@ EditorUi.prototype.getLinkForPage = function(page, params)
 				search += '&' + params.join('&');
 			}
 			
-			return window.location.protocol + '//' + window.location.host + '/' + search + '#' + file.getHash();
+			return ((lightbox && urlParams['dev'] != '1') ? EditorUi.lightboxHost :
+				(((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp ||
+				!(/.*\.draw\.io$/.test(window.location.hostname))) ?
+				EditorUi.drawHost : 'https://' + window.location.host))) +
+				'/' + search + '#' + file.getHash();
 		}
 	}
 	
@@ -1671,7 +1675,7 @@ EditorUi.prototype.createPageMenu = function(page, label)
 							width: Math.round(bounds.width), height: Math.round(bounds.height), border: 100})));
 					}
 					
-					var dlg = new EmbedDialog(this, this.getLinkForPage(page, params));
+					var dlg = new EmbedDialog(this, this.getLinkForPage(page, params, lightbox));
 					this.showDialog(dlg.container, 440, 240, true, true);
 					dlg.init();
 				}));

src/main/webapp/js/mxgraph/Editor.js

@@ -2715,11 +2715,12 @@ FilenameDialog.createFileTypes = function(editorUi, nameInput, types)
 		
 		if (immediate)
 		{
-			var geo = this.graph.getCellGeometry(cell);
+			var geo = (this.graph.model.isEdge(cell)) ? null :
+				this.graph.getCellGeometry(cell);
 			
 			result = !this.graph.model.isEdge(parent) &&
 				!this.graph.isSiblingSelected(cell) &&
-				(geo == null || geo.relative ||
+				((geo != null && geo.relative) ||
 				!this.graph.isContainer(parent) ||
 				this.graph.isPart(cell));
 		}

src/main/webapp/js/mxgraph/EditorUi.js

@@ -1378,7 +1378,7 @@ EditorUi.prototype.getCellsForShapePicker = function(cell)
 		createVertex('whiteSpace=wrap;html=1;'),
 		createVertex('ellipse;whiteSpace=wrap;html=1;', 120, 80),
 		createVertex('rhombus;whiteSpace=wrap;html=1;', 80, 80),
-		createVertex('shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;'),
+		createVertex('shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;'),
 		createVertex('shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 60),
 		createVertex('shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;', 120, 80),
 		createVertex('shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 80),

src/main/webapp/js/mxgraph/Shapes.js

@@ -714,13 +714,16 @@
 	};
 	mxUtils.extend(ParallelogramShape, mxActor);
 	ParallelogramShape.prototype.size = 0.2;
+	ParallelogramShape.prototype.fixedSize = 20;
 	ParallelogramShape.prototype.isRoundable = function()
 	{
 		return true;
 	};
 	ParallelogramShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
-		var dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
+		var fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
+
+		var dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
 		var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)],
 				this.isRounded, arcSize, true);
@@ -746,7 +749,7 @@
 		
 		var fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
 
-		var dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
+		var dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
 		var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w - dx, 0), new mxPoint(w, h)],
 				this.isRounded, arcSize, true);
@@ -1232,7 +1235,7 @@
 	HexagonShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
 		var fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
-		var s = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
+		var s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
 			w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
 		var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, 0.5 * h), new mxPoint(w - s, h),
@@ -1805,13 +1808,19 @@
 	// Parallelogram Perimeter
 	mxPerimeter.ParallelogramPerimeter = function (bounds, vertex, next, orthogonal)
 	{
-		var size = ParallelogramShape.prototype.size;
+		var fixed = mxUtils.getValue(vertex.style, 'fixedSize', '0') != '0';
+		var size = (fixed) ? ParallelogramShape.prototype.fixedSize : ParallelogramShape.prototype.size;
 		
 		if (vertex != null)
 		{
 			size = mxUtils.getValue(vertex.style, 'size', size);
 		}
 		
+		if (fixed)
+		{
+			size *= vertex.view.scale;
+		}
+		
 		var x = bounds.x;
 		var y = bounds.y;
 		var w = bounds.width;
@@ -1826,13 +1835,13 @@
 		
 		if (vertical)
 		{
-			var dy = h * Math.max(0, Math.min(1, size));
+			var dy = (fixed) ? Math.max(0, Math.min(h, size)) : h * Math.max(0, Math.min(1, size));
 			points = [new mxPoint(x, y), new mxPoint(x + w, y + dy),
 						new mxPoint(x + w, y + h), new mxPoint(x, y + h - dy), new mxPoint(x, y)];
 		}
 		else
 		{
-			var dx = w * Math.max(0, Math.min(1, size));
+			var dx = (fixed) ? Math.max(0, Math.min(w * 0.5, size)) : w * Math.max(0, Math.min(1, size));
 			points = [new mxPoint(x + dx, y), new mxPoint(x + w, y),
 							new mxPoint(x + w - dx, y + h), new mxPoint(x, y + h), new mxPoint(x + dx, y)];
 		}	
@@ -1870,6 +1879,11 @@
 			size = mxUtils.getValue(vertex.style, 'size', size);
 		}
 		
+		if (fixed)
+		{
+			size *= vertex.view.scale;
+		}
+		
 		var x = bounds.x;
 		var y = bounds.y;
 		var w = bounds.width;
@@ -1878,11 +1892,11 @@
 		var direction = (vertex != null) ? mxUtils.getValue(
 				vertex.style, mxConstants.STYLE_DIRECTION,
 				mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
-		var points;
+		var points = [];
 		
 		if (direction == mxConstants.DIRECTION_EAST)
 		{
-			var dx = (fixed) ? Math.max(0, Math.min(w, size)) : w * Math.max(0, Math.min(1, size));
+			var dx = (fixed) ? Math.max(0, Math.min(w * 0.5, size)) : w * Math.max(0, Math.min(1, size));
 			points = [new mxPoint(x + dx, y), new mxPoint(x + w - dx, y),
 						new mxPoint(x + w, y + h), new mxPoint(x, y + h), new mxPoint(x + dx, y)];
 		}
@@ -2015,6 +2029,11 @@
 			size = mxUtils.getValue(vertex.style, 'size', size);
 		}
 		
+		if (fixed)
+		{
+			size *= vertex.view.scale;
+		}
+		
 		var x = bounds.x;
 		var y = bounds.y;
 		var w = bounds.width;
@@ -3405,7 +3424,7 @@
 			};
 		};
 		
-		function createTrapezoidHandleFunction(max, fixedDefaultValue)
+		function createTrapezoidHandleFunction(max, defaultValue, fixedDefaultValue)
 		{
 			max = (max != null) ? max : 0.5;
 			
@@ -3414,8 +3433,9 @@
 				var handles = [createHandle(state, ['size'], function(bounds)
 				{
 					var fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
-					var size = Math.max(0, Math.min(max, parseFloat(mxUtils.getValue(this.state.style, 'size', (fixed) ? 0 : TrapezoidShape.prototype.size))));
-					return new mxPoint(bounds.x + size * bounds.width * 0.75, bounds.y + bounds.height / 4);
+					var size = Math.max(0, parseFloat(mxUtils.getValue(this.state.style, 'size', (fixed) ? fixedDefaultValue : defaultValue)));
+					
+					return new mxPoint(bounds.x + Math.min(bounds.width * 0.75 * max, size * ((fixed) ? 0.75 : bounds.width * 0.75)), bounds.y + bounds.height / 4);
 				}, function(bounds, pt)
 				{
 					var fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
@@ -3435,7 +3455,7 @@
 		
 		function createDisplayHandleFunction(defaultValue, allowArcHandle, max, redrawEdges, fixedDefaultValue)
 		{
-			max = (max != null) ? max : 1;
+			max = (max != null) ? max : 0.5;
 			
 			return function(state)
 			{
@@ -3444,7 +3464,7 @@
 					var fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
 					var size = parseFloat(mxUtils.getValue(this.state.style, 'size', (fixed) ? fixedDefaultValue : defaultValue));
 	
-					return new mxPoint(bounds.x + Math.max(0, Math.min(bounds.width, size * ((fixed) ? 1 : bounds.width))), bounds.getCenterY());
+					return new mxPoint(bounds.x + Math.max(0, Math.min(bounds.width * 0.5, size * ((fixed) ? 1 : bounds.width))), bounds.getCenterY());
 				}, function(bounds, pt, me)
 				{
 					var fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
@@ -4074,8 +4094,8 @@
 			'cube': createCubeHandleFunction(1, CubeShape.prototype.size, false),
 			'card': createCubeHandleFunction(0.5, CardShape.prototype.size, true),
 			'loopLimit': createCubeHandleFunction(0.5, LoopLimitShape.prototype.size, true),
-			'trapezoid': createTrapezoidHandleFunction(0.5, HexagonShape.prototype.fixedSize),
-			'parallelogram': createTrapezoidHandleFunction(1)
+			'trapezoid': createTrapezoidHandleFunction(0.5, TrapezoidShape.prototype.size, TrapezoidShape.prototype.fixedSize),
+			'parallelogram': createTrapezoidHandleFunction(1, ParallelogramShape.prototype.size, ParallelogramShape.prototype.fixedSize)
 		};
 		
 		// Exposes custom handles

src/main/webapp/js/mxgraph/Sidebar.js

@@ -998,7 +998,7 @@ Sidebar.prototype.addGeneralPalette = function(expand)
 		this.createVertexTemplateEntry('ellipse;whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Circle', null, null, 'circle'),
 	 	this.createVertexTemplateEntry('shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;', 120, 60, '', 'Process', null, null, 'process task'),
 	 	this.createVertexTemplateEntry('rhombus;whiteSpace=wrap;html=1;', 80, 80, '', 'Diamond', null, null, 'diamond rhombus if condition decision conditional question test'),
-	 	this.createVertexTemplateEntry('shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;', 120, 60, '', 'Parallelogram'),
+	 	this.createVertexTemplateEntry('shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 60, '', 'Parallelogram'),
 	 	this.createVertexTemplateEntry('shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;', 120, 80, '', 'Hexagon', null, null, 'hexagon preparation'),
 	 	this.createVertexTemplateEntry('triangle;whiteSpace=wrap;html=1;', 60, 80, '', 'Triangle', null, null, 'triangle logic inverter buffer'),
 	 	this.createVertexTemplateEntry('shape=cylinder;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;', 60, 80, '', 'Cylinder', null, null, 'cylinder data database'),
@@ -1007,7 +1007,7 @@ Sidebar.prototype.addGeneralPalette = function(expand)
 	 	this.createVertexTemplateEntry('shape=internalStorage;whiteSpace=wrap;html=1;backgroundOutline=1;', 80, 80, '', 'Internal Storage'),
 	 	this.createVertexTemplateEntry('shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;', 120, 80, '', 'Cube'),
 	 	this.createVertexTemplateEntry('shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 80, '', 'Step'),
-	 	this.createVertexTemplateEntry('shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;', 120, 60, '', 'Trapezoid'),
+	 	this.createVertexTemplateEntry('shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 60, '', 'Trapezoid'),
 	 	this.createVertexTemplateEntry('shape=tape;whiteSpace=wrap;html=1;', 120, 100, '', 'Tape'),
 	 	this.createVertexTemplateEntry('shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;', 80, 100, '', 'Note'),
 	    this.createVertexTemplateEntry('shape=card;whiteSpace=wrap;html=1;', 80, 100, '', 'Card'),
@@ -2329,7 +2329,6 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell
 
 			// Handles special case where target should be ignored for stack layouts
 			var targetParent = graph.model.getParent(source);
-			var ignoreParent = false;
 			var validLayout = true;
 			
 			// Ignores parent if it has a stack layout or if it is a table or row
@@ -2345,15 +2344,14 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell
 			}
 			
 			// Checks if another container is at the drop location
+			var tmp = (graph.model.isEdge(source)) ? null : graph.view.getState(targetParent);
 			var dx = 0;
 			var dy = 0;
-			var tmp = graph.view.getState(targetParent);
 			
 			// Offsets by parent position
 			if (tmp != null)
 			{
-				var offset = new mxPoint((tmp.x / graph.view.scale - graph.view.translate.x),
-					(tmp.y / graph.view.scale - graph.view.translate.y));
+				var offset = tmp.origin;
 				dx = offset.x;
 				dy = offset.y;
 
@@ -2369,24 +2367,29 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell
 			var useParent = !graph.isTableRow(source) && !graph.isTableCell(source) &&
 				(graph.model.isEdge(source) || (sourceGeo != null &&
 				!sourceGeo.relative && validLayout));
+			
 			var tempTarget = graph.getCellAt((geo.x + dx + graph.view.translate.x) * graph.view.scale,
-				(geo.y + dy + graph.view.translate.y) * graph.view.scale);
+				(geo.y + dy + graph.view.translate.y) * graph.view.scale, null, null, null, function(state, x, y)
+				{
+					return !graph.isContainer(state.cell);
+				});
 			
-			if (tempTarget != null && tempTarget != targetParent &&
-				(graph.isContainer(tempTarget) || graph.isSwimlane(tempTarget)))
+			if (tempTarget != null && tempTarget != targetParent)
 			{
 				tmp = graph.view.getState(tempTarget);
 			
 				// Offsets by new parent position
 				if (tmp != null)
 				{
-					var offset = new mxPoint((tmp.x / graph.view.scale - graph.view.translate.x),
-						(tmp.y / graph.view.scale - graph.view.translate.y));
+					var offset = tmp.origin;
 					targetParent = tempTarget;
-					
-					geo.x -= offset.x - dx;
-					geo.y -= offset.y - dy;
 					useParent = true;
+					
+					if (!graph.model.isEdge(source))
+					{
+						geo.x -= offset.x - dx;
+						geo.y -= offset.y - dy;
+					}
 				}
 			}
 			else if (!validLayout || graph.isTableRow(source) || graph.isTableCell(source))
@@ -2413,7 +2416,8 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell
 			{
 				// Adds new terminal to edge
 				// LATER: Push new terminal out radially from edge start point
-				graph.model.setTerminal(source, targets[dropCellIndex], direction == mxConstants.DIRECTION_NORTH);
+				graph.model.setTerminal(source, targets[dropCellIndex],
+					direction == mxConstants.DIRECTION_NORTH);
 			}
 			else if (graph.model.isEdge(targets[dropCellIndex]))
 			{
@@ -2431,8 +2435,7 @@ Sidebar.prototype.dropAndConnect = function(source, targets, direction, dropCell
 					// Adds parent offset to other nodes
 					var tmpState = graph.view.getState(targetParent);
 					var offset = (tmpState.cell != graph.view.currentRoot) ?
-						new mxPoint((tmpState.x / graph.view.scale - graph.view.translate.x),
-						(tmpState.y / graph.view.scale - graph.view.translate.y)) : new mxPoint(0, 0);
+						tmpState.origin : new mxPoint(0, 0);
 
 					graph.cellsMoved(targets, offset.x, offset.y, null, null, true);
 				}
@@ -2525,7 +2528,8 @@ Sidebar.prototype.getDropAndConnectGeometry = function(source, target, direction
 			var length = graph.defaultEdgeLength;
 			
 			// Maintains edge length
-			if (graph.model.isEdge(target) && geo2.getTerminalPoint(true) != null && geo2.getTerminalPoint(false) != null)
+			if (graph.model.isEdge(target) && geo2.getTerminalPoint(true) != null &&
+				geo2.getTerminalPoint(false) != null)
 			{
 				var p0 = geo2.getTerminalPoint(true);
 				var pe = geo2.getTerminalPoint(false);
@@ -2596,7 +2600,8 @@ Sidebar.prototype.getDropAndConnectGeometry = function(source, target, direction
 				}
 				
 				// Adds offset to match cells without connecting edge
-				if (graph.model.isEdge(target) && geo2.getTerminalPoint(true) != null && target.getTerminal(false) != null)
+				if (graph.model.isEdge(target) && geo2.getTerminalPoint(true) != null &&
+					target.getTerminal(false) != null)
 				{
 					var targetGeo = graph.getCellGeometry(target.getTerminal(false));
 					
@@ -2675,12 +2680,12 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 	
 	for (var i = 0; i < cells.length; i++)
 	{
-		if (firstVertex == null && this.editorUi.editor.graph.model.isVertex(cells[i]))
+		if (firstVertex == null && graph.model.isVertex(cells[i]))
 		{
 			firstVertex = i;
 		}
-		else if (freeSourceEdge == null && this.editorUi.editor.graph.model.isEdge(cells[i]) &&
-				this.editorUi.editor.graph.model.getTerminal(cells[i], true) == null)
+		else if (freeSourceEdge == null && graph.model.isEdge(cells[i]) &&
+				graph.model.getTerminal(cells[i], true) == null)
 		{
 			freeSourceEdge = i;
 		}
@@ -2693,7 +2698,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 	
 	var dropStyleEnabled = this.isDropStyleEnabled(cells, firstVertex);
 	
-	var dragSource = mxUtils.makeDraggable(elt, this.editorUi.editor.graph, mxUtils.bind(this, function(graph, evt, target, x, y)
+	var dragSource = mxUtils.makeDraggable(elt, graph, mxUtils.bind(this, function(graph, evt, target, x, y)
 	{
 		if (this.updateThread != null)
 		{
@@ -2963,14 +2968,20 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 	{
 		// Alt means no targets at all
 		// LATER: Show preview where result will go
-		var cell = (!mxEvent.isAltDown(evt) && cells != null) ? graph.getCellAt(x, y) : null;
+		var cell = (!mxEvent.isAltDown(evt) && cells != null) ?
+			graph.getCellAt(x, y, null, null, null, function(state, x, y)
+			{
+				return graph.isContainer(state.cell);
+			}) : null;
 		
 		// Uses connectable parent vertex if one exists
-		if (cell != null && !this.graph.isCellConnectable(cell))
+		if (cell != null && !this.graph.isCellConnectable(cell) &&
+			!this.graph.model.isEdge(cell))
 		{
 			var parent = this.graph.getModel().getParent(cell);
 			
-			if (this.graph.getModel().isVertex(parent) && this.graph.isCellConnectable(parent))
+			if (this.graph.getModel().isVertex(parent) &&
+				this.graph.isCellConnectable(parent))
 			{
 				cell = parent;
 			}
@@ -2989,9 +3000,9 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 		// Time on target
 		if (prev != state)
 		{
-			prev = state;
 			startTime = new Date().getTime();
 			timeOnTarget = 0;
+			prev = state;
 
 			if (this.updateThread != null)
 			{
@@ -3172,7 +3183,8 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 			(timeOnTarget > 500 && activeArrow == null && validTarget))))
 		{
 			activeTarget = false;
-			currentTargetState = ((timeOnTarget < 5000 && timeOnTarget > this.dropTargetDelay) || graph.model.isEdge(cell)) ? state : null;
+			currentTargetState = ((timeOnTarget < 5000 && timeOnTarget > this.dropTargetDelay) ||
+				graph.model.isEdge(cell)) ? state : null;
 
 			if (currentTargetState != null && validTarget)
 			{
@@ -3311,7 +3323,8 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 			if (activeArrow != null || !graph.isSplitTarget(target, cells, evt))
 			{
 				// Selects parent group as drop target
-				while (target != null && !graph.isValidDropTarget(target, cells, evt) && model.isVertex(model.getParent(target)))
+				while (target != null && !graph.isValidDropTarget(target, cells, evt) &&
+					model.isVertex(model.getParent(target)))
 				{
 					target = model.getParent(target);
 				}
@@ -3368,7 +3381,8 @@ Sidebar.prototype.itemClicked = function(cells, ds, evt, elt)
 	graph.container.focus();
 	
 	// Alt+Click inserts and connects
-	if (mxEvent.isAltDown(evt) && graph.getSelectionCount() == 1 && graph.model.isVertex(graph.getSelectionCell()))
+	if (mxEvent.isAltDown(evt) && graph.getSelectionCount() == 1 &&
+		graph.model.isVertex(graph.getSelectionCell()))
 	{
 		var firstVertex = null;
 		
@@ -3382,7 +3396,8 @@ Sidebar.prototype.itemClicked = function(cells, ds, evt, elt)
 		
 		if (firstVertex != null)
 		{
-			graph.setSelectionCells(this.dropAndConnect(graph.getSelectionCell(), cells, (mxEvent.isMetaDown(evt) || mxEvent.isControlDown(evt)) ?
+			graph.setSelectionCells(this.dropAndConnect(graph.getSelectionCell(), cells,
+				(mxEvent.isMetaDown(evt) || mxEvent.isControlDown(evt)) ?
 				(mxEvent.isShiftDown(evt) ? mxConstants.DIRECTION_WEST : mxConstants.DIRECTION_NORTH) : 
 				(mxEvent.isShiftDown(evt) ? mxConstants.DIRECTION_EAST : mxConstants.DIRECTION_SOUTH),
 				firstVertex, evt));

src/main/webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draw.io",
-  "version": "13.4.5",
+  "version": "13.5.2",
   "description": "diagrams.net desktop",
   "main": "electron.js",
   "scripts": {
@@ -23,15 +23,15 @@
   },
   "homepage": "https://github.com/jgraph/drawio",
   "dependencies": {
-    "commander": "^5.1.0",
-    "electron-log": "^4.2.0",
+    "commander": "^6.0.0",
+    "electron-log": "^4.2.2",
     "electron-updater": "^4.3.1",
     "electron-progressbar": "^1.2.0",
-    "electron-store": "^5.2.0",
+    "electron-store": "^6.0.0",
     "compression": "^1.7.4",
     "crc": "^3.8.0"
   },
   "devDependencies": {
-    "electron": "^9.1.0"
+    "electron": "^9.1.1"
   }
 }

src/main/webapp/well-known/microsoft-identity-association.json

@@ -11,6 +11,9 @@
     },
     {
       "applicationId": "b5ff67d6-3155-4fca-965a-59a3655c4476"
+    },
+    {
+      "applicationId": "417a451a-a343-4788-b6c1-901e63182565"
     }
   ]
 }