Viewport controls

build/trenette.js

@@ -293,30 +293,36 @@
 		return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length)));
 	};
 
+	/**
+	 * Round the vector coordinates to integer by flooring to the smaller integer.
+	 */ 
 	Vector2.prototype.floor = function()
 	{
 		this.x = Math.floor(this.x);
 		this.y = Math.floor(this.y);
 	};
 
+	/**
+	 * Round the vector coordinates to integer by ceiling to the bigger integer.
+	 */ 
 	Vector2.prototype.ceil = function()
 	{
 		this.x = Math.ceil(this.x);
 		this.y = Math.ceil(this.y);
 	};
 
+	/**
+	 * Round the vector coordinates to their closest integer.
+	 */
 	Vector2.prototype.round = function()
 	{
 		this.x = Math.round(this.x);
 		this.y = Math.round(this.y);
 	};
 
-	Vector2.prototype.roundToZero = function()
-	{
-		this.x = (this.x < 0) ? Math.ceil(this.x) : Math.floor(this.x);
-		this.y = (this.y < 0) ? Math.ceil(this.y) : Math.floor(this.y);
-	};
-
+	/**
+	 * Negate the coordinates of this vector.
+	 */
 	Vector2.prototype.negate = function()
 	{
 		this.x = -this.x;
@@ -325,31 +331,57 @@
 		return this;
 	};
 
+	/**
+	 * Dot multiplication between this vector and another vector.
+	 *
+	 * @param {Vector2} vector
+	 * @return {number} Result of the dot multiplication.
+	 */
 	Vector2.prototype.dot = function(v)
 	{
 		return this.x * v.x + this.y * v.y;
 	};
 
+	/**
+	 * Cross multiplication between this vector and another vector.
+	 *
+	 * @param {Vector2} vector
+	 * @return {number} Result of the cross multiplication.
+	 */
 	Vector2.prototype.cross = function(v)
 	{
 		return this.x * v.y - this.y * v.x;
 	};
 
+	/**
+	 * Squared length of the vector.
+	 *
+	 * Faster for comparions.
+	 */
 	Vector2.prototype.lengthSq = function()
 	{
 		return this.x * this.x + this.y * this.y;
 	};
 
+	/**
+	 * Length of the vector.
+	 */
 	Vector2.prototype.length = function()
 	{
 		return Math.sqrt(this.x * this.x + this.y * this.y);
 	};
 
+	/**
+	 * Manhattan length of the vector.
+	 */
 	Vector2.prototype.manhattanLength = function()
 	{
 		return Math.abs(this.x) + Math.abs(this.y);
 	};
 
+	/**
+	 * Normalize the vector (make it length one).
+	 */
 	Vector2.prototype.normalize = function()
 	{
 		return this.divideScalar(this.length() || 1);
@@ -370,11 +402,19 @@
 		return angle;
 	};
 
+	/**
+	 * Distance between two vector positions.
+	 */
 	Vector2.prototype.distanceTo = function(v)
 	{
 		return Math.sqrt(this.distanceToSquared(v));
 	};
 
+	/**
+	 * Distance between two vector positions squared.
+	 *
+	 * Faster for comparisons.
+	 */
 	Vector2.prototype.distanceToSquared = function(v)
 	{
 		var dx = this.x - v.x;
@@ -383,11 +423,17 @@
 		return dx * dx + dy * dy;
 	};
 
+	/**
+	 * Manhattan distance between two vector positions.
+	 */
 	Vector2.prototype.manhattanDistanceTo = function(v)
 	{
 		return Math.abs(this.x - v.x) + Math.abs(this.y - v.y);
 	};
 
+	/**
+	 * Scale the vector to have a defined length value.
+	 */
 	Vector2.prototype.setLength = function(length)
 	{
 		return this.normalize().multiplyScalar(length);
@@ -466,7 +512,10 @@
 	/**
 	 * 2D 3x2 transformation matrix, applied to the canvas elements.
 	 *
+	 * The values of the matrix are stored in a numeric array.
+	 *
 	 * @class
+	 * @param {array} [values]
 	 */
 	function Matrix(values)
 	{
@@ -1531,6 +1580,190 @@
 		this.events.destroy();
 	};
 
+	/**
+	 * Used to indicate how the user views the content inside of the canvas.
+	 *
+	 * @class
+	 */
+	function Viewport()
+	{
+		/**
+		 * UUID of the object.
+		 */
+		this.uuid = UUID.generate(); 
+
+		/**
+		 * Position of the object.
+		 */
+		this.position = new Vector2(0, 0);
+
+		/**
+		 * Scale of the object.
+		 */
+		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();
+
+		/**
+		 * Inverse of the local transformation matrix.
+		 */
+		this.inverseMatrix = new Matrix();
+
+		/**
+		 * If true the matrix is updated before rendering the object.
+		 */
+		this.matrixNeedsUpdate = true;
+
+		/**
+		 * 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;
+	}
+
+
+	/**
+	 * Calculate and update the viewport transformation matrix.
+	 */
+	Viewport.prototype.updateMatrix = function()
+	{
+		if(this.matrixNeedsUpdate)
+		{
+			this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation);
+			this.inverseMatrix = this.matrix.getInverse();
+			//this.matrixNeedsUpdate = false;
+		}
+	};
+
+	/**
+	 * Center the viewport relative to a object.
+	 *
+	 * @param {Object2D} object Object to be centered on the viewport.
+	 * @param {DOM} canvas Canvas element where the image is drawn.
+	 */
+	Viewport.prototype.centerObject = function(object, canvas)
+	{
+		var position = object.globalMatrix.transformPoint(new Vector2());
+		position.multiplyScalar(-this.scale);
+
+		position.x += canvas.width / 2;
+		position.y += canvas.height / 2;
+
+		this.position.copy(position);
+	};
+
+	/**
+	 * 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.RIGHT;
+
+		/**
+		 * Is set to true allow the viewport to be scalled.
+		 */
+		this.allowScale = true;
+
+		/**
+		 * 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;
+
+		/**
+		 * If true allows the viewport to be rotated.
+		 */
+		this.allowRotation = false;
+
+		/**
+		 * 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;
+
+		/**
+		 * Initial rotation of the viewport.
+		 */
+		this.rotationInitial = 0;
+	}
+
+	/**
+	 * Update the viewport controls using the pointer object.
+	 *
+	 * @param {Pointer} pointer
+	 */
+	ViewportControls.prototype.update = function(pointer)
+	{	
+		if(this.allowScale && 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();
+				this.rotationInitial = this.viewport.rotation;
+			}
+			else
+			{
+				var pointer = pointer.position.clone();
+				pointer.sub(this.rotationPoint);
+				this.viewport.rotation = this.rotationInitial + pointer.angle();
+			}
+		}
+		else
+		{
+			this.rotationPoint = null;
+
+			if(pointer.buttonPressed(this.dragButton))
+			{
+				this.viewport.position.x += pointer.delta.x;
+				this.viewport.position.y += pointer.delta.y;
+			}
+		}
+	};
+
 	/**
 	 * The renderer is resposible for drawing the structure into the canvas element.
 	 *
@@ -1575,7 +1808,7 @@
 	/**
 	 * 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.
@@ -1585,6 +1818,8 @@
 	{
 		var self = this;
 		
+		var controls = new ViewportControls(viewport);
+
 		function loop()
 		{
 			if(onUpdate !== undefined)
@@ -1592,6 +1827,7 @@
 				onUpdate();
 			}
 
+			controls.update(self.pointer);
 			self.update(group, viewport);
 			requestAnimationFrame(loop);
 		}
@@ -1639,7 +1875,6 @@
 		pointer.update();
 
 		// Viewport transform matrix
-		viewport.updateControls(pointer);
 		viewport.updateMatrix();
 
 		// Project pointer coordinates
@@ -1814,132 +2049,14 @@
 		}
 	};
 
-	/**
-	 * Used to indicate how the user views the content inside of the canvas.
-	 *
-	 * @class
-	 */
-	function Viewport()
-	{
-		/**
-		 * UUID of the object.
-		 */
-		this.uuid = UUID.generate(); 
-
-		/**
-		 * Position of the object.
-		 */
-		this.position = new Vector2(0, 0);
-
-		/**
-		 * Scale of the object.
-		 */
-		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();
-
-		/**
-		 * Inverse of the local transformation matrix.
-		 */
-		this.inverseMatrix = new Matrix();
-
-		/**
-		 * If true the matrix is updated before rendering the object.
-		 */
-		this.matrixNeedsUpdate = true;
-
-		/**
-		 * 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.
-	 */
-	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.
-	 */
-	Viewport.prototype.updateMatrix = function()
-	{
-		if(this.matrixNeedsUpdate)
-		{
-			this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation);
-			this.inverseMatrix = this.matrix.getInverse();
-			//this.matrixNeedsUpdate = false;
-		}
-	};
-
-	/**
-	 * Center the viewport relative to a object.
-	 *
-	 * @param {Object2D} object Object to be centered on the viewport.
-	 * @param {DOM} canvas Canvas element where the image is drawn.
-	 */
-	Viewport.prototype.centerObject = function(object, canvas)
-	{
-		var position = object.globalMatrix.transformPoint(new Vector2());
-		position.multiplyScalar(-this.scale);
-
-		position.x += canvas.width / 2;
-		position.y += canvas.height / 2;
-
-		this.position.copy(position);
-	};
-
 	/**
 	 * Box is described by a minimum and maximum points.
 	 *
 	 * Can be used for collision detection with points and other boxes.
 	 *
 	 * @class
+	 * @param {Vector2} min
+	 * @param {Vector2} max
 	 */
 	function Box2(min, max)
 	{
@@ -1949,6 +2066,9 @@
 
 	/**
 	 * Set the box values.
+	 *
+	 * @param {Vector2} min
+	 * @param {Vector2} max
 	 */
 	Box2.prototype.set = function(min, max)
 	{
@@ -1960,6 +2080,8 @@
 
 	/**
 	 * Set the box from a list of Vector2 points.
+	 *
+	 * @param {Array} points
 	 */
 	Box2.prototype.setFromPoints = function(points)
 	{
@@ -1976,6 +2098,9 @@
 
 	/** 
 	 * Set the box minimum and maximum from center point and size.
+	 *
+	 * @param {Vector2} center
+	 * @param {Vector2} size
 	 */
 	Box2.prototype.setFromCenterAndSize = function(center, size)
 	{
@@ -1989,6 +2114,10 @@
 
 	/**
 	 * Clone the box into a new object.
+	 *
+	 * Should be used when it it necessary to make operations to this box.
+	 *
+	 * @return {Box2} New box object with the copy of this object.
 	 */
 	Box2.prototype.clone = function()
 	{
@@ -1999,6 +2128,8 @@
 
 	/**
 	 * Copy the box value from another box.
+	 *
+	 * @param {Box2} point
 	 */
 	Box2.prototype.copy = function(box)
 	{
@@ -2010,6 +2141,8 @@
 	 * Check if the box is empty (size equals zero or is negative).
 	 *
 	 * The box size is condireded valid on two negative axis.
+	 *
+	 * @return {boolean} True if the box is empty.
 	 */
 	Box2.prototype.isEmpty = function()
 	{
@@ -2018,6 +2151,9 @@
 
 	/**
 	 * Calculate the center point of the box.
+	 *
+	 * @param {Vector2} [target] Vector to store the result.
+	 * @return {Vector2} Central point of the box.
 	 */
 	Box2.prototype.getCenter = function(target)
 	{
@@ -2032,7 +2168,10 @@
 	};
 
 	/**
-	 * Get the size of the box.
+	 * Get the size of the box from its min and max points.
+	 *
+	 * @param {Vector2} [target] Vector to store the result.
+	 * @return {Vector2} Vector with the calculated size.
 	 */
 	Box2.prototype.getSize = function(target)
 	{
@@ -2048,6 +2187,8 @@
 
 	/**
 	 * Expand the box to contain a new point.
+	 *
+	 * @param {Vector2} point
 	 */
 	Box2.prototype.expandByPoint = function(point)
 	{
@@ -2061,6 +2202,8 @@
 	 * Expand the box by adding a border with the vector size.
 	 *
 	 * Vector is subtracted from min and added to the max points.
+	 *
+	 * @param {Vector2} vector
 	 */
 	Box2.prototype.expandByVector = function(vector)
 	{
@@ -2070,6 +2213,8 @@
 
 	/**
 	 * Expand the box by adding a border with the scalar value.
+	 *
+	 * @param {number} scalar
 	 */
 	Box2.prototype.expandByScalar = function(scalar)
 	{
@@ -2112,22 +2257,11 @@
 		return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true;
 	};
 
-	Box2.prototype.clampPoint = function(point, target)
-	{
-		if(target === undefined)
-		{
-			target = new Vector2();
-		}
-
-		target.copy(point).clamp(this.min, this.max);
-
-		return target;
-	};
-
 	/**
 	 * Calculate the distance to a point.
 	 *
 	 * @param {Vector2} point
+	 * @return {number} Distance to point calculated.
 	 */
 	Box2.prototype.distanceToPoint = function(point)
 	{

build/trenette.module.js

@@ -287,30 +287,36 @@ Vector2.prototype.clampLength = function(min, max)
 	return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length)));
 };
 
+/**
+ * Round the vector coordinates to integer by flooring to the smaller integer.
+ */ 
 Vector2.prototype.floor = function()
 {
 	this.x = Math.floor(this.x);
 	this.y = Math.floor(this.y);
 };
 
+/**
+ * Round the vector coordinates to integer by ceiling to the bigger integer.
+ */ 
 Vector2.prototype.ceil = function()
 {
 	this.x = Math.ceil(this.x);
 	this.y = Math.ceil(this.y);
 };
 
+/**
+ * Round the vector coordinates to their closest integer.
+ */
 Vector2.prototype.round = function()
 {
 	this.x = Math.round(this.x);
 	this.y = Math.round(this.y);
 };
 
-Vector2.prototype.roundToZero = function()
-{
-	this.x = (this.x < 0) ? Math.ceil(this.x) : Math.floor(this.x);
-	this.y = (this.y < 0) ? Math.ceil(this.y) : Math.floor(this.y);
-};
-
+/**
+ * Negate the coordinates of this vector.
+ */
 Vector2.prototype.negate = function()
 {
 	this.x = -this.x;
@@ -319,31 +325,57 @@ Vector2.prototype.negate = function()
 	return this;
 };
 
+/**
+ * Dot multiplication between this vector and another vector.
+ *
+ * @param {Vector2} vector
+ * @return {number} Result of the dot multiplication.
+ */
 Vector2.prototype.dot = function(v)
 {
 	return this.x * v.x + this.y * v.y;
 };
 
+/**
+ * Cross multiplication between this vector and another vector.
+ *
+ * @param {Vector2} vector
+ * @return {number} Result of the cross multiplication.
+ */
 Vector2.prototype.cross = function(v)
 {
 	return this.x * v.y - this.y * v.x;
 };
 
+/**
+ * Squared length of the vector.
+ *
+ * Faster for comparions.
+ */
 Vector2.prototype.lengthSq = function()
 {
 	return this.x * this.x + this.y * this.y;
 };
 
+/**
+ * Length of the vector.
+ */
 Vector2.prototype.length = function()
 {
 	return Math.sqrt(this.x * this.x + this.y * this.y);
 };
 
+/**
+ * Manhattan length of the vector.
+ */
 Vector2.prototype.manhattanLength = function()
 {
 	return Math.abs(this.x) + Math.abs(this.y);
 };
 
+/**
+ * Normalize the vector (make it length one).
+ */
 Vector2.prototype.normalize = function()
 {
 	return this.divideScalar(this.length() || 1);
@@ -364,11 +396,19 @@ Vector2.prototype.angle = function()
 	return angle;
 };
 
+/**
+ * Distance between two vector positions.
+ */
 Vector2.prototype.distanceTo = function(v)
 {
 	return Math.sqrt(this.distanceToSquared(v));
 };
 
+/**
+ * Distance between two vector positions squared.
+ *
+ * Faster for comparisons.
+ */
 Vector2.prototype.distanceToSquared = function(v)
 {
 	var dx = this.x - v.x;
@@ -377,11 +417,17 @@ Vector2.prototype.distanceToSquared = function(v)
 	return dx * dx + dy * dy;
 };
 
+/**
+ * Manhattan distance between two vector positions.
+ */
 Vector2.prototype.manhattanDistanceTo = function(v)
 {
 	return Math.abs(this.x - v.x) + Math.abs(this.y - v.y);
 };
 
+/**
+ * Scale the vector to have a defined length value.
+ */
 Vector2.prototype.setLength = function(length)
 {
 	return this.normalize().multiplyScalar(length);
@@ -460,7 +506,10 @@ Vector2.prototype.rotateAround = function(center, angle)
 /**
  * 2D 3x2 transformation matrix, applied to the canvas elements.
  *
+ * The values of the matrix are stored in a numeric array.
+ *
  * @class
+ * @param {array} [values]
  */
 function Matrix(values)
 {
@@ -1525,6 +1574,190 @@ Pointer.dispose = function()
 	this.events.destroy();
 };
 
+/**
+ * Used to indicate how the user views the content inside of the canvas.
+ *
+ * @class
+ */
+function Viewport()
+{
+	/**
+	 * UUID of the object.
+	 */
+	this.uuid = UUID.generate(); 
+
+	/**
+	 * Position of the object.
+	 */
+	this.position = new Vector2(0, 0);
+
+	/**
+	 * Scale of the object.
+	 */
+	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();
+
+	/**
+	 * Inverse of the local transformation matrix.
+	 */
+	this.inverseMatrix = new Matrix();
+
+	/**
+	 * If true the matrix is updated before rendering the object.
+	 */
+	this.matrixNeedsUpdate = true;
+
+	/**
+	 * 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;
+}
+
+
+/**
+ * Calculate and update the viewport transformation matrix.
+ */
+Viewport.prototype.updateMatrix = function()
+{
+	if(this.matrixNeedsUpdate)
+	{
+		this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation);
+		this.inverseMatrix = this.matrix.getInverse();
+		//this.matrixNeedsUpdate = false;
+	}
+};
+
+/**
+ * Center the viewport relative to a object.
+ *
+ * @param {Object2D} object Object to be centered on the viewport.
+ * @param {DOM} canvas Canvas element where the image is drawn.
+ */
+Viewport.prototype.centerObject = function(object, canvas)
+{
+	var position = object.globalMatrix.transformPoint(new Vector2());
+	position.multiplyScalar(-this.scale);
+
+	position.x += canvas.width / 2;
+	position.y += canvas.height / 2;
+
+	this.position.copy(position);
+};
+
+/**
+ * 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.RIGHT;
+
+	/**
+	 * Is set to true allow the viewport to be scalled.
+	 */
+	this.allowScale = true;
+
+	/**
+	 * 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;
+
+	/**
+	 * If true allows the viewport to be rotated.
+	 */
+	this.allowRotation = false;
+
+	/**
+	 * 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;
+
+	/**
+	 * Initial rotation of the viewport.
+	 */
+	this.rotationInitial = 0;
+}
+
+/**
+ * Update the viewport controls using the pointer object.
+ *
+ * @param {Pointer} pointer
+ */
+ViewportControls.prototype.update = function(pointer)
+{	
+	if(this.allowScale && 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();
+			this.rotationInitial = this.viewport.rotation;
+		}
+		else
+		{
+			var pointer = pointer.position.clone();
+			pointer.sub(this.rotationPoint);
+			this.viewport.rotation = this.rotationInitial + pointer.angle();
+		}
+	}
+	else
+	{
+		this.rotationPoint = null;
+
+		if(pointer.buttonPressed(this.dragButton))
+		{
+			this.viewport.position.x += pointer.delta.x;
+			this.viewport.position.y += pointer.delta.y;
+		}
+	}
+};
+
 /**
  * The renderer is resposible for drawing the structure into the canvas element.
  *
@@ -1569,7 +1802,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.
@@ -1579,6 +1812,8 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 {
 	var self = this;
 	
+	var controls = new ViewportControls(viewport);
+
 	function loop()
 	{
 		if(onUpdate !== undefined)
@@ -1586,6 +1821,7 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 			onUpdate();
 		}
 
+		controls.update(self.pointer);
 		self.update(group, viewport);
 		requestAnimationFrame(loop);
 	}
@@ -1633,7 +1869,6 @@ Renderer.prototype.update = function(object, viewport)
 	pointer.update();
 
 	// Viewport transform matrix
-	viewport.updateControls(pointer);
 	viewport.updateMatrix();
 
 	// Project pointer coordinates
@@ -1808,132 +2043,14 @@ Renderer.prototype.update = function(object, viewport)
 	}
 };
 
-/**
- * Used to indicate how the user views the content inside of the canvas.
- *
- * @class
- */
-function Viewport()
-{
-	/**
-	 * UUID of the object.
-	 */
-	this.uuid = UUID.generate(); 
-
-	/**
-	 * Position of the object.
-	 */
-	this.position = new Vector2(0, 0);
-
-	/**
-	 * Scale of the object.
-	 */
-	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();
-
-	/**
-	 * Inverse of the local transformation matrix.
-	 */
-	this.inverseMatrix = new Matrix();
-
-	/**
-	 * If true the matrix is updated before rendering the object.
-	 */
-	this.matrixNeedsUpdate = true;
-
-	/**
-	 * 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.
- */
-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.
- */
-Viewport.prototype.updateMatrix = function()
-{
-	if(this.matrixNeedsUpdate)
-	{
-		this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation);
-		this.inverseMatrix = this.matrix.getInverse();
-		//this.matrixNeedsUpdate = false;
-	}
-};
-
-/**
- * Center the viewport relative to a object.
- *
- * @param {Object2D} object Object to be centered on the viewport.
- * @param {DOM} canvas Canvas element where the image is drawn.
- */
-Viewport.prototype.centerObject = function(object, canvas)
-{
-	var position = object.globalMatrix.transformPoint(new Vector2());
-	position.multiplyScalar(-this.scale);
-
-	position.x += canvas.width / 2;
-	position.y += canvas.height / 2;
-
-	this.position.copy(position);
-};
-
 /**
  * Box is described by a minimum and maximum points.
  *
  * Can be used for collision detection with points and other boxes.
  *
  * @class
+ * @param {Vector2} min
+ * @param {Vector2} max
  */
 function Box2(min, max)
 {
@@ -1943,6 +2060,9 @@ function Box2(min, max)
 
 /**
  * Set the box values.
+ *
+ * @param {Vector2} min
+ * @param {Vector2} max
  */
 Box2.prototype.set = function(min, max)
 {
@@ -1954,6 +2074,8 @@ Box2.prototype.set = function(min, max)
 
 /**
  * Set the box from a list of Vector2 points.
+ *
+ * @param {Array} points
  */
 Box2.prototype.setFromPoints = function(points)
 {
@@ -1970,6 +2092,9 @@ Box2.prototype.setFromPoints = function(points)
 
 /** 
  * Set the box minimum and maximum from center point and size.
+ *
+ * @param {Vector2} center
+ * @param {Vector2} size
  */
 Box2.prototype.setFromCenterAndSize = function(center, size)
 {
@@ -1983,6 +2108,10 @@ Box2.prototype.setFromCenterAndSize = function(center, size)
 
 /**
  * Clone the box into a new object.
+ *
+ * Should be used when it it necessary to make operations to this box.
+ *
+ * @return {Box2} New box object with the copy of this object.
  */
 Box2.prototype.clone = function()
 {
@@ -1993,6 +2122,8 @@ Box2.prototype.clone = function()
 
 /**
  * Copy the box value from another box.
+ *
+ * @param {Box2} point
  */
 Box2.prototype.copy = function(box)
 {
@@ -2004,6 +2135,8 @@ Box2.prototype.copy = function(box)
  * Check if the box is empty (size equals zero or is negative).
  *
  * The box size is condireded valid on two negative axis.
+ *
+ * @return {boolean} True if the box is empty.
  */
 Box2.prototype.isEmpty = function()
 {
@@ -2012,6 +2145,9 @@ Box2.prototype.isEmpty = function()
 
 /**
  * Calculate the center point of the box.
+ *
+ * @param {Vector2} [target] Vector to store the result.
+ * @return {Vector2} Central point of the box.
  */
 Box2.prototype.getCenter = function(target)
 {
@@ -2026,7 +2162,10 @@ Box2.prototype.getCenter = function(target)
 };
 
 /**
- * Get the size of the box.
+ * Get the size of the box from its min and max points.
+ *
+ * @param {Vector2} [target] Vector to store the result.
+ * @return {Vector2} Vector with the calculated size.
  */
 Box2.prototype.getSize = function(target)
 {
@@ -2042,6 +2181,8 @@ Box2.prototype.getSize = function(target)
 
 /**
  * Expand the box to contain a new point.
+ *
+ * @param {Vector2} point
  */
 Box2.prototype.expandByPoint = function(point)
 {
@@ -2055,6 +2196,8 @@ Box2.prototype.expandByPoint = function(point)
  * Expand the box by adding a border with the vector size.
  *
  * Vector is subtracted from min and added to the max points.
+ *
+ * @param {Vector2} vector
  */
 Box2.prototype.expandByVector = function(vector)
 {
@@ -2064,6 +2207,8 @@ Box2.prototype.expandByVector = function(vector)
 
 /**
  * Expand the box by adding a border with the scalar value.
+ *
+ * @param {number} scalar
  */
 Box2.prototype.expandByScalar = function(scalar)
 {
@@ -2106,22 +2251,11 @@ Box2.prototype.intersectsBox = function(box)
 	return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true;
 };
 
-Box2.prototype.clampPoint = function(point, target)
-{
-	if(target === undefined)
-	{
-		target = new Vector2();
-	}
-
-	target.copy(point).clamp(this.min, this.max);
-
-	return target;
-};
-
 /**
  * Calculate the distance to a point.
  *
  * @param {Vector2} point
+ * @return {number} Distance to point calculated.
  */
 Box2.prototype.distanceToPoint = function(point)
 {

docs/BezierCurve.html

@@ -685,13 +685,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box.html

@@ -407,13 +407,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxMask.html

@@ -486,13 +486,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Circle.html

@@ -407,13 +407,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/DOM.html

@@ -407,13 +407,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

@@ -682,13 +682,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.js.html

@@ -105,13 +105,13 @@ export {EventManager};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Graph.html

@@ -593,13 +593,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Helpers.html

@@ -335,13 +335,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Image.html

@@ -485,13 +485,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Key.html

@@ -613,13 +613,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -469,13 +469,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Mask.html

@@ -342,13 +342,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

@@ -28,7 +28,7 @@
 
 <header>
     
-        <h2><span class="attribs"><span class="type-signature"></span></span>Matrix<span class="signature">()</span><span class="type-signature"></span></h2>
+        <h2><span class="attribs"><span class="type-signature"></span></span>Matrix<span class="signature">(values<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h2>
         
     
 </header>
@@ -41,7 +41,7 @@
     
 
     
-    <h4 class="name" id="Matrix"><span class="type-signature"></span>new Matrix<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="Matrix"><span class="type-signature"></span>new Matrix<span class="signature">(values<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
     
 
     
@@ -49,7 +49,7 @@
 
 
 <div class="description">
-    2D 3x2 transformation matrix, applied to the canvas elements.
+    2D 3x2 transformation matrix, applied to the canvas elements.

The values of the matrix are stored in a numeric array.
 </div>
 
 
@@ -60,6 +60,67 @@
 
 
 
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+        <th>Attributes</th>
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>values</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">array</span>
+
+
+            
+            </td>
+
+            
+                <td class="attributes">
+                
+                    &lt;optional><br>
+                
+
+                
+
+                
+                </td>
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -93,7 +154,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line10">line 10</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line13">line 13</a>
     </li></ul></dd>
     
 
@@ -201,7 +262,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line33">line 33</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line36">line 36</a>
     </li></ul></dd>
     
 
@@ -289,7 +350,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line83">line 83</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line86">line 86</a>
     </li></ul></dd>
     
 
@@ -377,7 +438,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line25">line 25</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line28">line 28</a>
     </li></ul></dd>
     
 
@@ -465,7 +526,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line182">line 182</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line185">line 185</a>
     </li></ul></dd>
     
 
@@ -553,7 +614,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line190">line 190</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line193">line 193</a>
     </li></ul></dd>
     
 
@@ -641,7 +702,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line166">line 166</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line169">line 169</a>
     </li></ul></dd>
     
 
@@ -729,7 +790,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line158">line 158</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line161">line 161</a>
     </li></ul></dd>
     
 
@@ -817,7 +878,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line41">line 41</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line44">line 44</a>
     </li></ul></dd>
     
 
@@ -949,7 +1010,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line51">line 51</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line54">line 54</a>
     </li></ul></dd>
     
 
@@ -1081,7 +1142,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line68">line 68</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line71">line 71</a>
     </li></ul></dd>
     
 
@@ -1213,7 +1274,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line119">line 119</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line122">line 122</a>
     </li></ul></dd>
     
 
@@ -1301,7 +1362,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line138">line 138</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line141">line 141</a>
     </li></ul></dd>
     
 
@@ -1389,7 +1450,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line211">line 211</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line214">line 214</a>
     </li></ul></dd>
     
 
@@ -1477,7 +1538,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line149">line 149</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line152">line 152</a>
     </li></ul></dd>
     
 
@@ -1565,7 +1626,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line174">line 174</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line177">line 177</a>
     </li></ul></dd>
     
 
@@ -1653,7 +1714,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line219">line 219</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line222">line 222</a>
     </li></ul></dd>
     
 
@@ -1741,7 +1802,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line200">line 200</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line203">line 203</a>
     </li></ul></dd>
     
 
@@ -1829,7 +1890,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line108">line 108</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line111">line 111</a>
     </li></ul></dd>
     
 
@@ -1875,13 +1936,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.html

@@ -3088,13 +3088,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -373,13 +373,13 @@ export {Object2D};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

@@ -437,13 +437,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

@@ -2554,13 +2554,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line12">line 12</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line13">line 13</a>
     </li></ul></dd>
     
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line43">line 43</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line44">line 44</a>
     </li></ul></dd>
     
 
@@ -249,7 +249,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line25">line 25</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line26">line 26</a>
     </li></ul></dd>
     
 
@@ -311,7 +311,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line30">line 30</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line31">line 31</a>
     </li></ul></dd>
     
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line37">line 37</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line38">line 38</a>
     </li></ul></dd>
     
 
@@ -409,7 +409,7 @@
 
 
 <div class="description">
-    Creates a infinite render loop to render the group into a viewport each frame.

The render loop cannot be destroyed.
+    Creates a infinite render loop to render the group into a viewport each frame.

The render loop cannot be destroyed, and it automatically creates a viewport controls object.
 </div>
 
 
@@ -548,7 +548,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line55">line 55</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line56">line 56</a>
     </li></ul></dd>
     
 
@@ -698,7 +698,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line85">line 85</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line89">line 89</a>
     </li></ul></dd>
     
 
@@ -744,13 +744,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -29,6 +29,7 @@
             <pre class="prettyprint source linenums"><code>"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.
@@ -74,7 +75,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.
@@ -84,6 +85,8 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 {
 	var self = this;
 	
+	var controls = new ViewportControls(viewport);
+
 	function loop()
 	{
 		if(onUpdate !== undefined)
@@ -91,6 +94,7 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 			onUpdate();
 		}
 
+		controls.update(self.pointer);
 		self.update(group, viewport);
 		requestAnimationFrame(loop);
 	}
@@ -138,7 +142,6 @@ Renderer.prototype.update = function(object, viewport)
 	pointer.update();
 
 	// Viewport transform matrix
-	viewport.updateControls(pointer);
 	viewport.updateMatrix();
 
 	// Project pointer coordinates
@@ -324,13 +327,13 @@ export {Renderer};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

@@ -407,13 +407,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

@@ -221,13 +221,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.html

@@ -835,95 +835,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line117">line 117</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-        
-            
-
-    
-
-    
-    <h4 class="name" id="updateControls"><span class="type-signature"></span>updateControls<span class="signature">()</span><span class="type-signature"></span></h4>
-    
-
-    
-
-
-
-<div class="description">
-    Update the viewport controls using the pointer object.
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line68">line 68</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line85">line 85</a>
     </li></ul></dd>
     
 
@@ -1011,7 +923,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line101">line 101</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line69">line 69</a>
     </li></ul></dd>
     
 
@@ -1057,13 +969,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -90,38 +90,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.
@@ -164,13 +132,13 @@ export {Viewport};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/ViewportControls.html

@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Class: ViewportControls</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Class: ViewportControls</h1>
+
+    
+
+
+
+
+<section>
+
+<header>
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>ViewportControls<span class="signature">(viewport)</span><span class="type-signature"></span></h2>
+        
+    
+</header>
+
+<article>
+    <div class="container-overview">
+    
+        
+
+    
+
+    
+    <h4 class="name" id="ViewportControls"><span class="type-signature"></span>new ViewportControls<span class="signature">(viewport)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Viewport controls are used to allow the user to control the viewport.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>viewport</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line12">line 12</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    
+    </div>
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <h3 class="subsection-title">Members</h3>
+
+        
+            
+<h4 class="name" id="allowRotation"><span class="type-signature"></span>allowRotation<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    If true allows the viewport to be rotated.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line39">line 39</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="allowScale"><span class="type-signature"></span>allowScale<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Is set to true allow the viewport to be scalled.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line27">line 27</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="dragButton"><span class="type-signature"></span>dragButton<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Button used to drag and viewport around.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line22">line 22</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="moveOnScale"><span class="type-signature"></span>moveOnScale<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    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.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line34">line 34</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="rotationInitial"><span class="type-signature"></span>rotationInitial<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Initial rotation of the viewport.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line51">line 51</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="rotationPoint"><span class="type-signature"></span>rotationPoint<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Value of the initial point of rotation if the viewport is being rotated.

Is set to null when the viewport is not being rotated.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line46">line 46</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="viewport"><span class="type-signature"></span>viewport<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Viewport being controlled by this object.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line17">line 17</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+    
+
+    
+        <h3 class="subsection-title">Methods</h3>
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(pointer)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Update the viewport controls using the pointer object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>pointer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Pointer.html">Pointer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line59">line 59</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+    
+
+    
+
+    
+</article>
+
+</section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/controls_ViewportControls.js.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: controls/ViewportControls.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: controls/ViewportControls.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>"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.RIGHT;
+
+	/**
+	 * Is set to true allow the viewport to be scalled.
+	 */
+	this.allowScale = true;
+
+	/**
+	 * 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;
+
+	/**
+	 * If true allows the viewport to be rotated.
+	 */
+	this.allowRotation = false;
+
+	/**
+	 * 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;
+
+	/**
+	 * Initial rotation of the viewport.
+	 */
+	this.rotationInitial = 0;
+}
+
+/**
+ * Update the viewport controls using the pointer object.
+ *
+ * @param {Pointer} pointer
+ */
+ViewportControls.prototype.update = function(pointer)
+{	
+	if(this.allowScale &amp;&amp; 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 &amp;&amp; pointer.buttonPressed(Pointer.RIGHT) &amp;&amp; pointer.buttonPressed(Pointer.LEFT))
+	{
+		if(this.rotationPoint === null)
+		{
+			this.rotationPoint = pointer.position.clone();
+			this.rotationInitial = this.viewport.rotation;
+		}
+		else
+		{
+			var pointer = pointer.position.clone();
+			pointer.sub(this.rotationPoint);
+			this.viewport.rotation = this.rotationInitial + pointer.angle();
+		}
+	}
+	else
+	{
+		this.rotationPoint = null;
+
+		if(pointer.buttonPressed(this.dragButton))
+		{
+			this.viewport.position.x += pointer.delta.x;
+			this.viewport.position.y += pointer.delta.y;
+		}
+	}
+};
+
+export {ViewportControls};</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/index.html

@@ -50,13 +50,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Key.js.html

@@ -120,13 +120,13 @@ export {Key};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Pointer.js.html

@@ -437,13 +437,13 @@ export {Pointer};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -36,6 +36,8 @@ import {Vector2} from "./Vector2.js";
  * Can be used for collision detection with points and other boxes.
  *
  * @class
+ * @param {Vector2} min
+ * @param {Vector2} max
  */
 function Box2(min, max)
 {
@@ -45,6 +47,9 @@ function Box2(min, max)
 
 /**
  * Set the box values.
+ *
+ * @param {Vector2} min
+ * @param {Vector2} max
  */
 Box2.prototype.set = function(min, max)
 {
@@ -56,6 +61,8 @@ Box2.prototype.set = function(min, max)
 
 /**
  * Set the box from a list of Vector2 points.
+ *
+ * @param {Array} points
  */
 Box2.prototype.setFromPoints = function(points)
 {
@@ -72,6 +79,9 @@ Box2.prototype.setFromPoints = function(points)
 
 /** 
  * Set the box minimum and maximum from center point and size.
+ *
+ * @param {Vector2} center
+ * @param {Vector2} size
  */
 Box2.prototype.setFromCenterAndSize = function(center, size)
 {
@@ -85,6 +95,10 @@ Box2.prototype.setFromCenterAndSize = function(center, size)
 
 /**
  * Clone the box into a new object.
+ *
+ * Should be used when it it necessary to make operations to this box.
+ *
+ * @return {Box2} New box object with the copy of this object.
  */
 Box2.prototype.clone = function()
 {
@@ -95,6 +109,8 @@ Box2.prototype.clone = function()
 
 /**
  * Copy the box value from another box.
+ *
+ * @param {Box2} point
  */
 Box2.prototype.copy = function(box)
 {
@@ -106,6 +122,8 @@ Box2.prototype.copy = function(box)
  * Check if the box is empty (size equals zero or is negative).
  *
  * The box size is condireded valid on two negative axis.
+ *
+ * @return {boolean} True if the box is empty.
  */
 Box2.prototype.isEmpty = function()
 {
@@ -114,6 +132,9 @@ Box2.prototype.isEmpty = function()
 
 /**
  * Calculate the center point of the box.
+ *
+ * @param {Vector2} [target] Vector to store the result.
+ * @return {Vector2} Central point of the box.
  */
 Box2.prototype.getCenter = function(target)
 {
@@ -128,7 +149,10 @@ Box2.prototype.getCenter = function(target)
 };
 
 /**
- * Get the size of the box.
+ * Get the size of the box from its min and max points.
+ *
+ * @param {Vector2} [target] Vector to store the result.
+ * @return {Vector2} Vector with the calculated size.
  */
 Box2.prototype.getSize = function(target)
 {
@@ -144,6 +168,8 @@ Box2.prototype.getSize = function(target)
 
 /**
  * Expand the box to contain a new point.
+ *
+ * @param {Vector2} point
  */
 Box2.prototype.expandByPoint = function(point)
 {
@@ -157,6 +183,8 @@ Box2.prototype.expandByPoint = function(point)
  * Expand the box by adding a border with the vector size.
  *
  * Vector is subtracted from min and added to the max points.
+ *
+ * @param {Vector2} vector
  */
 Box2.prototype.expandByVector = function(vector)
 {
@@ -166,6 +194,8 @@ Box2.prototype.expandByVector = function(vector)
 
 /**
  * Expand the box by adding a border with the scalar value.
+ *
+ * @param {number} scalar
  */
 Box2.prototype.expandByScalar = function(scalar)
 {
@@ -208,22 +238,11 @@ Box2.prototype.intersectsBox = function(box)
 	return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true;
 };
 
-Box2.prototype.clampPoint = function(point, target)
-{
-	if(target === undefined)
-	{
-		target = new Vector2();
-	}
-
-	target.copy(point).clamp(this.min, this.max);
-
-	return target;
-};
-
 /**
  * Calculate the distance to a point.
  *
  * @param {Vector2} point
+ * @return {number} Distance to point calculated.
  */
 Box2.prototype.distanceToPoint = function(point)
 {
@@ -291,13 +310,13 @@ export {Box2};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -33,7 +33,10 @@ import {Vector2} from "./Vector2.js";
 /**
  * 2D 3x2 transformation matrix, applied to the canvas elements.
  *
+ * The values of the matrix are stored in a numeric array.
+ *
  * @class
+ * @param {array} [values]
  */
 function Matrix(values)
 {
@@ -265,13 +268,13 @@ export {Matrix};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_UUID.js.html

@@ -77,13 +77,13 @@ export {UUID};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -252,30 +252,36 @@ Vector2.prototype.clampLength = function(min, max)
 	return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length)));
 };
 
+/**
+ * Round the vector coordinates to integer by flooring to the smaller integer.
+ */ 
 Vector2.prototype.floor = function()
 {
 	this.x = Math.floor(this.x);
 	this.y = Math.floor(this.y);
 };
 
+/**
+ * Round the vector coordinates to integer by ceiling to the bigger integer.
+ */ 
 Vector2.prototype.ceil = function()
 {
 	this.x = Math.ceil(this.x);
 	this.y = Math.ceil(this.y);
 };
 
+/**
+ * Round the vector coordinates to their closest integer.
+ */
 Vector2.prototype.round = function()
 {
 	this.x = Math.round(this.x);
 	this.y = Math.round(this.y);
 };
 
-Vector2.prototype.roundToZero = function()
-{
-	this.x = (this.x < 0) ? Math.ceil(this.x) : Math.floor(this.x);
-	this.y = (this.y < 0) ? Math.ceil(this.y) : Math.floor(this.y);
-};
-
+/**
+ * Negate the coordinates of this vector.
+ */
 Vector2.prototype.negate = function()
 {
 	this.x = -this.x;
@@ -284,31 +290,57 @@ Vector2.prototype.negate = function()
 	return this;
 };
 
+/**
+ * Dot multiplication between this vector and another vector.
+ *
+ * @param {Vector2} vector
+ * @return {number} Result of the dot multiplication.
+ */
 Vector2.prototype.dot = function(v)
 {
 	return this.x * v.x + this.y * v.y;
 };
 
+/**
+ * Cross multiplication between this vector and another vector.
+ *
+ * @param {Vector2} vector
+ * @return {number} Result of the cross multiplication.
+ */
 Vector2.prototype.cross = function(v)
 {
 	return this.x * v.y - this.y * v.x;
 };
 
+/**
+ * Squared length of the vector.
+ *
+ * Faster for comparions.
+ */
 Vector2.prototype.lengthSq = function()
 {
 	return this.x * this.x + this.y * this.y;
 };
 
+/**
+ * Length of the vector.
+ */
 Vector2.prototype.length = function()
 {
 	return Math.sqrt(this.x * this.x + this.y * this.y);
 };
 
+/**
+ * Manhattan length of the vector.
+ */
 Vector2.prototype.manhattanLength = function()
 {
 	return Math.abs(this.x) + Math.abs(this.y);
 };
 
+/**
+ * Normalize the vector (make it length one).
+ */
 Vector2.prototype.normalize = function()
 {
 	return this.divideScalar(this.length() || 1);
@@ -329,11 +361,19 @@ Vector2.prototype.angle = function()
 	return angle;
 };
 
+/**
+ * Distance between two vector positions.
+ */
 Vector2.prototype.distanceTo = function(v)
 {
 	return Math.sqrt(this.distanceToSquared(v));
 };
 
+/**
+ * Distance between two vector positions squared.
+ *
+ * Faster for comparisons.
+ */
 Vector2.prototype.distanceToSquared = function(v)
 {
 	var dx = this.x - v.x;
@@ -342,11 +382,17 @@ Vector2.prototype.distanceToSquared = function(v)
 	return dx * dx + dy * dy;
 };
 
+/**
+ * Manhattan distance between two vector positions.
+ */
 Vector2.prototype.manhattanDistanceTo = function(v)
 {
 	return Math.abs(this.x - v.x) + Math.abs(this.y - v.y);
 };
 
+/**
+ * Scale the vector to have a defined length value.
+ */
 Vector2.prototype.setLength = function(length)
 {
 	return this.normalize().multiplyScalar(length);
@@ -433,13 +479,13 @@ export {Vector2};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_BezierCurve.js.html

@@ -148,13 +148,13 @@ export {BezierCurve};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Box.js.html

@@ -105,13 +105,13 @@ export {Box};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Circle.js.html

@@ -101,13 +101,13 @@ export {Circle};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -108,13 +108,13 @@ export {DOM};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Graph.js.html

@@ -137,13 +137,13 @@ export {Graph};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Image.js.html

@@ -103,13 +103,13 @@ export {Image};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

@@ -95,13 +95,13 @@ export {Line};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Pattern.js.html

@@ -115,13 +115,13 @@ export {Pattern};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Text.js.html

@@ -83,13 +83,13 @@ export {Text};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_BoxMask.js.html

@@ -94,13 +94,13 @@ export {BoxMask};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_Mask.js.html

@@ -71,13 +71,13 @@ export {Mask};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_Helpers.js.html

@@ -149,13 +149,13 @@ export {Helpers};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "trenette.js",
-	"version": "0.1.7",
+	"version": "0.1.8",
 	"description": "trenette.js is a web library for building interactive diagrams and graphs.",
 	"main": "build/trenette.min.js",
 	"repository": {

source/controls/ViewportControls.js

@@ -19,12 +19,12 @@ function ViewportControls(viewport)
 	/**
 	 * Button used to drag and viewport around.
 	 */
-	this.dragButton = Pointer.LEFT;
+	this.dragButton = Pointer.RIGHT;
 
 	/**
-	 * If true allows the viewport to be rotated.
+	 * Is set to true allow the viewport to be scalled.
 	 */
-	this.allowRotation = false;
+	this.allowScale = true;
 
 	/**
 	 * Flag to indicate if the viewport should move when scalling.
@@ -33,20 +33,32 @@ function ViewportControls(viewport)
 	 */
 	this.moveOnScale = true;
 
+	/**
+	 * If true allows the viewport to be rotated.
+	 */
+	this.allowRotation = false;
+
 	/**
 	 * 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;
+
+	/**
+	 * Initial rotation of the viewport.
+	 */
+	this.rotationInitial = 0;
 }
 
 /**
  * Update the viewport controls using the pointer object.
+ *
+ * @param {Pointer} pointer
  */
 ViewportControls.prototype.update = function(pointer)
 {	
-	if(pointer.wheel !== 0)
+	if(this.allowScale && pointer.wheel !== 0)
 	{
 		this.viewport.scale -= pointer.wheel * 1e-3 * this.viewport.scale;
 
@@ -66,11 +78,13 @@ ViewportControls.prototype.update = function(pointer)
 		if(this.rotationPoint === null)
 		{
 			this.rotationPoint = pointer.position.clone();
+			this.rotationInitial = this.viewport.rotation;
 		}
 		else
 		{
-			//TODO <USE ROTATION POINT>
-			this.viewport.rotation += pointer.delta.angle() * 1e-3;
+			var pointer = pointer.position.clone();
+			pointer.sub(this.rotationPoint);
+			this.viewport.rotation = this.rotationInitial + pointer.angle();
 		}
 	}
 	else
@@ -83,4 +97,6 @@ ViewportControls.prototype.update = function(pointer)
 			this.viewport.position.y += pointer.delta.y;
 		}
 	}
-};
+};
+
+export {ViewportControls};

source/math/Box2.js

@@ -8,6 +8,8 @@ import {Vector2} from "./Vector2.js";
  * Can be used for collision detection with points and other boxes.
  *
  * @class
+ * @param {Vector2} min
+ * @param {Vector2} max
  */
 function Box2(min, max)
 {
@@ -17,6 +19,9 @@ function Box2(min, max)
 
 /**
  * Set the box values.
+ *
+ * @param {Vector2} min
+ * @param {Vector2} max
  */
 Box2.prototype.set = function(min, max)
 {
@@ -28,6 +33,8 @@ Box2.prototype.set = function(min, max)
 
 /**
  * Set the box from a list of Vector2 points.
+ *
+ * @param {Array} points
  */
 Box2.prototype.setFromPoints = function(points)
 {
@@ -44,6 +51,9 @@ Box2.prototype.setFromPoints = function(points)
 
 /** 
  * Set the box minimum and maximum from center point and size.
+ *
+ * @param {Vector2} center
+ * @param {Vector2} size
  */
 Box2.prototype.setFromCenterAndSize = function(center, size)
 {
@@ -57,6 +67,10 @@ Box2.prototype.setFromCenterAndSize = function(center, size)
 
 /**
  * Clone the box into a new object.
+ *
+ * Should be used when it it necessary to make operations to this box.
+ *
+ * @return {Box2} New box object with the copy of this object.
  */
 Box2.prototype.clone = function()
 {
@@ -67,6 +81,8 @@ Box2.prototype.clone = function()
 
 /**
  * Copy the box value from another box.
+ *
+ * @param {Box2} point
  */
 Box2.prototype.copy = function(box)
 {
@@ -78,6 +94,8 @@ Box2.prototype.copy = function(box)
  * Check if the box is empty (size equals zero or is negative).
  *
  * The box size is condireded valid on two negative axis.
+ *
+ * @return {boolean} True if the box is empty.
  */
 Box2.prototype.isEmpty = function()
 {
@@ -86,6 +104,9 @@ Box2.prototype.isEmpty = function()
 
 /**
  * Calculate the center point of the box.
+ *
+ * @param {Vector2} [target] Vector to store the result.
+ * @return {Vector2} Central point of the box.
  */
 Box2.prototype.getCenter = function(target)
 {
@@ -100,7 +121,10 @@ Box2.prototype.getCenter = function(target)
 };
 
 /**
- * Get the size of the box.
+ * Get the size of the box from its min and max points.
+ *
+ * @param {Vector2} [target] Vector to store the result.
+ * @return {Vector2} Vector with the calculated size.
  */
 Box2.prototype.getSize = function(target)
 {
@@ -116,6 +140,8 @@ Box2.prototype.getSize = function(target)
 
 /**
  * Expand the box to contain a new point.
+ *
+ * @param {Vector2} point
  */
 Box2.prototype.expandByPoint = function(point)
 {
@@ -129,6 +155,8 @@ Box2.prototype.expandByPoint = function(point)
  * Expand the box by adding a border with the vector size.
  *
  * Vector is subtracted from min and added to the max points.
+ *
+ * @param {Vector2} vector
  */
 Box2.prototype.expandByVector = function(vector)
 {
@@ -138,6 +166,8 @@ Box2.prototype.expandByVector = function(vector)
 
 /**
  * Expand the box by adding a border with the scalar value.
+ *
+ * @param {number} scalar
  */
 Box2.prototype.expandByScalar = function(scalar)
 {
@@ -180,22 +210,11 @@ Box2.prototype.intersectsBox = function(box)
 	return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true;
 };
 
-Box2.prototype.clampPoint = function(point, target)
-{
-	if(target === undefined)
-	{
-		target = new Vector2();
-	}
-
-	target.copy(point).clamp(this.min, this.max);
-
-	return target;
-};
-
 /**
  * Calculate the distance to a point.
  *
  * @param {Vector2} point
+ * @return {number} Distance to point calculated.
  */
 Box2.prototype.distanceToPoint = function(point)
 {

source/math/Matrix.js

@@ -5,7 +5,10 @@ import {Vector2} from "./Vector2.js";
 /**
  * 2D 3x2 transformation matrix, applied to the canvas elements.
  *
+ * The values of the matrix are stored in a numeric array.
+ *
  * @class
+ * @param {array} [values]
  */
 function Matrix(values)
 {

source/math/Vector2.js

@@ -224,30 +224,36 @@ Vector2.prototype.clampLength = function(min, max)
 	return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length)));
 };
 
+/**
+ * Round the vector coordinates to integer by flooring to the smaller integer.
+ */ 
 Vector2.prototype.floor = function()
 {
 	this.x = Math.floor(this.x);
 	this.y = Math.floor(this.y);
 };
 
+/**
+ * Round the vector coordinates to integer by ceiling to the bigger integer.
+ */ 
 Vector2.prototype.ceil = function()
 {
 	this.x = Math.ceil(this.x);
 	this.y = Math.ceil(this.y);
 };
 
+/**
+ * Round the vector coordinates to their closest integer.
+ */
 Vector2.prototype.round = function()
 {
 	this.x = Math.round(this.x);
 	this.y = Math.round(this.y);
 };
 
-Vector2.prototype.roundToZero = function()
-{
-	this.x = (this.x < 0) ? Math.ceil(this.x) : Math.floor(this.x);
-	this.y = (this.y < 0) ? Math.ceil(this.y) : Math.floor(this.y);
-};
-
+/**
+ * Negate the coordinates of this vector.
+ */
 Vector2.prototype.negate = function()
 {
 	this.x = -this.x;
@@ -256,31 +262,57 @@ Vector2.prototype.negate = function()
 	return this;
 };
 
+/**
+ * Dot multiplication between this vector and another vector.
+ *
+ * @param {Vector2} vector
+ * @return {number} Result of the dot multiplication.
+ */
 Vector2.prototype.dot = function(v)
 {
 	return this.x * v.x + this.y * v.y;
 };
 
+/**
+ * Cross multiplication between this vector and another vector.
+ *
+ * @param {Vector2} vector
+ * @return {number} Result of the cross multiplication.
+ */
 Vector2.prototype.cross = function(v)
 {
 	return this.x * v.y - this.y * v.x;
 };
 
+/**
+ * Squared length of the vector.
+ *
+ * Faster for comparions.
+ */
 Vector2.prototype.lengthSq = function()
 {
 	return this.x * this.x + this.y * this.y;
 };
 
+/**
+ * Length of the vector.
+ */
 Vector2.prototype.length = function()
 {
 	return Math.sqrt(this.x * this.x + this.y * this.y);
 };
 
+/**
+ * Manhattan length of the vector.
+ */
 Vector2.prototype.manhattanLength = function()
 {
 	return Math.abs(this.x) + Math.abs(this.y);
 };
 
+/**
+ * Normalize the vector (make it length one).
+ */
 Vector2.prototype.normalize = function()
 {
 	return this.divideScalar(this.length() || 1);
@@ -301,11 +333,19 @@ Vector2.prototype.angle = function()
 	return angle;
 };
 
+/**
+ * Distance between two vector positions.
+ */
 Vector2.prototype.distanceTo = function(v)
 {
 	return Math.sqrt(this.distanceToSquared(v));
 };
 
+/**
+ * Distance between two vector positions squared.
+ *
+ * Faster for comparisons.
+ */
 Vector2.prototype.distanceToSquared = function(v)
 {
 	var dx = this.x - v.x;
@@ -314,11 +354,17 @@ Vector2.prototype.distanceToSquared = function(v)
 	return dx * dx + dy * dy;
 };
 
+/**
+ * Manhattan distance between two vector positions.
+ */
 Vector2.prototype.manhattanDistanceTo = function(v)
 {
 	return Math.abs(this.x - v.x) + Math.abs(this.y - v.y);
 };
 
+/**
+ * Scale the vector to have a defined length value.
+ */
 Vector2.prototype.setLength = function(length)
 {
 	return this.normalize().multiplyScalar(length);