tentone 6 роки тому
батько
коміт
986a58e236
51 змінених файлів з 1080 додано та 279 видалено
  1. 88 18
      build/escher.js
  2. 0 0
      build/escher.min.js
  3. 88 18
      build/escher.module.js
  4. 8 8
      docs/BezierCurve.html
  5. 10 10
      docs/Box.html
  6. 1 1
      docs/Box2.html
  7. 1 1
      docs/BoxMask.html
  8. 10 10
      docs/Circle.html
  9. 1 1
      docs/DOM.html
  10. 1 1
      docs/EventManager.html
  11. 1 1
      docs/EventManager.js.html
  12. 1 1
      docs/Graph.html
  13. 1 1
      docs/Helpers.html
  14. 1 1
      docs/Image.html
  15. 1 1
      docs/Key.html
  16. 7 7
      docs/Line.html
  17. 1 1
      docs/Mask.html
  18. 1 1
      docs/Matrix.html
  19. 389 49
      docs/Object2D.html
  20. 63 8
      docs/Object2D.js.html
  21. 1 1
      docs/Pattern.html
  22. 24 24
      docs/Pointer.html
  23. 93 11
      docs/Renderer.html
  24. 8 7
      docs/Renderer.js.html
  25. 1 1
      docs/Text.html
  26. 1 1
      docs/UUID.html
  27. 1 1
      docs/Vector2.html
  28. 126 15
      docs/Viewport.html
  29. 25 6
      docs/Viewport.js.html
  30. 10 10
      docs/ViewportControls.html
  31. 28 10
      docs/controls_ViewportControls.js.html
  32. 1 1
      docs/index.html
  33. 1 1
      docs/input_Key.js.html
  34. 10 6
      docs/input_Pointer.js.html
  35. 1 1
      docs/math_Box2.js.html
  36. 1 1
      docs/math_Matrix.js.html
  37. 1 1
      docs/math_UUID.js.html
  38. 1 1
      docs/math_Vector2.js.html
  39. 10 7
      docs/objects_BezierCurve.js.html
  40. 22 10
      docs/objects_Box.js.html
  41. 21 9
      docs/objects_Circle.js.html
  42. 1 1
      docs/objects_DOM.js.html
  43. 1 1
      docs/objects_Graph.js.html
  44. 1 1
      docs/objects_Image.js.html
  45. 10 6
      docs/objects_Line.js.html
  46. 1 1
      docs/objects_Pattern.js.html
  47. 1 1
      docs/objects_Text.js.html
  48. 1 1
      docs/objects_mask_BoxMask.js.html
  49. 1 1
      docs/objects_mask_Mask.js.html
  50. 1 1
      docs/utils_Helpers.js.html
  51. 1 1
      package.json

+ 88 - 18
build/escher.js

@@ -776,7 +776,11 @@
 	})();
 
 	/**
-	 * Base 2D object class, implements all the object positioning and scalling features.
+	 * Base object class, implements all the object positioning and scalling features.
+	 *
+	 * Stores all the base properties shared between all objects as the position, transformation properties, children etc.
+	 *
+	 * Object2D should be used as a group to store all the other objects drawn.
 	 *
 	 * @class
 	 */
@@ -912,7 +916,7 @@
 	/**
 	 * Traverse the object tree and run a function for all objects.
 	 *
-	 * @param callback Callback function that receives the object as parameter.
+	 * @param {Function} callback Callback function that receives the object as parameter.
 	 */
 	Object2D.prototype.traverse = function(callback)
 	{
@@ -927,9 +931,32 @@
 	};
 
 	/**
-	 * Attach a children to the object.
+	 * Get a object from its children list by its UUID.
 	 *
-	 * @param object Object to attach to this object.
+	 * @param {String} uuid UUID of the object to get.
+	 * @return {Object2D} The object that has the UUID specified, null if the object was not found.
+	 */
+	Object2D.prototype.getChildByUUID = function(uuid)
+	{
+		var object = null;
+
+		this.traverse(function(child)
+		{
+			if(child.uuid === uuid)
+			{
+				object = child;
+			}
+		});
+
+		return object;
+	};
+
+	/**
+	 * Attach a children to this object.
+	 *
+	 * The object is set as children of this object and the transformations applied to this object are traversed to its children.
+	 *
+	 * @param {Object2D} object Object to attach to this object.
 	 */ 
 	Object2D.prototype.add = function(object)
 	{
@@ -950,7 +977,7 @@
 	/**
 	 * Remove object from the children list.
 	 *
-	 * @param object Object to be removed.
+	 * @param {Object2D} object Object to be removed.
 	 */
 	Object2D.prototype.remove = function(object)
 	{
@@ -976,6 +1003,10 @@
 
 	/**
 	 * Check if a point is inside of the object.
+	 *
+	 * Used to update the point events attached to the object.
+	 *
+	 * @return {boolean} True if the point is inside of the object.
 	 */
 	Object2D.prototype.isInside = function(point)
 	{
@@ -984,6 +1015,8 @@
 
 	/**
 	 * Update the transformation matrix of the object.
+	 *
+	 * @param {CanvasContext} context
 	 */
 	Object2D.prototype.updateMatrix = function(context)
 	{
@@ -1036,6 +1069,10 @@
 	 * Delta is the movement of the pointer already translated into local object coordinates.
 	 *
 	 * Receives (pointer, viewport, delta) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
+	 * @param {Vector2} delta Pointer movement in world space.
 	 */
 	Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 	{
@@ -1045,14 +1082,14 @@
 	/**
 	 * Method called when the object its added to a parent.
 	 *
-	 * Receives (parent) as arguments.
+	 * @param {Object2D} parent Parent object were it was added.
 	 */
 	Object2D.prototype.onAdd = null;
 
 	/**
 	 * Method called when the object gets removed from its parent
 	 *
-	 * Receives (parent) as arguments.
+	 * @param {Object2D} parent Parent object from were the object is being removed.
 	 */
 	Object2D.prototype.onRemove = null;
 
@@ -1067,6 +1104,9 @@
 	 * Callback method called when the pointer enters the object.
 	 *
 	 * Receives (pointer, viewport) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
 	 */
 	Object2D.prototype.onPointerEnter = null;
 
@@ -1074,6 +1114,9 @@
 	 * Callback method called when the was inside of the object and leaves the object.
 	 *
 	 * Receives (pointer, viewport) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
 	 */
 	Object2D.prototype.onPointerLeave = null;
 
@@ -1081,6 +1124,9 @@
 	 * Callback method while the pointer is over (inside) of the object.
 	 *
 	 * Receives (pointer, viewport) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
 	 */
 	Object2D.prototype.onPointerOver = null;
 
@@ -1088,6 +1134,9 @@
 	 * Callback method called while the pointer button is pressed.
 	 *
 	 * Receives (pointer, viewport) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
 	 */
 	Object2D.prototype.onButtonPressed = null;
 
@@ -1095,6 +1144,9 @@
 	 * Callback method called when the pointer button is pressed down (single time).
 	 *
 	 * Receives (pointer, viewport) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
 	 */
 	Object2D.prototype.onButtonDown = null;
 
@@ -1102,6 +1154,9 @@
 	 * Callback method called when the pointer button is released (single time).
 	 *
 	 * Receives (pointer, viewport) as arguments.
+	 *
+	 * @param {Pointer} pointer Pointer object that receives the user input.
+	 * @param {Viewport} viewport Viewport where the object is drawn.
 	 */
 	Object2D.prototype.onButtonUp = null;
 
@@ -1670,8 +1725,6 @@
 				this.matrix.scale(this.scale, this.scale);
 			}
 
-			//this.matrix.multiply(new Matrix([1, 0, 0, 1, this.position.x - this.canvas.width / 2 * this.scale,  this.position.y - this.canvas.height / 2 * this.scale]));
-
 			this.inverseMatrix = this.matrix.getInverse();
 			this.matrixNeedsUpdate = false;
 		}
@@ -1898,7 +1951,7 @@
 	 *
 	 * 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.
 	 *
-	 * @param object {Object2D} Object to be updated.
+	 * @param object {Object2D} Object to be updated and drawn into the canvas, the Object2D should be used as a group to store all the other objects to be updated and drawn.
 	 * @param viewport {Viewport} Viewport to be updated (should be the one where the objects will be rendered after).
 	 */
 	Renderer.prototype.update = function(object, viewport)
@@ -2456,6 +2509,8 @@
 	/**
 	 * Circle object draw a circular object, into the canvas.
 	 *
+	 * Can be used as a base to implement other circular objects, already implements the circle collision for pointer events.
+	 *
 	 * @class
 	 */
 	function Circle()
@@ -2481,6 +2536,8 @@
 
 		/**
 		 * Background color of the circle.
+		 *
+		 * If set null it is ignored.
 		 */
 		this.fillStyle = "#FFFFFF";
 	}
@@ -2507,8 +2564,11 @@
 		context.beginPath();
 		context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 		
-		context.fillStyle = this.fillStyle;
-		context.fill();
+		if(this.fillStyle !== null)
+		{	
+			context.fillStyle = this.fillStyle;
+			context.fill();
+		}
 
 		if(this.strokeStyle !== null)
 		{
@@ -2627,7 +2687,9 @@
 	};
 
 	/**
-	 * Box object draw a box.
+	 * Box object draw a rectangular object.
+	 *
+	 * Can be used as a base to implement other box objects, already implements collision for pointer events.
 	 *
 	 * @class
 	 */
@@ -2654,6 +2716,8 @@
 
 		/**
 		 * Background color of the box.
+		 *
+		 * If set null it is ignored.
 		 */
 		this.fillStyle = "#FFFFFF";
 	}
@@ -2680,12 +2744,18 @@
 		var width = this.box.max.x - this.box.min.x;
 		var height = this.box.max.y - this.box.min.y;
 
-		context.fillStyle = this.fillStyle;
-		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		if(this.fillStyle !== null)
+		{	
+			context.fillStyle = this.fillStyle;
+			context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		}
 
-		context.lineWidth = this.lineWidth;
-		context.strokeStyle = this.strokeStyle;
-		context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+		if(this.strokeStyle !== null)
+		{
+			context.lineWidth = this.lineWidth;
+			context.strokeStyle = this.strokeStyle;
+			context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+		}
 	};
 
 	/**

Різницю між файлами не показано, бо вона завелика
+ 0 - 0
build/escher.min.js


+ 88 - 18
build/escher.module.js

@@ -770,7 +770,11 @@ UUID.generate = (function ()
 })();
 
 /**
- * Base 2D object class, implements all the object positioning and scalling features.
+ * Base object class, implements all the object positioning and scalling features.
+ *
+ * Stores all the base properties shared between all objects as the position, transformation properties, children etc.
+ *
+ * Object2D should be used as a group to store all the other objects drawn.
  *
  * @class
  */
@@ -906,7 +910,7 @@ function Object2D()
 /**
  * Traverse the object tree and run a function for all objects.
  *
- * @param callback Callback function that receives the object as parameter.
+ * @param {Function} callback Callback function that receives the object as parameter.
  */
 Object2D.prototype.traverse = function(callback)
 {
@@ -921,9 +925,32 @@ Object2D.prototype.traverse = function(callback)
 };
 
 /**
- * Attach a children to the object.
+ * Get a object from its children list by its UUID.
  *
- * @param object Object to attach to this object.
+ * @param {String} uuid UUID of the object to get.
+ * @return {Object2D} The object that has the UUID specified, null if the object was not found.
+ */
+Object2D.prototype.getChildByUUID = function(uuid)
+{
+	var object = null;
+
+	this.traverse(function(child)
+	{
+		if(child.uuid === uuid)
+		{
+			object = child;
+		}
+	});
+
+	return object;
+};
+
+/**
+ * Attach a children to this object.
+ *
+ * The object is set as children of this object and the transformations applied to this object are traversed to its children.
+ *
+ * @param {Object2D} object Object to attach to this object.
  */ 
 Object2D.prototype.add = function(object)
 {
@@ -944,7 +971,7 @@ Object2D.prototype.add = function(object)
 /**
  * Remove object from the children list.
  *
- * @param object Object to be removed.
+ * @param {Object2D} object Object to be removed.
  */
 Object2D.prototype.remove = function(object)
 {
@@ -970,6 +997,10 @@ Object2D.prototype.remove = function(object)
 
 /**
  * Check if a point is inside of the object.
+ *
+ * Used to update the point events attached to the object.
+ *
+ * @return {boolean} True if the point is inside of the object.
  */
 Object2D.prototype.isInside = function(point)
 {
@@ -978,6 +1009,8 @@ Object2D.prototype.isInside = function(point)
 
 /**
  * Update the transformation matrix of the object.
+ *
+ * @param {CanvasContext} context
  */
 Object2D.prototype.updateMatrix = function(context)
 {
@@ -1030,6 +1063,10 @@ Object2D.prototype.draw = function(context, viewport, canvas){};
  * Delta is the movement of the pointer already translated into local object coordinates.
  *
  * Receives (pointer, viewport, delta) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
+ * @param {Vector2} delta Pointer movement in world space.
  */
 Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 {
@@ -1039,14 +1076,14 @@ Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 /**
  * Method called when the object its added to a parent.
  *
- * Receives (parent) as arguments.
+ * @param {Object2D} parent Parent object were it was added.
  */
 Object2D.prototype.onAdd = null;
 
 /**
  * Method called when the object gets removed from its parent
  *
- * Receives (parent) as arguments.
+ * @param {Object2D} parent Parent object from were the object is being removed.
  */
 Object2D.prototype.onRemove = null;
 
@@ -1061,6 +1098,9 @@ Object2D.prototype.onUpdate = null;
  * Callback method called when the pointer enters the object.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onPointerEnter = null;
 
@@ -1068,6 +1108,9 @@ Object2D.prototype.onPointerEnter = null;
  * Callback method called when the was inside of the object and leaves the object.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onPointerLeave = null;
 
@@ -1075,6 +1118,9 @@ Object2D.prototype.onPointerLeave = null;
  * Callback method while the pointer is over (inside) of the object.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onPointerOver = null;
 
@@ -1082,6 +1128,9 @@ Object2D.prototype.onPointerOver = null;
  * Callback method called while the pointer button is pressed.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onButtonPressed = null;
 
@@ -1089,6 +1138,9 @@ Object2D.prototype.onButtonPressed = null;
  * Callback method called when the pointer button is pressed down (single time).
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onButtonDown = null;
 
@@ -1096,6 +1148,9 @@ Object2D.prototype.onButtonDown = null;
  * Callback method called when the pointer button is released (single time).
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onButtonUp = null;
 
@@ -1664,8 +1719,6 @@ Viewport.prototype.updateMatrix = function()
 			this.matrix.scale(this.scale, this.scale);
 		}
 
-		//this.matrix.multiply(new Matrix([1, 0, 0, 1, this.position.x - this.canvas.width / 2 * this.scale,  this.position.y - this.canvas.height / 2 * this.scale]));
-
 		this.inverseMatrix = this.matrix.getInverse();
 		this.matrixNeedsUpdate = false;
 	}
@@ -1892,7 +1945,7 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
  *
  * 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.
  *
- * @param object {Object2D} Object to be updated.
+ * @param object {Object2D} Object to be updated and drawn into the canvas, the Object2D should be used as a group to store all the other objects to be updated and drawn.
  * @param viewport {Viewport} Viewport to be updated (should be the one where the objects will be rendered after).
  */
 Renderer.prototype.update = function(object, viewport)
@@ -2450,6 +2503,8 @@ BoxMask.prototype.clip = function(context, viewport, canvas)
 /**
  * Circle object draw a circular object, into the canvas.
  *
+ * Can be used as a base to implement other circular objects, already implements the circle collision for pointer events.
+ *
  * @class
  */
 function Circle()
@@ -2475,6 +2530,8 @@ function Circle()
 
 	/**
 	 * Background color of the circle.
+	 *
+	 * If set null it is ignored.
 	 */
 	this.fillStyle = "#FFFFFF";
 }
@@ -2501,8 +2558,11 @@ Circle.prototype.draw = function(context, viewport, canvas)
 	context.beginPath();
 	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 	
-	context.fillStyle = this.fillStyle;
-	context.fill();
+	if(this.fillStyle !== null)
+	{	
+		context.fillStyle = this.fillStyle;
+		context.fill();
+	}
 
 	if(this.strokeStyle !== null)
 	{
@@ -2621,7 +2681,9 @@ Helpers.boxResizeTool = function(object)
 };
 
 /**
- * Box object draw a box.
+ * Box object draw a rectangular object.
+ *
+ * Can be used as a base to implement other box objects, already implements collision for pointer events.
  *
  * @class
  */
@@ -2648,6 +2710,8 @@ function Box()
 
 	/**
 	 * Background color of the box.
+	 *
+	 * If set null it is ignored.
 	 */
 	this.fillStyle = "#FFFFFF";
 }
@@ -2674,12 +2738,18 @@ Box.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;
 
-	context.fillStyle = this.fillStyle;
-	context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	if(this.fillStyle !== null)
+	{	
+		context.fillStyle = this.fillStyle;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
 
-	context.lineWidth = this.lineWidth;
-	context.strokeStyle = this.strokeStyle;
-	context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+	if(this.strokeStyle !== null)
+	{
+		context.lineWidth = this.lineWidth;
+		context.strokeStyle = this.strokeStyle;
+		context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+	}
 };
 
 /**

+ 8 - 8
docs/BezierCurve.html

@@ -149,7 +149,7 @@
 
 
 <div class="description">
-    Dash line pattern to be used, is empty draws a solid line.
+    Dash line pattern to be used, if empty draws a solid line.

Dash parttern is defined as the size of dashes as pairs of space with no line and with line.

E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 </div>
 
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line49">line 49</a>
+        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line48">line 48</a>
     </li></ul></dd>
     
 
@@ -335,7 +335,7 @@
 
 
 <div class="description">
-    BezierCurve width.
+    Line width of the line.
 </div>
 
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line54">line 54</a>
+        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line58">line 58</a>
     </li></ul></dd>
     
 
@@ -397,7 +397,7 @@
 
 
 <div class="description">
-    Color of the line.
+    Style of the object line.
 </div>
 
 
@@ -435,7 +435,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line44">line 44</a>
+        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line53">line 53</a>
     </li></ul></dd>
     
 
@@ -639,7 +639,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line64">line 64</a>
+        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line68">line 68</a>
     </li></ul></dd>
     
 
@@ -691,7 +691,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 10 - 10
docs/Box.html

@@ -49,7 +49,7 @@
 
 
 <div class="description">
-    Box object draw a box.
+    Box object draw a rectangular object.

Can be used as a base to implement other box objects, already implements collision for pointer events.
 </div>
 
 
@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line14">line 14</a>
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line16">line 16</a>
     </li></ul></dd>
     
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line21">line 21</a>
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line23">line 23</a>
     </li></ul></dd>
     
 
@@ -211,7 +211,7 @@
 
 
 <div class="description">
-    Background color of the box.
+    Background color of the box.

If set null it is ignored.
 </div>
 
 
@@ -249,7 +249,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line36">line 36</a>
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line42">line 42</a>
     </li></ul></dd>
     
 
@@ -273,7 +273,7 @@
 
 
 <div class="description">
-    Line width.
+    Line width, only used if a valid strokeStyle is defined.
 </div>
 
 
@@ -311,7 +311,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line31">line 31</a>
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line35">line 35</a>
     </li></ul></dd>
     
 
@@ -335,7 +335,7 @@
 
 
 <div class="description">
-    Color of the box border line.
+    Style of the object border line.

If set null it is ignored.
 </div>
 
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line26">line 26</a>
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line30">line 30</a>
     </li></ul></dd>
     
 
@@ -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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Box2.html

@@ -3010,7 +3010,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/BoxMask.html

@@ -492,7 +492,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 10 - 10
docs/Circle.html

@@ -49,7 +49,7 @@
 
 
 <div class="description">
-    Circle object draw a circular object, into the canvas.
+    Circle object draw a circular object, into the canvas.

Can be used as a base to implement other circular objects, already implements the circle collision for pointer events.
 </div>
 
 
@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line11">line 11</a>
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line13">line 13</a>
     </li></ul></dd>
     
 
@@ -149,7 +149,7 @@
 
 
 <div class="description">
-    Background color of the circle.
+    Background color of the circle.

If set null it is ignored.
 </div>
 
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line33">line 33</a>
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -211,7 +211,7 @@
 
 
 <div class="description">
-    Line width.
+    Line width, only used if a valid strokeStyle is defined.
 </div>
 
 
@@ -249,7 +249,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line28">line 28</a>
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -311,7 +311,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line18">line 18</a>
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line20">line 20</a>
     </li></ul></dd>
     
 
@@ -335,7 +335,7 @@
 
 
 <div class="description">
-    Color of the circle border line.
+    Style of the object border line.

If set null it is ignored.
 </div>
 
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line23">line 23</a>
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line27">line 27</a>
     </li></ul></dd>
     
 
@@ -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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/DOM.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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/EventManager.html

@@ -688,7 +688,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Graph.html

@@ -599,7 +599,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Helpers.html

@@ -341,7 +341,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Image.html

@@ -491,7 +491,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 7 - 7
docs/Line.html

@@ -149,7 +149,7 @@
 
 
 <div class="description">
-    Dash line pattern to be used, is empty draws a solid line.
+    Dash line pattern to be used, if empty draws a solid line.

Dash parttern is defined as the size of dashes as pairs of space with no line and with line.

E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 </div>
 
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line37">line 37</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line36">line 36</a>
     </li></ul></dd>
     
 
@@ -273,7 +273,7 @@
 
 
 <div class="description">
-    Line width.
+    Line width of the line.
 </div>
 
 
@@ -311,7 +311,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line42">line 42</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line46">line 46</a>
     </li></ul></dd>
     
 
@@ -335,7 +335,7 @@
 
 
 <div class="description">
-    Color of the line.
+    Style of the object line.
 </div>
 
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line32">line 32</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line41">line 41</a>
     </li></ul></dd>
     
 
@@ -475,7 +475,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Mask.html

@@ -348,7 +348,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Matrix.html

@@ -1942,7 +1942,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 389 - 49
docs/Object2D.html

@@ -49,7 +49,7 @@
 
 
 <div class="description">
-    Base 2D object class, implements all the object positioning and scalling features.
+    Base object class, implements all the object positioning and scalling features.

Stores all the base properties shared between all objects as the position, transformation properties, children etc.

Object2D should be used as a group to store all the other objects drawn.
 </div>
 
 
@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line12">line 12</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line16">line 16</a>
     </li></ul></dd>
     
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line138">line 138</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line142">line 142</a>
     </li></ul></dd>
     
 
@@ -249,7 +249,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line22">line 22</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.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="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line104">line 104</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line108">line 108</a>
     </li></ul></dd>
     
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line78">line 78</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line82">line 82</a>
     </li></ul></dd>
     
 
@@ -435,7 +435,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line116">line 116</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line120">line 120</a>
     </li></ul></dd>
     
 
@@ -497,7 +497,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line85">line 85</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line89">line 89</a>
     </li></ul></dd>
     
 
@@ -559,7 +559,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line66">line 66</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line70">line 70</a>
     </li></ul></dd>
     
 
@@ -621,7 +621,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line34">line 34</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line38">line 38</a>
     </li></ul></dd>
     
 
@@ -683,7 +683,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line92">line 92</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line96">line 96</a>
     </li></ul></dd>
     
 
@@ -745,7 +745,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line71">line 71</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line75">line 75</a>
     </li></ul></dd>
     
 
@@ -807,7 +807,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line97">line 97</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line101">line 101</a>
     </li></ul></dd>
     
 
@@ -831,7 +831,7 @@
 
 
 <div class="description">
-    Method called when the object its added to a parent.

Receives (parent) as arguments.
+    Method called when the object its added to a parent.
 </div>
 
 
@@ -869,7 +869,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line316">line 316</a>
     </li></ul></dd>
     
 
@@ -931,7 +931,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line328">line 328</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line380">line 380</a>
     </li></ul></dd>
     
 
@@ -993,7 +993,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line321">line 321</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line370">line 370</a>
     </li></ul></dd>
     
 
@@ -1055,7 +1055,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line335">line 335</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line390">line 390</a>
     </li></ul></dd>
     
 
@@ -1117,7 +1117,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line300">line 300</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line340">line 340</a>
     </li></ul></dd>
     
 
@@ -1179,7 +1179,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line307">line 307</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line350">line 350</a>
     </li></ul></dd>
     
 
@@ -1241,7 +1241,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line314">line 314</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line360">line 360</a>
     </li></ul></dd>
     
 
@@ -1265,7 +1265,7 @@
 
 
 <div class="description">
-    Method called when the object gets removed from its parent

Receives (parent) as arguments.
+    Method called when the object gets removed from its parent
 </div>
 
 
@@ -1303,7 +1303,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line286">line 286</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line323">line 323</a>
     </li></ul></dd>
     
 
@@ -1365,7 +1365,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line293">line 293</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line330">line 330</a>
     </li></ul></dd>
     
 
@@ -1427,7 +1427,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line44">line 44</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line48">line 48</a>
     </li></ul></dd>
     
 
@@ -1489,7 +1489,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line27">line 27</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line31">line 31</a>
     </li></ul></dd>
     
 
@@ -1551,7 +1551,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line111">line 111</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line115">line 115</a>
     </li></ul></dd>
     
 
@@ -1613,7 +1613,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line133">line 133</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line137">line 137</a>
     </li></ul></dd>
     
 
@@ -1675,7 +1675,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line39">line 39</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -1737,7 +1737,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line126">line 126</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line130">line 130</a>
     </li></ul></dd>
     
 
@@ -1799,7 +1799,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line54">line 54</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line58">line 58</a>
     </li></ul></dd>
     
 
@@ -1861,7 +1861,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line121">line 121</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line125">line 125</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line49">line 49</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line53">line 53</a>
     </li></ul></dd>
     
 
@@ -1985,7 +1985,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line17">line 17</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line21">line 21</a>
     </li></ul></dd>
     
 
@@ -2047,7 +2047,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line59">line 59</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line63">line 63</a>
     </li></ul></dd>
     
 
@@ -2083,7 +2083,7 @@
 
 
 <div class="description">
-    Attach a children to the object.
+    Attach a children to this object.

The object is set as children of this object and the transformations applied to this object are traversed to its children.
 </div>
 
 
@@ -2124,6 +2124,11 @@
 
             <td class="type">
             
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
             </td>
 
             
@@ -2171,7 +2176,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line163">line 163</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line190">line 190</a>
     </li></ul></dd>
     
 
@@ -2354,7 +2359,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line258">line 258</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line291">line 291</a>
     </li></ul></dd>
     
 
@@ -2390,7 +2395,7 @@
     
 
     
-    <h4 class="name" id="isInside"><span class="type-signature"></span>isInside<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="getChildByUUID"><span class="type-signature"></span>getChildByUUID<span class="signature">(uuid)</span><span class="type-signature"> &rarr; {<a href="Object2D.html">Object2D</a>}</span></h4>
     
 
     
@@ -2398,7 +2403,7 @@
 
 
 <div class="description">
-    Check if a point is inside of the object.
+    Get a object from its children list by its UUID.
 </div>
 
 
@@ -2409,6 +2414,55 @@
 
 
 
+    <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>uuid</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">UUID of the object to get.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -2442,7 +2496,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line209">line 209</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line168">line 168</a>
     </li></ul></dd>
     
 
@@ -2467,6 +2521,28 @@
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    The object that has the UUID specified, null if the object was not found.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -2478,7 +2554,117 @@
     
 
     
-    <h4 class="name" id="onPointerDrag"><span class="type-signature"></span>onPointerDrag<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="isInside"><span class="type-signature"></span>isInside<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Check if a point is inside of the object.

Used to update the point events attached to the object.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line240">line 240</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    True if the point is inside of the object.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">boolean</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="onPointerDrag"><span class="type-signature"></span>onPointerDrag<span class="signature">(pointer, viewport, delta)</span><span class="type-signature"></span></h4>
     
 
     
@@ -2497,6 +2683,101 @@
 
 
 
+    <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">Pointer object that receives the user input.</td>
+        </tr>
+
+    
+
+        <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">Viewport where the object is drawn.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>delta</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Pointer movement in world space.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -2530,7 +2811,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line269">line 269</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line306">line 306</a>
     </li></ul></dd>
     
 
@@ -2615,6 +2896,11 @@
 
             <td class="type">
             
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
             </td>
 
             
@@ -2662,7 +2948,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line184">line 184</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line211">line 211</a>
     </li></ul></dd>
     
 
@@ -2822,7 +3108,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line244">line 244</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line277">line 277</a>
     </li></ul></dd>
     
 
@@ -2907,6 +3193,11 @@
 
             <td class="type">
             
+                
+<span class="param-type">function</span>
+
+
+            
             </td>
 
             
@@ -2954,7 +3245,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line146">line 146</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line150">line 150</a>
     </li></ul></dd>
     
 
@@ -2990,7 +3281,7 @@
     
 
     
-    <h4 class="name" id="updateMatrix"><span class="type-signature"></span>updateMatrix<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="updateMatrix"><span class="type-signature"></span>updateMatrix<span class="signature">(context)</span><span class="type-signature"></span></h4>
     
 
     
@@ -3009,6 +3300,55 @@
 
 
 
+    <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>context</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">CanvasContext</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -3042,7 +3382,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line217">line 217</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line250">line 250</a>
     </li></ul></dd>
     
 
@@ -3094,7 +3434,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 63 - 8
docs/Object2D.js.html

@@ -33,7 +33,11 @@ import {Matrix} from "./math/Matrix.js";
 import {UUID} from "./math/UUID.js";
 
 /**
- * Base 2D object class, implements all the object positioning and scalling features.
+ * Base object class, implements all the object positioning and scalling features.
+ *
+ * Stores all the base properties shared between all objects as the position, transformation properties, children etc.
+ *
+ * Object2D should be used as a group to store all the other objects drawn.
  *
  * @class
  */
@@ -169,7 +173,7 @@ function Object2D()
 /**
  * Traverse the object tree and run a function for all objects.
  *
- * @param callback Callback function that receives the object as parameter.
+ * @param {Function} callback Callback function that receives the object as parameter.
  */
 Object2D.prototype.traverse = function(callback)
 {
@@ -184,9 +188,32 @@ Object2D.prototype.traverse = function(callback)
 };
 
 /**
- * Attach a children to the object.
+ * Get a object from its children list by its UUID.
  *
- * @param object Object to attach to this object.
+ * @param {String} uuid UUID of the object to get.
+ * @return {Object2D} The object that has the UUID specified, null if the object was not found.
+ */
+Object2D.prototype.getChildByUUID = function(uuid)
+{
+	var object = null;
+
+	this.traverse(function(child)
+	{
+		if(child.uuid === uuid)
+		{
+			object = child;
+		}
+	});
+
+	return object;
+};
+
+/**
+ * Attach a children to this object.
+ *
+ * The object is set as children of this object and the transformations applied to this object are traversed to its children.
+ *
+ * @param {Object2D} object Object to attach to this object.
  */ 
 Object2D.prototype.add = function(object)
 {
@@ -207,7 +234,7 @@ Object2D.prototype.add = function(object)
 /**
  * Remove object from the children list.
  *
- * @param object Object to be removed.
+ * @param {Object2D} object Object to be removed.
  */
 Object2D.prototype.remove = function(object)
 {
@@ -233,6 +260,10 @@ Object2D.prototype.remove = function(object)
 
 /**
  * Check if a point is inside of the object.
+ *
+ * Used to update the point events attached to the object.
+ *
+ * @return {boolean} True if the point is inside of the object.
  */
 Object2D.prototype.isInside = function(point)
 {
@@ -241,6 +272,8 @@ Object2D.prototype.isInside = function(point)
 
 /**
  * Update the transformation matrix of the object.
+ *
+ * @param {CanvasContext} context
  */
 Object2D.prototype.updateMatrix = function(context)
 {
@@ -293,6 +326,10 @@ Object2D.prototype.draw = function(context, viewport, canvas){};
  * Delta is the movement of the pointer already translated into local object coordinates.
  *
  * Receives (pointer, viewport, delta) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
+ * @param {Vector2} delta Pointer movement in world space.
  */
 Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 {
@@ -302,14 +339,14 @@ Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 /**
  * Method called when the object its added to a parent.
  *
- * Receives (parent) as arguments.
+ * @param {Object2D} parent Parent object were it was added.
  */
 Object2D.prototype.onAdd = null;
 
 /**
  * Method called when the object gets removed from its parent
  *
- * Receives (parent) as arguments.
+ * @param {Object2D} parent Parent object from were the object is being removed.
  */
 Object2D.prototype.onRemove = null;
 
@@ -324,6 +361,9 @@ Object2D.prototype.onUpdate = null;
  * Callback method called when the pointer enters the object.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onPointerEnter = null;
 
@@ -331,6 +371,9 @@ Object2D.prototype.onPointerEnter = null;
  * Callback method called when the was inside of the object and leaves the object.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onPointerLeave = null;
 
@@ -338,6 +381,9 @@ Object2D.prototype.onPointerLeave = null;
  * Callback method while the pointer is over (inside) of the object.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onPointerOver = null;
 
@@ -345,6 +391,9 @@ Object2D.prototype.onPointerOver = null;
  * Callback method called while the pointer button is pressed.
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onButtonPressed = null;
 
@@ -352,6 +401,9 @@ Object2D.prototype.onButtonPressed = null;
  * Callback method called when the pointer button is pressed down (single time).
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onButtonDown = null;
 
@@ -359,6 +411,9 @@ Object2D.prototype.onButtonDown = null;
  * Callback method called when the pointer button is released (single time).
  *
  * Receives (pointer, viewport) as arguments.
+ *
+ * @param {Pointer} pointer Pointer object that receives the user input.
+ * @param {Viewport} viewport Viewport where the object is drawn.
  */
 Object2D.prototype.onButtonUp = null;
 
@@ -379,7 +434,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Pattern.html

@@ -443,7 +443,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 24 - 24
docs/Pointer.html

@@ -28,7 +28,7 @@
 
 <header>
     
-        <h2><span class="attribs"><span class="type-signature"></span></span>Pointer<span class="signature">(domElement, dontInitialize)</span><span class="type-signature"></span></h2>
+        <h2><span class="attribs"><span class="type-signature"></span></span>Pointer<span class="signature">(domElement, canvas)</span><span class="type-signature"></span></h2>
         
     
 </header>
@@ -41,7 +41,7 @@
     
 
     
-    <h4 class="name" id="Pointer"><span class="type-signature"></span>new Pointer<span class="signature">(domElement, dontInitialize)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="Pointer"><span class="type-signature"></span>new Pointer<span class="signature">(domElement, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -49,7 +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 object is used to colled input from the user, works for booth mouse or touch screens.

It is responsible for syncronizing user input with the render of the graphics.
 </div>
 
 
@@ -108,13 +108,13 @@
 
         <tr>
             
-                <td class="name"><code>dontInitialize</code></td>
+                <td class="name"><code>canvas</code></td>
             
 
             <td class="type">
             
                 
-<span class="param-type">Boolean</span>
+<span class="param-type"><a href="DOM.html">DOM</a></span>
 
 
             
@@ -124,7 +124,7 @@
 
             
 
-            <td class="description last">If true the pointer events are not created.</td>
+            <td class="description last">Canvas DOM element where the content is being drawn.</td>
         </tr>
 
     
@@ -259,7 +259,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line203">line 203</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line207">line 207</a>
     </li></ul></dd>
     
 
@@ -321,7 +321,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line208">line 208</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line212">line 212</a>
     </li></ul></dd>
     
 
@@ -383,7 +383,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line188">line 188</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line192">line 192</a>
     </li></ul></dd>
     
 
@@ -445,7 +445,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line193">line 193</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line197">line 197</a>
     </li></ul></dd>
     
 
@@ -507,7 +507,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line198">line 198</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line202">line 202</a>
     </li></ul></dd>
     
 
@@ -817,7 +817,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line69">line 69</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line73">line 73</a>
     </li></ul></dd>
     
 
@@ -1132,7 +1132,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line259">line 259</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line263">line 263</a>
     </li></ul></dd>
     
 
@@ -1291,7 +1291,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line270">line 270</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line274">line 274</a>
     </li></ul></dd>
     
 
@@ -1450,7 +1450,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line281">line 281</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line285">line 285</a>
     </li></ul></dd>
     
 
@@ -1609,7 +1609,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line248">line 248</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line252">line 252</a>
     </li></ul></dd>
     
 
@@ -1719,7 +1719,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line388">line 388</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line392">line 392</a>
     </li></ul></dd>
     
 
@@ -1807,7 +1807,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line396">line 396</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line400">line 400</a>
     </li></ul></dd>
     
 
@@ -1895,7 +1895,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line237">line 237</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line241">line 241</a>
     </li></ul></dd>
     
 
@@ -2054,7 +2054,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line215">line 215</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line219">line 219</a>
     </li></ul></dd>
     
 
@@ -2142,7 +2142,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line330">line 330</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line334">line 334</a>
     </li></ul></dd>
     
 
@@ -2302,7 +2302,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line319">line 319</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line323">line 323</a>
     </li></ul></dd>
     
 
@@ -2508,7 +2508,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line296">line 296</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line300">line 300</a>
     </li></ul></dd>
     
 
@@ -2560,7 +2560,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 93 - 11
docs/Renderer.html

@@ -28,7 +28,7 @@
 
 <header>
     
-        <h2><span class="attribs"><span class="type-signature"></span></span>Renderer<span class="signature">()</span><span class="type-signature"></span></h2>
+        <h2><span class="attribs"><span class="type-signature"></span></span>Renderer<span class="signature">(canvas, options)</span><span class="type-signature"></span></h2>
         
     
 </header>
@@ -41,7 +41,7 @@
     
 
     
-    <h4 class="name" id="Renderer"><span class="type-signature"></span>new Renderer<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="Renderer"><span class="type-signature"></span>new Renderer<span class="signature">(canvas, options)</span><span class="type-signature"></span></h4>
     
 
     
@@ -60,6 +60,78 @@
 
 
 
+    <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>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Canvas to render the content.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>options</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer canvas options.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -93,7 +165,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#line13">line 13</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line15">line 15</a>
     </li></ul></dd>
     
 
@@ -187,7 +259,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#line44">line 44</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line45">line 45</a>
     </li></ul></dd>
     
 
@@ -249,7 +321,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#line26">line 26</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line28">line 28</a>
     </li></ul></dd>
     
 
@@ -311,7 +383,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#line31">line 31</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line33">line 33</a>
     </li></ul></dd>
     
 
@@ -373,7 +445,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#line38">line 38</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line40">line 40</a>
     </li></ul></dd>
     
 
@@ -548,7 +620,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#line56">line 56</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line57">line 57</a>
     </li></ul></dd>
     
 
@@ -633,13 +705,18 @@
 
             <td class="type">
             
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
             </td>
 
             
 
             
 
-            <td class="description last">Object to be updated.</td>
+            <td class="description last">Object to be updated and drawn into the canvas, the Object2D should be used as a group to store all the other objects to be updated and drawn.</td>
         </tr>
 
     
@@ -651,6 +728,11 @@
 
             <td class="type">
             
+                
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+            
             </td>
 
             
@@ -698,7 +780,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#line89">line 89</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line90">line 90</a>
     </li></ul></dd>
     
 
@@ -750,7 +832,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 8 - 7
docs/Renderer.js.html

@@ -37,6 +37,8 @@ import {ViewportControls} from "./controls/ViewportControls.js";
  * Its also resposible for managing the canvas state.
  *
  * @class
+ * @param {DOM} canvas Canvas to render the content.
+ * @param {Object} options Renderer canvas options.
  */
 function Renderer(canvas, options)
 {
@@ -63,8 +65,7 @@ function Renderer(canvas, options)
 	/**
 	 * Pointer input handler object.
 	 */
-	this.pointer = new Pointer();
-	this.pointer.setCanvas(canvas);
+	this.pointer = new Pointer(window, canvas);
 
 	/**
 	 * Indicates if the canvas should be automatically cleared on each new frame.
@@ -111,8 +112,8 @@ Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
  *
  * 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.
  *
- * @param object Object to be updated.
- * @param viewport Viewport to be updated (should be the one where the objects will be rendered after).
+ * @param object {Object2D} Object to be updated and drawn into the canvas, the Object2D should be used as a group to store all the other objects to be updated and drawn.
+ * @param viewport {Viewport} Viewport to be updated (should be the one where the objects will be rendered after).
  */
 Renderer.prototype.update = function(object, viewport)
 {
@@ -236,8 +237,8 @@ Renderer.prototype.update = function(object, viewport)
 			var lastPosition = pointer.position.clone();
 			lastPosition.sub(pointer.delta);
 
-			var positionWorld =  viewport.inverseMatrix.transformPoint(pointer.position);
-			var lastWorld =  viewport.inverseMatrix.transformPoint(lastPosition);
+			var positionWorld = viewport.inverseMatrix.transformPoint(pointer.position);
+			var lastWorld = viewport.inverseMatrix.transformPoint(lastPosition);
 
 			// Mouse delta in world coordinates
 			positionWorld.sub(lastWorld);
@@ -333,7 +334,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/UUID.html

@@ -227,7 +227,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/Vector2.html

@@ -4679,7 +4679,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 126 - 15
docs/Viewport.html

@@ -28,7 +28,7 @@
 
 <header>
     
-        <h2><span class="attribs"><span class="type-signature"></span></span>Viewport<span class="signature">()</span><span class="type-signature"></span></h2>
+        <h2><span class="attribs"><span class="type-signature"></span></span>Viewport<span class="signature">(canvas)</span><span class="type-signature"></span></h2>
         
     
 </header>
@@ -41,7 +41,7 @@
     
 
     
-    <h4 class="name" id="Viewport"><span class="type-signature"></span>new Viewport<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="Viewport"><span class="type-signature"></span>new Viewport<span class="signature">(canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -60,6 +60,55 @@
 
 
 
+    <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>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Canvas DOM element where the viewport is being rendered.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -93,7 +142,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#line13">line 13</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line14">line 14</a>
     </li></ul></dd>
     
 
@@ -143,6 +192,68 @@
 
         
             
+<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Canvas DOM element where the viewport is being rendered.
+</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#line24">line 24</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
 <h4 class="name" id="inverseMatrix"><span class="type-signature"></span>inverseMatrix<span class="type-signature"></span></h4>
 
 
@@ -187,7 +298,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#line43">line 43</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line49">line 49</a>
     </li></ul></dd>
     
 
@@ -249,7 +360,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#line38">line 38</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line44">line 44</a>
     </li></ul></dd>
     
 
@@ -311,7 +422,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#line48">line 48</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line54">line 54</a>
     </li></ul></dd>
     
 
@@ -373,7 +484,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#line55">line 55</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line61">line 61</a>
     </li></ul></dd>
     
 
@@ -435,7 +546,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#line23">line 23</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line29">line 29</a>
     </li></ul></dd>
     
 
@@ -497,7 +608,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#line33">line 33</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -559,7 +670,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#line62">line 62</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line68">line 68</a>
     </li></ul></dd>
     
 
@@ -621,7 +732,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#line28">line 28</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line34">line 34</a>
     </li></ul></dd>
     
 
@@ -683,7 +794,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#line18">line 18</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line19">line 19</a>
     </li></ul></dd>
     
 
@@ -835,7 +946,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#line88">line 88</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line107">line 107</a>
     </li></ul></dd>
     
 
@@ -923,7 +1034,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#line70">line 70</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line76">line 76</a>
     </li></ul></dd>
     
 
@@ -975,7 +1086,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 25 - 6
docs/Viewport.js.html

@@ -37,14 +37,20 @@ import {Pointer} from "./input/Pointer.js";
  * Used to indicate how the user views the content inside of the canvas.
  *
  * @class
+ * @param {DOM} canvas Canvas DOM element where the viewport is being rendered.
  */
-function Viewport()
+function Viewport(canvas)
 {
 	/**
 	 * UUID of the object.
 	 */
 	this.uuid = UUID.generate(); 
 
+	/**
+	 * Canvas DOM element where the viewport is being rendered.
+	 */
+	this.canvas = canvas;
+
 	/**
 	 * Position of the object.
 	 */
@@ -80,7 +86,7 @@ function Viewport()
 	 *
 	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
 	 */
-	this.moveOnScale = true;
+	this.moveOnScale = false;
 
 	/**
 	 * Value of the initial point of rotation if the viewport is being rotated.
@@ -99,9 +105,22 @@ 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.matrix.m = [1, 0, 0, 1, this.position.x, this.position.y];
+
+		if(this.rotation !== 0)
+		{		
+			var c = Math.cos(this.rotation);
+			var s = Math.sin(this.rotation);
+			this.matrix.multiply(new Matrix([c, s, -s, c, 0, 0]));
+		}
+
+		if(this.scale !== 1)
+		{
+			this.matrix.scale(this.scale, this.scale);
+		}
+
 		this.inverseMatrix = this.matrix.getInverse();
-		//this.matrixNeedsUpdate = false;
+		this.matrixNeedsUpdate = false;
 	}
 };
 
@@ -117,11 +136,11 @@ 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);
+	this.matrixNeedsUpdate = true;
 };
 
 export {Viewport};
@@ -141,7 +160,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 10 - 10
docs/ViewportControls.html

@@ -142,7 +142,7 @@
     
     <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>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line13">line 13</a>
     </li></ul></dd>
     
 
@@ -236,7 +236,7 @@
     
     <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#line45">line 45</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line46">line 46</a>
     </li></ul></dd>
     
 
@@ -298,7 +298,7 @@
     
     <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#line31">line 31</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -360,7 +360,7 @@
     
     <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#line24">line 24</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line25">line 25</a>
     </li></ul></dd>
     
 
@@ -422,7 +422,7 @@
     
     <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#line38">line 38</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -484,7 +484,7 @@
     
     <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#line57">line 57</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line58">line 58</a>
     </li></ul></dd>
     
 
@@ -546,7 +546,7 @@
     
     <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#line52">line 52</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line53">line 53</a>
     </li></ul></dd>
     
 
@@ -608,7 +608,7 @@
     
     <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>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line18">line 18</a>
     </li></ul></dd>
     
 
@@ -737,7 +737,7 @@
     
     <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#line67">line 67</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line68">line 68</a>
     </li></ul></dd>
     
 
@@ -789,7 +789,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 28 - 10
docs/controls_ViewportControls.js.html

@@ -30,6 +30,7 @@
 
 import {Viewport} from "../Viewport.js";
 import {Pointer} from "../input/Pointer.js";
+import {Vector2} from "../math/Vector2.js";
 
 /**
  * Viewport controls are used to allow the user to control the viewport.
@@ -63,14 +64,14 @@ function ViewportControls(viewport)
 	 *
 	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
 	 */
-	this.moveOnScale = true;
+	this.moveOnScale = false;
 
 	/**
 	 * If true allows the viewport to be rotated.
 	 *
 	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
 	 */
-	this.allowRotation = false;
+	this.allowRotation = true;
 
 	/**
 	 * Value of the initial point of rotation if the viewport is being rotated.
@@ -94,23 +95,37 @@ function ViewportControls(viewport)
  */
 ViewportControls.prototype.update = function(pointer)
 {	
+	// Scale
 	if(this.allowScale &amp;&amp; pointer.wheel !== 0)
 	{
-		this.viewport.scale -= pointer.wheel * 1e-3 * this.viewport.scale;
+		var scale = pointer.wheel * 1e-3 * this.viewport.scale;
 
-		if(this.moveOnScale)
+		this.viewport.scale -= scale;
+		this.viewport.matrixNeedsUpdate = true;
+
+		// Move on scale
+		if(this.moveOnScale &amp;&amp; pointer.canvas !== null)
 		{	
-			var speed = pointer.wheel;
-			var halfWidth = pointer.canvas.width / 2;
-			var halfWeight = pointer.canvas.height / 2;
+			this.viewport.updateMatrix();
+
+			var pointerWorld = this.viewport.inverseMatrix.transformPoint(pointer.position);
+
+			var centerWorld = new Vector2(pointer.canvas.width / 2.0, pointer.canvas.height / 2.0);
+			centerWorld = this.viewport.inverseMatrix.transformPoint(centerWorld);
+
+			var delta = pointerWorld.clone();
+			delta.sub(centerWorld);
+			delta.multiplyScalar(0.1);
 
-			this.viewport.position.x += ((pointer.position.x - halfWidth) / halfWidth) * speed;
-			this.viewport.position.y += ((pointer.position.y - halfWeight) / halfWeight) * speed;
+			this.viewport.position.sub(delta);
+			this.viewport.matrixNeedsUpdate = true;
 		}
 	}
 
+	// Rotation
 	if(this.allowRotation &amp;&amp; pointer.buttonPressed(Pointer.RIGHT) &amp;&amp; pointer.buttonPressed(Pointer.LEFT))
 	{
+		// Rotation pivot
 		if(this.rotationPoint === null)
 		{
 			this.rotationPoint = pointer.position.clone();
@@ -121,8 +136,10 @@ ViewportControls.prototype.update = function(pointer)
 			var pointer = pointer.position.clone();
 			pointer.sub(this.rotationPoint);
 			this.viewport.rotation = this.rotationInitial + pointer.angle();
+			this.viewport.matrixNeedsUpdate = true;
 		}
 	}
+	// Drag
 	else
 	{
 		this.rotationPoint = null;
@@ -131,6 +148,7 @@ ViewportControls.prototype.update = function(pointer)
 		{
 			this.viewport.position.x += pointer.delta.x;
 			this.viewport.position.y += pointer.delta.y;
+			this.viewport.matrixNeedsUpdate = true;
 		}
 	}
 };
@@ -151,7 +169,7 @@ export {ViewportControls};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 10 - 6
docs/input_Pointer.js.html

@@ -33,15 +33,15 @@ import {Vector2} from "../math/Vector2.js";
 import {Key} from "./Key.js";
 
 /**
- * Pointer instance for input in sync with the running 3D application.
+ * Pointer object is used to colled input from the user, works for booth mouse or touch screens.
  *
- * The pointer object provided by scripts is automatically updated by the runtime handler.
+ * It is responsible for syncronizing user input with the render of the graphics.
  * 
  * @class
  * @param {DOM} domElement DOM element to craete the pointer events.
- * @param {Boolean} dontInitialize If true the pointer events are not created.
+ * @param {DOM} canvas Canvas DOM element where the content is being drawn.
  */
-function Pointer(domElement)
+function Pointer(domElement, canvas)
 {
 	//Raw data
 	this._keys = new Array(5);
@@ -86,7 +86,11 @@ function Pointer(domElement)
 	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
 	 */
 	this.canvas = null;
-	
+	if(canvas !== undefined)
+	{
+		this.setCanvas(canvas);
+	}
+
 	/**
 	 * Event manager responsible for updating the raw data variables.
 	 *
@@ -443,7 +447,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/math_Box2.js.html

@@ -316,7 +316,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/math_Matrix.js.html

@@ -274,7 +274,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/math_Vector2.js.html

@@ -485,7 +485,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 10 - 7
docs/objects_BezierCurve.js.html

@@ -67,17 +67,21 @@ function BezierCurve()
 	this.toCp = new Vector2();
 
 	/**
-	 * Color of the line.
+	 * Dash line pattern to be used, if empty draws a solid line.
+	 *
+	 * Dash parttern is defined as the size of dashes as pairs of space with no line and with line.
+	 *
+	 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 	 */
-	this.strokeStyle = "#000000";
+	this.dashPattern = [5, 5];
 
 	/**
-	 * Dash line pattern to be used, is empty draws a solid line.
+	 * Style of the object line.
 	 */
-	this.dashPattern = [5, 5];
+	this.strokeStyle = "#000000";
 
 	/**
-	 * BezierCurve width.
+	 * Line width of the line.
 	 */
 	this.lineWidth = 1;
 }
@@ -107,7 +111,6 @@ BezierCurve.curveHelper = function(object)
 	fromLine.to = object.fromCp;
 	object.parent.add(fromLine);
 
-
 	var toCp = new Circle();
 	toCp.radius = 3;
 	toCp.layer = object.layer + 1;
@@ -154,7 +157,7 @@ export {BezierCurve};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 22 - 10
docs/objects_Box.js.html

@@ -35,7 +35,9 @@ import {Helpers} from "../utils/Helpers.js";
 import {Circle} from "./Circle.js";
 
 /**
- * Box object draw a box.
+ * Box object draw a rectangular object.
+ *
+ * Can be used as a base to implement other box objects, already implements collision for pointer events.
  *
  * @class
  */
@@ -49,17 +51,21 @@ function Box()
 	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
 
 	/**
-	 * Color of the box border line.
+	 * Style of the object border line.
+	 *
+	 * If set null it is ignored.
 	 */
 	this.strokeStyle = "#000000";
 
 	/**
-	 * Line width.
+	 * Line width, only used if a valid strokeStyle is defined.
 	 */
 	this.lineWidth = 1;
 
 	/**
 	 * Background color of the box.
+	 *
+	 * If set null it is ignored.
 	 */
 	this.fillStyle = "#FFFFFF";
 }
@@ -86,12 +92,18 @@ Box.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;
 
-	context.fillStyle = this.fillStyle;
-	context.fillRect(this.box.min.x, this.box.min.y, width, height);
-
-	context.lineWidth = this.lineWidth;
-	context.strokeStyle = this.strokeStyle;
-	context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+	if(this.fillStyle !== null)
+	{	
+		context.fillStyle = this.fillStyle;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
+
+	if(this.strokeStyle !== null)
+	{
+		context.lineWidth = this.lineWidth;
+		context.strokeStyle = this.strokeStyle;
+		context.strokeRect(this.box.min.x, this.box.min.y, width, height);
+	}
 };
 
 export {Box};
@@ -111,7 +123,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 21 - 9
docs/objects_Circle.js.html

@@ -34,6 +34,8 @@ import {Vector2} from "../math/Vector2.js";
 /**
  * Circle object draw a circular object, into the canvas.
  *
+ * Can be used as a base to implement other circular objects, already implements the circle collision for pointer events.
+ *
  * @class
  */
 function Circle()
@@ -46,17 +48,21 @@ function Circle()
 	this.radius = 10.0;
 
 	/**
-	 * Color of the circle border line.
+	 * Style of the object border line.
+	 *
+	 * If set null it is ignored.
 	 */
 	this.strokeStyle = "#000000";
 
 	/**
-	 * Line width.
+	 * Line width, only used if a valid strokeStyle is defined.
 	 */
 	this.lineWidth = 1;
 
 	/**
 	 * Background color of the circle.
+	 *
+	 * If set null it is ignored.
 	 */
 	this.fillStyle = "#FFFFFF";
 }
@@ -83,12 +89,18 @@ Circle.prototype.draw = function(context, viewport, canvas)
 	context.beginPath();
 	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 	
-	context.fillStyle = this.fillStyle;
-	context.fill();
-
-	context.lineWidth = this.lineWidth;
-	context.strokeStyle = this.strokeStyle;
-	context.stroke();
+	if(this.fillStyle !== null)
+	{	
+		context.fillStyle = this.fillStyle;
+		context.fill();
+	}
+
+	if(this.strokeStyle !== null)
+	{
+		context.lineWidth = this.lineWidth;
+		context.strokeStyle = this.strokeStyle;
+		context.stroke();
+	}
 };
 
 export {Circle};</code></pre>
@@ -107,7 +119,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_DOM.js.html

@@ -114,7 +114,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_Graph.js.html

@@ -143,7 +143,7 @@ export {Graph};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_Image.js.html

@@ -109,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 10 - 6
docs/objects_Line.js.html

@@ -55,17 +55,21 @@ function Line()
 	this.to = new Vector2();
 
 	/**
-	 * Color of the line.
+	 * Dash line pattern to be used, if empty draws a solid line.
+	 *
+	 * Dash parttern is defined as the size of dashes as pairs of space with no line and with line.
+	 *
+	 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 	 */
-	this.strokeStyle = "#000000";
+	this.dashPattern = [5, 5];
 
 	/**
-	 * Dash line pattern to be used, is empty draws a solid line.
+	 * Style of the object line.
 	 */
-	this.dashPattern = [5, 5];
+	this.strokeStyle = "#000000";
 
 	/**
-	 * Line width.
+	 * Line width of the line.
 	 */
 	this.lineWidth = 1;
 }
@@ -101,7 +105,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_Pattern.js.html

@@ -121,7 +121,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_Text.js.html

@@ -89,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
docs/objects_mask_Mask.js.html

@@ -77,7 +77,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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
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 13 2019 11:59:09 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 17 2019 11:15:30 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

+ 1 - 1
package.json

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

Деякі файли не було показано, через те що забагато файлів було змінено