Clean up

index.html

@@ -10,8 +10,6 @@
 	<script type="text/javascript" src="source/Viewport.js"></script>
 	<script type="text/javascript" src="source/Renderer.js"></script>
 
-	<script type="text/javascript" src="source/controls/ViewportControls.js"></script>
-
 	<script type="text/javascript" src="source/input/Key.js"></script>
 	<script type="text/javascript" src="source/input/Mouse.js"></script>
 
@@ -30,6 +28,11 @@
 		canvas.width = 800;
 		canvas.height = 600;
 		canvas.style.border = "1px solid #000000";
+		canvas.oncontextmenu = function(event)
+		{
+			event.preventDefault();
+			return false;
+		};
 		document.body.appendChild(canvas);
 
 		var o = new Object2D();
@@ -53,9 +56,6 @@
 
 		var v = new Viewport();
 
-		var c = new ViewportControls(v);
-		c.create();
-
 		var r = new Renderer(canvas);
 
 		function loop()
@@ -63,6 +63,7 @@
 			i.rotation += 0.01;
 			re.rotation -= 0.005;
 
+			r.update(o, v)
 			r.render(o, v)
 			requestAnimationFrame(loop);
 		}

source/Renderer.js

@@ -9,45 +9,65 @@
  */
 function Renderer(canvas)
 {
+	/**
+	 * Canvas DOM element, has to be managed by the user.
+	 */
 	this.canvas = canvas;
 
+	/**
+	 * Canvas 2D rendering context used to draw content.
+	 */
 	this.context = canvas.getContext("2d");
 
-	this.mouse = new Mouse(canvas);
+	/**
+	 * Mouse input handler object.
+	 */
+	this.mouse = new Mouse();
 	this.mouse.setCanvas(canvas);
 }
 
 /**
- * Render the object using the viewport into a canvas element.
+ * Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
  */
-Renderer.prototype.render = function(object, viewport)
+Renderer.prototype.update = function(object, viewport)
 {
 	this.mouse.update();
 
 	var mouse = this.mouse;
-	var context = this.context;
 
-	// Clear canvas
-	context.setTransform(1, 0, 0, 1, 0, 0);
-	context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-	// Update viewport transform matrix
+	// Viewport transform matrix
+	viewport.updateControls(mouse);
 	viewport.updateMatrix();
 
-	// Update object transformation matrices
+	// Project mouse coordinates
+	var point = mouse.position.clone();
+	point = viewport.inverseMatrix.transformPoint(point);
+
+	// Object transformation matrices
 	object.traverse(function(child)
 	{
 		child.updateMatrix();
 		
-		var point = mouse.position.clone();
-		point = viewport.inverseMatrix.transformPoint(point);
-		point = child.inverseGlobalMatrix.transformPoint(point);
-
-		if(child.isInside(point))
+		var childPoint = child.inverseGlobalMatrix.transformPoint(point);
+		
+		// Check if the mouse pointer is inside
+		if(child.isInside(childPoint))
 		{
 			child.onOver();
 		}
 	});
+};
+
+/**
+ * Render the object using the viewport into a canvas element.
+ */
+Renderer.prototype.render = function(object, viewport)
+{
+	var context = this.context;
+
+	// Clear canvas
+	context.setTransform(1, 0, 0, 1, 0, 0);
+	context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
 	// Render into the canvas
 	object.traverse(function(child)

source/Viewport.js

@@ -44,12 +44,23 @@ function Viewport()
 }
 
 /**
- * Set the transformation of the canvas context.
- *
- * @param context Canvas 2d drawing context.
- * @param canvas The canvas DOM element where its being drawn.
+ * Update the viewport controls using the mouse object.
+ */
+Viewport.prototype.updateControls = function(mouse)
+{
+	this.scale -= mouse.wheel * 1e-3 * this.scale;
+
+	if(mouse.buttonPressed(Mouse.RIGHT))
+	{
+		this.position.x += mouse.delta.x;
+		this.position.y += mouse.delta.y;
+	}
+};
+
+/**
+ * Calculate and update the viewport transformation matrix.
  */
-Viewport.prototype.updateMatrix = function(context, canvas)
+Viewport.prototype.updateMatrix = function()
 {
 	if(this.matrixNeedsUpdate)
 	{

source/controls/ViewportControls.js

@@ -1,61 +0,0 @@
-"use strict";
-
-function ViewportControls(viewport)
-{
-	this.viewport = viewport;
-
-	var pressed = -1;
-	var x = 0, y = 0;
-	var dx = 0, dy = 0;
-
-	var self = this;
-	
-	this.manager = new EventManager();
-
-	this.manager.add(canvas, "contextmenu", function(event)
-	{
-		event.preventDefault();
-		return false;
-	});
-
-	this.manager.add(canvas, "mousedown", function(event)
-	{
-		pressed = event.which;
-	});
-
-	this.manager.add(canvas, "mouseup", function(event)
-	{
-		pressed = -1;
-	});
-	
-	this.manager.add(canvas, "mousemove", function(event)
-	{
-		dx = event.clientX - x;
-		dy = event.clientY - y;
-		x = event.clientX;
-		y = event.clientY;
-
-		// Mouse
-		if(pressed === 3)
-		{
-			self.viewport.position.x += dx;
-			self.viewport.position.y += dy;
-		}
-	});
-
-
-	this.manager.add(canvas, "wheel", function(event)
-	{
-		self.viewport.scale -= (event.deltaY * 0.01) * self.viewport.scale;
-	});
-}
-
-ViewportControls.prototype.create = function()
-{
-	this.manager.create();
-};
-
-ViewportControls.prototype.destroy = function()
-{
-	this.manager.destroy();
-};