Derp

README.md

@@ -25,19 +25,39 @@
 
 
 
-Custom Objects
+### Custom Objects
 
 - Its possible to create custom graph elements by expanding the Object2D class, and overriding its draw(), transform() methods.
+- The draw(context, viewport, canvas) function is where the object gets draw into the screen, here you can implement your custom object as if it was drawn alone in a canvas.
+- Consider the point zero the origin of the object, every object has a position, rotation, scale and origin points used to control the object transform, these points don't need to be considered in the draw method.
+- Example of a custom element, drawing a custom box with a red gradient.
 
+```javascript
+var object = new Trenette.Object2D();
+object.draw = function(context, viewport, canvas)
+{
+    // Create gradient
+    var grd = context.createLinearGradient(0, 0, 70, 0);
+    grd.addColorStop(0, "#FF0000");
+    grd.addColorStop(1, "#FFFFFF");
 
+    // Fill with gradient
+    context.fillStyle = grd;
+    context.fillRect(-70, 70, 140, 140);
+};
+```
 
-Pointer events
+
+
+
+
+### Pointer events
 
 - The system supports multiple pointer events that can be used to control the objects and interact with the users.
 
 
 
-DOM Objects
+### DOM Objects
 
 - Its possible to use DOM elements in the graph, by applying CSS transform to absolute positioned elements the system already provides a DOM base object that creates a basic division.
 

docs/Box.html

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

docs/Box2.html

@@ -338,7 +338,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line154">line 154</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line167">line 167</a>
     </li></ul></dd>
     
 
@@ -497,7 +497,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line141">line 141</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line154">line 154</a>
     </li></ul></dd>
     
 
@@ -744,7 +744,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line180">line 180</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line200">line 200</a>
     </li></ul></dd>
     
 
@@ -881,7 +881,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line230">line 230</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line250">line 250</a>
     </li></ul></dd>
     
 
@@ -991,7 +991,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line107">line 107</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line120">line 120</a>
     </li></ul></dd>
     
 
@@ -1079,7 +1079,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line129">line 129</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line142">line 142</a>
     </li></ul></dd>
     
 
@@ -1167,7 +1167,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line120">line 120</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line133">line 133</a>
     </li></ul></dd>
     
 
@@ -1255,7 +1255,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line91">line 91</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line90">line 90</a>
     </li></ul></dd>
     
 
@@ -1343,7 +1343,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line99">line 99</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line105">line 105</a>
     </li></ul></dd>
     
 
@@ -1480,7 +1480,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line194">line 194</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line214">line 214</a>
     </li></ul></dd>
     
 
@@ -1617,7 +1617,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line165">line 165</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line178">line 178</a>
     </li></ul></dd>
     
 
@@ -2128,7 +2128,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line218">line 218</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line238">line 238</a>
     </li></ul></dd>
     
 
@@ -2265,7 +2265,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line207">line 207</a>
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line227">line 227</a>
     </li></ul></dd>
     
 
@@ -2317,7 +2317,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxMask.html

@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="mask_BoxMask.js.html">mask/BoxMask.js</a>, <a href="mask_BoxMask.js.html#line15">line 15</a>
+        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line15">line 15</a>
     </li></ul></dd>
     
 
@@ -198,7 +198,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="mask_BoxMask.js.html">mask/BoxMask.js</a>, <a href="mask_BoxMask.js.html#line22">line 22</a>
+        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line22">line 22</a>
     </li></ul></dd>
     
 
@@ -260,7 +260,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="mask_BoxMask.js.html">mask/BoxMask.js</a>, <a href="mask_BoxMask.js.html#line27">line 27</a>
+        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line27">line 27</a>
     </li></ul></dd>
     
 
@@ -440,7 +440,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="mask_Mask.js.html">mask/Mask.js</a>, <a href="mask_Mask.js.html#line32">line 32</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -492,7 +492,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Circle.html

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

docs/DOM.html

@@ -28,7 +28,7 @@
 
 <header>
     
-        <h2><span class="attribs"><span class="type-signature"></span></span>DOM<span class="signature">(parent, type)</span><span class="type-signature"></span></h2>
+        <h2><span class="attribs"><span class="type-signature"></span></span>DOM<span class="signature">(parentDOM, type)</span><span class="type-signature"></span></h2>
         
     
 </header>
@@ -41,7 +41,7 @@
     
 
     
-    <h4 class="name" id="DOM"><span class="type-signature"></span>new DOM<span class="signature">(parent, type)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="DOM"><span class="type-signature"></span>new DOM<span class="signature">(parentDOM, type)</span><span class="type-signature"></span></h4>
     
 
     
@@ -85,7 +85,7 @@
 
         <tr>
             
-                <td class="name"><code>parent</code></td>
+                <td class="name"><code>parentDOM</code></td>
             
 
             <td class="type">
@@ -249,7 +249,69 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line26">line 26</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line31">line 31</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="parentDOM"><span class="type-signature"></span>parentDOM<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Parent element that contains this DOM div.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line24">line 24</a>
     </li></ul></dd>
     
 
@@ -311,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line39">line 39</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -351,7 +413,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.js.html

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

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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Key.html

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

docs/Line.html

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

docs/Mask.html

@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="mask_Mask.js.html">mask/Mask.js</a>, <a href="mask_Mask.js.html#line16">line 16</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line16">line 16</a>
     </li></ul></dd>
     
 
@@ -296,7 +296,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="mask_Mask.js.html">mask/Mask.js</a>, <a href="mask_Mask.js.html#line32">line 32</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -348,7 +348,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

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

docs/Object2D.html

@@ -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#line131">line 131</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line138">line 138</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#line97">line 97</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line104">line 104</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#line71">line 71</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line78">line 78</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#line109">line 109</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line116">line 116</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#line78">line 78</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line85">line 85</a>
     </li></ul></dd>
     
 
@@ -559,7 +559,69 @@
     
     <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#line66">line 66</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="level"><span class="type-signature"></span>level<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Depth level in the object tree, objects with higher depth are drawn on top.

The layer value is considered first.
+</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#line34">line 34</a>
     </li></ul></dd>
     
 
@@ -621,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#line85">line 85</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line92">line 92</a>
     </li></ul></dd>
     
 
@@ -683,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#line64">line 64</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line71">line 71</a>
     </li></ul></dd>
     
 
@@ -745,7 +807,69 @@
     
     <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#line90">line 90</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line97">line 97</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="onAdd"><span class="type-signature"></span>onAdd<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Method called when the object its added to a parent.

Receives (parent) as arguments.
+</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#line265">line 265</a>
     </li></ul></dd>
     
 
@@ -769,7 +893,7 @@
 
 
 <div class="description">
-    Callback method called when the pointer button is pressed down (single time).
+    Callback method called when the pointer button is pressed down (single time).

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -807,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#line279">line 279</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line324">line 324</a>
     </li></ul></dd>
     
 
@@ -869,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#line274">line 274</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line317">line 317</a>
     </li></ul></dd>
     
 
@@ -893,7 +1017,7 @@
 
 
 <div class="description">
-    Callback method called when the pointer button is released (single time).
+    Callback method called when the pointer button is released (single time).

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -931,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#line284">line 284</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line331">line 331</a>
     </li></ul></dd>
     
 
@@ -993,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#line243">line 243</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line286">line 286</a>
     </li></ul></dd>
     
 
@@ -1055,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#line250">line 250</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line293">line 293</a>
     </li></ul></dd>
     
 
@@ -1117,7 +1241,69 @@
     
     <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#line257">line 257</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line300">line 300</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="onRemove"><span class="type-signature"></span>onRemove<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Method called when the object gets removed from its parent

Receives (parent) as arguments.
+</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#line272">line 272</a>
     </li></ul></dd>
     
 
@@ -1179,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#line236">line 236</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -1241,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#line37">line 37</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line44">line 44</a>
     </li></ul></dd>
     
 
@@ -1365,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#line104">line 104</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line111">line 111</a>
     </li></ul></dd>
     
 
@@ -1427,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#line126">line 126</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line133">line 133</a>
     </li></ul></dd>
     
 
@@ -1489,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#line32">line 32</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -1551,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#line119">line 119</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line126">line 126</a>
     </li></ul></dd>
     
 
@@ -1613,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#line47">line 47</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line54">line 54</a>
     </li></ul></dd>
     
 
@@ -1675,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#line114">line 114</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line121">line 121</a>
     </li></ul></dd>
     
 
@@ -1737,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#line42">line 42</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line49">line 49</a>
     </li></ul></dd>
     
 
@@ -1861,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#line52">line 52</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line59">line 59</a>
     </li></ul></dd>
     
 
@@ -1985,7 +2171,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#line156">line 156</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line163">line 163</a>
     </li></ul></dd>
     
 
@@ -2168,7 +2354,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#line229">line 229</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line258">line 258</a>
     </li></ul></dd>
     
 
@@ -2256,7 +2442,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#line180">line 180</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line209">line 209</a>
     </li></ul></dd>
     
 
@@ -2344,7 +2530,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#line264">line 264</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -2476,7 +2662,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#line167">line 167</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line184">line 184</a>
     </li></ul></dd>
     
 
@@ -2636,7 +2822,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#line215">line 215</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line244">line 244</a>
     </li></ul></dd>
     
 
@@ -2768,7 +2954,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#line139">line 139</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line146">line 146</a>
     </li></ul></dd>
     
 
@@ -2856,7 +3042,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#line188">line 188</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line217">line 217</a>
     </li></ul></dd>
     
 
@@ -2908,7 +3094,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -54,6 +54,13 @@ function Object2D()
 	 */
 	this.parent = null;
 
+	/**
+	 * Depth level in the object tree, objects with higher depth are drawn on top.
+	 *
+	 * The layer value is considered first. 
+	 */
+	this.level = 0;
+
 	/**
 	 * Position of the object.
 	 */
@@ -184,6 +191,16 @@ Object2D.prototype.traverse = function(callback)
 Object2D.prototype.add = function(object)
 {
 	object.parent = this;
+	object.level = this.level + 1;
+
+	object.traverse(function(child)
+	{
+		if(child.onAdd !== null)
+		{
+			child.onAdd(this);
+		}
+	});
+
 	this.children.push(object);
 };
 
@@ -195,9 +212,21 @@ Object2D.prototype.add = function(object)
 Object2D.prototype.remove = function(object)
 {
 	var index = this.children.indexOf(object);
+	
 	if(index !== -1)
 	{
-		this.children[index].parent = null;
+		var object = this.children[index];
+		object.parent = null;
+		object.level = 0;
+
+		object.traverse(function(child)
+		{
+			if(child.onRemove !== null)
+			{
+				child.onRemove(this);
+			}
+		});
+
 		this.children.splice(index, 1)
 	}
 };
@@ -256,6 +285,20 @@ Object2D.prototype.transform = function(context, viewport)
  */
 Object2D.prototype.draw = function(context, viewport, canvas){};
 
+/**
+ * Method called when the object its added to a parent.
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onAdd = null;
+
+/**
+ * Method called when the object gets removed from its parent
+ *
+ * Receives (parent) as arguments.
+ */
+Object2D.prototype.onRemove = null;
+
 /**
  * Callback method called every time before the object is draw into the canvas.
  *
@@ -303,11 +346,15 @@ Object2D.prototype.onButtonPressed = null;
 
 /**
  * Callback method called when the pointer button is pressed down (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonDown = null;
 
 /**
  * Callback method called when the pointer button is released (single time).
+ *
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonUp = null;
 
@@ -328,7 +375,7 @@ export {Object2D};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

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

docs/Renderer.html

@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line35">line 35</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -249,7 +249,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line17">line 17</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line25">line 25</a>
     </li></ul></dd>
     
 
@@ -311,7 +311,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line22">line 22</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line30">line 30</a>
     </li></ul></dd>
     
 
@@ -373,7 +373,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line29">line 29</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line37">line 37</a>
     </li></ul></dd>
     
 
@@ -548,7 +548,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line47">line 47</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line55">line 55</a>
     </li></ul></dd>
     
 
@@ -698,7 +698,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line77">line 77</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line85">line 85</a>
     </li></ul></dd>
     
 
@@ -750,7 +750,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -37,8 +37,16 @@ import {Pointer} from "./input/Pointer.js";
  *
  * @class
  */
-function Renderer(canvas)
+function Renderer(canvas, options)
 {
+	if(options === undefined)
+	{
+		options = 
+		{
+			alpha: true
+		};
+	}
+
 	/**
 	 * Canvas DOM element, has to be managed by the user.
 	 */
@@ -47,7 +55,7 @@ function Renderer(canvas)
 	/**
 	 * Canvas 2D rendering context used to draw content.
 	 */
-	this.context = canvas.getContext("2d");
+	this.context = canvas.getContext("2d", {alpha: options.alpha});
 	this.context.imageSmoothingEnabled = true;
 	this.context.globalCompositeOperation = "source-over";
 
@@ -117,6 +125,11 @@ Renderer.prototype.update = function(object, viewport)
 	// Sort objects by layer
 	objects.sort(function(a, b)
 	{
+		if(b.layer === a.layer)
+		{
+			return b.level - a.level;
+		}
+		
 		return b.layer - a.layer;
 	});
 
@@ -244,7 +257,6 @@ Renderer.prototype.update = function(object, viewport)
 	{
 		child.updateMatrix();
 	});
-	
 
 	this.context.setTransform(1, 0, 0, 1, 0, 0);
 	
@@ -318,7 +330,7 @@ export {Renderer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

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

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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Vector2.html

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

docs/Viewport.html

@@ -515,6 +515,68 @@
 
         
             
+<h4 class="name" id="rotationPoint"><span class="type-signature"></span>rotationPoint<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Value of the initial point of rotation if the viewport is being rotated.

Is set to null when the viewport is not being rotated.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line62">line 62</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
 <h4 class="name" id="scale"><span class="type-signature"></span>scale<span class="type-signature"></span></h4>
 
 
@@ -701,7 +763,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#line61">line 61</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line68">line 68</a>
     </li></ul></dd>
     
 
@@ -789,7 +851,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#line101">line 101</a>
     </li></ul></dd>
     
 
@@ -841,7 +903,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -81,6 +81,13 @@ function Viewport()
 	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
 	 */
 	this.moveOnScale = true;
+
+	/**
+	 * Value of the initial point of rotation if the viewport is being rotated.
+	 *
+	 * Is set to null when the viewport is not being rotated.
+	 */
+	this.rotationPoint = null;
 }
 
 /**
@@ -103,11 +110,17 @@ Viewport.prototype.updateControls = function(pointer)
 		}
 	}
 
-	if(pointer.buttonPressed(Pointer.RIGHT))
+	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
+	{
+		this.rotation += pointer.delta.angle() * 1e-2;
+	}
+	else if(pointer.buttonPressed(Pointer.RIGHT))
 	{
 		this.position.x += pointer.delta.x;
 		this.position.y += pointer.delta.y;
 	}
+
+
 };
 
 /**
@@ -140,7 +153,7 @@ export {Viewport};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/index.html

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

docs/input_Key.js.html

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

docs/input_Pointer.js.html

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

docs/math_Box2.js.html

@@ -109,7 +109,6 @@ Box2.prototype.copy = function(box)
  */
 Box2.prototype.isEmpty = function()
 {
-
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 };
 
@@ -118,7 +117,14 @@ Box2.prototype.isEmpty = function()
  */
 Box2.prototype.getCenter = function(target)
 {
-	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
+
+	return target;
 };
 
 /**
@@ -126,7 +132,14 @@ Box2.prototype.getCenter = function(target)
  */
 Box2.prototype.getSize = function(target)
 {
-	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
+
+	return target;
 };
 
 /**
@@ -197,7 +210,14 @@ Box2.prototype.intersectsBox = function(box)
 
 Box2.prototype.clampPoint = function(point, target)
 {
-	return target.copy(point).clamp(this.min, this.max);
+	if(target === undefined)
+	{
+		target = new Vector2();
+	}
+
+	target.copy(point).clamp(this.min, this.max);
+
+	return target;
 };
 
 /**
@@ -277,7 +297,7 @@ export {Box2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

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

docs/math_UUID.js.html

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

docs/math_Vector2.js.html

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

docs/objects_Box.js.html

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

docs/objects_Circle.js.html

@@ -75,17 +75,14 @@ Circle.prototype.onPointerLeave = function(pointer, viewport)
 
 Circle.prototype.draw = function(context, viewport, canvas)
 {
-	context.fillStyle = this.fillStyle;
-
 	context.beginPath();
 	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+	
+	context.fillStyle = this.fillStyle;
 	context.fill();
 
 	context.lineWidth = 1;
 	context.strokeStyle = this.strokeStyle;
-
-	context.beginPath();
-	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 	context.stroke();
 };
 
@@ -105,7 +102,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 Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -39,13 +39,18 @@ import {Vector2} from "../math/Vector2.js";
  * Use the normal DOM events for interaction.
  *
  * @class
- * @param parent Parent DOM element that contains the drawing canvas.
+ * @param parentDOM Parent DOM element that contains the drawing canvas.
  * @param type Type of the DOM element (e.g. "div", "p", ...)
  */
-function DOM(parent, type)
+function DOM(parentDOM, type)
 {
 	Object2D.call(this);
 
+	/**
+	 * Parent element that contains this DOM div.
+	 */
+	this.parentDOM = parentDOM;
+
 	/**
 	 * DOM element contained by this object.
 	 *
@@ -59,7 +64,6 @@ function DOM(parent, type)
 	this.element.style.transformOrigin = "0px 0px";
 	this.element.style.overflow = "auto";
 	this.element.style.pointerEvents = "none";
-	parent.appendChild(this.element);
 	
 	/**
 	 * Size of the DOM element (in world coordinates).
@@ -69,6 +73,16 @@ function DOM(parent, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
+DOM.prototype.onAdd = function()
+{
+	this.parentDOM.appendChild(this.element);
+};
+
+DOM.prototype.onRemove = function()
+{
+	this.parentDOM.removeChild(this.element);
+};
+
 DOM.prototype.transform = function(context, viewport, canvas)
 {
 	// CSS trasnformation matrix
@@ -100,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 Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

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 Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

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

docs/objects_Pattern.js.html

@@ -98,8 +98,6 @@ Pattern.prototype.draw = function(context, viewport, canvas)
 	if(this.image.src.length > 0)
 	{
 		var pattern = context.createPattern(this.image, this.repetition);
-		
-		//pattern.setTransform();
 
 		context.fillStyle = pattern;
 		context.fillRect(this.box.min.x, this.box.min.y, width, height);
@@ -123,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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

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 Fri Jun 07 2019 11:44:41 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_BoxMask.js.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: objects/mask/BoxMask.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: objects/mask/BoxMask.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>"use strict";
+
+import {Mask} from "./Mask.js";
+import {Vector2} from "../../math/Vector2.js";
+import {Box2} from "../../math/Box2.js";
+
+/**
+ * Box mask can be used to clear a box mask region.
+ *
+ * It will limit the drwaing region to this box.
+ *
+ * @class
+ * @extends {Mask}
+ */
+function BoxMask()
+{
+	Mask.call(this);
+
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+	/**
+	 * If inverted the mask considers the outside of the box instead of the inside.
+	 */
+	this.invert = false;
+}
+
+BoxMask.prototype = Object.create(Mask.prototype);
+
+BoxMask.prototype.isInside = function(point)
+{
+	return this.box.containsPoint(point);
+};
+
+BoxMask.prototype.clip = function(context, viewport, canvas)
+{
+	context.beginPath();
+	
+	var width = this.box.max.x - this.box.min.x;
+	
+	if(this.invert)
+	{	
+		context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4);
+		context.rect(this.box.max.x, -5e3, 1e4, 1e4);
+		context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4);
+		context.rect(this.box.min.x, this.box.max.y, width, 1e4);
+	}
+	else
+	{
+		var height = this.box.max.y - this.box.min.y;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
+
+	context.clip();
+};
+
+export {BoxMask};</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/objects_mask_Mask.js.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: objects/mask/Mask.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: objects/mask/Mask.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>"use strict";
+
+import {Object2D} from "../../Object2D.js";
+import {Vector2} from "../../math/Vector2.js";
+import {Box2} from "../../math/Box2.js";
+
+/**
+ * A mask can be used to set the drawing region.
+ *
+ * Masks are treated as objects their shape is used to filter other objects shape.
+ *
+ * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
+ *
+ * @class
+ */
+function Mask()
+{
+	Object2D.call(this);
+}
+
+Mask.prototype = Object.create(Object2D.prototype);
+
+Mask.prototype.isMask = true;
+
+/**
+ * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+ *
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
+ * @param {DOM} canvas DOM canvas element where the content is being drawn.
+ */
+Mask.prototype.clip = function(context, viewport, canvas){};
+
+export {Mask};</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

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 Fri Jun 07 2019 11:44:40 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Fri Jun 07 2019 15:31:57 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

examples/diagram.html

@@ -69,6 +69,7 @@
 			}
 		};
 
+		/*
 		window.onkeydown = function(event)
 		{
 			if(selected !== null && event.keyCode === 46)
@@ -83,10 +84,26 @@
 			this.strokeStyle = "#0000FF";
 			selected = this;
 		};
+		*/
+
 
 		// Group to store other objects
 		var group = new Trenette.Object2D();
 		
+		var object = new Trenette.Object2D();
+		object.draw = function(context, viewport, canvas)
+		{
+			// Create gradient
+			var grd = context.createLinearGradient(0, 0, 70, 0);
+			grd.addColorStop(0, "#FF0000");
+			grd.addColorStop(1, "#FFFFFF");
+
+			// Fill with gradient
+			context.fillStyle = grd;
+			context.fillRect(-70, 70, 140, 140);
+		};
+		group.add(object);
+
 		// Pattern image object
 		var image = new Trenette.Pattern("grid.png");
 		image.position.set(-300, -400);