Reccenter viewporrt on center

build/escher.js

@@ -2350,6 +2350,16 @@
 		 */
 		this.moveOnScale = false;
 
+		/**
+		 * Flag to recenter the viewport automatically to the canvas.
+		 * 
+		 * This will ensure that rotation and scaling will not cause the viewport to move around.
+		 * 
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.centerOnCanvas = true;
+
 		/**
 		 * If true allows the viewport to be rotated.
 		 *
@@ -2432,18 +2442,25 @@
 				this.viewport.rotation = this.rotationInitial + point.angle();
 				this.viewport.matrixNeedsUpdate = true;
 			}
+			return;
 		}
+
+		this.rotationPoint = null;
+
 		// Drag
-		else
+		if(pointer.buttonPressed(this.dragButton))
 		{
-			this.rotationPoint = null;
+			this.viewport.position.add(pointer.delta);
+			this.viewport.matrixNeedsUpdate = true;
+			return;
+		}
 
-			if(pointer.buttonPressed(this.dragButton))
-			{
-				this.viewport.position.x += pointer.delta.x;
-				this.viewport.position.y += pointer.delta.y;
-				this.viewport.matrixNeedsUpdate = true;
-			}
+		// Automtical center the viewport.
+		if (this.centerOnCanvas && pointer.canvas !== null) {
+			var centerWorld = new Vector2(pointer.canvas.width / 2.0, pointer.canvas.height / 2.0);
+			centerWorld = this.viewport.inverseMatrix.transformPoint(centerWorld);
+			this.viewport.center.copy(centerWorld);
+			this.viewport.matrixNeedsUpdate = true;
 		}
 	};
 

source/controls/ViewportControls.js

@@ -46,6 +46,16 @@ function ViewportControls(viewport)
 	 */
 	this.moveOnScale = false;
 
+	/**
+	 * Flag to recenter the viewport automatically to the canvas.
+	 * 
+	 * This will ensure that rotation and scaling will not cause the viewport to move around.
+	 * 
+	 * @type {boolean}
+	 * @default true
+	 */
+	this.centerOnCanvas = true;
+
 	/**
 	 * If true allows the viewport to be rotated.
 	 *
@@ -128,18 +138,23 @@ ViewportControls.prototype.update = function(pointer)
 			this.viewport.rotation = this.rotationInitial + point.angle();
 			this.viewport.matrixNeedsUpdate = true;
 		}
+	} else {
+		this.rotationPoint = null;
 	}
+
 	// Drag
-	else
+	if(pointer.buttonPressed(this.dragButton))
 	{
-		this.rotationPoint = null;
+		this.viewport.position.add(pointer.delta);
+		this.viewport.matrixNeedsUpdate = true;
+	}
 
-		if(pointer.buttonPressed(this.dragButton))
-		{
-			this.viewport.position.x += pointer.delta.x;
-			this.viewport.position.y += pointer.delta.y;
-			this.viewport.matrixNeedsUpdate = true;
-		}
+	// Automtical center the viewport.
+	if (this.centerOnCanvas && pointer.canvas !== null) {
+		var centerWorld = new Vector2(pointer.canvas.width / 2.0, pointer.canvas.height / 2.0);
+		centerWorld = this.viewport.inverseMatrix.transformPoint(centerWorld);
+		this.viewport.center.copy(centerWorld);
+		this.viewport.matrixNeedsUpdate = true;
 	}
 };