12.3.4 release

ChangeLog

@@ -1,3 +1,9 @@
+02-DEC-2019: 12.3.4
+
+- Fixes Gliffy global text size setting on import
+- Fixes settings override with configuration
+- Adds custom fonts in print output
+
 28-NOV-2019: 12.3.3
 
 - Adds more ERD shapes

VERSION

@@ -1 +1 @@
-12.3.3
+12.3.4

src/main/java/com/mxgraph/io/gliffy/importer/GliffyDiagramConverter.java

@@ -712,6 +712,7 @@ public class GliffyDiagramConverter
 					cell.setValue(fragmentText);
 					gliffyObject.children.remove(0);
 				}
+				setFontSizeBasedOnGlobal(style);
 			}
 			else if (gliffyObject.isLine())
 			{
@@ -736,6 +737,7 @@ public class GliffyDiagramConverter
 				textObject = gliffyObject;
 				cell.setVertex(true);
 				style.append("text;html=1;nl2Br=0;");
+//				setFontSizeBasedOnGlobal(style);
 				cell.setValue(gliffyObject.getText());
 
 				//if text is a child of a cell, use relative geometry and set X and Y to 0
@@ -1032,6 +1034,15 @@ public class GliffyDiagramConverter
 		return cell;
 	}
 
+	private void setFontSizeBasedOnGlobal(StringBuilder style)
+	{
+		if (gliffyDiagram.stage.getTextStyles() != null && gliffyDiagram.stage.getTextStyles().getGlobal() != null
+				&& gliffyDiagram.stage.getTextStyles().getGlobal().getSize() != null)
+		{
+			style.append("fontSize=" + gliffyDiagram.stage.getTextStyles().getGlobal().getSize() + ";");
+		}
+	}
+
 	/**
 	 * Rotate objects inside Group
 	 * 

src/main/java/com/mxgraph/io/gliffy/model/GliffyObject.java

@@ -293,7 +293,8 @@ public class GliffyObject implements PostDeserializable
 		GliffyText text = graphic.getText();
 		//TODO These values are heuristics based on analyzing many files. 6 is a range from 2 to 6 so used the maximum
 		int widthDiff = "none".equals(text.overflow)? -3 : 6;
-		return "<div style='width: "+ (width + widthDiff) +"px;height: "+ height +"px;word-break: break-word;'>" + text.getHtml() + "</div>";
+		return "<div style='width: "+ (width + widthDiff) +"px;height:auto;word-break: break-word;'>" + text.getHtml() + "</div>";
+
 	}
 
 	/**

src/main/java/com/mxgraph/io/gliffy/model/GlobalTextStyles.java

@@ -0,0 +1,28 @@
+package com.mxgraph.io.gliffy.model;
+
+public class GlobalTextStyles
+{
+	private String size;
+
+	private String color;
+
+	public String getSize()
+	{
+		return size != null ? size.substring(0, size.indexOf("px")) : size;
+	}
+
+	public void setSize(String size)
+	{
+		this.size = size;
+	}
+
+	public String getColor()
+	{
+		return color;
+	}
+
+	public void setColor(String color)
+	{
+		this.color = color;
+	}
+}

src/main/java/com/mxgraph/io/gliffy/model/Stage.java

@@ -20,6 +20,8 @@ public class Stage
 	private List<GliffyObject> objects;
 	
 	private List<GliffyLayer> layers;
+	
+	private TextStyles textStyles;
 
 	public Stage()
 	{
@@ -102,4 +104,14 @@ public class Stage
 	public void setLayers(List<GliffyLayer> layers) {
 		this.layers = layers;
 	}
+
+	public TextStyles getTextStyles()
+	{
+		return textStyles;
+	}
+
+	public void setTextStyles(TextStyles textStyles)
+	{
+		this.textStyles = textStyles;
+	}
 }

src/main/java/com/mxgraph/io/gliffy/model/TextStyles.java

@@ -0,0 +1,16 @@
+package com.mxgraph.io.gliffy.model;
+
+public class TextStyles
+{
+	private GlobalTextStyles global;
+
+	public GlobalTextStyles getGlobal()
+	{
+		return global;
+	}
+
+	public void setGlobal(GlobalTextStyles global)
+	{
+		this.global = global;
+	}
+}

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 11/28/2019 09:05 AM
+# 12/02/2019 11:41 AM
 
 app.html
 index.html?offline=1

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

@@ -5493,7 +5493,7 @@ App.prototype.updateHeader = function()
 		this.appIcon.style.width = '28px';
 		this.appIcon.style.height = (this.menubarHeight - 28) + 'px';
 		this.appIcon.style.margin = '14px 0px 8px 20px';
-		this.appIcon.style.opacity = '0.75';
+		this.appIcon.style.opacity = '0.85';
 		this.appIcon.style.borderRadius = '3px';
 		
 		if (uiTheme != 'dark')

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

@@ -5213,6 +5213,29 @@
 							doc.writeln(editorUi.editor.fontCss);
 							doc.writeln('</style>');
 						}
+						
+						if (thisGraph.extFonts != null)
+						{
+							for (var i = 0; i < thisGraph.extFonts.length; i++)
+							{
+								var fontName = thisGraph.extFonts[i].name;
+								var fontUrl = thisGraph.extFonts[i].url;
+								
+								if (fontUrl.indexOf(Editor.GOOGLE_FONTS) == 0)
+								{
+							   		doc.writeln('<link rel="stylesheet" href="' + fontUrl + '" charset="UTF-8" type="text/css">');
+								}
+								else
+								{
+							   		doc.writeln('<style type="text/css">');
+							   		doc.writeln('@font-face {\n' +
+								            '\tfont-family: "'+ fontName +'";\n' + 
+								            '\tsrc: url("'+ fontUrl +'");\n' + 
+								            '}');
+							   		doc.writeln('</style>');
+								}
+							}
+						}
 					};
 					
 					if (typeof(MathJax) !== 'undefined')
@@ -5275,6 +5298,29 @@
 					pv.backgroundColor = bg;
 					pv.autoOrigin = autoOrigin;
 					pv.appendGraph(thisGraph, scale, x0, y0, forcePageBreaks, true);
+					
+					if (thisGraph.extFonts != null && pv.wnd != null)
+					{
+						for (var i = 0; i < thisGraph.extFonts.length; i++)
+						{
+							var fontName = thisGraph.extFonts[i].name;
+							var fontUrl = thisGraph.extFonts[i].url;
+							
+							if (fontUrl.indexOf(Editor.GOOGLE_FONTS) == 0)
+							{
+						   		pv.wnd.document.writeln('<link rel="stylesheet" href="' + fontUrl + '" charset="UTF-8" type="text/css">');
+							}
+							else
+							{
+						   		pv.wnd.document.writeln('<style type="text/css">');
+						   		pv.wnd.document.writeln('@font-face {\n' +
+							            '\tfont-family: "'+ fontName +'";\n' + 
+							            '\tsrc: url("'+ fontUrl +'");\n' + 
+							            '}');
+						   		pv.wnd.document.writeln('</style>');
+							}
+						}
+					}
 				}
 				
 				// Restores state if css transforms are used
@@ -5343,6 +5389,7 @@
 							mathEnabled = page.viewState.mathEnabled;
 							bg = page.viewState.background;
 							bgImage = page.viewState.backgroundImage;
+							tempGraph.extFonts = page.viewState.extFonts;
 						}
 					
 						tempGraph.background = bg;

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

@@ -504,10 +504,10 @@ Graph.prototype.createViewState = function(node)
 		try
 		{
 			extFonts = extFonts.split('|').map(function(ef)
-				{
-					var parts = ef.split('^');
-					return {name: parts[0], url: parts[1]};
-				});
+			{
+				var parts = ef.split('^');
+				return {name: parts[0], url: parts[1]};
+			});
 		}
 		catch(e)
 		{

src/main/webapp/js/diagramly/Settings.js

@@ -256,13 +256,8 @@ var mxSettings =
 		{
 			var temp = JSON.parse(value);
 			
-			if (Editor.config != null && (Editor.config.override ||
-					temp.configVersion != Editor.configVersion))
-				{
-					mxSettings.settings = null;
-				}
-			
-			if (temp == null || (Editor.config != null && Editor.config.override))
+			if (temp == null || (Editor.config != null && Editor.config.override) ||
+				temp.configVersion != Editor.configVersion)
 			{
 				mxSettings.settings = null;
 			}

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

@@ -2069,23 +2069,91 @@ EditorUi.prototype.initCanvas = function()
 	graph.cumulativeZoomFactor = 1;
 	
 	var cursorPosition = null;
+	var scrollPosition = null;
+	var updateZoomTimeout = null
 	var mainGroup = graph.view.getDrawPane();
 	var bgGroup = graph.view.getBackgroundPane();
-
-	graph.lazyZoom = function(zoomIn, ignoreCursorPosition)
+	
+	var isFastZoomEnabled = function()
 	{
-		if (this.updateZoomTimeout != null)
+		return urlParams['zoom'] == 'fast' && !graph.mathEnabled;
+	};
+	
+	var scheduleZoom = function()
+	{	
+		if (updateZoomTimeout != null)
 		{
-			window.clearTimeout(this.updateZoomTimeout);
+			window.clearTimeout(updateZoomTimeout);
 		}
 
-		// Switches to 1% zoom steps below 15%
+        updateZoomTimeout = window.setTimeout(mxUtils.bind(this, function()
+        {
+        	if (isFastZoomEnabled())
+    		{
+            	// Transforms background page
+  				if (graph.view.backgroundPageShape != null && graph.view.backgroundPageShape.node != null)
+  				{
+  					mxUtils.setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform-origin', null);
+  					mxUtils.setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform', null);
+  				}
+  				
+  				// Transforms graph and background image
+        		mainGroup.removeAttribute('transform-origin');
+            	mainGroup.removeAttribute('transform');
+            	bgGroup.removeAttribute('transform-origin');
+            	bgGroup.removeAttribute('transform');
+            	
+            	// Shows interactive elements
+            	graph.view.getOverlayPane().style.opacity = '';
+            	graph.view.getDecoratorPane().style.opacity = '';
+    		}
+        	
+        	var tx = graph.container.scrollLeft - scrollPosition.x;
+        	var ty = graph.container.scrollTop - scrollPosition.y;
+        	
+            var prev = graph.view.scale;
+            graph.zoom(graph.cumulativeZoomFactor);
+            var s = graph.view.scale;
+            
+            if (s != prev)
+            {
+	            var offset = mxUtils.getOffset(graph.container);
+	            var dx = 0;
+	            var dy = 0;
+	            
+	            if (cursorPosition != null)
+	            {
+	                dx = graph.container.offsetWidth / 2 - cursorPosition.x + offset.x;
+	                dy = graph.container.offsetHeight / 2 - cursorPosition.y + offset.y;
+	            }
+
+                if (resize != null)
+                {
+                	ui.chromelessResize(false, null, dx * (graph.cumulativeZoomFactor - 1),
+                		dy * (graph.cumulativeZoomFactor - 1));
+                }
+                
+                if (mxUtils.hasScrollbars(graph.container) && (dx != 0 || dy != 0))
+                {
+                    graph.container.scrollLeft -= dx * (graph.cumulativeZoomFactor - 1) + tx;
+                    graph.container.scrollTop -= dy * (graph.cumulativeZoomFactor - 1) + ty;
+                }
+            }
+            
+            graph.cumulativeZoomFactor = 1;
+            updateZoomTimeout = null;
+        }), (isFastZoomEnabled()) ? 800 : this.lazyZoomDelay);
+	};
+
+	graph.lazyZoom = function(zoomIn, ignoreCursorPosition)
+	{
+		// Switches to 2% zoom steps below 15%
 		// Lower bound depends on rounding below
 		if (zoomIn)
 		{
 			if (this.view.scale * this.cumulativeZoomFactor < 0.15)
 			{
-				this.cumulativeZoomFactor = (this.view.scale + 0.01) / this.view.scale;
+				this.cumulativeZoomFactor *= (this.view.scale + 0.05) / this.view.scale;
 			}
 			else
 			{
@@ -2099,7 +2167,7 @@ EditorUi.prototype.initCanvas = function()
 		{
 			if (this.view.scale * this.cumulativeZoomFactor <= 0.15)
 			{
-				this.cumulativeZoomFactor = (this.view.scale - 0.01) / this.view.scale;
+				this.cumulativeZoomFactor *= (this.view.scale - 0.05) / this.view.scale;
 			}
 			else
 			{
@@ -2109,12 +2177,14 @@ EditorUi.prototype.initCanvas = function()
 				this.cumulativeZoomFactor = Math.round(this.view.scale * this.cumulativeZoomFactor * 20) / 20 / this.view.scale;
 			}
 		}
-		
-		if (urlParams['zoom'] == 'fast')
+
+		this.cumulativeZoomFactor = Math.max(0.01, Math.min(this.view.scale * this.cumulativeZoomFactor, 160)) / this.view.scale;
+
+		if (isFastZoomEnabled())
 		{
-			var cx = (ignoreCursorPosition) ? graph.container.scrollWidth / 2 :
+			var cx = (ignoreCursorPosition) ? graph.container.scrollLeft + graph.container.clientWidth / 2 :
 				cursorPosition.x + graph.container.scrollLeft - graph.container.offsetLeft;
-			var cy = (ignoreCursorPosition) ? graph.container.scrollHeight / 2 :
+			var cy = (ignoreCursorPosition) ? graph.container.scrollTop + graph.container.clientHeight / 2 :
 				cursorPosition.y + graph.container.scrollTop - graph.container.offsetTop;
 			mainGroup.setAttribute('transform-origin', cx + ' ' + cy);
 			mainGroup.setAttribute('transform', 'scale(' +
@@ -2123,73 +2193,45 @@ EditorUi.prototype.initCanvas = function()
 			bgGroup.setAttribute('transform', 'scale(' +
 					this.cumulativeZoomFactor + ')');
 
-			var page = graph.view.backgroundPageShape.node;
-
-			mxUtils.setPrefixedStyle(page.style, 'transform-origin',
-				(ignoreCursorPosition) ? '50%' : ((cursorPosition.x + graph.container.offsetLeft - page.offsetLeft) + 'px') + ' ' +
-				(ignoreCursorPosition) ? '50%' : ((cursorPosition.y - page.offsetTop) + 'px'));
-			mxUtils.setPrefixedStyle(page.style, 'transform',
-				'scale(' + this.cumulativeZoomFactor + ')');
+			if (graph.view.backgroundPageShape != null && graph.view.backgroundPageShape.node != null)
+			{
+				var page = graph.view.backgroundPageShape.node;
+				
+				mxUtils.setPrefixedStyle(page.style, 'transform-origin',
+					((ignoreCursorPosition) ? ((graph.container.clientWidth / 2 + graph.container.scrollLeft -
+						page.offsetLeft) + 'px') : ((cursorPosition.x + graph.container.scrollLeft -
+						page.offsetLeft - graph.container.offsetLeft) + 'px')) + ' ' +
+					((ignoreCursorPosition) ? ((graph.container.clientHeight / 2 + graph.container.scrollTop -
+						page.offsetTop) + 'px') : ((cursorPosition.y + graph.container.scrollTop -
+						page.offsetTop - graph.container.offsetTop) + 'px')));
+				mxUtils.setPrefixedStyle(page.style, 'transform',
+					'scale(' + this.cumulativeZoomFactor + ')');
+			}
 
 			graph.view.getOverlayPane().style.opacity = '0';
 			graph.view.getDecoratorPane().style.opacity = '0';
-			console.log('here', this.cumulativeZoomFactor, cx, page.offsetLeft, page.offsetWidth);
+			
+			if (ui.hoverIcons != null)
+			{
+				ui.hoverIcons.reset();
+			}
 		}
 		
-		this.cumulativeZoomFactor = Math.max(0.01, Math.min(this.view.scale * this.cumulativeZoomFactor, 160) / this.view.scale);
-		
-        this.updateZoomTimeout = window.setTimeout(mxUtils.bind(this, function()
-        {
-        	if (urlParams['zoom'] == 'fast')
-    		{
-        		mainGroup.removeAttribute('transform-origin');
-            	mainGroup.removeAttribute('transform');
-            	bgGroup.removeAttribute('transform-origin');
-            	bgGroup.removeAttribute('transform');
-            	graph.view.getOverlayPane().style.opacity = '';
-            	graph.view.getDecoratorPane().style.opacity = '';
-    			mxUtils.setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform-origin', null);
-    			mxUtils.setPrefixedStyle(graph.view.backgroundPageShape.node.style, 'transform', null);
-    		}
-        	
-            var offset = mxUtils.getOffset(graph.container);
-            var dx = 0;
-            var dy = 0;
-            
-            if (cursorPosition != null)
-            {
-                dx = graph.container.offsetWidth / 2 - cursorPosition.x + offset.x;
-                dy = graph.container.offsetHeight / 2 - cursorPosition.y + offset.y;
-            }
-
-            var prev = this.view.scale;
-            this.zoom(this.cumulativeZoomFactor);
-            var s = this.view.scale;
-            
-            if (s != prev)
-            {
-                if (resize != null)
-                {
-                		ui.chromelessResize(false, null, dx * (this.cumulativeZoomFactor - 1),
-                				dy * (this.cumulativeZoomFactor - 1));
-                }
-                
-                if (mxUtils.hasScrollbars(graph.container) && (dx != 0 || dy != 0))
-                {
-                    graph.container.scrollLeft -= dx * (this.cumulativeZoomFactor - 1);
-                    graph.container.scrollTop -= dy * (this.cumulativeZoomFactor - 1);
-                }
-            }
-            
-            this.cumulativeZoomFactor = 1;
-            this.updateZoomTimeout = null;
-        }), (urlParams['zoom'] == 'fast') ? 500 : this.lazyZoomDelay);
+		scheduleZoom();
 	};
 	
+	// Hold back repaint until scroll ends
+	mxEvent.addListener(graph.container, 'scroll', function()
+	{
+		if (updateZoomTimeout)
+		{
+			scheduleZoom();
+		}
+	});
+
 	mxEvent.addMouseWheelListener(mxUtils.bind(this, function(evt, up)
 	{
-		// Ctrl+wheel (or pinch on touchpad) is a native browser zoom event is OS X
-		// LATER: Add support for zoom via pinch on trackpad for Chrome in OS X
+		// Add Ctrl+wheel (or pinch on trackpad) native browser zoom event for macOS
 		if ((this.dialogs == null || this.dialogs.length == 0) && graph.isZoomWheelEvent(evt))
 		{
 			var source = mxEvent.getSource(evt);
@@ -2199,6 +2241,7 @@ EditorUi.prototype.initCanvas = function()
 				if (source == graph.container)
 				{
 					cursorPosition = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
+					scrollPosition = new mxPoint(graph.container.scrollLeft, graph.container.scrollTop);
 					graph.lazyZoom(up);
 					mxEvent.consume(evt);
 			

src/main/webapp/js/mxgraph/Graph.js

@@ -4336,7 +4336,6 @@ HoverIcons.prototype.setCurrentState = function(state)
 			var size = (parseInt(mxUtils.getValue(this.style, 'jumpSize',
 				Graph.defaultJumpSize)) - 2) / 2 + this.strokewidth;
 			var style = mxUtils.getValue(this.style, 'jumpStyle', 'none');
-			var f = Editor.jumpSizeRatio;
 			var moveTo = true;
 			var last = null;
 			var len = null;
@@ -6737,9 +6736,21 @@ if (typeof mxVertexHandler != 'undefined')
 							alt.setAttribute('font-style', 'italic');
 						}
 						
+						var txtDecor = [];
+						
 						if ((s.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE)
 						{
-							alt.setAttribute('text-decoration', 'underline');
+							txtDecor.push('underline');
+						}
+						
+						if ((s.fontStyle & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH)
+						{
+							txtDecor.push('line-through');
+						}
+						
+						if (txtDecor.length > 0)
+						{
+							alt.setAttribute('text-decoration', txtDecor.join(' '));
 						}
 						
 						try
@@ -7636,12 +7647,23 @@ if (typeof mxVertexHandler != 'undefined')
 							mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD;
 					var italic = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
 							mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC;
-					var uline = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
-							mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE;
+					var txtDecor = [];
+					
+					if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
+							mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE)
+					{
+						txtDecor.push('underline');
+					}
+					
+					if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
+							mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH)
+					{
+						txtDecor.push('line-through');
+					}
 					
 					this.textarea.style.lineHeight = (mxConstants.ABSOLUTE_LINE_HEIGHT) ? Math.round(size * mxConstants.LINE_HEIGHT) + 'px' : mxConstants.LINE_HEIGHT;
 					this.textarea.style.fontSize = Math.round(size) + 'px';
-					this.textarea.style.textDecoration = (uline) ? 'underline' : '';
+					this.textarea.style.textDecoration = txtDecor.join(' ');
 					this.textarea.style.fontWeight = (bold) ? 'bold' : 'normal';
 					this.textarea.style.fontStyle = (italic) ? 'italic' : '';
 					this.textarea.style.fontFamily = family;