13.7.3 release

ChangeLog

@@ -1,3 +1,9 @@
+17-SEP-2020: 13.7.3
+
+- Moves viewer to viewer.diagrams.net
+- Improves shape picker position
+- Uses mxGraph 4.2.1 beta 17
+
 16-SEP-2020: 13.7.2
 
 - Removes PWA on draw.io domains

VERSION

@@ -1 +1 @@
-13.7.2
+13.7.3

etc/build/build.xml

@@ -32,9 +32,9 @@
 	<target name="app" depends="merge">
 		<delete file="${basedir}/.tmp0.js"/>
 		<echo file="${basedir}/.tmp0.js">
-			window.STENCIL_PATH = window.STENCIL_PATH || 'https://www.draw.io/stencils';
-			window.SHAPES_PATH = window.SHAPES_PATH || 'https://www.draw.io/shapes';
-			window.mxBasePath = window.mxBasePath || 'https://www.draw.io/mxgraph/';
+			window.STENCIL_PATH = window.STENCIL_PATH || 'https://viewer.diagrams.net/stencils';
+			window.SHAPES_PATH = window.SHAPES_PATH || 'https://viewer.diagrams.net/shapes';
+			window.mxBasePath = window.mxBasePath || 'https://viewer.diagrams.net/mxgraph/';
 			window.mxLoadStylesheets = window.mxLoadStylesheets || false;
 		</echo>
 

etc/mxgraph/mxClient.js

@@ -503,8 +503,8 @@ mxText.prototype.getTextCss=function(){var a="display: inline-block; font-size:
 var b=[];(this.fontStyle&mxConstants.FONT_UNDERLINE)==mxConstants.FONT_UNDERLINE&&b.push("underline");(this.fontStyle&mxConstants.FONT_STRIKETHROUGH)==mxConstants.FONT_STRIKETHROUGH&&b.push("line-through");0<b.length&&(a+="text-decoration: "+b.join(" ")+"; ");return a};
 mxText.prototype.redrawHtmlShape=function(){if(mxClient.IS_SVG)this.redrawHtmlShapeWithCss3();else{var a=this.node.style;a.whiteSpace="normal";a.overflow="";a.width="";a.height="";this.updateValue();this.updateFont(this.node);this.updateSize(this.node,null==this.state||null==this.state.view.textDiv);this.offsetHeight=this.offsetWidth=null;mxClient.IS_IE&&(null==document.documentMode||8>=document.documentMode)?this.updateHtmlFilter():this.updateHtmlTransform()}};
 mxText.prototype.redrawHtmlShapeWithCss3=function(){var a=Math.max(0,Math.round(this.bounds.width/this.scale)),b=Math.max(0,Math.round(this.bounds.height/this.scale)),c="position: absolute; left: "+Math.round(this.bounds.x)+"px; top: "+Math.round(this.bounds.y)+"px; pointer-events: none; ",d=this.getTextCss();mxSvgCanvas2D.createCss(a+2,b,this.align,this.valign,this.wrap,this.overflow,this.clipped,null!=this.background?mxUtils.htmlEntities(this.background):null,null!=this.border?mxUtils.htmlEntities(this.border):
-null,c,d,this.scale,mxUtils.bind(this,function(a,b,c,d,l,m){a=this.getTextRotation();a=(1!=this.scale?"scale("+this.scale+") ":"")+(0!=a?"rotate("+a+"deg) ":"")+(0!=this.margin.x||0!=this.margin.y?"translate("+100*this.margin.x+"%,"+100*this.margin.y+"%)":"");""!=a&&(a="transform-origin: 0 0; transform: "+a+"; ");""==m?(c+=d,d="display:inline-block; min-width: 100%; "+a):d+=a;100>this.opacity&&(l+="opacity: "+this.opacity/100+"; ");this.node.setAttribute("style",c);c=mxUtils.isNode(this.value)?this.value.outerHTML:
-this.getHtmlValue();null==this.node.firstChild&&(this.node.innerHTML="<div><div>"+c+"</div></div>");this.node.firstChild.firstChild.setAttribute("style",l);this.node.firstChild.setAttribute("style",d)}))};
+null,c,d,this.scale,mxUtils.bind(this,function(a,b,c,d,l,m){a=this.getTextRotation();a=(1!=this.scale?"scale("+this.scale+") ":"")+(0!=a?"rotate("+a+"deg) ":"")+(0!=this.margin.x||0!=this.margin.y?"translate("+100*this.margin.x+"%,"+100*this.margin.y+"%)":"");""!=a&&(a="transform-origin: 0 0; transform: "+a+"; ");""==m?(c+=d,d="display:inline-block; min-width: 100%; "+a):(d+=a,mxClient.IS_SF&&(d+="-webkit-clip-path: content-box;"));100>this.opacity&&(l+="opacity: "+this.opacity/100+"; ");this.node.setAttribute("style",
+c);c=mxUtils.isNode(this.value)?this.value.outerHTML:this.getHtmlValue();null==this.node.firstChild&&(this.node.innerHTML="<div><div>"+c+"</div></div>");this.node.firstChild.firstChild.setAttribute("style",l);this.node.firstChild.setAttribute("style",d)}))};
 mxText.prototype.updateHtmlTransform=function(){var a=this.getTextRotation(),b=this.node.style,c=this.margin.x,d=this.margin.y;0!=a?(mxUtils.setPrefixedStyle(b,"transformOrigin",100*-c+"% "+100*-d+"%"),mxUtils.setPrefixedStyle(b,"transform","translate("+100*c+"%,"+100*d+"%) scale("+this.scale+") rotate("+a+"deg)")):(mxUtils.setPrefixedStyle(b,"transformOrigin","0% 0%"),mxUtils.setPrefixedStyle(b,"transform","scale("+this.scale+") translate("+100*c+"%,"+100*d+"%)"));b.left=Math.round(this.bounds.x-
 Math.ceil(c*("fill"!=this.overflow&&"width"!=this.overflow?3:1)))+"px";b.top=Math.round(this.bounds.y-d*("fill"!=this.overflow?3:1))+"px";b.opacity=100>this.opacity?this.opacity/100:""};
 mxText.prototype.updateInnerHtml=function(a){if(mxUtils.isNode(this.value))a.innerHTML=this.value.outerHTML;else{var b=this.value;this.dialect!=mxConstants.DIALECT_STRICTHTML&&(b=mxUtils.htmlEntities(b,!1));b=mxUtils.replaceTrailingNewlines(b,"<div>&nbsp;</div>");b=this.replaceLinefeeds?b.replace(/\n/g,"<br/>"):b;a.innerHTML='<div style="display:inline-block;_display:inline;">'+b+"</div>"}};

src/main/webapp/WEB-INF/appengine-web.xml

@@ -13,8 +13,10 @@
   <!-- Path patterns not supported in production -->
   <static-files>
     <include path="/**">
-      <http-header name="Referrer-Policy" value="strict-origin" />
+      <http-header name="Referrer-Policy" value="strict-origin"/>
 	  <http-header name="Access-Control-Allow-Origin" value="*"/>
+	  <http-header name="X-XSS-Protection" value="1; mode=block"/>
+	  <http-header name="X-Content-Type-Options" value="nosniff"/>
 	</include>
   </static-files>
 

src/main/webapp/js/diagramly/App.js

@@ -581,8 +581,8 @@ App.main = function(callback, createUi)
 			if ('serviceWorker' in navigator && (/.*\.diagrams\.net$/.test(window.location.hostname) ||
 				/.*\.draw\.io$/.test(window.location.hostname) || urlParams['offline'] == '1'))
 			{
-				// Removes PWA cache on www.draw.io to force use of new domain
-				if (urlParams['offline'] == '0' || /.*\.draw\.io$/.test(window.location.hostname) ||
+				// Removes PWA cache on www.draw.io to force use of new domain via redirect
+				if (urlParams['offline'] == '0' || /www\.draw\.io$/.test(window.location.hostname) ||
 					(urlParams['offline'] != '1' && urlParams['dev'] == '1'))
 				{
 					navigator.serviceWorker.getRegistrations().then(function(registrations)

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

@@ -12,7 +12,7 @@ if (!mxIsElectron && location.protocol !== 'http:')
 	{
 		var csp = 'default-src \'self\'; ' +
 			// storage.googleapis.com is needed for workbox-service-worker
-			'script-src %script-src% \'self\' https://storage.googleapis.com ' +
+			'script-src %script-src% \'self\' https://viewer.diagrams.net https://storage.googleapis.com ' +
 				'https://apis.google.com https://*.pusher.com https://code.jquery.com ' +
 				// Bootstrap script in index.html (checked for changes in App.main
 				// in dev mode to avoid deployment without updating this SHA)

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

@@ -5315,13 +5315,10 @@
 			'" data-mxgraph="' + mxUtils.htmlEntities(JSON.stringify(data)) + '"></div>';
 		
 		var fetchParam = (publicUrl != null) ? '&fetch=' + encodeURIComponent(publicUrl) : '';
-		var s2 = (fetchParam.length > 0) ?
-			(((urlParams['dev'] == '1') ?
-			'https://test.draw.io/embed2.js?dev=1' :
-			EditorUi.drawHost + '/embed2.js?')) + fetchParam :
-			(((urlParams['dev'] == '1') ?
-			'https://test.draw.io/js/viewer-static.min.js' :
-			window.VIEWER_URL ? window.VIEWER_URL : EditorUi.drawHost + '/js/viewer-static.min.js'));
+		var s2 = (fetchParam.length > 0) ? (((urlParams['dev'] == '1') ?
+			'https://test.draw.io/embed2.js?dev=1' : EditorUi.lightboxHost + '/embed2.js?')) + fetchParam :
+			(((urlParams['dev'] == '1') ? 'https://test.draw.io/js/viewer-static.min.js' :
+			window.VIEWER_URL ? window.VIEWER_URL : EditorUi.lightboxHost + '/js/viewer-static.min.js'));
 		var src = '<script type="text/javascript" src="' + s2 + '"></script>';
 		
 		fn(value, src);
@@ -8822,7 +8819,7 @@
 			
 			if (urlParams['dev'] == '1')
 			{
-				params += ((params.length > 0) ? '&' : '?') + 'dev=1&drawdev=1';
+				params += ((params.length > 0) ? '&' : '?') + 'dev=1';
 			}
 			
 			return editorGetEditBlankUrl.apply(this, arguments);

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

@@ -4137,6 +4137,7 @@ LucidImporter = {};
 			if (text.t != null)
 			{
 				var txt = text.t;
+				txt = txt.replace(/\u2028/g, '\n'); //Special unicide line separator
 				var m = text.m;
 				
 				//Convert text object to HTML if needed

src/main/webapp/js/diagramly/Init.js

@@ -362,7 +362,7 @@ if (window.location.hostname == 'embed.diagrams.net')
 }	
 
 // Uses lightbox mode on viewer domain
-if (window.location.hostname == 'viewer.diagrams.net')
+if (window.location.hostname == DRAWIO_LIGHTBOX_URL.substring(DRAWIO_LIGHTBOX_URL.indexOf('//') + 2))
 {
 	urlParams['lightbox'] = '1';
 }	

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

@@ -1821,7 +1821,7 @@
 			var bounds = graph.getGraphBounds();
 			
 			editorUi.showPublishLinkDialog(mxResources.get('iframe'), null, '100%',
-				(Math.ceil((bounds.y + bounds.height - graph.view.translate.y) / graph.view.scale) + 2),
+				Math.ceil(bounds.height / graph.view.scale) + 2,
 				function(linkTarget, linkColor, allPages, lightbox, editLink, layers, width, height)
 			{
 				if (editorUi.spinner.spin(document.body, mxResources.get('loading')))

src/main/webapp/js/diagramly/mxRuler.js

@@ -19,6 +19,10 @@
 
 function mxRuler(editorUi, unit, isVertical, isSecondery) 
 {
+	var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                           		window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+	var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
 	var RULER_THICKNESS = this.RULER_THICKNESS;
     var ruler = this;
     this.unit = unit;
@@ -244,6 +248,25 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
         ctx.fillRect(0, 0, RULER_THICKNESS, RULER_THICKNESS);
     };
     
+	var animationId = -1;
+
+	var listenersDrawRuler = function() 
+	{
+		if (requestAnimationFrame != null)
+		{
+			if (cancelAnimationFrame != null)
+			{
+				cancelAnimationFrame(animationId);	
+			}
+
+			animationId = requestAnimationFrame(drawRuler);
+		}
+		else
+		{
+			drawRuler();
+		}
+	};
+	
 	var sizeListener = function() 
 	{
 	    var div = graph.container;
@@ -256,7 +279,7 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
     		{
 	    		canvas.height = newH;
 	    		container.style.height = newH + 'px';
-	    		drawRuler();
+	    		listenersDrawRuler();
     		}
     	}
 	    else 
@@ -267,19 +290,19 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
     		{
 	    		canvas.width = newW;
 	    		container.style.width = newW + 'px';
-	    		drawRuler();
+	    		listenersDrawRuler();
     		}
     	}
     };
 
-    this.drawRuler = drawRuler;
+    this.drawRuler = listenersDrawRuler;
 
 	var efficientSizeListener = debounce(sizeListener, 10);
 	this.sizeListener = efficientSizeListener;
 	
 	this.pageListener = function()
 	{
-		drawRuler();
+		listenersDrawRuler();
 	};
 	
 	var efficientScrollListener = debounce(function()
@@ -289,7 +312,7 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
 		if (ruler.lastScroll != newScroll)
 		{
 			ruler.lastScroll = newScroll;
-			drawRuler();
+			listenersDrawRuler();
 		}
 	}, 10);
 
@@ -308,6 +331,11 @@ function mxRuler(editorUi, unit, isVertical, isSecondery)
 
     function debounce(func, wait, immediate) 
     {
+		if (requestAnimationFrame != null)
+		{
+			return func;
+		}
+		
         var timeout;
         return function() {
             var context = this, args = arguments;

src/main/webapp/js/extensions.min.js

@@ -4,8 +4,8 @@ LucidImporter={};
 c+";"));if(a.b&&a.b.v||a.fc&&a.fc.v&&0==a.fc.v.indexOf("Bold"))d+="font-weight: bold;";a.i&&a.i.v&&(d+="font-style: italic;");a.u&&a.u.v&&(d+="text-decoration: underline;");B||(d+="text-align: "+(a.a?a.a.v:"center")+";");a.il&&(d+="margin-left: "+Math.round(.6*a.il.v-(B?21:0))+"px;");a.ir&&(d+="margin-right: "+Math.round(.6*a.ir.v)+"px;");a.mt&&(d+="margin-top: "+Math.round(.6*a.mt.v)+"px;");a.mb&&(d+="margin-bottom: "+Math.round(.6*a.mb.v)+"px;");d+='">';p.push(n);return d}function k(a,b,d,k){a=
 a?a.substring(b,d):"";"\n"==a&&(a="");a=a.replace(/</g,"&lt;").replace(/>/g,"&gt;");do for(b=p.pop(),d=0;d<b;d++){var c=g.pop();"li"==c&&(e=!1);a+="</"+c+">"}while(k&&0<g.length);return a}for(var n=[],c=-1,f="";-1<(c=a.indexOf("\n",c+1));)n.push(c+1);b.sort(function(a,b){return a.s-b.s});for(var u={},c=[],m=0;m<b.length;m++){var x=b[m];if(null==u[x.s]){for(var z=0;z<n.length;z++)if(n[z]>x.s){u[x.s]=n[z];break}null==u[x.s]&&(u[x.s]=a.length)}null==x.e&&(x.e=u[x.s]);c.push(x)}c.sort(function(a,b){return a.e-
 b.e});for(var z=m=0,n={},g=[],p=[],B=!1,Da,e=!1,x=u=0;m>=z&&(m<b.length||z<c.length);){var A=b[m],C=c[z];if(A&&C&&A.s<C.e){u=A.s;C=!1;for(0<u-x&&(f+=d(n,C)+k(a,x,u));null!=A&&A.s==u;){if("a"==A.n||"il"==A.n||"ir"==A.n||"mt"==A.n||"mb"==A.n||"t"==A.n)C=!0;n[A.n]=A;A=b[++m]}f+=d(n,C)}else if(C){x=C.e;do delete n[C.n],C=c[++z];while(null!=C&&C.e==x);f+=k(a,u,x);u=x}}return f+=k(null,null,null,!0)}function g(a){y=!1;var b=null!=a.Text?a.Text:null!=a.Value?a.Value:a.Lane_0;null==b&&null!=a.State?null!=
-a.State.t&&(b=a.State):null==b&&null!=a.Note?null!=a.Note.t&&(b=a.Note):null==b&&null!=a.Title?null!=a.Title.t&&(b=a.Title):null!=a.t&&(b=a);null==b&&null!=a.TextAreas?null!=a.TextAreas.Text&&null!=a.TextAreas.Text.Value&&null!=a.TextAreas.Text.Value.t&&(b=a.TextAreas.Text.Value):null==b&&null!=a.t0&&null!=a.t0.t&&(b=a.t0);if(null!=b){if(null!=b.t){a=b.t;b=b.m;try{for(var d=0;d<b.length;d++)if(0<b[d].s){y=!0;break}if(y)return f(a,b)}catch(la){console.log(la)}a=a.replace(/</g,"&lt;");return a=a.replace(/>/g,
-"&gt;")}if(null!=b.Value&&null!=b.Value.t)return b.Value.t=b.Value.t.replace(/</g,"&lt;"),b.Value.t=b.Value.t.replace(/>/g,"&gt;"),b.Value.t}return""}function p(a){return null!=a.Action?a.Action:a}function e(a){if(null!=a.Text){if(null!=a.Text.m)return a.Text.m}else if(null!=a.TextAreas){if(null!=a.TextAreas.Text&&null!=a.TextAreas.Text.Value&&null!=a.TextAreas.Text.Value.m)return a.TextAreas.Text.Value.m}else{if(null!=a.m)return a.m;if(null!=a.Title&&null!=a.Title.m)return a.Title.m}return null}
+a.State.t&&(b=a.State):null==b&&null!=a.Note?null!=a.Note.t&&(b=a.Note):null==b&&null!=a.Title?null!=a.Title.t&&(b=a.Title):null!=a.t&&(b=a);null==b&&null!=a.TextAreas?null!=a.TextAreas.Text&&null!=a.TextAreas.Text.Value&&null!=a.TextAreas.Text.Value.t&&(b=a.TextAreas.Text.Value):null==b&&null!=a.t0&&null!=a.t0.t&&(b=a.t0);if(null!=b){if(null!=b.t){a=b.t;a=a.replace(/\u2028/g,"\n");b=b.m;try{for(var d=0;d<b.length;d++)if(0<b[d].s){y=!0;break}if(y)return f(a,b)}catch(la){console.log(la)}a=a.replace(/</g,
+"&lt;");return a=a.replace(/>/g,"&gt;")}if(null!=b.Value&&null!=b.Value.t)return b.Value.t=b.Value.t.replace(/</g,"&lt;"),b.Value.t=b.Value.t.replace(/>/g,"&gt;"),b.Value.t}return""}function p(a){return null!=a.Action?a.Action:a}function e(a){if(null!=a.Text){if(null!=a.Text.m)return a.Text.m}else if(null!=a.TextAreas){if(null!=a.TextAreas.Text&&null!=a.TextAreas.Text.Value&&null!=a.TextAreas.Text.Value.m)return a.TextAreas.Text.Value.m}else{if(null!=a.m)return a.m;if(null!=a.Title&&null!=a.Title.m)return a.Title.m}return null}
 function m(b,c){var n=(c?(Za(n,"overflow")?"":"overflow=width;")+(Za(n,"html")?"":"html=1;"):a(b)+d(b)+k(b)+u(b)+x(b)+z(b)+B(b)+C(b))+A(b)+D(b);return n}function c(a,d,k,c,n){var h="";null!=a&&""!=a&&";"!=a.charAt(a.length-1)&&(h=";");return h+=(n?(Za(a,"overflow")?"":"overflow=width;")+(Za(a,"html")?"":"html=1;"):b(mxConstants.STYLE_FONTSIZE,a,d,k,c)+b(mxConstants.STYLE_FONTCOLOR,a,d,k,c)+b(mxConstants.STYLE_FONTSTYLE,a,d,k,c)+b(mxConstants.STYLE_ALIGN,a,d,k,c)+b(mxConstants.STYLE_SPACING_LEFT,a,
 d,k,c)+b(mxConstants.STYLE_SPACING_RIGHT,a,d,k,c)+b(mxConstants.STYLE_SPACING_TOP,a,d,k,c)+b(mxConstants.STYLE_SPACING_BOTTOM,a,d,k,c))+b(mxConstants.STYLE_SPACING,a,d,k,c)+b(mxConstants.STYLE_VERTICAL_ALIGN,a,d,k,c)+b(mxConstants.STYLE_STROKECOLOR,a,d,k,c)+b(mxConstants.STYLE_OPACITY,a,d,k,c)+b(mxConstants.STYLE_ROUNDED,a,d,k,c)+b(mxConstants.STYLE_ROTATION,a,d,k,c)+b(mxConstants.STYLE_FLIPH,a,d,k,c)+b(mxConstants.STYLE_FLIPV,a,d,k,c)+b(mxConstants.STYLE_SHADOW,a,d,k,c)+b(mxConstants.STYLE_FILLCOLOR,
 a,d,k,c)+b(mxConstants.STYLE_DASHED,a,d,k,c)+b(mxConstants.STYLE_STROKEWIDTH,a,d,k,c)+b(mxConstants.STYLE_IMAGE,a,d,k,c)}function b(b,c,n,f,h){if(!Za(c,b))switch(b){case mxConstants.STYLE_FONTSIZE:return a(n);case mxConstants.STYLE_FONTCOLOR:return d(n);case mxConstants.STYLE_FONTSTYLE:return k(n);case mxConstants.STYLE_ALIGN:return u(n);case mxConstants.STYLE_SPACING_LEFT:return x(n);case mxConstants.STYLE_SPACING_RIGHT:return z(n);case mxConstants.STYLE_SPACING_TOP:return B(n);case mxConstants.STYLE_SPACING_BOTTOM:return C(n);

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

@@ -1221,10 +1221,14 @@ EditorUi.prototype.installShapePicker = function()
 						geo = graph.getCellGeometry(temp);
 					}
 					
-					ui.showShapePicker(me.getGraphX(), me.getGraphY(), temp, mxUtils.bind(this, function(cell)
+					// Asynchronous to avoid direct insert after double tap
+					window.setTimeout(mxUtils.bind(this, function()
 					{
-						execute(cell);
-					}), dir);
+						ui.showShapePicker(me.getGraphX(), me.getGraphY(), temp, mxUtils.bind(this, function(cell)
+						{
+							execute(cell);
+						}), dir);
+					}), 30);
 				}), mxUtils.bind(this, function(result)
 				{
 					this.graph.selectCellsForConnectVertex(result, evt, this);
@@ -1260,27 +1264,7 @@ EditorUi.prototype.showShapePicker = function(x, y, source, callback, direction)
 		div.style.cssText = 'position:absolute;left:' + x + 'px;top:' + y +
 			'px;width:140px;border-radius:10px;padding:4px;text-align:center;' +
 			'box-shadow:0px 0px 3px 1px #d1d1d1;padding: 6px 0 8px 0;';
-		
-		if (direction == mxConstants.DIRECTION_NORTH)
-		{
-			mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-50%,-100%)');
-		}
-		else if (direction == mxConstants.DIRECTION_SOUTH)
-		{
-			mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-50%,0%)');
-		}
-		else if (direction == mxConstants.DIRECTION_WEST)
-		{
-			mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-100%,-50%)');
-		}
-		else if (direction == mxConstants.DIRECTION_EAST)
-		{
-			mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(0%,-50%)');
-		}
-		else
-		{
-			mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-22px,-22px)');
-		}
+		mxUtils.setPrefixedStyle(div.style, 'transform', 'translate(-22px,-22px)');
 		
 		if (graph.background != null && graph.background != mxConstants.NONE)
 		{

src/main/webapp/package.json

@@ -23,15 +23,15 @@
   },
   "homepage": "https://github.com/jgraph/drawio",
   "dependencies": {
-    "commander": "^6.0.0",
-    "electron-log": "^4.2.2",
-    "electron-updater": "^4.3.1",
-    "electron-progressbar": "^1.2.0",
+    "commander": "^6.1.0",
+    "electron-log": "^4.2.4",
+    "electron-updater": "^4.3.4",
+    "electron-progressbar": "1.1.5",
     "electron-store": "^6.0.0",
     "compression": "^1.7.4",
     "crc": "^3.8.0"
   },
   "devDependencies": {
-    "electron": "^9.1.1"
+    "electron": "^10.1.2"
   }
 }

src/main/webapp/service-worker.js

@@ -6,11 +6,11 @@ if (workbox)
 	workbox.precaching.precacheAndRoute([
   {
     "url": "js/app.min.js",
-    "revision": "045d5e9faff926eaf7c7002c8cbfb6c9"
+    "revision": "45047a15101629583ab0b42062eead4f"
   },
   {
     "url": "js/extensions.min.js",
-    "revision": "b062463af07ad2be2d6d413059358317"
+    "revision": "d39776c1b124b1c6af6953932b53911e"
   },
   {
     "url": "js/shapes.min.js",