Clean up

build/trenette.js

@@ -74,6 +74,8 @@
 	 * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
 	 *
 	 * @class
+	 * @param {number} x
+	 * @param {number} y
 	 */
 	function Vector2(x, y)
 	{
@@ -81,29 +83,51 @@
 		this.y = y || 0;
 	}
 
+	/**
+	 * Set vector x and y values.
+	 *
+	 * @param {number} x
+	 * @param {number} y
+	 */
 	Vector2.prototype.set = function(x, y)
 	{
 		this.x = x;
 		this.y = y;
 	};
 
+	/**
+	 * Set a scalar value into the x and y values.
+	 */
 	Vector2.prototype.setScalar = function(scalar)
 	{
 		this.x = scalar;
 		this.y = scalar;
 	};
 
+	/**
+	 * Create a clone of this vector object.
+	 */
 	Vector2.prototype.clone = function()
 	{
 		return new Vector2(this.x, this.y);
 	};
 
+	/**
+	 * Copy the content of another vector into this one.
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.copy = function(v)
 	{
 		this.x = v.x;
 		this.y = v.y;
 	};
 
+	/**
+	 * Add the content of another vector to this one.
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.add = function(v)
 	{
 		this.x += v.x;
@@ -128,6 +152,13 @@
 		this.y += v.y * s;
 	};
 
+
+	/**
+	 * Subtract the content of another vector to this one.
+	 *
+	 * @param {Vector2} v
+	 */
+
 	Vector2.prototype.sub = function(v)
 	{
 		this.x -= v.x;
@@ -146,6 +177,12 @@
 		this.y = a.y - b.y;
 	};
 
+
+	/**
+	 * Multiply the content of another vector to this one.
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.multiply = function(v)
 	{
 		this.x *= v.x;
@@ -158,6 +195,12 @@
 		this.y *= scalar;
 	};
 
+
+	/**
+	 * Divide the content of another vector from this one.
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.divide = function(v)
 	{
 		this.x /= v.x;
@@ -169,12 +212,26 @@
 		return this.multiplyScalar(1 / scalar);
 	};
 
+	/**
+	 * Set the minimum of x and y coordinates between two vectors.
+	 *
+	 * X is set as the min between this vector and the other vector. 
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.min = function(v)
 	{
 		this.x = Math.min(this.x, v.x);
 		this.y = Math.min(this.y, v.y);
 	};
 
+	/**
+	 * Set the maximum of x and y coordinates between two vectors.
+	 *
+	 * X is set as the max between this vector and the other vector. 
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.max = function(v)
 	{
 		this.x = Math.max(this.x, v.x);
@@ -312,6 +369,11 @@
 		return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1);
 	};
 
+	/**
+	 * Check if two vectors are equal.
+	 *
+	 * @param {Vector2} v
+	 */
 	Vector2.prototype.equals = function(v)
 	{
 		return ((v.x === this.x) && (v.y === this.y));
@@ -336,6 +398,12 @@
 		return array;
 	};
 
+	/**
+	 * Rotate the vector around a central point.
+	 *
+	 * @param {Vector2} center
+	 * @param {number} angle
+	 */
 	Vector2.prototype.rotateAround = function(center, angle)
 	{
 		var c = Math.cos(angle);
@@ -1580,12 +1648,7 @@
 			child.updateMatrix();
 		});
 		
-		// Sort objects by layer
-		objects.sort(function(a, b)
-		{
-			return a.layer - b.layer;
-		});
-		
+
 		this.context.setTransform(1, 0, 0, 1, 0, 0);
 		
 		// Clear canvas content
@@ -1595,7 +1658,7 @@
 		}
 
 		// Render into the canvas
-		for(var i = 0; i < objects.length; i++)
+		for(var i = objects.length - 1; i >= 0; i--)
 		{	
 			if(objects[i].isMask)
 			{
@@ -2351,7 +2414,8 @@
 		context.font = this.font;
 		context.textAlign = this.textAlign;
 		context.fillStyle = this.color;
-
+		context.textBaseline = "middle";
+		
 		context.fillText(this.text, 0, 0);
 	};
 
@@ -2409,7 +2473,10 @@
 
 	Image.prototype.draw = function(context, viewport, canvas)
 	{
-		context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+		if(this.image.src.length > 0)
+		{
+			context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+		}
 	};
 
 	/**
@@ -2429,6 +2496,8 @@
 
 		/**
 		 * DOM element contained by this object.
+		 *
+		 * Bye default it has the pointerEvents style set to none.
 		 */
 		this.element = document.createElement("div");
 		this.element.style.transformStyle = "preserve-3d";
@@ -2437,6 +2506,7 @@
 		this.element.style.bottom = "0px";
 		this.element.style.transformOrigin = "0px 0px";
 		this.element.style.overflow = "auto";
+		this.element.style.pointerEvents = "none";
 		parent.appendChild(this.element);
 		
 		/**
@@ -2447,7 +2517,7 @@
 
 	DOM.prototype = Object.create(Object2D.prototype);
 
-	DOM.prototype.draw = function(context, viewport, canvas)
+	DOM.prototype.transform = function(context, viewport, canvas)
 	{
 		// CSS trasnformation matrix
 		var projection = viewport.matrix.clone();
@@ -2457,6 +2527,9 @@
 		// Size of the element
 		this.element.style.width = this.size.x + "px";
 		this.element.style.height = this.size.y + "px";
+
+		// Visibility
+		this.element.style.display = this.visible ? "block" : "none"; 
 	};
 
 	/**
@@ -2520,11 +2593,15 @@
 		var width = this.box.max.x - this.box.min.x;
 		var height = this.box.max.y - this.box.min.y;
 
-		var pattern = context.createPattern(this.image, this.repetition);
-		//pattern.setTransform();
+		if(this.image.src.length > 0)
+		{
+			var pattern = context.createPattern(this.image, this.repetition);
+			
+			//pattern.setTransform();
 
-		context.fillStyle = pattern;
-		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+			context.fillStyle = pattern;
+			context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		}
 	};
 
 	exports.Box = Box;

build/trenette.module.js

@@ -68,6 +68,8 @@ EventManager.prototype.destroy = function()
  * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
  *
  * @class
+ * @param {number} x
+ * @param {number} y
  */
 function Vector2(x, y)
 {
@@ -75,29 +77,51 @@ function Vector2(x, y)
 	this.y = y || 0;
 }
 
+/**
+ * Set vector x and y values.
+ *
+ * @param {number} x
+ * @param {number} y
+ */
 Vector2.prototype.set = function(x, y)
 {
 	this.x = x;
 	this.y = y;
 };
 
+/**
+ * Set a scalar value into the x and y values.
+ */
 Vector2.prototype.setScalar = function(scalar)
 {
 	this.x = scalar;
 	this.y = scalar;
 };
 
+/**
+ * Create a clone of this vector object.
+ */
 Vector2.prototype.clone = function()
 {
 	return new Vector2(this.x, this.y);
 };
 
+/**
+ * Copy the content of another vector into this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.copy = function(v)
 {
 	this.x = v.x;
 	this.y = v.y;
 };
 
+/**
+ * Add the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.add = function(v)
 {
 	this.x += v.x;
@@ -122,6 +146,13 @@ Vector2.prototype.addScaledVector = function(v, s)
 	this.y += v.y * s;
 };
 
+
+/**
+ * Subtract the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
+
 Vector2.prototype.sub = function(v)
 {
 	this.x -= v.x;
@@ -140,6 +171,12 @@ Vector2.prototype.subVectors = function(a, b)
 	this.y = a.y - b.y;
 };
 
+
+/**
+ * Multiply the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.multiply = function(v)
 {
 	this.x *= v.x;
@@ -152,6 +189,12 @@ Vector2.prototype.multiplyScalar = function(scalar)
 	this.y *= scalar;
 };
 
+
+/**
+ * Divide the content of another vector from this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.divide = function(v)
 {
 	this.x /= v.x;
@@ -163,12 +206,26 @@ Vector2.prototype.divideScalar = function(scalar)
 	return this.multiplyScalar(1 / scalar);
 };
 
+/**
+ * Set the minimum of x and y coordinates between two vectors.
+ *
+ * X is set as the min between this vector and the other vector. 
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.min = function(v)
 {
 	this.x = Math.min(this.x, v.x);
 	this.y = Math.min(this.y, v.y);
 };
 
+/**
+ * Set the maximum of x and y coordinates between two vectors.
+ *
+ * X is set as the max between this vector and the other vector. 
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.max = function(v)
 {
 	this.x = Math.max(this.x, v.x);
@@ -306,6 +363,11 @@ Vector2.prototype.lerpVectors = function(v1, v2, alpha)
 	return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1);
 };
 
+/**
+ * Check if two vectors are equal.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.equals = function(v)
 {
 	return ((v.x === this.x) && (v.y === this.y));
@@ -330,6 +392,12 @@ Vector2.prototype.toArray = function(array, offset)
 	return array;
 };
 
+/**
+ * Rotate the vector around a central point.
+ *
+ * @param {Vector2} center
+ * @param {number} angle
+ */
 Vector2.prototype.rotateAround = function(center, angle)
 {
 	var c = Math.cos(angle);
@@ -1574,12 +1642,7 @@ Renderer.prototype.update = function(object, viewport)
 		child.updateMatrix();
 	});
 	
-	// Sort objects by layer
-	objects.sort(function(a, b)
-	{
-		return a.layer - b.layer;
-	});
-	
+
 	this.context.setTransform(1, 0, 0, 1, 0, 0);
 	
 	// Clear canvas content
@@ -1589,7 +1652,7 @@ Renderer.prototype.update = function(object, viewport)
 	}
 
 	// Render into the canvas
-	for(var i = 0; i < objects.length; i++)
+	for(var i = objects.length - 1; i >= 0; i--)
 	{	
 		if(objects[i].isMask)
 		{
@@ -2345,7 +2408,8 @@ Text.prototype.draw = function(context, viewport, canvas)
 	context.font = this.font;
 	context.textAlign = this.textAlign;
 	context.fillStyle = this.color;
-
+	context.textBaseline = "middle";
+	
 	context.fillText(this.text, 0, 0);
 };
 
@@ -2403,7 +2467,10 @@ Image.prototype.isInside = function(point)
 
 Image.prototype.draw = function(context, viewport, canvas)
 {
-	context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+	if(this.image.src.length > 0)
+	{
+		context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+	}
 };
 
 /**
@@ -2423,6 +2490,8 @@ function DOM(parent, type)
 
 	/**
 	 * DOM element contained by this object.
+	 *
+	 * Bye default it has the pointerEvents style set to none.
 	 */
 	this.element = document.createElement("div");
 	this.element.style.transformStyle = "preserve-3d";
@@ -2431,6 +2500,7 @@ function DOM(parent, type)
 	this.element.style.bottom = "0px";
 	this.element.style.transformOrigin = "0px 0px";
 	this.element.style.overflow = "auto";
+	this.element.style.pointerEvents = "none";
 	parent.appendChild(this.element);
 	
 	/**
@@ -2441,7 +2511,7 @@ function DOM(parent, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
-DOM.prototype.draw = function(context, viewport, canvas)
+DOM.prototype.transform = function(context, viewport, canvas)
 {
 	// CSS trasnformation matrix
 	var projection = viewport.matrix.clone();
@@ -2451,6 +2521,9 @@ DOM.prototype.draw = function(context, viewport, canvas)
 	// Size of the element
 	this.element.style.width = this.size.x + "px";
 	this.element.style.height = this.size.y + "px";
+
+	// Visibility
+	this.element.style.display = this.visible ? "block" : "none"; 
 };
 
 /**
@@ -2514,11 +2587,15 @@ Pattern.prototype.draw = function(context, viewport, canvas)
 	var width = this.box.max.x - this.box.min.x;
 	var height = this.box.max.y - this.box.min.y;
 
-	var pattern = context.createPattern(this.image, this.repetition);
-	//pattern.setTransform();
+	if(this.image.src.length > 0)
+	{
+		var pattern = context.createPattern(this.image, this.repetition);
+		
+		//pattern.setTransform();
 
-	context.fillStyle = pattern;
-	context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		context.fillStyle = pattern;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
 };
 
 export { Box, Box2, BoxMask, Circle, DOM, EventManager, Helpers, Image, Key, Line, Mask, Matrix, Object2D, Pattern, Pointer, Renderer, Text, UUID, Vector2, Viewport };

docs/Box.html

@@ -351,7 +351,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box2.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Box is described by a minimum and maximum points.
-
-Can be used for collision detection with points and other boxes.
+    Box is described by a minimum and maximum points.

Can be used for collision detection with points and other boxes.
 </div>
 
 
@@ -247,9 +245,7 @@ Can be used for collision detection with points and other boxes.
 
 
 <div class="description">
-    Check if the box fully contains another box inside (different from intersects box).
-
-Only returns true if the box is fully contained.
+    Check if the box fully contains another box inside (different from intersects box).

Only returns true if the box is fully contained.
 </div>
 
 
@@ -1127,9 +1123,7 @@ Only returns true if the box is fully contained.
 
 
 <div class="description">
-    Expand the box by adding a border with the vector size.
-
-Vector is subtracted from min and added to the max points.
+    Expand the box by adding a border with the vector size.

Vector is subtracted from min and added to the max points.
 </div>
 
 
@@ -1393,9 +1387,7 @@ Vector is subtracted from min and added to the max points.
 
 
 <div class="description">
-    Make a intersection between this box and another box.
-
-Store the result in this object.
+    Make a intersection between this box and another box.

Store the result in this object.
 </div>
 
 
@@ -1691,9 +1683,7 @@ Store the result in this object.
 
 
 <div class="description">
-    Check if the box is empty (size equals zero or is negative).
-
-The box size is condireded valid on two negative axis.
+    Check if the box is empty (size equals zero or is negative).

The box size is condireded valid on two negative axis.
 </div>
 
 
@@ -2182,9 +2172,7 @@ The box size is condireded valid on two negative axis.
 
 
 <div class="description">
-    Make a union between this box and another box.
-
-Store the result in this object.
+    Make a union between this box and another box.

Store the result in this object.
 </div>
 
 
@@ -2329,7 +2317,7 @@ Store the result in this object.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxMask.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Box mask can be used to clear a box mask region.
-
-It will limit the drwaing region to this box.
+    Box mask can be used to clear a box mask region.

It will limit the drwaing region to this box.
 </div>
 
 
@@ -494,7 +492,7 @@ It will limit the drwaing region to this box.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Circle.html

@@ -351,7 +351,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/DOM.html

@@ -49,11 +49,7 @@
 
 
 <div class="description">
-    A DOM object transformed using CSS3D to ver included in the graph.
-
-DOM objects always stay on top of everything else, mouse events are not supported for these.
-
-Use the normal DOM events for interaction.
+    A DOM object transformed using CSS3D to ver included in the graph.

DOM objects always stay on top of everything else, mouse events are not supported for these.

Use the normal DOM events for interaction.
 </div>
 
 
@@ -215,7 +211,7 @@ Use the normal DOM events for interaction.
 
 
 <div class="description">
-    DOM element contained by this object.
+    DOM element contained by this object.

Bye default it has the pointerEvents style set to none.
 </div>
 
 
@@ -253,7 +249,7 @@ Use the normal DOM events for interaction.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line24">line 24</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line26">line 26</a>
     </li></ul></dd>
     
 
@@ -315,7 +311,7 @@ Use the normal DOM events for interaction.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line36">line 36</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -355,7 +351,7 @@ Use the normal DOM events for interaction.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    EventManager is used to manager DOM events creationg and destruction in a single function call.
-
-It is used by objects to make it easier to add and remove events from global DOM objects.
+    EventManager is used to manager DOM events creationg and destruction in a single function call.

It is used by objects to make it easier to add and remove events from global DOM objects.
 </div>
 
 
@@ -151,9 +149,7 @@ It is used by objects to make it easier to add and remove events from global DOM
 
 
 <div class="description">
-    Stores all events in the manager, their target and callback.
-
-Format [target, event, callback, active]
+    Stores all events in the manager, their target and callback.

Format [target, event, callback, active]
 </div>
 
 
@@ -692,7 +688,7 @@ Format [target, event, callback, active]
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.js.html

@@ -111,7 +111,7 @@ export {EventManager};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Helpers.html

@@ -157,11 +157,7 @@
 
 
 <div class="description">
-    Create a box resize helper and attach it to an object to change the size of the object box.
-
-Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
-
-This method required to object to have a box property.
+    Create a box resize helper and attach it to an object to change the size of the object box.

Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.

This method required to object to have a box property.
 </div>
 
 
@@ -249,9 +245,7 @@ This method required to object to have a box property.
 
 
 <div class="description">
-    Create a rotation tool helper.
-
-When the object is dragged is changes the parent object rotation.
+    Create a rotation tool helper.

When the object is dragged is changes the parent object rotation.
 </div>
 
 
@@ -347,7 +341,7 @@ When the object is dragged is changes the parent object rotation.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Image.html

@@ -346,9 +346,7 @@
 
 
 <div class="description">
-    Set the image of the object.
-
-Automatically sets the box size to match the image.
+    Set the image of the object.

Automatically sets the box size to match the image.
 </div>
 
 
@@ -493,7 +491,7 @@ Automatically sets the box size to match the image.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Key.html

@@ -619,7 +619,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -211,9 +211,7 @@
 
 
 <div class="description">
-    Initial point of the line.
-
-Can be equal to the position object of another object. (Making it automatically follow that object.)
+    Initial point of the line.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 </div>
 
 
@@ -399,9 +397,7 @@ Can be equal to the position object of another object. (Making it automatically
 
 
 <div class="description">
-    Final point of the line.
-
-Can be equal to the position object of another object. (Making it automatically follow that object.)
+    Final point of the line.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 </div>
 
 
@@ -479,7 +475,7 @@ Can be equal to the position object of another object. (Making it automatically
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Mask.html

@@ -49,11 +49,7 @@
 
 
 <div class="description">
-    A mask can be used to set the drawing region.
-
-Masks are treated as objects their shape is used to filter other objects shape.
-
-Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
+    A mask can be used to set the drawing region.

Masks are treated as objects their shape is used to filter other objects shape.

Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
 </div>
 
 
@@ -352,7 +348,7 @@ Multiple mask objects can be active simulatenously, they have to be attached to
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

@@ -1881,7 +1881,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.html

@@ -273,9 +273,7 @@
 
 
 <div class="description">
-    Indicates if its possible to drag the object around.
-
-If true the onPointerDrag callback is used to update the state of the object.
+    Indicates if its possible to drag the object around.

If true the onPointerDrag callback is used to update the state of the object.
 </div>
 
 
@@ -337,9 +335,7 @@ If true the onPointerDrag callback is used to update the state of the object.
 
 
 <div class="description">
-    Global transformation matrix multiplied by the parent matrix.
-
-Used to transform the object before projecting into screen coordinates.
+    Global transformation matrix multiplied by the parent matrix.

Used to transform the object before projecting into screen coordinates.
 </div>
 
 
@@ -463,9 +459,7 @@ Used to transform the object before projecting into screen coordinates.
 
 
 <div class="description">
-    Inverse of the global matrix.
-
-Used to convert pointer input points into object coordinates.
+    Inverse of the global matrix.

Used to convert pointer input points into object coordinates.
 </div>
 
 
@@ -527,9 +521,7 @@ Used to convert pointer input points into object coordinates.
 
 
 <div class="description">
-    Layer of this object, objects are sorted by layer value.
-
-Lower layer value is draw first.
+    Layer of this object, objects are sorted by layer value.

Lower layer value is draw first.
 </div>
 
 
@@ -591,9 +583,7 @@ Lower layer value is draw first.
 
 
 <div class="description">
-    Masks being applied to this object.
-
-Multiple masks can be used simultaneously.
+    Masks being applied to this object.

Multiple masks can be used simultaneously.
 </div>
 
 
@@ -841,9 +831,7 @@ Multiple masks can be used simultaneously.
 
 
 <div class="description">
-    Callback method called while the pointer button is pressed.
-
-Receives (pointer, viewport) as arguments.
+    Callback method called while the pointer button is pressed.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -967,9 +955,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called when the pointer enters the object.
-
-Receives (pointer, viewport) as arguments.
+    Callback method called when the pointer enters the object.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1031,9 +1017,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called when the was inside of the object and leaves the object.
-
-Receives (pointer, viewport) as arguments.
+    Callback method called when the was inside of the object and leaves the object.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1095,9 +1079,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method while the pointer is over (inside) of the object.
-
-Receives (pointer, viewport) as arguments.
+    Callback method while the pointer is over (inside) of the object.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1159,9 +1141,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called every time before the object is draw into the canvas.
-
-Can be used to run preparation code, move the object, etc.
+    Callback method called every time before the object is draw into the canvas.

Can be used to run preparation code, move the object, etc.
 </div>
 
 
@@ -1347,9 +1327,7 @@ Can be used to run preparation code, move the object, etc.
 
 
 <div class="description">
-    Indicates if this object uses pointer events.
-
-Can be set false to skip the pointer interaction events.
+    Indicates if this object uses pointer events.

Can be set false to skip the pointer interaction events.
 </div>
 
 
@@ -1411,9 +1389,7 @@ Can be set false to skip the pointer interaction events.
 
 
 <div class="description">
-    Flag indicating if the pointer is inside of the element.
-
-Used to control object event.
+    Flag indicating if the pointer is inside of the element.

Used to control object event.
 </div>
 
 
@@ -2053,9 +2029,7 @@ Used to control object event.
 
 
 <div class="description">
-    Draw the object into the canvas.
-
-Has to be implemented by underlying classes.
+    Draw the object into the canvas.

Has to be implemented by underlying classes.
 </div>
 
 
@@ -2326,9 +2300,7 @@ Has to be implemented by underlying classes.
 
 
 <div class="description">
-    Callback method while the object is being dragged across the screen.
-
-Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
+    Callback method while the object is being dragged across the screen.

Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
 </div>
 
 
@@ -2548,11 +2520,7 @@ Receives (pointer, viewport, delta) as arguments. Delta is the movement of the p
 
 
 <div class="description">
-    Apply the transform to the rendering context.
-
-It is assumed that the viewport transform is pre-applied to the context.
-
-Can also be used for pre rendering logic.
+    Apply the transform to the rendering context.

It is assumed that the viewport transform is pre-applied to the context.

Can also be used for pre rendering logic.
 </div>
 
 
@@ -2940,7 +2908,7 @@ Can also be used for pre rendering logic.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -328,7 +328,7 @@ export {Object2D};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Pattern object draw a image repeated as a pattern.
-
-Its similar to the Image class but the image can be repeat infinitly.
+    Pattern object draw a image repeated as a pattern.

Its similar to the Image class but the image can be repeat infinitly.
 </div>
 
 
@@ -349,9 +347,7 @@ Its similar to the Image class but the image can be repeat infinitly.
 
 
 <div class="description">
-    Set the image of the object.
-
-Automatically sets the box size to match the image.
+    Set the image of the object.

Automatically sets the box size to match the image.
 </div>
 
 
@@ -447,7 +443,7 @@ Automatically sets the box size to match the image.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Pointer instance for input in sync with the running 3D application.
-
-The pointer object provided by scripts is automatically updated by the runtime handler.
+    Pointer instance for input in sync with the running 3D application.

The pointer object provided by scripts is automatically updated by the runtime handler.
 </div>
 
 
@@ -781,11 +779,7 @@ The pointer object provided by scripts is automatically updated by the runtime h
 
 
 <div class="description">
-    Event manager responsible for updating the raw data variables.
-
-Diferent events are used depending on the host platform.
-
-When the update method is called the raw data is reset.
+    Event manager responsible for updating the raw data variables.

Diferent events are used depending on the host platform.

When the update method is called the raw data is reset.
 </div>
 
 
@@ -2192,9 +2186,7 @@ When the update method is called the raw data is reset.
 
 
 <div class="description">
-    Update a pointer button.
-
-Automatically called by the runtime.
+    Update a pointer button.

Automatically called by the runtime.
 </div>
 
 
@@ -2354,9 +2346,7 @@ Automatically called by the runtime.
 
 
 <div class="description">
-    Update pointer position.
-
-Automatically called by the runtime.
+    Update pointer position.

Automatically called by the runtime.
 </div>
 
 
@@ -2570,7 +2560,7 @@ Automatically called by the runtime.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    The renderer is resposible for drawing the structure into the canvas element.
-
-Its also resposible for managing the canvas state.
+    The renderer is resposible for drawing the structure into the canvas element.

Its also resposible for managing the canvas state.
 </div>
 
 
@@ -411,9 +409,7 @@ Its also resposible for managing the canvas state.
 
 
 <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.
 </div>
 
 
@@ -596,13 +592,7 @@ The render loop cannot be destroyed.
 
 
 <div class="description">
-    Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
-
-Render the object using the viewport into a canvas element.
-
-The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one.
-
-Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop.
+    Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.

Render the object using the viewport into a canvas element.

The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one.

Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop.
 </div>
 
 
@@ -760,7 +750,7 @@ Should be called at a fixed rate preferably using the requestAnimationFrame() me
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -245,12 +245,7 @@ Renderer.prototype.update = function(object, viewport)
 		child.updateMatrix();
 	});
 	
-	// Sort objects by layer
-	objects.sort(function(a, b)
-	{
-		return a.layer - b.layer;
-	});
-	
+
 	this.context.setTransform(1, 0, 0, 1, 0, 0);
 	
 	// Clear canvas content
@@ -260,7 +255,7 @@ Renderer.prototype.update = function(object, viewport)
 	}
 
 	// Render into the canvas
-	for(var i = 0; i < objects.length; i++)
+	for(var i = objects.length - 1; i >= 0; i--)
 	{	
 		if(objects[i].isMask)
 		{
@@ -323,7 +318,7 @@ export {Renderer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

@@ -413,7 +413,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

@@ -149,9 +149,7 @@
 
 
 <div class="description">
-    Generate new random UUID v4 as string.
-
-http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
+    Generate new random UUID v4 as string.

http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
 </div>
 
 
@@ -229,7 +227,7 @@ http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascrip
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.html

@@ -335,9 +335,7 @@
 
 
 <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.
+    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>
 
 
@@ -843,7 +841,7 @@ For some application its easier to focus the target if the viewport moves to the
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -140,7 +140,7 @@ export {Viewport};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/index.html

@@ -56,7 +56,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Key.js.html

@@ -126,7 +126,7 @@ export {Key};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Pointer.js.html

@@ -443,7 +443,7 @@ export {Pointer};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/mask_BoxMask.js.html

@@ -100,7 +100,7 @@ export {BoxMask};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/mask_Mask.js.html

@@ -75,7 +75,7 @@ export {Mask};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -277,7 +277,7 @@ export {Box2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -271,7 +271,7 @@ export {Matrix};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_UUID.js.html

@@ -83,7 +83,7 @@ export {UUID};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -33,6 +33,8 @@
  * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
  *
  * @class
+ * @param {number} x
+ * @param {number} y
  */
 function Vector2(x, y)
 {
@@ -40,29 +42,51 @@ function Vector2(x, y)
 	this.y = y || 0;
 }
 
+/**
+ * Set vector x and y values.
+ *
+ * @param {number} x
+ * @param {number} y
+ */
 Vector2.prototype.set = function(x, y)
 {
 	this.x = x;
 	this.y = y;
 };
 
+/**
+ * Set a scalar value into the x and y values.
+ */
 Vector2.prototype.setScalar = function(scalar)
 {
 	this.x = scalar;
 	this.y = scalar;
 };
 
+/**
+ * Create a clone of this vector object.
+ */
 Vector2.prototype.clone = function()
 {
 	return new Vector2(this.x, this.y);
 };
 
+/**
+ * Copy the content of another vector into this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.copy = function(v)
 {
 	this.x = v.x;
 	this.y = v.y;
 };
 
+/**
+ * Add the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.add = function(v)
 {
 	this.x += v.x;
@@ -87,6 +111,13 @@ Vector2.prototype.addScaledVector = function(v, s)
 	this.y += v.y * s;
 };
 
+
+/**
+ * Subtract the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
+
 Vector2.prototype.sub = function(v)
 {
 	this.x -= v.x;
@@ -105,6 +136,12 @@ Vector2.prototype.subVectors = function(a, b)
 	this.y = a.y - b.y;
 };
 
+
+/**
+ * Multiply the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.multiply = function(v)
 {
 	this.x *= v.x;
@@ -117,6 +154,12 @@ Vector2.prototype.multiplyScalar = function(scalar)
 	this.y *= scalar;
 };
 
+
+/**
+ * Divide the content of another vector from this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.divide = function(v)
 {
 	this.x /= v.x;
@@ -128,12 +171,26 @@ Vector2.prototype.divideScalar = function(scalar)
 	return this.multiplyScalar(1 / scalar);
 };
 
+/**
+ * Set the minimum of x and y coordinates between two vectors.
+ *
+ * X is set as the min between this vector and the other vector. 
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.min = function(v)
 {
 	this.x = Math.min(this.x, v.x);
 	this.y = Math.min(this.y, v.y);
 };
 
+/**
+ * Set the maximum of x and y coordinates between two vectors.
+ *
+ * X is set as the max between this vector and the other vector. 
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.max = function(v)
 {
 	this.x = Math.max(this.x, v.x);
@@ -271,6 +328,11 @@ Vector2.prototype.lerpVectors = function(v1, v2, alpha)
 	return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1);
 };
 
+/**
+ * Check if two vectors are equal.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.equals = function(v)
 {
 	return ((v.x === this.x) && (v.y === this.y));
@@ -295,6 +357,12 @@ Vector2.prototype.toArray = function(array, offset)
 	return array;
 };
 
+/**
+ * Rotate the vector around a central point.
+ *
+ * @param {Vector2} center
+ * @param {number} angle
+ */
 Vector2.prototype.rotateAround = function(center, angle)
 {
 	var c = Math.cos(angle);
@@ -324,7 +392,7 @@ export {Vector2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Box.js.html

@@ -108,7 +108,7 @@ export {Box};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Circle.js.html

@@ -105,7 +105,7 @@ export {Circle};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -48,6 +48,8 @@ function DOM(parent, type)
 
 	/**
 	 * DOM element contained by this object.
+	 *
+	 * Bye default it has the pointerEvents style set to none.
 	 */
 	this.element = document.createElement("div");
 	this.element.style.transformStyle = "preserve-3d";
@@ -56,6 +58,7 @@ function DOM(parent, type)
 	this.element.style.bottom = "0px";
 	this.element.style.transformOrigin = "0px 0px";
 	this.element.style.overflow = "auto";
+	this.element.style.pointerEvents = "none";
 	parent.appendChild(this.element);
 	
 	/**
@@ -66,7 +69,7 @@ function DOM(parent, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
-DOM.prototype.draw = function(context, viewport, canvas)
+DOM.prototype.transform = function(context, viewport, canvas)
 {
 	// CSS trasnformation matrix
 	var projection = viewport.matrix.clone();
@@ -76,6 +79,9 @@ DOM.prototype.draw = function(context, viewport, canvas)
 	// Size of the element
 	this.element.style.width = this.size.x + "px";
 	this.element.style.height = this.size.y + "px";
+
+	// Visibility
+	this.element.style.display = this.visible ? "block" : "none"; 
 };
 
 export {DOM};</code></pre>
@@ -94,7 +100,7 @@ export {DOM};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Image.js.html

@@ -86,7 +86,10 @@ Image.prototype.isInside = function(point)
 
 Image.prototype.draw = function(context, viewport, canvas)
 {
-	context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+	if(this.image.src.length > 0)
+	{
+		context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+	}
 };
 
 export {Image};
@@ -106,7 +109,7 @@ export {Image};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

@@ -101,7 +101,7 @@ export {Line};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Pattern.js.html

@@ -95,11 +95,15 @@ Pattern.prototype.draw = function(context, viewport, canvas)
 	var width = this.box.max.x - this.box.min.x;
 	var height = this.box.max.y - this.box.min.y;
 
-	var pattern = context.createPattern(this.image, this.repetition);
-	//pattern.setTransform();
+	if(this.image.src.length > 0)
+	{
+		var pattern = context.createPattern(this.image, this.repetition);
+		
+		//pattern.setTransform();
 
-	context.fillStyle = pattern;
-	context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		context.fillStyle = pattern;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
 };
 
 export {Pattern};
@@ -119,7 +123,7 @@ export {Pattern};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Text.js.html

@@ -67,7 +67,8 @@ Text.prototype.draw = function(context, viewport, canvas)
 	context.font = this.font;
 	context.textAlign = this.textAlign;
 	context.fillStyle = this.color;
-
+	context.textBaseline = "middle";
+	
 	context.fillText(this.text, 0, 0);
 };
 
@@ -88,7 +89,7 @@ export {Text};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_Helpers.js.html

@@ -155,7 +155,7 @@ export {Helpers};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 23:07:00 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

examples/diagram.html

@@ -152,16 +152,7 @@
 		var viewport = new Trenette.Viewport();
 
 		var renderer = new Trenette.Renderer(canvas);
-
-		// Update and render the diagram
-		function loop()
-		{			
-			renderer.update(group, viewport);
-
-			requestAnimationFrame(loop);
-		}
-
-		loop();
+		renderer.createRenderLoop(group, viewport);
 	</script>
 </body>
 </html>

examples/stress.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Example</title>
+</head>
+<body>
+	<script type="text/javascript" src="../build/trenette.js"></script>
+
+	<script type="text/javascript">
+
+		window.runLoop = true;
+
+		var division = document.createElement("div");
+		division.style.position = "absolute";
+		division.style.width = "100%";
+		division.style.height = "100%";
+		division.style.top = "0px";
+		division.style.left = "0px";
+		division.style.overflow = "hidden";
+		document.body.appendChild(division);
+
+		var perfDelta = document.createElement("div");
+		perfDelta.style.position = "absolute";
+		perfDelta.style.width = "50px";
+		perfDelta.style.height = "200px";
+		perfDelta.style.top = "0px";
+		perfDelta.style.left = "0px";
+		perfDelta.style.overflow = "visible";
+		perfDelta.style.fontFamily = "Arial";
+		perfDelta.style.fontSize = "20px";
+		document.body.appendChild(perfDelta);
+
+
+		// Setup the display canvas
+		var canvas = document.createElement("canvas");
+		canvas.style.position = "absolute";
+		canvas.style.width = "100%";
+		canvas.style.height = "100%";
+		canvas.style.top = "0px";
+		canvas.style.left = "0px";
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		canvas.oncontextmenu = function(event)
+		{
+			event.preventDefault();
+			return false;
+		};
+		division.appendChild(canvas);
+
+		window.onresize = function()
+		{
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+		};
+
+
+		var group = new Trenette.Object2D();
+
+		var image = new Trenette.Pattern("grid.png");
+		image.position.set(-300, -400);
+		image.layer = 5;
+		image.draggable = true;
+		group.add(image);
+		Trenette.Helpers.boxResizeTool(image);
+
+		var background = new Trenette.Image("hexagon.jpg");
+		background.position.set(-300, -400);
+		Trenette.Helpers.boxResizeTool(background);
+		background.layer = -2;
+		background.draggable = true;
+		group.add(background);
+
+		for(var i = 0; i < 1e3; i++)
+		{		
+			var box = new Trenette.Box();
+			Trenette.Helpers.boxResizeTool(box);
+			box.draggable = true;
+			box.position.set(Math.random() * 1e3, Math.random() * 1e3)
+			group.add(box);
+	
+			var div = new Trenette.DOM(division);
+			div.size.set(100, 50);
+			div.origin.set(50, 25);
+			var text = document.createElement("div");
+			text.style.fontFamily = "Arial";
+			text.style.textAlign = "center";
+			text.innerHTML = "DOM text!";
+			div.element.appendChild(text);
+			box.add(div);
+		}
+
+		var viewport = new Trenette.Viewport();
+
+		var time = performance.now();
+
+		var renderer = new Trenette.Renderer(canvas);
+		renderer.createRenderLoop(group, viewport, function()
+		{
+			var newTime = performance.now();
+			var delta = newTime - time;
+			time = newTime;
+
+			perfDelta.innerHTML = delta + "ms";
+			
+			console.log(delta);
+		});
+	</script>
+</body>
+</html>

package.json

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

source/Renderer.js

@@ -217,12 +217,7 @@ Renderer.prototype.update = function(object, viewport)
 		child.updateMatrix();
 	});
 	
-	// Sort objects by layer
-	objects.sort(function(a, b)
-	{
-		return a.layer - b.layer;
-	});
-	
+
 	this.context.setTransform(1, 0, 0, 1, 0, 0);
 	
 	// Clear canvas content
@@ -232,7 +227,7 @@ Renderer.prototype.update = function(object, viewport)
 	}
 
 	// Render into the canvas
-	for(var i = 0; i < objects.length; i++)
+	for(var i = objects.length - 1; i >= 0; i--)
 	{	
 		if(objects[i].isMask)
 		{

source/math/Vector2.js

@@ -5,6 +5,8 @@
  * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
  *
  * @class
+ * @param {number} x
+ * @param {number} y
  */
 function Vector2(x, y)
 {
@@ -12,29 +14,51 @@ function Vector2(x, y)
 	this.y = y || 0;
 }
 
+/**
+ * Set vector x and y values.
+ *
+ * @param {number} x
+ * @param {number} y
+ */
 Vector2.prototype.set = function(x, y)
 {
 	this.x = x;
 	this.y = y;
 };
 
+/**
+ * Set a scalar value into the x and y values.
+ */
 Vector2.prototype.setScalar = function(scalar)
 {
 	this.x = scalar;
 	this.y = scalar;
 };
 
+/**
+ * Create a clone of this vector object.
+ */
 Vector2.prototype.clone = function()
 {
 	return new Vector2(this.x, this.y);
 };
 
+/**
+ * Copy the content of another vector into this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.copy = function(v)
 {
 	this.x = v.x;
 	this.y = v.y;
 };
 
+/**
+ * Add the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.add = function(v)
 {
 	this.x += v.x;
@@ -59,6 +83,13 @@ Vector2.prototype.addScaledVector = function(v, s)
 	this.y += v.y * s;
 };
 
+
+/**
+ * Subtract the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
+
 Vector2.prototype.sub = function(v)
 {
 	this.x -= v.x;
@@ -77,6 +108,12 @@ Vector2.prototype.subVectors = function(a, b)
 	this.y = a.y - b.y;
 };
 
+
+/**
+ * Multiply the content of another vector to this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.multiply = function(v)
 {
 	this.x *= v.x;
@@ -89,6 +126,12 @@ Vector2.prototype.multiplyScalar = function(scalar)
 	this.y *= scalar;
 };
 
+
+/**
+ * Divide the content of another vector from this one.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.divide = function(v)
 {
 	this.x /= v.x;
@@ -100,12 +143,26 @@ Vector2.prototype.divideScalar = function(scalar)
 	return this.multiplyScalar(1 / scalar);
 };
 
+/**
+ * Set the minimum of x and y coordinates between two vectors.
+ *
+ * X is set as the min between this vector and the other vector. 
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.min = function(v)
 {
 	this.x = Math.min(this.x, v.x);
 	this.y = Math.min(this.y, v.y);
 };
 
+/**
+ * Set the maximum of x and y coordinates between two vectors.
+ *
+ * X is set as the max between this vector and the other vector. 
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.max = function(v)
 {
 	this.x = Math.max(this.x, v.x);
@@ -243,6 +300,11 @@ Vector2.prototype.lerpVectors = function(v1, v2, alpha)
 	return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1);
 };
 
+/**
+ * Check if two vectors are equal.
+ *
+ * @param {Vector2} v
+ */
 Vector2.prototype.equals = function(v)
 {
 	return ((v.x === this.x) && (v.y === this.y));
@@ -267,6 +329,12 @@ Vector2.prototype.toArray = function(array, offset)
 	return array;
 };
 
+/**
+ * Rotate the vector around a central point.
+ *
+ * @param {Vector2} center
+ * @param {number} angle
+ */
 Vector2.prototype.rotateAround = function(center, angle)
 {
 	var c = Math.cos(angle);

source/objects/DOM.js

@@ -20,6 +20,8 @@ function DOM(parent, type)
 
 	/**
 	 * DOM element contained by this object.
+	 *
+	 * Bye default it has the pointerEvents style set to none.
 	 */
 	this.element = document.createElement("div");
 	this.element.style.transformStyle = "preserve-3d";
@@ -28,6 +30,7 @@ function DOM(parent, type)
 	this.element.style.bottom = "0px";
 	this.element.style.transformOrigin = "0px 0px";
 	this.element.style.overflow = "auto";
+	this.element.style.pointerEvents = "none";
 	parent.appendChild(this.element);
 	
 	/**
@@ -38,7 +41,7 @@ function DOM(parent, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
-DOM.prototype.draw = function(context, viewport, canvas)
+DOM.prototype.transform = function(context, viewport, canvas)
 {
 	// CSS trasnformation matrix
 	var projection = viewport.matrix.clone();
@@ -48,6 +51,9 @@ DOM.prototype.draw = function(context, viewport, canvas)
 	// Size of the element
 	this.element.style.width = this.size.x + "px";
 	this.element.style.height = this.size.y + "px";
+
+	// Visibility
+	this.element.style.display = this.visible ? "block" : "none"; 
 };
 
 export {DOM};

source/objects/Image.js

@@ -58,7 +58,10 @@ Image.prototype.isInside = function(point)
 
 Image.prototype.draw = function(context, viewport, canvas)
 {
-	context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+	if(this.image.src.length > 0)
+	{
+		context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
+	}
 };
 
 export {Image};

source/objects/Pattern.js

@@ -67,11 +67,15 @@ Pattern.prototype.draw = function(context, viewport, canvas)
 	var width = this.box.max.x - this.box.min.x;
 	var height = this.box.max.y - this.box.min.y;
 
-	var pattern = context.createPattern(this.image, this.repetition);
-	//pattern.setTransform();
+	if(this.image.src.length > 0)
+	{
+		var pattern = context.createPattern(this.image, this.repetition);
+		
+		//pattern.setTransform();
 
-	context.fillStyle = pattern;
-	context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		context.fillStyle = pattern;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
 };
 
 export {Pattern};

source/objects/Text.js

@@ -39,7 +39,8 @@ Text.prototype.draw = function(context, viewport, canvas)
 	context.font = this.font;
 	context.textAlign = this.textAlign;
 	context.fillStyle = this.color;
-
+	context.textBaseline = "middle";
+	
 	context.fillText(this.text, 0, 0);
 };