12.4.2 release

ChangeLog

@@ -1,3 +1,12 @@
+14-DEC-2019: 12.4.2
+
+- Improves move/resize preview and guides
+- Adds pinch to zoom for macOS trackpad
+- Disables drop style for swimlanes
+- Adds anchor points for corners
+- Fixes edge label move preview
+- Uses mxGraph 4.0.6 beta 11
+
 12-DEC-2019: 12.4.1
 
 - Fixes initial key state for cloning

VERSION

@@ -1 +1 @@
-12.4.1
+12.4.2

src/main/webapp/cache.manifest

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

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

@@ -123,7 +123,7 @@
 			 this.createVertexTemplateEntry(s + 'users.svg;',
 					 d * 0.66, d, '', 'Users', false, null, this.getTagsForStencil(gn, 'users', dt).join(' ')),
 			 this.createVertexTemplateEntry(s + 'vista_client.svg;',
-					 d * 0.76, d, '', 'Vist Client', false, null, this.getTagsForStencil(gn, 'vista client', dt).join(' ')),
+					 d * 0.76, d, '', 'Vista Client', false, null, this.getTagsForStencil(gn, 'vista client', dt).join(' ')),
 			 this.createVertexTemplateEntry(s + 'vista_terminal.svg;',
 					 d * 0.65, d, '', 'Vista Terminal', false, null, this.getTagsForStencil(gn, 'vista terminal', dt).join(' ')),
 			 this.createVertexTemplateEntry(s + 'web_server.svg;',

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

@@ -214,6 +214,11 @@ Editor.fullscreenLargeImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACA
  */
 Editor.ctrlKey = (mxClient.IS_MAC) ? 'Cmd' : 'Ctrl';
 
+/**
+ * Specifies the image URL to be used for the transparent background.
+ */
+Editor.hintOffset = 20;
+
 /**
  * Specifies if the diagram should be saved automatically if possible. Default
  * is true.

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

@@ -2280,10 +2280,10 @@ EditorUi.prototype.initCanvas = function()
 		}
 	});
 
-	mxEvent.addMouseWheelListener(mxUtils.bind(this, function(evt, up)
+	mxEvent.addMouseWheelListener(mxUtils.bind(this, function(evt, up, force)
 	{
 		// Add Ctrl+wheel (or pinch on trackpad) native browser zoom event for macOS
-		if ((this.dialogs == null || this.dialogs.length == 0) && graph.isZoomWheelEvent(evt))
+		if ((this.dialogs == null || this.dialogs.length == 0) && (force || graph.isZoomWheelEvent(evt)))
 		{
 			var source = mxEvent.getSource(evt);
 

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

@@ -1358,7 +1358,7 @@ Graph.prototype.init = function(container)
 	 */
 	Graph.prototype.isFastZoomEnabled = function()
 	{
-		return urlParams['zoom'] != 'nocss' && !this.mathEnabled &&
+		return this.scrollbars && urlParams['zoom'] != 'nocss' && !this.mathEnabled &&
 			!mxClient.NO_FO && !this.useCssTransforms;
 	};
 
@@ -1992,12 +1992,12 @@ Graph.prototype.isReplacePlaceholders = function(cell)
 /**
  * Returns true if the given mouse wheel event should be used for zooming. This
  * is invoked if no dialogs are showing and returns true with Alt or Control
- * (except macOS) is pressed.
+ * (or cmd in macOS only) is pressed.
  */
 Graph.prototype.isZoomWheelEvent = function(evt)
 {
 	return mxEvent.isAltDown(evt) || (mxEvent.isMetaDown(evt) && mxClient.IS_MAC) ||
-		(mxEvent.isControlDown(evt) && !mxClient.IS_MAC);
+		mxEvent.isControlDown(evt);
 };
 
 /**
@@ -2516,7 +2516,8 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl
 	this.model.beginUpdate();
 	try
 	{
-		var realTarget = target;
+		var swimlane = target != null && this.isSwimlane(target);
+		var realTarget = (!swimlane) ? target : null;
 
 		if (realTarget == null && duplicate)
 		{
@@ -2553,6 +2554,12 @@ Graph.prototype.connectVertex = function(source, direction, length, evt, forceCl
 				geo.x = pt.x - geo.width / 2;
 				geo.y = pt.y - geo.height / 2;
 			}
+
+			if (swimlane)
+			{
+				this.addCells([realTarget], target, null, null, null, true);
+				target = null;
+			}
 		}
 
 		// Never connects children in stack layouts
@@ -3909,7 +3916,7 @@ HoverIcons.prototype.repaint = function()
 					top = null;
 					bottom = null;
 				}
-				
+
 				var currentGeo = this.graph.getCellGeometry(this.currentState.cell);
 
 				var checkCollision = mxUtils.bind(this, function(cell, arrow)
@@ -3918,8 +3925,8 @@ HoverIcons.prototype.repaint = function()
 
 					// Ignores collision if vertex is more than 3 times the size of this vertex
 					if (cell != null && !this.graph.model.isAncestor(cell, this.currentState.cell) &&
-						(geo == null || currentGeo == null || (geo.height < 6 * currentGeo.height &&
-						geo.width < 6 * currentGeo.width)))
+						!this.graph.isSwimlane(cell) && (geo == null || currentGeo == null ||
+						(geo.height < 3 * currentGeo.height && geo.width < 3 * currentGeo.width)))
 					{
 						arrow.style.visibility = 'hidden';
 					}
@@ -8031,7 +8038,7 @@ if (typeof mxVertexHandler != 'undefined')
 				this.hint.style.left = (this.pBounds.x + this.currentDx +
 					Math.round((this.pBounds.width - this.hint.clientWidth) / 2)) + 'px';
 				this.hint.style.top = (this.pBounds.y + this.currentDy +
-					this.pBounds.height + 12) + 'px';
+					this.pBounds.height + Editor.hintOffset) + 'px';
 			}
 		};
 
@@ -8140,7 +8147,7 @@ if (typeof mxVertexHandler != 'undefined')
 				}
 
 				this.hint.style.left = bb.x + Math.round((bb.width - this.hint.clientWidth) / 2) + 'px';
-				this.hint.style.top = (bb.y + bb.height + 12) + 'px';
+				this.hint.style.top = (bb.y + bb.height + Editor.hintOffset) + 'px';
 
 				if (this.linkHint != null)
 				{
@@ -8228,8 +8235,7 @@ if (typeof mxVertexHandler != 'undefined')
 			}
 
 			this.hint.style.left = Math.round(me.getGraphX() - this.hint.clientWidth / 2) + 'px';
-			this.hint.style.top = (Math.max(me.getGraphY(), point.y) +
-				2 * this.state.view.graph.gridSize) + 'px';
+			this.hint.style.top = (Math.max(me.getGraphY(), point.y) + Editor.hintOffset) + 'px';
 
 			if (this.linkHint != null)
 			{
@@ -8715,6 +8721,7 @@ if (typeof mxVertexHandler != 'undefined')
 			var states = mxGraphHandlerGetGuideStates.apply(this, arguments);
 			var result = [];
 
+			// NOTE: Could do via isStateIgnored hook
 			for (var i = 0; i < states.length; i++)
 			{
 				if (mxUtils.getValue(states[i].style, 'part', '0') != '1')
@@ -9047,8 +9054,7 @@ if (typeof mxVertexHandler != 'undefined')
 				}
 
 				this.linkHint.style.left = Math.max(0, Math.round(rs.x + (rs.width - this.linkHint.clientWidth) / 2)) + 'px';
-				this.linkHint.style.top = Math.round(b + this.verticalOffset / 2 + 6 +
-					this.state.view.graph.tolerance) + 'px';
+				this.linkHint.style.top = Math.round(b + this.verticalOffset / 2 + Editor.hintOffset) + 'px';
 			}
 		};
 
@@ -9097,7 +9103,7 @@ if (typeof mxVertexHandler != 'undefined')
 					}
 
 					this.linkHint.style.left = Math.max(0, Math.round(b.x + (b.width - this.linkHint.clientWidth) / 2)) + 'px';
-					this.linkHint.style.top = Math.round(b.y + b.height + 6 + this.state.view.graph.tolerance) + 'px';
+					this.linkHint.style.top = Math.round(b.y + b.height + Editor.hintOffset) + 'px';
 				}
 			}
 		};

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

@@ -3915,18 +3915,22 @@
 		return (constr);
 	};
 
-	mxRectangleShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
+	mxRectangleShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0), true),
+											  new mxConnectionConstraint(new mxPoint(0.25, 0), true),
 	                                          new mxConnectionConstraint(new mxPoint(0.5, 0), true),
 	                                          new mxConnectionConstraint(new mxPoint(0.75, 0), true),
+	                                          new mxConnectionConstraint(new mxPoint(1, 0), true),
 	        	              		 new mxConnectionConstraint(new mxPoint(0, 0.25), true),
 	        	              		 new mxConnectionConstraint(new mxPoint(0, 0.5), true),
 	        	              		 new mxConnectionConstraint(new mxPoint(0, 0.75), true),
 	        	            		 new mxConnectionConstraint(new mxPoint(1, 0.25), true),
 	        	            		 new mxConnectionConstraint(new mxPoint(1, 0.5), true),
 	        	            		 new mxConnectionConstraint(new mxPoint(1, 0.75), true),
+	        	            		 new mxConnectionConstraint(new mxPoint(0, 1), true),
 	        	            		 new mxConnectionConstraint(new mxPoint(0.25, 1), true),
 	        	            		 new mxConnectionConstraint(new mxPoint(0.5, 1), true),
-	        	            		 new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
+	        	            		 new mxConnectionConstraint(new mxPoint(0.75, 1), true),
+	        	            		 new mxConnectionConstraint(new mxPoint(1, 1), true)];
 	mxEllipse.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0), true), new mxConnectionConstraint(new mxPoint(1, 0), true),
 	                                   new mxConnectionConstraint(new mxPoint(0, 1), true), new mxConnectionConstraint(new mxPoint(1, 1), true),
 	                                   new mxConnectionConstraint(new mxPoint(0.5, 0), true), new mxConnectionConstraint(new mxPoint(0.5, 1), true),

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

@@ -2493,6 +2493,35 @@ Sidebar.prototype.getDropAndConnectGeometry = function(source, target, direction
 	return geo2;
 };
 
+/**
+ * Limits drop style to non-transparent source shapes.
+ */
+Sidebar.prototype.isDropStyleEnabled = function(cells, firstVertex)
+{
+	var result = true;
+
+	if (firstVertex != null && cells.length == 1)
+	{
+		var vstyle = this.graph.getCellStyle(cells[firstVertex]);
+
+		if (vstyle != null)
+		{
+			result = mxUtils.getValue(vstyle, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE ||
+				mxUtils.getValue(vstyle, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE;
+		}
+	}
+
+	return result;
+};
+
+/**
+ * Ignores swimlanes as drop style targets.
+ */
+Sidebar.prototype.isDropStyleTargetIgnored = function(state)
+{
+	return this.graph.isSwimlane(state.cell);
+};
+
 /**
  * Creates a drag source for the given element.
  */
@@ -2523,19 +2552,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 		}
 	}
 
-	// Limits drop style to non-transparent shapes
-	var dropStyleEnabled = true;
-
-	if (firstVertex != null && cells.length == 1)
-	{
-		var vstyle = graph.getCellStyle(cells[firstVertex]);
-
-		if (vstyle != null)
-		{
-			dropStyleEnabled = mxUtils.getValue(vstyle, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE ||
-				mxUtils.getValue(vstyle, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE;
-		}
-	}
+	var dropStyleEnabled = this.isDropStyleEnabled(cells, firstVertex);
 
 	var dragSource = mxUtils.makeDraggable(elt, this.editorUi.editor.graph, mxUtils.bind(this, function(graph, evt, target, x, y)
 	{
@@ -2862,8 +2879,8 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 			mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE ||
 			mxUtils.getValue(state.style, mxConstants.STYLE_GRADIENTCOLOR, mxConstants.NONE) != mxConstants.NONE)) ||
 			mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) == 'image') ||
-			timeOnTarget > 1500 || graph.model.isEdge(state.cell)) && (timeOnTarget > this.dropTargetDelay) && 
-			((graph.model.isVertex(state.cell) && firstVertex != null) ||
+			timeOnTarget > 1500 || graph.model.isEdge(state.cell)) && (timeOnTarget > this.dropTargetDelay) &&
+			!this.isDropStyleTargetIgnored(state) && ((graph.model.isVertex(state.cell) && firstVertex != null) ||
 			(graph.model.isEdge(state.cell) && graph.model.isEdge(cells[0]))))
 		{
 			currentStyleTarget = state;