Controls

source/Renderer.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import {Pointer} from "./input/Pointer.js";
+import {ViewportControls} from "./controls/ViewportControls.js";
 
 /**
  * The renderer is resposible for drawing the structure into the canvas element.
@@ -46,7 +47,7 @@ function Renderer(canvas, options)
 /**
  * Creates a infinite render loop to render the group into a viewport each frame.
  *
- * The render loop cannot be destroyed.
+ * The render loop cannot be destroyed, and it automatically creates a viewport controls object.
  *
  * @param {Object2D} group Group to be rendererd.
  * @param {Viewport} viewport Viewport into the objects.
@@ -56,6 +57,8 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 {
 	var self = this;
 	
+	var controls = new ViewportControls(viewport);
+
 	function loop()
 	{
 		if(onUpdate !== undefined)
@@ -63,6 +66,7 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 			onUpdate();
 		}
 
+		controls.update(self.pointer);
 		self.update(group, viewport);
 		requestAnimationFrame(loop);
 	}
@@ -110,7 +114,6 @@ Renderer.prototype.update = function(object, viewport)
 	pointer.update();
 
 	// Viewport transform matrix
-	viewport.updateControls(pointer);
 	viewport.updateMatrix();
 
 	// Project pointer coordinates

source/Viewport.js

@@ -62,36 +62,6 @@ function Viewport()
 	this.rotationPoint = null;
 }
 
-/**
- * Update the viewport controls using the pointer object.
- */
-Viewport.prototype.updateControls = function(pointer)
-{	
-	if(pointer.wheel !== 0)
-	{
-		this.scale -= pointer.wheel * 1e-3 * this.scale;
-
-		if(this.moveOnScale)
-		{	
-			var speed = pointer.wheel;
-			var halfWidth = pointer.canvas.width / 2;
-			var halfWeight = pointer.canvas.height / 2;
-
-			this.position.x += ((pointer.position.x - halfWidth) / halfWidth) * speed;
-			this.position.y += ((pointer.position.y - halfWeight) / halfWeight) * speed;
-		}
-	}
-
-	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
-	{
-		this.rotation += pointer.delta.angle() * 1e-3;
-	}
-	else if(pointer.buttonPressed(Pointer.RIGHT))
-	{
-		this.position.x += pointer.delta.x;
-		this.position.y += pointer.delta.y;
-	}
-};
 
 /**
  * Calculate and update the viewport transformation matrix.

source/controls/ViewportControls.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import {Viewport} from "../Viewport.js";
+import {Pointer} from "../input/Pointer.js";
+
+/**
+ * Viewport controls are used to allow the user to control the viewport.
+ *
+ * @class
+ * @param {Viewport} viewport
+ */
+function ViewportControls(viewport)
+{
+	/**
+	 * Viewport being controlled by this object.
+	 */
+	this.viewport = viewport;
+
+	/**
+	 * Button used to drag and viewport around.
+	 */
+	this.dragButton = Pointer.LEFT;
+
+	/**
+	 * If true allows the viewport to be rotated.
+	 */
+	this.allowRotation = false;
+
+	/**
+	 * Flag to indicate if the viewport should move when scalling.
+	 *
+	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+	 */
+	this.moveOnScale = true;
+
+	/**
+	 * Value of the initial point of rotation if the viewport is being rotated.
+	 *
+	 * Is set to null when the viewport is not being rotated.
+	 */
+	this.rotationPoint = null;
+}
+
+/**
+ * Update the viewport controls using the pointer object.
+ */
+ViewportControls.prototype.update = function(pointer)
+{	
+	if(pointer.wheel !== 0)
+	{
+		this.viewport.scale -= pointer.wheel * 1e-3 * this.viewport.scale;
+
+		if(this.moveOnScale)
+		{	
+			var speed = pointer.wheel;
+			var halfWidth = pointer.canvas.width / 2;
+			var halfWeight = pointer.canvas.height / 2;
+
+			this.viewport.position.x += ((pointer.position.x - halfWidth) / halfWidth) * speed;
+			this.viewport.position.y += ((pointer.position.y - halfWeight) / halfWeight) * speed;
+		}
+	}
+
+	if(this.allowRotation && pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
+	{
+		if(this.rotationPoint === null)
+		{
+			this.rotationPoint = pointer.position.clone();
+		}
+		else
+		{
+			//TODO <USE ROTATION POINT>
+			this.viewport.rotation += pointer.delta.angle() * 1e-3;
+		}
+	}
+	else
+	{
+		this.rotationPoint = null;
+
+		if(pointer.buttonPressed(this.dragButton))
+		{
+			this.viewport.position.x += pointer.delta.x;
+			this.viewport.position.y += pointer.delta.y;
+		}
+	}
+};