Fix object 2d transform

index.html

@@ -8,11 +8,9 @@
 	<script type="text/javascript" src="source/EventManager.js"></script>
 	<script type="text/javascript" src="source/Object2D.js"></script>
 	<script type="text/javascript" src="source/Viewport.js"></script>
+	<script type="text/javascript" src="source/Renderer.js"></script>
 
-	<script type="text/javascript" src="source/math/Vector3.js"></script>
 	<script type="text/javascript" src="source/math/Vector2.js"></script>
-	<script type="text/javascript" src="source/math/Matrix3.js"></script>
-	<script type="text/javascript" src="source/math/Box2.js"></script>
 	<script type="text/javascript" src="source/math/UUID.js"></script>
 	<script type="text/javascript" src="source/math/Matrix.js"></script>
 
@@ -22,11 +20,22 @@
 		canvas.height = 600;
 		document.body.appendChild(canvas);
 
-
 		var o = new Object2D();
 		o.position.set(100, 100);
 		o.scale.set(1, 2);
 
+		var v = new Viewport();
+
+		var m = new EventManager();
+		m.add(canvas, "mousemove", function(event)
+		{
+
+		});
+		m.create();
+
+
+		var r = new Renderer();
+
 		var context = canvas.getContext("2d");
 
 		function loop()

source/Object2D.js

@@ -48,6 +48,11 @@ function Object2D()
 	 * Local transformation matrix applied to the object. 
 	 */
 	this.matrix = new Matrix();
+
+	/**
+	 * If true the matrix is updated before rendering the object.
+	 */
+	this.matrixNeedsUpdate = true;
 }
 
 /**
@@ -103,7 +108,11 @@ Object2D.prototype.remove = function(object)
  */
 Object2D.prototype.draw = function(context, canvas)
 {
-	this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation);
+	if(this.matrixNeedsUpdate)
+	{
+		this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation);
+		this.matrixNeedsUpdate = false;
+	}
 	this.matrix.setContextTransform(context);
 
 	context.fillRect(-20, -20, 40, 40);

source/Viewport.js

@@ -13,13 +13,45 @@ function Viewport()
 	this.uuid = UUID.generate(); 
 
 	/**
-	 * Position of the viewport.
+	 * Position of the object.
 	 */
 	this.position = new Vector2(0, 0);
 
 	/**
-	 * Zoom level of the viewport.
+	 * Scale of the object.
 	 */
-	this.zoom = 1.0;
+	this.scale = 1.0
+
+	/**
+	 * Rotation of the object relative to its center.
+	 */
+	this.rotation = 0.0;
+
+	/**
+	 * Local transformation matrix applied to the object. 
+	 */
+	this.matrix = new Matrix();
+
+	/**
+	 * If true the matrix is updated before rendering the object.
+	 */
+	this.matrixNeedsUpdate = true;
+}
+
+/**
+ * Set the transformation of the canvas context.
+ *
+ * @param context Canvas 2d drawing context.
+ * @param canvas The canvas DOM element where its being drawn.
+ */
+Viewport.prototype.transform = function(context, canvas)
+{
+	if(this.matrixNeedsUpdate)
+	{
+		this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, this.rotation);
+		this.matrixNeedsUpdate = false;
+	}
+
+	this.matrix.setContextTransform(context);
+};
 
-}