3 x2 matrix

index.html

@@ -14,7 +14,7 @@
 	<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/Matrix32.js"></script>
+	<script type="text/javascript" src="source/math/Matrix.js"></script>
 
 	<script type="text/javascript">
 		var canvas = document.createElement("canvas");
@@ -25,19 +25,21 @@
 		//var m = matrix.elements;
 		///context.setTransform(m[0], m[3], m[1], m[4], m[2], m[5]);
 		
-		var a = new Matrix32();
+		var a = new Matrix();
+		a.translate(100, 100);
 		a.rotate(1);
-
-		var b = new Matrix32();
+		
+		var b = new Matrix();
 		b.translate(50, 20);
 
 		var context = canvas.getContext("2d");
 
 		function loop()
 		{
+			context.setTransform(1, 0, 0, 1, 0, 0);
 			context.clearRect(0, 0, canvas.width, canvas.height);
 
-			a.rotate(0.01);
+			a.rotate(0.02);
 			a.setContextTransform(context);
 			context.fillRect(0, 0, 40, 60);
 

source/Diagram.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export {EventManager} from "./EventManager.js";

source/Object2D.js

@@ -47,12 +47,12 @@ function Object2D()
 	/**
 	 * Local transformation matrix applied to the object. 
 	 */
-	this.matrix = new Matrix3();
+	this.matrix = new Matrix();
 
 	/**
 	 * Global transformation matrix used to project the object to screen space.
 	 */
-	this.globalMatrix = new Matrix3();
+	this.globalMatrix = new Matrix();
 }
 
 /**

source/Viewport.js

@@ -7,5 +7,19 @@
  */
 function Viewport()
 {
-	
+	/**
+	 * UUID of the object.
+	 */
+	this.uuid = UUID.generate(); 
+
+	/**
+	 * Position of the viewport.
+	 */
+	this.position = new Vector2(0, 0);
+
+	/**
+	 * Zoom level of the viewport.
+	 */
+	this.zoom = 1.0;
+
 }

source/math/Matrix.js

@@ -0,0 +1,135 @@
+"use strict";
+
+/**
+ * 2D 3x2 transformation matrix, applied to the canvas elements.
+ *
+ * @class
+ */
+function Matrix(values)
+{
+	if(value !== undefined)
+	{
+		this.m = values;
+	}
+	else
+	{
+		this.m = null;
+		this.reset();
+	}
+}
+
+/**
+ * Reset this matrix to indentity.
+ */
+Matrix.prototype.reset = function()
+{
+	this.m = [1, 0, 0, 1, 0, 0];
+};
+
+/**
+ * Multiply another matrix by this one and store the result.
+ */
+Matrix.prototype.multiply = function(mat)
+{
+	var m0 = this.m[0] * mat[0] + this.m[2] * mat[1];
+	var m1 = this.m[1] * mat[0] + this.m[3] * mat[1];
+	var m2 = this.m[0] * mat[2] + this.m[2] * mat[3];
+	var m3 = this.m[1] * mat[2] + this.m[3] * mat[3];
+	var m4 = this.m[0] * mat[4] + this.m[2] * mat[5] + this.m[4];
+	var m5 = this.m[1] * mat[4] + this.m[3] * mat[5] + this.m[5];
+	
+	this.m = [m0, m1, m2, m3, m4, m5];
+};
+
+/**
+ * Set position of the transformation matrix.
+ */
+Matrix.prototype.setPosition = function(x, y)
+{
+	this.m[4] = x;
+	this.m[5] = y;
+}
+
+/**
+ * Apply translation to this matrix.
+ */
+Matrix.prototype.translate = function(x, y)
+{
+	this.multiply([1, 0, 0, 1, x, y]);
+};
+
+/**
+ * Apply rotation to this matrix.
+ */
+Matrix.prototype.rotate = function(rAngle)
+{
+	var c = Math.cos(rAngle);
+	var s = Math.sin(rAngle);
+	var mat = [c, s, -s, c, 0, 0];
+
+	this.multiply(mat);
+};
+
+/**
+ * Apply scale to this matrix.
+ */
+Matrix.prototype.scale = function(x, y)
+{
+	this.multiply([x, 0, 0, y, 0, 0]);
+};
+
+/**
+ * Apply skew to this matrix.
+ */
+Matrix.prototype.skew = function(radianX, radianY)
+{
+	this.multiply([1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0]);
+};
+
+/**
+ * Get the matrix determinant.
+ */
+Matrix.prototype.determinant = function()
+{
+	return 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
+};
+
+/**
+ * Get the ivnerse matrix.
+ */
+Matrix.prototype.getInverse = function()
+{
+	var d = this.determinant();
+
+	return [this.m[3] * d, -this.m[1] * d, -this.m[2] * d, this.m[0] * d, d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]), d * (this.m[1] * this.m[4] - this.m[0] * this.m[5])];
+}
+
+/**
+ * Set a canvas context to use this transformation.
+ */
+Matrix.prototype.setContextTransform = function(context)
+{
+	context.setTransform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
+};
+
+/*
+	var screenPoint=(transformedX, transformedY) =>
+	{
+		// invert
+		var d =1/(this.m[0] * this.m[3] - this.m[1] * this.m[2]);
+		var im = [m[3] * d, -m[1] * d, -m[2] * d, this.m[0] * d, d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]), d * (this.m[1] * this.m[4] - this.m[0] * this.m[5])];
+
+		// point
+		return(
+		{
+			x: transformedX * im[0] + transformedY * im[2] + im[4],
+			y: transformedX * im[1] + transformedY * im[3] + im[5]
+		});
+	};
+
+	var transformedPoint = (screenX, screenY) => (
+	{
+		x: screenX * this.m[0] + screenY * this.m[2] + this.m[4],
+		y: screenX * this.m[1] + screenY * this.m[3] + this.m[5]
+	});
+*/

source/math/Matrix32.js

@@ -1,111 +0,0 @@
-
-const Matrix32 = (() =>
-{
-	// private
-	let self;
-	let m = [1, 0, 0, 1, 0, 0];
-
-	const reset = () =>
-	{
-		const m = [1,0,0,1,0,0];
-	};
-
-	const multiply = mat =>
-	{
-		const m0=m[0]*mat[0]+m[2]*mat[1];
-		const m1=m[1]*mat[0]+m[3]*mat[1];
-		const m2=m[0]*mat[2]+m[2]*mat[3];
-		const m3=m[1]*mat[2]+m[3]*mat[3];
-		const m4=m[0]*mat[4]+m[2]*mat[5]+m[4];
-		const m5=m[1]*mat[4]+m[3]*mat[5]+m[5];
-		m=[m0,m1,m2,m3,m4,m5];
-	};
-
-	const screenPoint=(transformedX, transformedY) =>
-	{
-		// invert
-		const d =1/(m[0]*m[3]-m[1]*m[2]);
-		im = [ m[3]*d, -m[1]*d, -m[2]*d, m[0]*d, d*(m[2]*m[5]-m[3]*m[4]), d*(m[1]*m[4]-m[0]*m[5]) ];
-
-		// point
-		return(
-		{
-			x:transformedX*im[0]+transformedY*im[2]+im[4],
-			y:transformedX*im[1]+transformedY*im[3]+im[5]
-		});
-	};
-
-	const transformedPoint=(screenX, screenY) => ({
-		x:screenX*m[0] + screenY*m[2] + m[4],
-		y:screenX*m[1] + screenY*m[3] + m[5]
-	});
-
-	// public
-	class Matrix32
-	{
-		constructor()
-		{
-			self = this;
-		}
-
-		// shared methods
-		translate(x, y)
-		{
-			const mat = [1, 0, 0, 1, x, y];
-			multiply(mat);
-		}
-
-		rotate(rAngle)
-		{
-			const c = Math.cos(rAngle);
-			const s = Math.sin(rAngle);
-			const mat = [c, s, -s, c, 0, 0];    
-			multiply(mat);
-		}
-
-		scale(x, y)
-		{
-			const mat = [x, 0, 0, y, 0, 0];        
-			multiply(mat);
-		}
-
-		skew(radianX, radianY)
-		{
-			const mat=[ 1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0 ];
-			multiply(mat);
-		}
-
-		reset()
-		{
-			reset();
-		}
-
-		setContextTransform(ctx)
-		{
-			ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
-		}
-
-		resetContextTransform(ctx)
-		{
-			ctx.setTransform(1,0,0,1,0,0);
-		}
-
-		getTransformedPoint(screenX, screenY)
-		{
-			return transformedPoint(screenX, screenY);
-		}
-
-		getScreenPoint(transformedX, transformedY)
-		{
-			return screenPoint(transformedX, transformedY);
-		}
-
-		getMatrix()
-		{
-			const clone = [m[0], m[1], m[2], m[3], m[4], m[5]];
-			return(clone);
-		}
-	}
-
-	return(Matrix32);
-})();