Published NPM

build/escher.js

@@ -1093,9 +1093,6 @@
 			}
 		});
 
-		// TODO <REMOVE THIS CODE>
-		console.log("getChildByUUID()", uuid, this, object);
-
 		return object;
 	};
 

docs/BezierCurve.html

@@ -308,7 +308,7 @@
 
         
             
-<h4 class="name" id="dashPattern"><span class="type-signature"></span>dashPattern<span class="type-signature"></span></h4>
+<h4 class="name" id="dashPattern"><span class="type-signature"></span>dashPattern<span class="type-signature"> :Array.&lt;number></span></h4>
 
 
 
@@ -323,6 +323,16 @@ E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repea
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Array.&lt;number></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -361,7 +371,7 @@ E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repea
     
     <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#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -509,7 +519,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -527,7 +537,7 @@ Should be implemented by underlying classes.
 
         
             
-<h4 class="name" id="from"><span class="type-signature"></span>from<span class="type-signature"></span></h4>
+<h4 class="name" id="from"><span class="type-signature"></span>from<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>
 
 
 
@@ -540,6 +550,16 @@ Can be equal to the position object of another object. Making it automatically f
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -578,7 +598,7 @@ Can be equal to the position object of another object. Making it automatically f
     
     <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#line21">line 21</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line23">line 23</a>
     </li></ul></dd>
     
 
@@ -1061,7 +1081,7 @@ The layer value is considered first.
 
         
             
-<h4 class="name" id="lineWidth"><span class="type-signature"></span>lineWidth<span class="type-signature"></span></h4>
+<h4 class="name" id="lineWidth"><span class="type-signature"></span>lineWidth<span class="type-signature"> :number</span></h4>
 
 
 
@@ -1072,6 +1092,16 @@ The layer value is considered first.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -1110,7 +1140,7 @@ The layer value is considered first.
     
     <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#line47">line 47</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line57">line 57</a>
     </li></ul></dd>
     
 
@@ -1491,7 +1521,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1558,7 +1588,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1625,7 +1655,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1692,7 +1722,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1759,7 +1789,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1826,7 +1856,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1893,7 +1923,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1962,7 +1992,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2029,7 +2059,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2096,7 +2126,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2163,7 +2193,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2234,7 +2264,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2955,7 +2985,7 @@ The world scale of the object is affected by the parent transform.
 
         
             
-<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"></span></h4>
+<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"> :string</span></h4>
 
 
 
@@ -2966,6 +2996,16 @@ The world scale of the object is affected by the parent transform.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -3004,7 +3044,7 @@ The world scale of the object is affected by the parent transform.
     
     <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#line50">line 50</a>
     </li></ul></dd>
     
 
@@ -3075,7 +3115,7 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
     </li></ul></dd>
     
 
@@ -3093,7 +3133,7 @@ Should be implemented by underlying classes.
 
         
             
-<h4 class="name" id="to"><span class="type-signature"></span>to<span class="type-signature"></span></h4>
+<h4 class="name" id="to"><span class="type-signature"></span>to<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>
 
 
 
@@ -3106,6 +3146,16 @@ Can be equal to the position object of another object. Making it automatically f
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -3144,7 +3194,7 @@ Can be equal to the position object of another object. Making it automatically f
     
     <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#line28">line 28</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -3234,6 +3284,87 @@ Can be equal to the position object of another object. Making it automatically f
 
         
             
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Line.html#type">Line#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
 <h4 class="name" id="uuid"><span class="type-signature"></span>uuid<span class="type-signature"> :string</span></h4>
 
 
@@ -3501,7 +3632,7 @@ Helper objects are added to the parent of the curve object.
     
     <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#line41">line 41</a>
+        <a href="objects_BezierCurve.js.html">objects/BezierCurve.js</a>, <a href="objects_BezierCurve.js.html#line44">line 44</a>
     </li></ul></dd>
     
 
@@ -3645,7 +3776,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3738,7 +3869,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3880,7 +4011,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -4067,7 +4198,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -4235,7 +4366,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4422,7 +4553,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4661,7 +4792,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Line.html#parse">Line#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4803,7 +5103,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4839,7 +5139,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Line.html#serialize">Line#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4928,6 +5396,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4970,7 +5461,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -5112,7 +5603,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -5254,7 +5745,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5300,13 +5791,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box.html

@@ -502,7 +502,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1402,7 +1402,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1469,7 +1469,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1536,7 +1536,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1603,7 +1603,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1670,7 +1670,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1737,7 +1737,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1804,7 +1804,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1873,7 +1873,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1940,7 +1940,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2007,7 +2007,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2074,7 +2074,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2145,7 +2145,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2983,7 +2983,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3273,7 +3354,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3366,7 +3447,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3508,7 +3589,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3695,7 +3776,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3863,7 +3944,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4050,7 +4131,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4289,7 +4370,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4431,7 +4681,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4467,7 +4717,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4556,6 +4974,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4598,7 +5039,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4740,7 +5181,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4882,7 +5323,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4928,13 +5369,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box2.html

@@ -1517,6 +1517,143 @@ Vector is subtracted from min and added to the max points.
 
 
 
+        
+            
+
+    
+
+    
+    <h4 class="name" id="fromArray"><span class="type-signature"></span>fromArray<span class="signature">(array)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Set box data min and max from numeric array.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>array</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Array.&lt;number></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Numeric array with box data min and max.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line287">line 287</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         
             
 
@@ -2726,6 +2863,116 @@ The box size is condireded valid on two negative axis.
 
 
 
+        
+            
+
+    
+
+    
+    <h4 class="name" id="toArray"><span class="type-signature"></span>toArray<span class="signature">()</span><span class="type-signature"> &rarr; {Array.&lt;number>}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Store the box data into a numeric array.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line277">line 277</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Numeric array with box data min and max.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Array.&lt;number></span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
         
             
 
@@ -3018,13 +3265,13 @@ Store the result in this object.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxMask.html

@@ -95,7 +95,7 @@ It will limit the drawing region to this box.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line13">line 13</a>
+        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line14">line 14</a>
     </li></ul></dd>
     
 
@@ -233,7 +233,7 @@ It will limit the drawing region to this box.
 
         
             
-<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"> :<a href="Box2.html">Box2</a></span></h4>
 
 
 
@@ -244,6 +244,16 @@ It will limit the drawing region to this box.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Box2.html">Box2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -277,7 +287,7 @@ It will limit the drawing region to this box.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line20">line 20</a>
+        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line23">line 23</a>
     </li></ul></dd>
     
 
@@ -502,7 +512,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -755,7 +765,7 @@ Used to convert pointer input points (viewport space) into object coordinates.
 
         
             
-<h4 class="name" id="invert"><span class="type-signature"></span>invert<span class="type-signature"></span></h4>
+<h4 class="name" id="invert"><span class="type-signature"></span>invert<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -766,6 +776,16 @@ Used to convert pointer input points (viewport space) into object coordinates.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -799,7 +819,7 @@ Used to convert pointer input points (viewport space) into object coordinates.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line25">line 25</a>
+        <a href="objects_mask_BoxMask.js.html">objects/mask/BoxMask.js</a>, <a href="objects_mask_BoxMask.js.html#line30">line 30</a>
     </li></ul></dd>
     
 
@@ -1338,7 +1358,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1405,7 +1425,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1472,7 +1492,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1539,7 +1559,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1606,7 +1626,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1673,7 +1693,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1740,7 +1760,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1809,7 +1829,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1876,7 +1896,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1943,7 +1963,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2010,7 +2030,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2081,7 +2101,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2855,7 +2875,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Mask.html#type">Mask#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3145,7 +3246,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3189,7 +3290,11 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+    Clip the canvas context. Define a clipping path and set the clip using the context.clip() method.
+
+Ensures that next objects being drawn are clipped to the path stored here.
+
+More information about canvas clipping https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip.
 </div>
 
 
@@ -3333,7 +3438,7 @@ The object is set as children of this object and the transformations applied to
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line31">line 31</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line37">line 37</a>
     </li></ul></dd>
     
 
@@ -3426,7 +3531,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3568,7 +3673,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3755,7 +3860,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3923,7 +4028,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4110,7 +4215,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4349,7 +4454,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+    <dt class="inherited-from">Inherited From:</dt>
+    <dd class="inherited-from"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4491,7 +4765,153 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+    <dt class="inherited-from">Inherited From:</dt>
+    <dd class="inherited-from"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
     </li></ul></dd>
     
 
@@ -4516,6 +4936,28 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -4527,7 +4969,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4616,6 +5058,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4658,7 +5123,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4800,7 +5265,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4942,7 +5407,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4988,13 +5453,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Circle.html

@@ -440,7 +440,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1340,7 +1340,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1407,7 +1407,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1474,7 +1474,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1541,7 +1541,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1608,7 +1608,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1675,7 +1675,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1742,7 +1742,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1811,7 +1811,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1878,7 +1878,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1945,7 +1945,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2012,7 +2012,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2083,7 +2083,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2983,7 +2983,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3273,7 +3354,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3366,7 +3447,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3508,7 +3589,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3695,7 +3776,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3863,7 +3944,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4050,7 +4131,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4289,7 +4370,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4431,7 +4681,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4467,7 +4717,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4556,6 +4974,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4598,7 +5039,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4740,7 +5181,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4882,7 +5323,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4928,13 +5369,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 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">(parentDOM, type)</span><span class="type-signature"></span></h2>
+        <h2><span class="attribs"><span class="type-signature"></span></span>DOM<span class="signature">(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">(parentDOM, type)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="DOM"><span class="type-signature"></span>new DOM<span class="signature">(type)</span><span class="type-signature"></span></h4>
     
 
     
@@ -51,7 +51,7 @@
 <div class="description">
     A DOM object transformed using CSS3D to be included in the scene.
 
-DOM objects always stay on top of everything else, it is not possible to layer these object with regular canvas objects.
+DOM objects always stay on top or bellow (depending on the DOM parent placement) of everything else. It is not possible to layer these object with regular canvas objects.
 
 By default mouse events are not supported for these objects (it does not implement pointer collision checking). Use the DOM events for interaction with these types of objects.
 </div>
@@ -87,29 +87,6 @@ By default mouse events are not supported for these objects (it does not impleme
     <tbody>
     
 
-        <tr>
-            
-                <td class="name"><code>parentDOM</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Element</span>
-
-
-            
-            </td>
-
-            
-
-            
-
-            <td class="description last">Parent DOM element that contains the drawing canvas.</td>
-        </tr>
-
-    
-
         <tr>
             
                 <td class="name"><code>type</code></td>
@@ -169,7 +146,7 @@ By default mouse events are not supported for these objects (it does not impleme
     
     <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#line16">line 16</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line15">line 15</a>
     </li></ul></dd>
     
 
@@ -514,7 +491,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -588,7 +565,7 @@ By default it has the pointerEvents style set to none. In order to use any DOM e
     
     <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#line34">line 34</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line35">line 35</a>
     </li></ul></dd>
     
 
@@ -1362,7 +1339,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1429,7 +1406,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1496,7 +1473,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1563,7 +1540,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1630,7 +1607,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1697,7 +1674,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1766,7 +1743,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1833,7 +1810,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1900,7 +1877,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -1971,7 +1948,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2143,13 +2120,15 @@ This method is called for every object before rendering.
 
         
             
-<h4 class="name" id="parentDOM"><span class="type-signature"></span>parentDOM<span class="type-signature"> :Element</span></h4>
+<h4 class="name" id="parentElement"><span class="type-signature"></span>parentElement<span class="type-signature"> :Element</span></h4>
 
 
 
 
 <div class="description">
-    Parent element that contains this DOM div.
+    Parent element that contains this DOM object.
+
+The DOM parent element if not set manually is automatically set to the parent of the drawing canvas.
 </div>
 
 
@@ -2197,7 +2176,7 @@ This method is called for every object before rendering.
     
     <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#line25">line 25</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line26">line 26</a>
     </li></ul></dd>
     
 
@@ -2808,7 +2787,7 @@ The world scale of the object is affected by the parent transform.
     
     <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#line46">line 46</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line47">line 47</a>
     </li></ul></dd>
     
 
@@ -2879,7 +2858,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3169,7 +3229,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3262,7 +3322,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3404,7 +3464,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3591,7 +3651,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3759,7 +3819,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -3946,7 +4006,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4061,7 +4121,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line54">line 54</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line58">line 58</a>
     </li></ul></dd>
     
 
@@ -4278,7 +4338,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
     </li></ul></dd>
     
 
@@ -4322,7 +4382,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 <div class="description">
-    DOM object implements onAdd() method to automatically remove the DOM object to the DOM tree.
+    DOM object implements onRemove() method to automatically remove the DOM object to the DOM tree.
 </div>
 
 
@@ -4371,7 +4431,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line62">line 62</a>
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line69">line 69</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4513,7 +4742,153 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
     </li></ul></dd>
     
 
@@ -4538,6 +4913,28 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -4549,7 +4946,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4638,6 +5035,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4680,7 +5100,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4822,7 +5242,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4964,7 +5384,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5010,13 +5430,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

@@ -686,13 +686,13 @@ Format [target, event, callback, active]
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.js.html

@@ -103,13 +103,13 @@ export {EventManager};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/FileUtils.html

@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Class: FileUtils</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Class: FileUtils</h1>
+
+    
+
+
+
+
+<section>
+
+<header>
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>FileUtils<span class="signature">()</span><span class="type-signature"></span></h2>
+        
+    
+</header>
+
+<article>
+    <div class="container-overview">
+    
+        
+
+    
+
+    
+    <h4 class="name" id="FileUtils"><span class="type-signature"></span>new FileUtils<span class="signature">()</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    File utils is used to read and write files.

Can be used alongside with object serialization to store and load objects from file.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="utils_FileUtils.js.html">utils/FileUtils.js</a>, <a href="utils_FileUtils.js.html#line9">line 9</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    
+    </div>
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <h3 class="subsection-title">Methods</h3>
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id=".read"><span class="type-signature">(static) </span>read<span class="signature">(fname, onLoad, onError)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Read a local or remote file as text data.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>fname</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Path or URL of the file being read.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>onLoad</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">function</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">onLoad callback receives the read data as parameter.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>onError</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">function</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">onError call is called when a error occurs while reading the file.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="utils_FileUtils.js.html">utils/FileUtils.js</a>, <a href="utils_FileUtils.js.html#line18">line 18</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id=".select"><span class="type-signature">(static) </span>select<span class="signature">(onLoad, filter)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Open file chooser dialog window for the user to select files stored in the system.

The files selected are retrieved using the onLoad callback that receives a array of File objects.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>onLoad</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">function</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">onLoad callback that receives array of files as parameter.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>filter</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">File type filter (e.g. ".zip,.rar, etc)</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="utils_FileUtils.js.html">utils/FileUtils.js</a>, <a href="utils_FileUtils.js.html#line69">line 69</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+    
+
+    
+
+    
+</article>
+
+</section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/Graph.html

@@ -566,7 +566,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1588,7 +1588,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1655,7 +1655,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1722,7 +1722,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1789,7 +1789,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1856,7 +1856,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1990,7 +1990,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -2059,7 +2059,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2126,7 +2126,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2193,7 +2193,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2260,7 +2260,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2331,7 +2331,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -3167,7 +3167,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3457,7 +3538,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3550,7 +3631,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3692,7 +3773,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3879,7 +3960,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -4047,7 +4128,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4234,7 +4315,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4473,7 +4554,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4615,7 +4865,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4651,7 +4901,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4740,6 +5158,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4782,7 +5223,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4924,7 +5365,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -5066,7 +5507,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5112,13 +5553,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Helpers.html

@@ -341,13 +341,13 @@ When the object is dragged is changes the parent object rotation.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Image.html

@@ -549,7 +549,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1385,7 +1385,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1452,7 +1452,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1519,7 +1519,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1586,7 +1586,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1653,7 +1653,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1720,7 +1720,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1787,7 +1787,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1856,7 +1856,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1990,7 +1990,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2057,7 +2057,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2128,7 +2128,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2902,7 +2902,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3192,7 +3273,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3285,7 +3366,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3427,7 +3508,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3614,7 +3695,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3782,7 +3863,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -3969,7 +4050,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4208,7 +4289,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4350,7 +4600,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4380,6 +4630,174 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 
+        
+            
+
+    
+
+    
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
         
             
 
@@ -4489,7 +4907,7 @@ Automatically sets the box size to match the image.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Image.js.html">objects/Image.js</a>, <a href="objects_Image.js.html#line40">line 40</a>
+        <a href="objects_Image.js.html">objects/Image.js</a>, <a href="objects_Image.js.html#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -4525,7 +4943,7 @@ Automatically sets the box size to match the image.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4614,6 +5032,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4656,7 +5097,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4798,7 +5239,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4940,7 +5381,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4986,13 +5427,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Key.html

@@ -613,13 +613,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -310,7 +310,7 @@ For drawing lines with interpolation check {BezierCurve}
 
         
             
-<h4 class="name" id="dashPattern"><span class="type-signature"></span>dashPattern<span class="type-signature"></span></h4>
+<h4 class="name" id="dashPattern"><span class="type-signature"></span>dashPattern<span class="type-signature"> :Array.&lt;number></span></h4>
 
 
 
@@ -325,6 +325,16 @@ E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repea
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Array.&lt;number></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -358,7 +368,7 @@ E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repea
     
     <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#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -506,7 +516,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -524,7 +534,7 @@ Should be implemented by underlying classes.
 
         
             
-<h4 class="name" id="from"><span class="type-signature"></span>from<span class="type-signature"></span></h4>
+<h4 class="name" id="from"><span class="type-signature"></span>from<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>
 
 
 
@@ -537,6 +547,16 @@ Can be equal to the position object of another object. Making it automatically f
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -570,7 +590,7 @@ Can be equal to the position object of another object. Making it automatically f
     
     <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#line21">line 21</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line23">line 23</a>
     </li></ul></dd>
     
 
@@ -981,7 +1001,7 @@ The layer value is considered first.
 
         
             
-<h4 class="name" id="lineWidth"><span class="type-signature"></span>lineWidth<span class="type-signature"></span></h4>
+<h4 class="name" id="lineWidth"><span class="type-signature"></span>lineWidth<span class="type-signature"> :number</span></h4>
 
 
 
@@ -992,6 +1012,16 @@ The layer value is considered first.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -1025,7 +1055,7 @@ The layer value is considered first.
     
     <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#line47">line 47</a>
+        <a href="objects_Line.js.html">objects/Line.js</a>, <a href="objects_Line.js.html#line57">line 57</a>
     </li></ul></dd>
     
 
@@ -1406,7 +1436,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1473,7 +1503,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1540,7 +1570,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1607,7 +1637,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1674,7 +1704,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1741,7 +1771,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1808,7 +1838,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1877,7 +1907,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1944,7 +1974,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2011,7 +2041,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2078,7 +2108,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2149,7 +2179,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2870,7 +2900,7 @@ The world scale of the object is affected by the parent transform.
 
         
             
-<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"></span></h4>
+<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"> :string</span></h4>
 
 
 
@@ -2881,6 +2911,16 @@ The world scale of the object is affected by the parent transform.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -2914,7 +2954,7 @@ The world scale of the object is affected by the parent transform.
     
     <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#line50">line 50</a>
     </li></ul></dd>
     
 
@@ -2985,7 +3025,7 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
     </li></ul></dd>
     
 
@@ -3003,7 +3043,7 @@ Should be implemented by underlying classes.
 
         
             
-<h4 class="name" id="to"><span class="type-signature"></span>to<span class="type-signature"></span></h4>
+<h4 class="name" id="to"><span class="type-signature"></span>to<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>
 
 
 
@@ -3016,6 +3056,92 @@ Can be equal to the position object of another object. Making it automatically f
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -3029,6 +3155,11 @@ Can be equal to the position object of another object. Making it automatically f
     
 
     
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
 
     
 
@@ -3049,7 +3180,7 @@ Can be equal to the position object of another object. Making it automatically f
     
     <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#line28">line 28</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line215">line 215</a>
     </li></ul></dd>
     
 
@@ -3339,7 +3470,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3432,7 +3563,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3574,7 +3705,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3761,7 +3892,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3929,7 +4060,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4116,7 +4247,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4355,7 +4486,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4497,7 +4797,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4533,7 +4833,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4622,6 +5090,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4664,7 +5155,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4806,7 +5297,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4948,7 +5439,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4994,13 +5485,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Mask.html

@@ -444,7 +444,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1218,7 +1218,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1285,7 +1285,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1352,7 +1352,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1419,7 +1419,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1486,7 +1486,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1553,7 +1553,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1620,7 +1620,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1689,7 +1689,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1756,7 +1756,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1823,7 +1823,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -1890,7 +1890,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -1961,7 +1961,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2735,7 +2735,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3025,7 +3106,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3069,7 +3150,11 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+    Clip the canvas context. Define a clipping path and set the clip using the context.clip() method.
+
+Ensures that next objects being drawn are clipped to the path stored here.
+
+More information about canvas clipping https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip.
 </div>
 
 
@@ -3208,7 +3293,7 @@ The object is set as children of this object and the transformations applied to
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line31">line 31</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line37">line 37</a>
     </li></ul></dd>
     
 
@@ -3301,7 +3386,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3443,7 +3528,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3630,7 +3715,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3798,7 +3883,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -3985,7 +4070,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4224,7 +4309,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+    <dt class="inherited-from">Inherited From:</dt>
+    <dd class="inherited-from"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4366,7 +4620,153 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+    <dt class="inherited-from">Inherited From:</dt>
+    <dd class="inherited-from"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
     </li></ul></dd>
     
 
@@ -4391,6 +4791,28 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -4402,7 +4824,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4491,6 +4913,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4533,7 +4978,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4675,7 +5120,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4817,7 +5262,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4863,13 +5308,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

@@ -51,7 +51,7 @@
 <div class="description">
     2D 3x2 transformation matrix, used to represent linear geometric transformations over objects.
 
-The values of the matrix are stored in a numeric array and can be applied to the canvas or DOM elements.
+The values of the matrix are stored as numeric array. The matrix can be applied to the canvas or DOM elements using CSS transforms.
 </div>
 
 
@@ -190,6 +190,84 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
 
     
+        <h3 class="subsection-title">Members</h3>
+
+        
+            
+<h4 class="name" id="m"><span class="type-signature"></span>m<span class="type-signature"> :Array.&lt;number></span></h4>
+
+
+
+
+<div class="description">
+    Array that contains the matrix data by row. This matrix should have 6 values.
+
+Matrix can be directly edited by accessing this attribute.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Array.&lt;number></span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line22">line 22</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+    
 
     
         <h3 class="subsection-title">Methods</h3>
@@ -252,7 +330,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line38">line 38</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line45">line 45</a>
     </li></ul></dd>
     
 
@@ -549,7 +627,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line96">line 96</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line103">line 103</a>
     </li></ul></dd>
     
 
@@ -686,7 +764,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line28">line 28</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line35">line 35</a>
     </li></ul></dd>
     
 
@@ -774,7 +852,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line268">line 268</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line275">line 275</a>
     </li></ul></dd>
     
 
@@ -884,7 +962,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line212">line 212</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line219">line 219</a>
     </li></ul></dd>
     
 
@@ -994,7 +1072,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line222">line 222</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line229">line 229</a>
     </li></ul></dd>
     
 
@@ -1104,7 +1182,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line194">line 194</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line201">line 201</a>
     </li></ul></dd>
     
 
@@ -1214,7 +1292,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line184">line 184</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line191">line 191</a>
     </li></ul></dd>
     
 
@@ -1324,7 +1402,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line46">line 46</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line53">line 53</a>
     </li></ul></dd>
     
 
@@ -1461,7 +1539,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line56">line 56</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line63">line 63</a>
     </li></ul></dd>
     
 
@@ -1598,7 +1676,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line73">line 73</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line80">line 80</a>
     </li></ul></dd>
     
 
@@ -1735,7 +1813,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line137">line 137</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line144">line 144</a>
     </li></ul></dd>
     
 
@@ -1895,7 +1973,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line159">line 159</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line166">line 166</a>
     </li></ul></dd>
     
 
@@ -2032,7 +2110,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line248">line 248</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line255">line 255</a>
     </li></ul></dd>
     
 
@@ -2192,7 +2270,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line173">line 173</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line180">line 180</a>
     </li></ul></dd>
     
 
@@ -2280,7 +2358,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line202">line 202</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line209">line 209</a>
     </li></ul></dd>
     
 
@@ -2417,7 +2495,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line258">line 258</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line265">line 265</a>
     </li></ul></dd>
     
 
@@ -2554,7 +2632,7 @@ The values of the matrix are stored in a numeric array and can be applied to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line235">line 235</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line242">line 242</a>
     </li></ul></dd>
     
 
@@ -2738,7 +2816,7 @@ Adds position over the transformation already stored in the matrix.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line126">line 126</a>
+        <a href="math_Matrix.js.html">math/Matrix.js</a>, <a href="math_Matrix.js.html#line133">line 133</a>
     </li></ul></dd>
     
 
@@ -2784,13 +2862,13 @@ Adds position over the transformation already stored in the matrix.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/MultiLineText.html

@@ -95,7 +95,7 @@ Has support for basic text indent and alignment.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_MultiLineText.js.html">objects/MultiLineText.js</a>, <a href="objects_MultiLineText.js.html#line11">line 11</a>
+        <a href="objects_MultiLineText.js.html">objects/MultiLineText.js</a>, <a href="objects_MultiLineText.js.html#line12">line 12</a>
     </li></ul></dd>
     
 
@@ -440,7 +440,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1061,7 +1061,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_MultiLineText.js.html">objects/MultiLineText.js</a>, <a href="objects_MultiLineText.js.html#line31">line 31</a>
+        <a href="objects_MultiLineText.js.html">objects/MultiLineText.js</a>, <a href="objects_MultiLineText.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -1526,7 +1526,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_MultiLineText.js.html">objects/MultiLineText.js</a>, <a href="objects_MultiLineText.js.html#line22">line 22</a>
+        <a href="objects_MultiLineText.js.html">objects/MultiLineText.js</a>, <a href="objects_MultiLineText.js.html#line23">line 23</a>
     </li></ul></dd>
     
 
@@ -1593,7 +1593,7 @@ Can be set to null to be ignored.
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1660,7 +1660,7 @@ Can be set to null to be ignored.
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1727,7 +1727,7 @@ Can be set to null to be ignored.
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1794,7 +1794,7 @@ Can be set to null to be ignored.
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1861,7 +1861,7 @@ Can be set to null to be ignored.
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1928,7 +1928,7 @@ Can be set to null to be ignored.
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1995,7 +1995,7 @@ Can be set to null to be ignored.
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -2064,7 +2064,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2131,7 +2131,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2198,7 +2198,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2265,7 +2265,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2336,7 +2336,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -3187,7 +3187,7 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
     </li></ul></dd>
     
 
@@ -3440,6 +3440,87 @@ Check documentation at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRe
 
         
             
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Text.html#type">Text#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
 <h4 class="name" id="uuid"><span class="type-signature"></span>uuid<span class="type-signature"> :string</span></h4>
 
 
@@ -3712,7 +3793,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3805,7 +3886,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3947,7 +4028,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -4134,7 +4215,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -4302,7 +4383,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4489,7 +4570,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4728,7 +4809,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Text.html#parse">Text#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4870,7 +5120,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4906,7 +5156,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Text.html#serialize">Text#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4995,6 +5413,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5037,7 +5478,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -5179,7 +5620,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -5321,7 +5762,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5367,13 +5808,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -40,7 +40,7 @@ import {UUID} from "./math/UUID.js";
  * @class
  */
 function Object2D()
-{	
+{
 	/**
 	 * UUID of the object.
 	 *
@@ -229,6 +229,44 @@ function Object2D()
 	this.beingDragged = false;
 }
 
+Object2D.prototype.constructor = Object2D;
+
+/**
+ * Type of the object, used for data serialization and/or checking the object type.
+ *
+ * The name used should match the object constructor name. But it is not required.
+ *
+ * If this type is from an external library you can add the library name to the object type name to prevent collisions.
+ *
+ * @type {string}
+ */
+Object2D.prototype.type = "Object2D";
+
+/**
+ * List of available object types known by the application. Stores the object constructor by object type.
+ *
+ * Newly created types should be introduced in this map for data serialization support.
+ *
+ * New object types should be added using the Object2D.register() method.
+ *
+ * @static
+ * @type {Map<string, Function>}
+ */
+Object2D.types = new Map([[Object2D.prototype.type, Object2D]]);
+
+/**
+ * Register a object type into the application. Associates the type string to the object constructor.
+ *
+ * Should be called for every new object class implemented if you want to be able to serialize and parse data.
+ *
+ * @param {Function} constructor Object constructor.
+ * @param {string} type Object type name.
+ */
+Object2D.register = function(constructor, type)
+{
+	Object2D.types.set(type, constructor);
+};
+
 /**
  * Check if a point in world coordinates intersects this object or its children and get a list of the objects intersected.
  *
@@ -432,8 +470,9 @@ Object2D.prototype.updateMatrix = function(context)
  *
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
+ * @param {Element} canvas DOM canvas element where the content is being drawn.
  */
-Object2D.prototype.transform = function(context, viewport)
+Object2D.prototype.transform = function(context, viewport, canvas)
 {
 	this.globalMatrix.tranformContext(context);
 };
@@ -447,7 +486,7 @@ Object2D.prototype.transform = function(context, viewport)
  *
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport used to view the canvas content.
- * @param {DOM} canvas DOM canvas element where the content is being drawn.
+ * @param {Element} canvas DOM canvas element where the content is being drawn.
  */
 Object2D.prototype.style = null; // function(context, viewport, canvas){};
 
@@ -458,7 +497,7 @@ Object2D.prototype.style = null; // function(context, viewport, canvas){};
  *
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport used to view the canvas content.
- * @param {DOM} canvas DOM canvas element where the content is being drawn.
+ * @param {Element} canvas DOM canvas element where the content is being drawn.
  */
 Object2D.prototype.draw = null; // function(context, viewport, canvas){};
 
@@ -578,6 +617,144 @@ Object2D.prototype.onButtonDown = null;
  */
 Object2D.prototype.onButtonUp = null;
 
+/**
+ * Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+ *
+ * All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+ *
+ * Data has to be parsed back into a usable object.
+ *
+ * @param {boolean} recursive If set false the children list is not serialized, otherwise all children are serialized.
+ * @return {Object} Serialized object data.
+ */
+Object2D.prototype.serialize = function(recursive)
+{
+	var data = {
+		uuid: this.uuid,
+		type: this.type,
+		position: this.position.toArray(),
+		origin: this.origin.toArray(),
+		scale: this.scale.toArray(),
+		rotation: this.rotation,
+		visible: this.visible,
+		layer: this.layer,
+		matrix: this.matrix.m,
+		globalMatrix: this.globalMatrix.m,
+		inverseGlobalMatrix: this.inverseGlobalMatrix.m,
+		matrixAutoUpdate: this.matrixAutoUpdate,
+		draggable: this.draggable,
+		pointerEvents: this.pointerEvents,
+		ignoreViewport: this.ignoreViewport,
+		saveContextState: this.saveContextState,
+		restoreContextState: this.restoreContextState,
+		pointerInside: this.pointerInside,
+		beingDragged: this.beingDragged,
+		children: [],
+		masks: []
+	};
+
+	if(recursive !== false)
+	{
+		for(var i = 0; i < this.children.length; i++)
+		{
+			data.children.push(this.children[i].serialize());
+		}
+	}
+
+	for(var i = 0; i < this.masks.length; i++)
+	{
+		data.masks.push(this.masks[i].uuid);
+	}
+
+	return data;
+};
+
+/**
+ * Parse serialized object data and fill the object attributes.
+ *
+ * Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+ *
+ * Dont forget to register object types using the Object2D.register() method.
+ *
+ * @param {Object} data Object data loaded from JSON.
+ * @param {Object2D} root Root object being loaded can be used to get references to other objects.
+ */
+Object2D.prototype.parse = function(data, root)
+{
+	this.uuid = data.uuid;
+	this.position.fromArray(data.position);
+	this.origin.fromArray(data.origin);
+	this.scale.fromArray(data.scale);
+	this.rotation = data.rotation;
+	this.visible = data.visible;
+	this.layer = data.layer;
+	this.matrix = new Matrix(data.matrix);
+	this.globalMatrix = new Matrix(data.globalMatrix);
+	this.inverseGlobalMatrix = new Matrix(data.inverseGlobalMatrix);
+	this.matrixAutoUpdate = data.matrixAutoUpdate;
+	this.draggable = data.draggable;
+	this.pointerEvents = data.pointerEvents;
+	this.ignoreViewport = data.ignoreViewport;
+	this.saveContextState = data.saveContextState;
+	this.restoreContextState = data.restoreContextState;
+	this.pointerInside = data.pointerInside;
+	this.beingDragged = data.beingDragged;
+
+	for(var i = 0; i < this.masks.length; i++)
+	{
+		data.masks.push(root.getChildByUUID(data.masks[i]));
+	}
+};
+
+/**
+ * Create objects from serialized object data into the proper data structures.
+ *
+ * All objects should implement serialization methods to serialize and load data properly.
+ *
+ * First all objects instances are created to ensure that object trying to get references to other object can have the data accessible, only then the parse method is called.
+ *
+ * @static
+ * @param {Object} data Object data loaded from JSON.
+ * @return {Object2D} Parsed object data.
+ */
+Object2D.parse = function(data)
+{
+	// List of objects created stored as pairs of object, data to be later parsed.
+	var objects = [];
+
+	// Parse all objects from the data object recursively and create the correct instances.
+	function createObjectInstances(data)
+	{
+		if(!Object2D.types.has(data.type))
+		{
+			throw new Error("Object type " + data.type + " unknown. Cannot parse data.");
+		}
+
+		var Constructor = Object2D.types.get(data.type);
+		var object = new Constructor();
+		object.uuid = data.uuid;
+
+		objects.push({object: object, data: data});
+
+		for(var i = 0; i < data.children.length; i++)
+		{
+			object.add(createObjectInstances(data.children[i]));
+		}
+
+		return object;
+	}
+
+	var root = createObjectInstances(data);
+
+	// Parse objects data
+	for(var i = 0; i < objects.length; i++)
+	{
+		objects[i].object.parse(objects[i].data, root);
+	}
+
+	return root;
+};
+
 export {Object2D};
 </code></pre>
         </article>
@@ -589,13 +766,13 @@ export {Object2D};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

@@ -282,7 +282,7 @@ Its similar to the Image class but the image can be repeat infinitely.
 
         
             
-<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"> :<a href="Box2.html">Box2</a></span></h4>
 
 
 
@@ -293,6 +293,16 @@ Its similar to the Image class but the image can be repeat infinitely.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Box2.html">Box2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -326,7 +336,7 @@ Its similar to the Image class but the image can be repeat infinitely.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line20">line 20</a>
+        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line22">line 22</a>
     </li></ul></dd>
     
 
@@ -551,7 +561,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -725,17 +735,29 @@ Used to transform the object before projecting into screen coordinates.
 
         
             
-<h4 class="name" id="image"><span class="type-signature"></span>image<span class="type-signature"></span></h4>
+<h4 class="name" id="image"><span class="type-signature"></span>image<span class="type-signature"> :Element</span></h4>
 
 
 
 
 <div class="description">
-    Image source DOM element.
+    Image source DOM element. Used as a source for the pattern image.
+
+This element can be replaced by one of other type (e.g canvas, video).
 </div>
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Element</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -769,7 +791,7 @@ Used to transform the object before projecting into screen coordinates.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line25">line 25</a>
+        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line31">line 31</a>
     </li></ul></dd>
     
 
@@ -1387,7 +1409,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1454,7 +1476,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1521,7 +1543,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1588,7 +1610,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1655,7 +1677,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1722,7 +1744,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1789,7 +1811,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1858,7 +1880,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1925,7 +1947,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1992,7 +2014,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2059,7 +2081,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2130,7 +2152,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2539,17 +2561,31 @@ The world position of the object is affected by its parent transform.
 
         
             
-<h4 class="name" id="repetition"><span class="type-signature"></span>repetition<span class="type-signature"></span></h4>
+<h4 class="name" id="repetition"><span class="type-signature"></span>repetition<span class="type-signature"> :string</span></h4>
 
 
 
 
 <div class="description">
-    A DOMString indicating how to repeat the pattern image.
+    Repetition indicates how the pattern image should be repeated.
+
+Possible values are "repeat", "repeat-x", "repeat-y" or "no-repeat".
+
+More information about this attribute here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern.
 </div>
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -2583,7 +2619,7 @@ The world position of the object is affected by its parent transform.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line30">line 30</a>
+        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line42">line 42</a>
     </li></ul></dd>
     
 
@@ -2966,7 +3002,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3256,7 +3373,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3349,7 +3466,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3491,7 +3608,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3678,7 +3795,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3846,7 +3963,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4033,7 +4150,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4272,7 +4389,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4414,7 +4700,153 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
     </li></ul></dd>
     
 
@@ -4439,6 +4871,28 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -4450,7 +4904,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="setImage"><span class="type-signature"></span>setImage<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="setImage"><span class="type-signature"></span>setImage<span class="signature">(src)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4458,7 +4912,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
 
 
 <div class="description">
-    Set the image of the object.
+    Set the image source of the object. Can be anything accepted by the src field of an img element.
 
 Automatically sets the box size to match the image.
 </div>
@@ -4471,6 +4925,55 @@ Automatically sets the box size to match the image.
 
 
 
+    <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>src</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Image source string.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -4504,7 +5007,7 @@ Automatically sets the box size to match the image.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line45">line 45</a>
+        <a href="objects_Pattern.js.html">objects/Pattern.js</a>, <a href="objects_Pattern.js.html#line62">line 62</a>
     </li></ul></dd>
     
 
@@ -4540,7 +5043,7 @@ Automatically sets the box size to match the image.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4629,6 +5132,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4671,7 +5197,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4813,7 +5339,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4955,7 +5481,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5001,13 +5527,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

@@ -2564,13 +2564,13 @@ Automatically called by the runtime.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/QuadraticCurve.html

@@ -512,7 +512,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1286,7 +1286,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1353,7 +1353,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1420,7 +1420,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1487,7 +1487,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1554,7 +1554,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1621,7 +1621,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1688,7 +1688,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1757,7 +1757,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1824,7 +1824,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -1891,7 +1891,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -1958,7 +1958,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2029,7 +2029,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2803,7 +2803,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3088,7 +3169,7 @@ Helper objects are added to the parent of the curve object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_QuadraticCurve.js.html">objects/QuadraticCurve.js</a>, <a href="objects_QuadraticCurve.js.html#line36">line 36</a>
+        <a href="objects_QuadraticCurve.js.html">objects/QuadraticCurve.js</a>, <a href="objects_QuadraticCurve.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -3232,7 +3313,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3325,7 +3406,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3467,7 +3548,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3654,7 +3735,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -3822,7 +3903,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4009,7 +4090,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4248,7 +4329,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4390,7 +4640,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4426,7 +4676,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4515,6 +4933,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4557,7 +4998,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4699,7 +5140,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -4841,7 +5282,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4887,13 +5328,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -836,13 +836,13 @@ Should be called at a fixed rate preferably using the requestAnimationFrame() me
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -356,13 +356,13 @@ export {Renderer};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/RoundedBox.html

@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_RoundedBox.js.html">objects/RoundedBox.js</a>, <a href="objects_RoundedBox.js.html#line9">line 9</a>
+        <a href="objects_RoundedBox.js.html">objects/RoundedBox.js</a>, <a href="objects_RoundedBox.js.html#line10">line 10</a>
     </li></ul></dd>
     
 
@@ -505,7 +505,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1415,7 +1415,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1482,7 +1482,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1549,7 +1549,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1616,7 +1616,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1683,7 +1683,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1750,7 +1750,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1817,7 +1817,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1886,7 +1886,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1953,7 +1953,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2020,7 +2020,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2087,7 +2087,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2158,7 +2158,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -2621,7 +2621,7 @@ The world position of the object is affected by its parent transform.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_RoundedBox.js.html">objects/RoundedBox.js</a>, <a href="objects_RoundedBox.js.html#line18">line 18</a>
+        <a href="objects_RoundedBox.js.html">objects/RoundedBox.js</a>, <a href="objects_RoundedBox.js.html#line19">line 19</a>
     </li></ul></dd>
     
 
@@ -3073,7 +3073,88 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Box.html#type">Box#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
     </li></ul></dd>
     
 
@@ -3471,7 +3552,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_RoundedBox.js.html">objects/RoundedBox.js</a>, <a href="objects_RoundedBox.js.html#line33">line 33</a>
+        <a href="objects_RoundedBox.js.html">objects/RoundedBox.js</a>, <a href="objects_RoundedBox.js.html#line37">line 37</a>
     </li></ul></dd>
     
 
@@ -3615,7 +3696,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3708,7 +3789,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3850,7 +3931,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -4037,7 +4118,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -4205,7 +4286,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4392,7 +4473,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4631,7 +4712,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Box.html#parse">Box#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4773,7 +5023,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4809,7 +5059,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Box.html#serialize">Box#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4898,6 +5316,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4940,7 +5381,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -5082,7 +5523,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -5224,7 +5665,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5270,13 +5711,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

@@ -440,7 +440,7 @@ Should be implemented by underlying classes.
     
     <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#line435">line 435</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line474">line 474</a>
     </li></ul></dd>
     
 
@@ -1430,7 +1430,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line477">line 477</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line516">line 516</a>
     </li></ul></dd>
     
 
@@ -1497,7 +1497,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line543">line 543</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line582">line 582</a>
     </li></ul></dd>
     
 
@@ -1564,7 +1564,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line527">line 527</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line566">line 566</a>
     </li></ul></dd>
     
 
@@ -1631,7 +1631,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line590">line 590</a>
     </li></ul></dd>
     
 
@@ -1698,7 +1698,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line535">line 535</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line574">line 574</a>
     </li></ul></dd>
     
 
@@ -1765,7 +1765,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line470">line 470</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line509">line 509</a>
     </li></ul></dd>
     
 
@@ -1832,7 +1832,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <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#line462">line 462</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line501">line 501</a>
     </li></ul></dd>
     
 
@@ -1901,7 +1901,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line503">line 503</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -1968,7 +1968,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line511">line 511</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line550">line 550</a>
     </li></ul></dd>
     
 
@@ -2035,7 +2035,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line519">line 519</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line558">line 558</a>
     </li></ul></dd>
     
 
@@ -2102,7 +2102,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <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#line484">line 484</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -2173,7 +2173,7 @@ This method is called for every object before rendering.
     
     <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#line493">line 493</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
     </li></ul></dd>
     
 
@@ -3019,7 +3019,7 @@ Should be implemented by underlying classes.
     
     <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#line424">line 424</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line463">line 463</a>
     </li></ul></dd>
     
 
@@ -3257,6 +3257,87 @@ Check documentation at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRe
 
         
             
+<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
+
+
+
+
+<div class="description">
+    Type of the object, used for data serialization and/or checking the object type.
+
+The name used should match the object constructor name. But it is not required.
+
+If this type is from an external library you can add the library name to the object type name to prevent collisions.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">string</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#type">Object2D#type</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
 <h4 class="name" id="uuid"><span class="type-signature"></span>uuid<span class="type-signature"> :string</span></h4>
 
 
@@ -3529,7 +3610,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line320">line 320</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line358">line 358</a>
     </li></ul></dd>
     
 
@@ -3622,7 +3703,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -3764,7 +3845,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line298">line 298</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line336">line 336</a>
     </li></ul></dd>
     
 
@@ -3951,7 +4032,7 @@ The object is set as children of this object and the transformations applied to
     
     <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#line211">line 211</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line249">line 249</a>
     </li></ul></dd>
     
 
@@ -4119,7 +4200,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line373">line 373</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line411">line 411</a>
     </li></ul></dd>
     
 
@@ -4306,7 +4387,7 @@ To check if a point in world coordinates intersects the object the inverseGlobal
     
     <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#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -4545,7 +4626,176 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line451">line 451</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line490">line 490</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(data, root)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Parse serialized object data and fill the object attributes.
+
+Implementations of this method should only load the attributes added to the structure, the based method already loads common attributes.
+
+Dont forget to register object types using the Object2D.register() method.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object data loaded from JSON.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>root</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Root object being loaded can be used to get references to other objects.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#parse">Object2D#parse</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line654">line 654</a>
     </li></ul></dd>
     
 
@@ -4687,7 +4937,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <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#line341">line 341</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line379">line 379</a>
     </li></ul></dd>
     
 
@@ -4723,7 +4973,175 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="serialize"><span class="type-signature"></span>serialize<span class="signature">(recursive)</span><span class="type-signature"> &rarr; {Object}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Serialize the object data into a JSON object. That can be written into a file, sent using HTTP request etc.
+
+All required attributes to recreate the object in its current state should be stored. Relations between children should be stored by their UUID only.
+
+Data has to be parsed back into a usable object.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>recursive</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">If set false the children list is not serialized, otherwise all children are serialized.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Object2D.html#serialize">Object2D#serialize</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <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#line602">line 602</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Serialized object data.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Object</span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4812,6 +5230,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -4854,7 +5295,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line408">line 408</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line447">line 447</a>
     </li></ul></dd>
     
 
@@ -4996,7 +5437,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line282">line 282</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line320">line 320</a>
     </li></ul></dd>
     
 
@@ -5138,7 +5579,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <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#line383">line 383</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -5184,13 +5625,13 @@ This is called before style() and draw(). It can also be used for some pre-rende
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

@@ -221,13 +221,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Vector2.html

@@ -2211,7 +2211,7 @@ Faster for comparisons.
     
 
     
-    <h4 class="name" id="fromArray"><span class="type-signature"></span>fromArray<span class="signature">(array, offset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="fromArray"><span class="type-signature"></span>fromArray<span class="signature">(array)</span><span class="type-signature"></span></h4>
     
 
     
@@ -2219,7 +2219,9 @@ Faster for comparisons.
 
 
 <div class="description">
-    Set vector value from array with a offset.
+    Set vector value from array [x, y].
+
+The vector can be converted to array using the toArray() method.
 </div>
 
 
@@ -2243,8 +2245,6 @@ Faster for comparisons.
         <th>Type</th>
 
         
-        <th>Attributes</th>
-        
 
         
 
@@ -2263,54 +2263,13 @@ Faster for comparisons.
             <td class="type">
             
                 
-<span class="param-type">array</span>
+<span class="param-type">Array.&lt;number></span>
 
 
             
             </td>
 
             
-                <td class="attributes">
-                
-
-                
-
-                
-                </td>
-            
-
-            
-
-            <td class="description last"></td>
-        </tr>
-
-    
-
-        <tr>
-            
-                <td class="name"><code>offset</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">number</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
 
             
 
@@ -2355,7 +2314,7 @@ Faster for comparisons.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Vector2.js.html">math/Vector2.js</a>, <a href="math_Vector2.js.html#line397">line 397</a>
+        <a href="math_Vector2.js.html">math/Vector2.js</a>, <a href="math_Vector2.js.html#line398">line 398</a>
     </li></ul></dd>
     
 
@@ -3597,7 +3556,7 @@ X is set as the min between this vector and the other vector.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Vector2.js.html">math/Vector2.js</a>, <a href="math_Vector2.js.html#line428">line 428</a>
+        <a href="math_Vector2.js.html">math/Vector2.js</a>, <a href="math_Vector2.js.html#line421">line 421</a>
     </li></ul></dd>
     
 
@@ -4491,7 +4450,7 @@ X is set as the min between this vector and the other vector.
     
 
     
-    <h4 class="name" id="toArray"><span class="type-signature"></span>toArray<span class="signature">(array, offset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="toArray"><span class="type-signature"></span>toArray<span class="signature">()</span><span class="type-signature"> &rarr; {Array.&lt;number>}</span></h4>
     
 
     
@@ -4499,107 +4458,17 @@ X is set as the min between this vector and the other vector.
 
 
 <div class="description">
-    Convert this vector to an array.
-</div>
-
-
-
-
-
-
-
-
-
-    <h5>Parameters:</h5>
-    
-
-<table class="params">
-    <thead>
-    <tr>
-        
-        <th>Name</th>
-        
-
-        <th>Type</th>
-
-        
-        <th>Attributes</th>
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-                <td class="name"><code>array</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">array</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-
-                
-
-                
-                </td>
-            
-
-            
-
-            <td class="description last"></td>
-        </tr>
-
-    
-
-        <tr>
-            
-                <td class="name"><code>offset</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">number</span>
+    Convert this vector to an array. Useful for serialization and storage.
 
+Values stored as [x, y].
+</div>
 
-            
-            </td>
 
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
 
-                
 
-                
-                </td>
-            
 
-            
 
-            <td class="description last"></td>
-        </tr>
 
-    
-    </tbody>
-</table>
 
 
 
@@ -4635,7 +4504,7 @@ X is set as the min between this vector and the other vector.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_Vector2.js.html">math/Vector2.js</a>, <a href="math_Vector2.js.html#line411">line 411</a>
+        <a href="math_Vector2.js.html">math/Vector2.js</a>, <a href="math_Vector2.js.html#line410">line 410</a>
     </li></ul></dd>
     
 
@@ -4660,6 +4529,28 @@ X is set as the min between this vector and the other vector.
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    Array containing the values of the vector.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Array.&lt;number></span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -4681,13 +4572,13 @@ X is set as the min between this vector and the other vector.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.html

@@ -1090,13 +1090,13 @@ Also updates the inverse matrix of the viewport.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -153,13 +153,13 @@ export {Viewport};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/ViewportControls.html

@@ -795,13 +795,13 @@ Should be called every frame before rendering.
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/controls_ViewportControls.js.html

@@ -162,13 +162,13 @@ export {ViewportControls};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/global.html

@@ -94,606 +94,106 @@
     
 
     
-        <h3 class="subsection-title">Members</h3>
-
-        
-            
-<h4 class="name" id="connector"><span class="type-signature"></span>connector<span class="type-signature"> :<a href="NodeConnector.html">NodeConnector</a></span></h4>
-
-
-
-
-<div class="description">
-    Node connector used to connect this socket to another node socket.

Can be used to access the adjacent node.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type"><a href="NodeConnector.html">NodeConnector</a></span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeSocket.js.html">objects/node/NodeSocket.js</a>, <a href="objects_node_NodeSocket.js.html#line66">line 66</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
-            
-<h4 class="name" id="direction"><span class="type-signature"></span>direction<span class="type-signature"> :number</span></h4>
-
-
-
-
-<div class="description">
-    Direction of the node hook, indicates the data flow of the socket.

Can be INPUT or OUTPUT.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type">number</span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeSocket.js.html">objects/node/NodeSocket.js</a>, <a href="objects_node_NodeSocket.js.html#line48">line 48</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
-            
-<h4 class="name" id="inputs"><span class="type-signature"></span>inputs<span class="type-signature"> :Array.&lt;<a href="NodeSocket.html">NodeSocket</a>></span></h4>
-
-
-
-
-<div class="description">
-    List of inputs of the node.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type">Array.&lt;<a href="NodeSocket.html">NodeSocket</a>></span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_Node.js.html">objects/node/Node.js</a>, <a href="objects_node_Node.js.html#line24">line 24</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
-            
-<h4 class="name" id="inputSocket"><span class="type-signature"></span>inputSocket<span class="type-signature"> :<a href="NodeSocket.html">NodeSocket</a></span></h4>
-
-
-
-
-<div class="description">
-    Destination input socket that is attached to a node.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type"><a href="NodeSocket.html">NodeSocket</a></span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeConnector.js.html">objects/node/NodeConnector.js</a>, <a href="objects_node_NodeConnector.js.html#line30">line 30</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
-            
-<h4 class="name" id="name"><span class="type-signature"></span>name<span class="type-signature"> :string</span></h4>
-
-
-
-
-<div class="description">
-    Name of the socket presented to the user.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type">string</span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeSocket.js.html">objects/node/NodeSocket.js</a>, <a href="objects_node_NodeSocket.js.html#line30">line 30</a>
-    </li></ul></dd>
-    
-
-    
-
-    
 
     
-</dl>
-
-
-
-
-
+        <h3 class="subsection-title">Methods</h3>
 
         
             
-<h4 class="name" id="node"><span class="type-signature"></span>node<span class="type-signature"> :<a href="Node.html">Node</a></span></h4>
-
-
-
-
-<div class="description">
-    Node where this socket is attached to.

Should be used to get data from node GUI and from other sockets.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type"><a href="Node.html">Node</a></span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeSocket.js.html">objects/node/NodeSocket.js</a>, <a href="objects_node_NodeSocket.js.html#line57">line 57</a>
-    </li></ul></dd>
     
 
     
-
+    <h4 class="name" id="writeFile"><span class="type-signature"></span>writeFile<span class="signature">(fname, data)</span><span class="type-signature"></span></h4>
     
 
     
-</dl>
-
-
-
-
-
-
-        
-            
-<h4 class="name" id="outputs"><span class="type-signature"></span>outputs<span class="type-signature"> :Array.&lt;<a href="NodeSocket.html">NodeSocket</a>></span></h4>
-
 
 
 
 <div class="description">
-    List of outputs of the node.
+    Write text to a file and automatically download it from blob storage.
 </div>
 
 
 
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type">Array.&lt;<a href="NodeSocket.html">NodeSocket</a>></span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
+    <h5>Parameters:</h5>
     
 
-    
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
 
-    
+        <th>Type</th>
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_Node.js.html">objects/node/Node.js</a>, <a href="objects_node_Node.js.html#line31">line 31</a>
-    </li></ul></dd>
-    
+        
 
-    
+        
 
-    
+        <th class="last">Description</th>
+    </tr>
+    </thead>
 
+    <tbody>
     
-</dl>
-
-
 
-
-
-
-        
+        <tr>
             
-<h4 class="name" id="outputSocket"><span class="type-signature"></span>outputSocket<span class="type-signature"> :<a href="NodeSocket.html">NodeSocket</a></span></h4>
-
-
-
-
-<div class="description">
-    Origin output socket that is attached to a node.
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
+                <td class="name"><code>fname</code></td>
             
-<span class="param-type"><a href="NodeSocket.html">NodeSocket</a></span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
 
-    
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
 
-    
 
-    
+            
+            </td>
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeConnector.js.html">objects/node/NodeConnector.js</a>, <a href="objects_node_NodeConnector.js.html#line23">line 23</a>
-    </li></ul></dd>
-    
+            
 
-    
+            
 
-    
+            <td class="description last">Path of the file to write.</td>
+        </tr>
 
     
-</dl>
-
-
-
-
-
 
-        
+        <tr>
+            
+                <td class="name"><code>data</code></td>
             
-<h4 class="name" id="text"><span class="type-signature"></span>text<span class="type-signature"> :<a href="Text.html">Text</a></span></h4>
-
-
 
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
 
-<div class="description">
-    Text object used to present the name of the socket.

Depending on the socket direction the text is aligned to the left or to the right.
-</div>
 
+            
+            </td>
 
+            
 
-    <h5>Type:</h5>
-    <ul>
-        <li>
             
-<span class="param-type"><a href="Text.html">Text</a></span>
 
+            <td class="description last">Text data to be written to the file.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
 
-        </li>
-    </ul>
 
 
 
@@ -728,7 +228,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeSocket.js.html">objects/node/NodeSocket.js</a>, <a href="objects_node_NodeSocket.js.html#line75">line 75</a>
+        <a href="utils_FileUtils.js.html">utils/FileUtils.js</a>, <a href="utils_FileUtils.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -744,72 +244,14 @@
 
 
 
-        
-            
-<h4 class="name" id="type"><span class="type-signature"></span>type<span class="type-signature"> :string</span></h4>
-
-
-
-
-<div class="description">
-    Type of data available from this socket. Only sockets of the same type can be connected.

Should directly store the data type name (e.g. "string", "number", "Object", etc).
-</div>
-
-
-
-    <h5>Type:</h5>
-    <ul>
-        <li>
-            
-<span class="param-type">string</span>
-
-
-        </li>
-    </ul>
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
 
-    
 
-    
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_node_NodeSocket.js.html">objects/node/NodeSocket.js</a>, <a href="objects_node_NodeSocket.js.html#line39">line 39</a>
-    </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
 
 
 
@@ -822,8 +264,6 @@
     
 
     
-
-    
 </article>
 
 </section>
@@ -834,13 +274,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/index.html

@@ -50,13 +50,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Key.js.html

@@ -117,13 +117,13 @@ export {Key};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Pointer.js.html

@@ -440,13 +440,13 @@ export {Pointer};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -297,6 +297,27 @@ Box2.prototype.equals = function(box)
 	return box.min.equals(this.min) && box.max.equals(this.max);
 };
 
+/**
+ * Store the box data into a numeric array.
+ *
+ * @return {number[]} Numeric array with box data min and max.
+ */
+Box2.prototype.toArray = function()
+{
+	return [this.box.min.x, this.box.min.y, this.box.max.x, this.box.max.y];
+};
+
+/**
+ * Set box data min and max from numeric array.
+ *
+ * @param {number[]} array Numeric array with box data min and max.
+ */
+Box2.prototype.fromArray = function(array)
+{
+	this.box.min.set(array[0], array[1]);
+	this.box.max.set(array[2], array[3]);
+};
+
 export {Box2};
 </code></pre>
         </article>
@@ -308,13 +329,13 @@ export {Box2};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -31,7 +31,7 @@
 /**
  * 2D 3x2 transformation matrix, used to represent linear geometric transformations over objects.
  *
- * The values of the matrix are stored in a numeric array and can be applied to the canvas or DOM elements.
+ * The values of the matrix are stored as numeric array. The matrix can be applied to the canvas or DOM elements using CSS transforms.
  *
  * @class
  * @param {number[]} values Array of matrix values by row, needs to have exactly 6 values.
@@ -40,6 +40,13 @@ function Matrix(values)
 {
 	if(values !== undefined)
 	{
+		/**
+		 * Array that contains the matrix data by row. This matrix should have 6 values.
+		 *
+		 * Matrix can be directly edited by accessing this attribute.
+		 *
+		 * @type {number[]}
+		 */
 		this.m = values;
 	}
 	else
@@ -309,13 +316,13 @@ export {Matrix};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_UUID.js.html

@@ -74,13 +74,13 @@ export {UUID};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -417,34 +417,27 @@ Vector2.prototype.equals = function(v)
 };
 
 /**
- * Set vector value from array with a offset.
+ * Set vector value from array [x, y].
  *
- * @param {array} array
- * @param {number} [offset]
+ * The vector can be converted to array using the toArray() method.
+ *
+ * @param {number[]} array
  */
-Vector2.prototype.fromArray = function(array, offset)
+Vector2.prototype.fromArray = function(array)
 {
-	if(offset === undefined) offset = 0;
-
-	this.x = array[offset];
-	this.y = array[offset + 1];
+	this.set(array[0], array[1]);
 };
 
 /**
- * Convert this vector to an array.
+ * Convert this vector to an array. Useful for serialization and storage.
+ *
+ * Values stored as [x, y].
  *
- * @param {array} array
- * @param {number} [offset]
+ * @return {number[]} Array containing the values of the vector.
  */
-Vector2.prototype.toArray = function(array, offset)
+Vector2.prototype.toArray = function()
 {
-	if(array === undefined) array = [];
-	if(offset === undefined) offset = 0;
-
-	array[offset] = this.x;
-	array[offset + 1] = this.y;
-
-	return array;
+	return [this.x, this.y];
 };
 
 /**
@@ -476,13 +469,13 @@ export {Vector2};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_BezierCurve.js.html

@@ -57,6 +57,9 @@ function BezierCurve()
 }
 
 BezierCurve.prototype = Object.create(Line.prototype);
+BezierCurve.prototype.constructor = BezierCurve;
+BezierCurve.prototype.type = "BezierCurve";
+Object2D.register(BezierCurve, "BezierCurve");
 
 /**
  * Create a bezier curve helper, to edit the bezier curve anchor points.
@@ -109,6 +112,24 @@ BezierCurve.prototype.draw = function(context, viewport, canvas)
 	context.stroke();
 };
 
+BezierCurve.prototype.serialize = function(recursive)
+{
+	var data = Line.prototype.serialize.call(this, recursive);
+
+	data.fromCp = this.fromCp.toArray();
+	data.toCp = this.toCp.toArray();
+
+	return data;
+};
+
+BezierCurve.prototype.parse = function(data, root)
+{
+	Line.prototype.parse.call(this, data, root);
+
+	this.fromCp.fromArray(data.fromCp);
+	this.toCp.fromArray(data.toCp);
+};
+
 export {BezierCurve};
 </code></pre>
         </article>
@@ -120,13 +141,13 @@ export {BezierCurve};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Box.js.html

@@ -68,6 +68,9 @@ function Box()
 }
 
 Box.prototype = Object.create(Object2D.prototype);
+Box.prototype.constructor = Box;
+Box.prototype.type = "Box";
+Object2D.register(Box, "Box");
 
 Box.prototype.onPointerEnter = function(pointer, viewport)
 {
@@ -103,6 +106,28 @@ Box.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+Box.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.box = this.box.toArray();
+	data.strokeStyle = this.strokeStyle;
+	data.lineWidth = this.lineWidth;
+	data.fillStyle = this.fillStyle;
+
+	return data;
+};
+
+Box.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.box.fromArray(data.box);
+	this.strokeStyle = data.strokeStyle;
+	this.lineWidth = data.lineWidth;
+	this.fillStyle = data.fillStyle;
+};
+
 export {Box};
 </code></pre>
         </article>
@@ -114,13 +139,13 @@ export {Box};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Circle.js.html

@@ -66,6 +66,9 @@ function Circle()
 }
 
 Circle.prototype = Object.create(Object2D.prototype);
+Circle.prototype.constructor = Circle;
+Circle.prototype.type = "Circle";
+Object2D.register(Circle, "Circle");
 
 Circle.prototype.isInside = function(point)
 {
@@ -101,6 +104,28 @@ Circle.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+Circle.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.radius = this.radius;
+	data.strokeStyle = this.strokeStyle;
+	data.lineWidth = this.lineWidth;
+	data.fillStyle = this.fillStyle;
+
+	return data;
+};
+
+Circle.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.radius = data.radius;
+	this.strokeStyle = data.strokeStyle;
+	this.lineWidth = data.lineWidth;
+	this.fillStyle = data.fillStyle;
+};
+
 export {Circle};
 </code></pre>
         </article>
@@ -112,13 +137,13 @@ export {Circle};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -32,25 +32,26 @@ import {Vector2} from "../math/Vector2.js";
 /**
  * A DOM object transformed using CSS3D to be included in the scene.
  *
- * DOM objects always stay on top of everything else, it is not possible to layer these object with regular canvas objects.
+ * DOM objects always stay on top or bellow (depending on the DOM parent placement) of everything else. It is not possible to layer these object with regular canvas objects.
  *
  * By default mouse events are not supported for these objects (it does not implement pointer collision checking). Use the DOM events for interaction with these types of objects.
  *
  * @class
- * @param {Element} parentDOM Parent DOM element that contains the drawing canvas.
  * @param {string} type Type of the DOM element (e.g. "div", "p", ...)
  * @extends {Object2D}
  */
-function DOM(parentDOM, type)
+function DOM(type)
 {
 	Object2D.call(this);
 
 	/**
-	 * Parent element that contains this DOM div.
+	 * Parent element that contains this DOM object.
+	 *
+	 * The DOM parent element if not set manually is automatically set to the parent of the drawing canvas.
 	 *
 	 * @type {Element}
 	 */
-	this.parentDOM = parentDOM;
+	this.parentElement = null;
 
 	/**
 	 * DOM element contained by this object.
@@ -75,25 +76,41 @@ function DOM(parentDOM, type)
 }
 
 DOM.prototype = Object.create(Object2D.prototype);
+DOM.prototype.constructor = DOM;
+DOM.prototype.type = "DOM";
+Object2D.register(DOM, "DOM");
 
 /**
  * DOM object implements onAdd() method to automatically attach the DOM object to the DOM tree.
  */
 DOM.prototype.onAdd = function()
 {
-	this.parentDOM.appendChild(this.element);
+	if(this.parentElement !== null)
+	{
+		this.parentElement.appendChild(this.element);
+	}
 };
 
 /**
- * DOM object implements onAdd() method to automatically remove the DOM object to the DOM tree.
+ * DOM object implements onRemove() method to automatically remove the DOM object to the DOM tree.
  */
 DOM.prototype.onRemove = function()
 {
-	this.parentDOM.removeChild(this.element);
+	if(this.parentElement !== null)
+	{
+		this.parentElement.removeChild(this.element);
+	}
 };
 
 DOM.prototype.transform = function(context, viewport, canvas)
 {
+	// Check if the DOM element parent is null
+	if(this.parentElement === null)
+	{
+		this.parentElement = canvas.parentElement;
+		this.parentElement.appendChild(this.element);
+	}
+
 	// CSS transformation matrix
 	if(this.ignoreViewport)
 	{
@@ -114,6 +131,27 @@ DOM.prototype.transform = function(context, viewport, canvas)
 	this.element.style.display = this.visible ? "block" : "none"; 
 };
 
+DOM.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.size = this.size.toArray();
+	data.element = this.element.outerHTML;
+
+	return data;
+};
+
+DOM.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.size.fromArray(data.size);
+
+	var parser = new DOMParser();
+	var doc = parser.parseFromString(this.element.outerHTML, 'text/html');
+	this.element = doc.body.children[0];
+};
+
 export {DOM};
 </code></pre>
         </article>
@@ -125,13 +163,13 @@ export {DOM};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Graph.js.html

@@ -81,6 +81,9 @@ function Graph()
 }
 
 Graph.prototype = Object.create(Object2D.prototype);
+Graph.prototype.constructor = Graph;
+Graph.prototype.type = "Graph";
+Object2D.register(Graph, "Graph");
 
 Graph.prototype.isInside = function(point)
 {
@@ -123,6 +126,35 @@ Graph.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+Graph.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.box = this.box.toArray();
+	data.strokeStyle = this.strokeStyle;
+	data.lineWidth = this.lineWidth;
+	data.fillStyle = this.fillStyle;
+	data.min = this.min;
+	data.max = this.max;
+	data.data = this.data;
+
+	return data;
+};
+
+Graph.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.box.fromArray(data.box);
+	this.strokeStyle = data.strokeStyle;
+	this.lineWidth = data.lineWidth;
+	this.fillStyle = data.fillStyle;
+	this.min = data.min;
+	this.max = data.max;
+	this.data = data.data;
+};
+
+
 export {Graph};
 </code></pre>
         </article>
@@ -134,13 +166,13 @@ export {Graph};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Image.js.html

@@ -57,6 +57,9 @@ function Image(src)
 }
 
 Image.prototype = Object.create(Object2D.prototype);
+Image.prototype.constructor = Image;
+Image.prototype.type = "Image";
+Object2D.register(Image, "Image");
 
 /**
  * Set the image of the object.
@@ -90,6 +93,24 @@ Image.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+Image.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.box = this.box.toArray();
+	data.image = this.image.src;
+
+	return data;
+};
+
+Image.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.box.fromArray(data.box);
+	this.image.src = data.image;
+};
+
 export {Image};
 </code></pre>
         </article>
@@ -101,13 +122,13 @@ export {Image};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

@@ -45,6 +45,8 @@ function Line()
 	 * Initial point of the line.
 	 *
 	 * Can be equal to the position object of another object. Making it automatically follow that object.
+	 *
+	 * @type {Vector2}
 	 */
 	this.from = new Vector2();
 
@@ -52,6 +54,8 @@ function Line()
 	 * Final point of the line.
 	 *
 	 * Can be equal to the position object of another object. Making it automatically follow that object.
+	 *
+	 * @type {Vector2}
 	 */
 	this.to = new Vector2();
 
@@ -61,21 +65,30 @@ function Line()
 	 * Dash pattern is defined as the size of dashes as pairs of space with no line and with line.
 	 *
 	 * E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
+	 *
+	 * @type {number[]}
 	 */
 	this.dashPattern = [5, 5];
 
 	/**
 	 * Style of the object line.
+	 *
+	 * @type {string}
 	 */
 	this.strokeStyle = "#000000";
 
 	/**
 	 * Line width of the line.
+	 *
+	 * @type {number}
 	 */
 	this.lineWidth = 1;
 }
 
 Line.prototype = Object.create(Object2D.prototype);
+Line.prototype.constructor = Line;
+Line.prototype.type = "Line";
+Object2D.register(Line, "Line");
 
 Line.prototype.style = function(context, viewport, canvas)
 {
@@ -92,6 +105,30 @@ Line.prototype.draw = function(context, viewport, canvas)
 	context.stroke();
 };
 
+Line.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.from = this.from.toArray();
+	data.to = this.to.toArray();
+	data.dashPattern = this.dashPattern;
+	data.strokeStyle = this.strokeStyle;
+	data.lineWidth = this.lineWidth;
+
+	return data;
+};
+
+Line.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.to.fromArray(data.to);
+	this.from.fromArray(data.from);
+	this.dashPattern = data.dashPattern;
+	this.strokeStyle = data.strokeStyle;
+	this.lineWidth = data.lineWidth;
+};
+
 export {Line};
 </code></pre>
         </article>
@@ -103,13 +140,13 @@ export {Line};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_MultiLineText.js.html

@@ -27,6 +27,7 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>import {Text} from "./Text.js";
+import {Object2D} from "../Object2D";
 
 /**
  * Multiple line text drawing directly into the canvas.
@@ -60,6 +61,9 @@ function MultiLineText()
 }
 
 MultiLineText.prototype = Object.create(Text.prototype);
+MultiLineText.prototype.constructor = MultiLineText;
+MultiLineText.prototype.type = "MultiLineText";
+Object2D.register(MultiLineText, "MultiLineText");
 
 MultiLineText.prototype.draw = function(context, viewport, canvas)
 {
@@ -122,6 +126,24 @@ MultiLineText.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+MultiLineText.prototype.serialize = function(recursive)
+{
+	var data = Text.prototype.serialize.call(this, recursive);
+
+	data.maxWidth = this.maxWidth;
+	data.lineHeight = this.lineHeight;
+
+	return data;
+};
+
+MultiLineText.prototype.parse = function(data, root)
+{
+	Text.prototype.parse.call(this, data, root);
+
+	this.maxWidth = data.maxWidth;
+	this.lineHeight = data.lineHeight;
+};
+
 export {MultiLineText};
 </code></pre>
         </article>
@@ -133,13 +155,13 @@ export {MultiLineText};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Pattern.js.html

@@ -44,16 +44,28 @@ function Pattern(src)
 
 	/**
 	 * Box object containing the size of the object.
+	 *
+	 * @type {Box2}
 	 */
 	this.box = new Box2();
 
 	/**
-	 * Image source DOM element.
+	 * Image source DOM element. Used as a source for the pattern image.
+	 *
+	 * This element can be replaced by one of other type (e.g canvas, video).
+	 *
+	 * @type {Element}
 	 */
 	this.image = document.createElement("img");
 
 	/**
-	 * A DOMString indicating how to repeat the pattern image.
+	 * Repetition indicates how the pattern image should be repeated.
+	 *
+	 * Possible values are "repeat", "repeat-x", "repeat-y" or "no-repeat".
+	 *
+	 * More information about this attribute here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern.
+	 *
+	 * @type {string}
 	 */
 	this.repetition = "repeat"
 
@@ -64,11 +76,16 @@ function Pattern(src)
 }
 
 Pattern.prototype = Object.create(Object2D.prototype);
+Pattern.prototype.constructor = Pattern;
+Pattern.prototype.type = "Pattern";
+Object2D.register(Pattern, "Pattern");
 
 /**
- * Set the image of the object.
+ * Set the image source of the object. Can be anything accepted by the src field of an img element.
  *
  * Automatically sets the box size to match the image.
+ *
+ * @param {string} src Image source string.
  */
 Pattern.prototype.setImage = function(src)
 {
@@ -101,6 +118,26 @@ Pattern.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+Pattern.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.box = this.box.toArray();
+	data.image = this.image.src;
+	data.repetition = this.repetition;
+
+	return data;
+};
+
+Pattern.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.box.fromArray(data.box);
+	this.image.src = data.image;
+	this.repetition = data.repetition;
+};
+
 export {Pattern};
 </code></pre>
         </article>
@@ -112,13 +149,13 @@ export {Pattern};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_QuadraticCurve.js.html

@@ -52,6 +52,9 @@ function QuadraticCurve()
 }
 
 QuadraticCurve.prototype = Object.create(Line.prototype);
+QuadraticCurve.prototype.constructor = QuadraticCurve;
+QuadraticCurve.prototype.type = "QuadraticCurve";
+Object2D.register(QuadraticCurve, "QuadraticCurve");
 
 /**
  * Create a quadratic curve helper, to edit the curve control point.
@@ -94,6 +97,22 @@ QuadraticCurve.prototype.draw = function(context, viewport, canvas)
 	context.stroke();
 };
 
+QuadraticCurve.prototype.serialize = function(recursive)
+{
+	var data = Line.prototype.serialize.call(this, recursive);
+
+	data.controlPoint = this.controlPoint.toArray();
+
+	return data;
+};
+
+QuadraticCurve.prototype.parse = function(data, root)
+{
+	Line.prototype.parse.call(this, data, root);
+
+	this.controlPoint.fromArray(data.controlPoint);
+};
+
 export {QuadraticCurve};
 </code></pre>
         </article>
@@ -105,13 +124,13 @@ export {QuadraticCurve};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_RoundedBox.js.html

@@ -27,6 +27,7 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>import {Box} from "./Box";
+import {Object2D} from "../Object2D";
 
 /**
  * Rounded box object draw a rectangular object with rounded corners.
@@ -47,6 +48,9 @@ function RoundedBox()
 }
 
 RoundedBox.prototype = Object.create(Box.prototype);
+RoundedBox.prototype.constructor = RoundedBox;
+RoundedBox.prototype.type = "RoundedBox";
+Object2D.register(RoundedBox, "RoundedBox");
 
 /**
  * Draw a rounded rectangle into the canvas context using path to draw the rounded rectangle.
@@ -94,6 +98,22 @@ RoundedBox.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+RoundedBox.prototype.serialize = function(recursive)
+{
+	var data = Box.prototype.serialize.call(this, recursive);
+
+	data.radius = this.radius;
+
+	return data;
+};
+
+RoundedBox.prototype.parse = function(data, root)
+{
+	Box.prototype.parse.call(this, data, root);
+
+	this.radius = data.radius;
+};
+
 export {RoundedBox};
 </code></pre>
         </article>
@@ -105,13 +125,13 @@ export {RoundedBox};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Text.js.html

@@ -95,6 +95,9 @@ function Text()
 }
 
 Text.prototype = Object.create(Object2D.prototype);
+Text.prototype.constructor = Text;
+Text.prototype.type = "Text";
+Object2D.register(Text, "Text");
 
 Text.prototype.draw = function(context, viewport, canvas)
 {
@@ -115,6 +118,34 @@ Text.prototype.draw = function(context, viewport, canvas)
 	}
 };
 
+Text.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.text = this.text;
+	data.font = this.font;
+	data.strokeStyle = this.strokeStyle;
+	data.lineWidth = this.lineWidth;
+	data.fillStyle = this.fillStyle;
+	data.textAlign = this.textAlign;
+	data.textBaseline = this.textBaseline;
+
+	return data;
+};
+
+Text.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.text = data.text;
+	this.font = data.font;
+	this.strokeStyle = data.strokeStyle;
+	this.lineWidth = data.lineWidth;
+	this.fillStyle = data.fillStyle;
+	this.textAlign = data.textAlign;
+	this.textBaseline = data.textBaseline;
+};
+
 export {Text};
 </code></pre>
         </article>
@@ -126,13 +157,13 @@ export {Text};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_BoxMask.js.html

@@ -29,6 +29,7 @@
             <pre class="prettyprint source linenums"><code>import {Mask} from "./Mask.js";
 import {Vector2} from "../../math/Vector2.js";
 import {Box2} from "../../math/Box2.js";
+import {Object2D} from "../../Object2D.js";
 
 /**
  * Box mask can be used to clear a box mask region.
@@ -44,16 +45,23 @@ function BoxMask()
 
 	/**
 	 * Box object containing the size of the object.
+	 *
+	 * @type {Box2}
 	 */
 	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.
+	 *
+	 * @type {boolean}
 	 */
 	this.invert = false;
 }
 
 BoxMask.prototype = Object.create(Mask.prototype);
+BoxMask.prototype.constructor = BoxMask;
+BoxMask.prototype.type = "BoxMask";
+Object2D.register(BoxMask, "BoxMask");
 
 BoxMask.prototype.isInside = function(point)
 {
@@ -93,13 +101,13 @@ export {BoxMask};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_Mask.js.html

@@ -46,11 +46,17 @@ function Mask()
 }
 
 Mask.prototype = Object.create(Object2D.prototype);
-
+Mask.prototype.constructor = Mask;
+Mask.prototype.type = "Mask";
+Object2D.register(Mask, "Mask");
 Mask.prototype.isMask = true;
 
 /**
- * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+ * Clip the canvas context. Define a clipping path and set the clip using the context.clip() method.
+ *
+ * Ensures that next objects being drawn are clipped to the path stored here.
+ *
+ * More information about canvas clipping https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip.
  *
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
@@ -69,13 +75,13 @@ export {Mask};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_Node.js.html

@@ -28,6 +28,7 @@
         <article>
             <pre class="prettyprint source linenums"><code>import {NodeSocket} from "./NodeSocket";
 import {RoundedBox} from "../RoundedBox";
+import {Object2D} from "../../Object2D";
 
 /**
  * Node objects can be connected between them to create graphs.
@@ -36,7 +37,8 @@ import {RoundedBox} from "../RoundedBox";
  *
  * This class implements node basic functionality, the logic to connect node and define inputs/outputs of the nodes.
  *
- * @class Node
+ * @class
+ * @extends {RoundedBox}
  */
 function Node()
 {
@@ -60,6 +62,9 @@ function Node()
 }
 
 Node.prototype = Object.create(RoundedBox.prototype);
+Node.prototype.constructor = Node;
+Node.prototype.type = "Node";
+Object2D.register(Node, "Node");
 
 /**
  * This method should be used for the node to register their socket inputs/outputs.
@@ -174,6 +179,40 @@ Node.prototype.onUpdate = function()
 	}
 };
 
+Node.prototype.serialize = function(recursive)
+{
+	var data = RoundedBox.prototype.serialize.call(this, recursive);
+
+	data.inputs = [];
+	for(var i = 0; i &lt; this.inputs.length; i++)
+	{
+		data.inputs.push(this.inputs[i].uuid);
+	}
+
+	data.outputs = [];
+	for(var i = 0; i &lt; this.outputs.length; i++)
+	{
+		data.outputs.push(this.outputs[i].uuid);
+	}
+
+	return data;
+};
+
+Node.prototype.parse = function(data, root)
+{
+	RoundedBox.prototype.parse.call(this, data, root);
+
+	for(var i = 0; i &lt; data.inputs.length; i++)
+	{
+		this.inputs.push(root.getChildByUUID(data.inputs[i]));
+	}
+
+	for(var i = 0; i &lt; data.outputs.length; i++)
+	{
+		this.outputs.push(root.getChildByUUID(data.outputs[i]));
+	}
+};
+
 export {Node};
 </code></pre>
         </article>
@@ -185,13 +224,13 @@ export {Node};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_NodeConnector.js.html

@@ -27,6 +27,8 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>import {BezierCurve} from "../BezierCurve";
+import {Object2D} from "../../Object2D";
+import {NodeGraph} from "./NodeGraph";
 
 /**
  * Node connector is used to connect a output of a node to a input of another node.
@@ -35,7 +37,8 @@
  *
  * Data always goes from the output node to a input node.
  *
- * @class NodeConnector
+ * @class
+ * @extends {BezierCurve}
  */
 function NodeConnector()
 {
@@ -59,6 +62,9 @@ function NodeConnector()
 }
 
 NodeConnector.prototype = Object.create(BezierCurve.prototype);
+NodeConnector.prototype.constructor = NodeConnector;
+NodeConnector.prototype.type = "NodeConnector";
+Object2D.register(NodeConnector, "NodeConnector");
 
 NodeConnector.prototype.destroy = function()
 {
@@ -66,12 +72,14 @@ NodeConnector.prototype.destroy = function()
 
 	if(this.outputSocket !== null)
 	{
-		this.outputSocket.connector = null;
+		this.outputSocket.removeConnector(this);
+		this.outputSocket = null;
 	}
 
 	if(this.inputSocket !== null)
 	{
-		this.inputSocket.connector = null;
+		this.inputSocket.removeConnector(this);
+		this.inputSocket = null;
 	}
 };
 
@@ -112,6 +120,30 @@ NodeConnector.prototype.onUpdate = function()
 	}
 };
 
+NodeConnector.prototype.serialize = function(recursive)
+{
+	var data = BezierCurve.prototype.serialize.call(this, recursive);
+
+	data.outputSocket = this.outputSocket !== null ? this.outputSocket.uuid : null;
+	data.inputSocket = this.inputSocket !== null ? this.inputSocket.uuid : null;
+
+	return data;
+};
+
+NodeConnector.prototype.parse = function(data, root)
+{
+	BezierCurve.prototype.parse.call(this, data, root);
+
+	if(data.outputSocket !== null)
+	{
+		this.outputSocket = root.getChildByUUID(data.outputSocket);
+	}
+
+	if(data.inputSocket !== null)
+	{
+		this.inputSocket = root.getChildByUUID(data.inputSocket);
+	}
+};
 
 export {NodeConnector};
 </code></pre>
@@ -124,13 +156,13 @@ export {NodeConnector};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_NodeGraph.js.html

@@ -27,6 +27,7 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>import {Object2D} from "../../Object2D";
+import {Node} from "./Node";
 
 /**
  * Node graph object should be used as a container for node elements.
@@ -35,7 +36,8 @@
  *
  * All node elements are stored as children of the node graph.
  *
- * @class NodeGraph
+ * @class
+ * @extends {Object2D}
  */
 function NodeGraph()
 {
@@ -43,6 +45,9 @@ function NodeGraph()
 }
 
 NodeGraph.prototype = Object.create(Object2D.prototype);
+NodeGraph.prototype.constructor = NodeGraph;
+NodeGraph.prototype.type = "NodeGraph";
+Object2D.register(NodeGraph, "NodeGraph");
 
 /**
  * Create and add a new node of specific node type to the graph.
@@ -91,13 +96,13 @@ export {NodeGraph};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_NodeSocket.js.html

@@ -30,19 +30,21 @@
 import {Node} from "./Node";
 import {NodeConnector} from "./NodeConnector";
 import {Text} from "../Text";
+import {Object2D} from "../../Object2D";
 
 /**
  * Represents a node hook point. Is attached to the node element and represented visually.
  *
  * Can be used as a node input, output or as a bidirectional connection.
  *
- * @class NodeSocket
+ * @class
+ * @extends {Circle}
  * @param {Node} node Node of this hook.
  * @param {number} direction Direction of the hook.
- * @param {string} type Data type of the node socket.
+ * @param {string} category Data category of the node socket.
  * @param {string} name Name of the node socket.
  */
-function NodeSocket(node, direction, type, name)
+function NodeSocket(node, direction, category, name)
 {
 	Circle.call(this);
 
@@ -58,13 +60,22 @@ function NodeSocket(node, direction, type, name)
 	this.name = name !== undefined ? name : "";
 
 	/**
-	 * Type of data available from this socket. Only sockets of the same type can be connected.
+	 * Category of data available from this socket. Only sockets of the same category can be connected.
 	 *
 	 * Should directly store the data type name (e.g. "string", "number", "Object", etc).
 	 *
 	 * @type {string}
 	 */
-	this.type = type !== undefined ? type : "";
+	this.category = category !== undefined ? category : "";
+
+	/**
+	 * Allow to connect a OUTPUT node to multiple INPUT sockets.
+	 *
+	 * A INPUT socket can only take one connection, this value is ignored for INPUT sockets.
+	 *
+	 * @type {boolean}
+	 */
+	this.multiple = true;
 
 	/**
 	 * Direction of the node hook, indicates the data flow of the socket.
@@ -87,11 +98,18 @@ function NodeSocket(node, direction, type, name)
 	/**
 	 * Node connector used to connect this socket to another node socket.
 	 *
-	 * Can be used to access the adjacent node.
+	 * Can be used to access the adjacent node. If the socket allows for multiple connections this array can have multiple elements.
+	 *
+	 * @type {NodeConnector[]}
+	 */
+	this.connectors = [];
+
+	/**
+	 * Indicates if the user is currently creating a new connection from this node socket.
 	 *
-	 * @type {NodeConnector}
+	 * @type {boolean}
 	 */
-	this.connector = null;
+	this.creatingConnection = false;
 
 	/**
 	 * Text object used to present the name of the socket.
@@ -115,6 +133,11 @@ function NodeSocket(node, direction, type, name)
 	this.add(this.text);
 }
 
+NodeSocket.prototype = Object.create(Circle.prototype);
+NodeSocket.prototype.constructor = NodeSocket;
+NodeSocket.prototype.type = "NodeSocket";
+Object2D.register(NodeSocket, "NodeSocket");
+
 /**
  * Input hook can only be connected to an output.
  *
@@ -133,8 +156,6 @@ NodeSocket.INPUT = 1;
  */
 NodeSocket.OUTPUT = 2;
 
-NodeSocket.prototype = Object.create(Circle.prototype);
-
 /**
  * Get value stored or calculated in node socket, it should be the calculated from node logic, node inputs, user input, etc.
  *
@@ -148,9 +169,10 @@ NodeSocket.prototype = Object.create(Circle.prototype);
  */
 NodeSocket.prototype.getValue = function()
 {
-	if(this.direction === NodeSocket.INPUT && this.connector !== null && this.connector.outputSocket !== null)
+	// If the node is an input get its value from the output socket of the connection.
+	if(this.direction === NodeSocket.INPUT && this.connectors.length > 0 && this.connectors[0].outputSocket !== null)
 	{
-		return this.connector.outputSocket.getValue();
+		return this.connectors[0].outputSocket.getValue();
 	}
 
 	return null;
@@ -186,6 +208,13 @@ NodeSocket.prototype.connectTo = function(socket)
  */
 NodeSocket.prototype.attachConnector = function(connector)
 {
+	// If there is no space for a new connector delete the already existing connectors.
+	if(!this.canAddConnector())
+	{
+		this.destroyConnectors();
+	}
+
+	// Attach the socket to the correct direction of the connector
 	if(this.direction === NodeSocket.INPUT)
 	{
 		connector.inputSocket = this;
@@ -195,7 +224,8 @@ NodeSocket.prototype.attachConnector = function(connector)
 		connector.outputSocket = this;
 	}
 
-	this.connector = connector;
+	// Add to the list connectors
+	this.connectors.push(connector);
 	if(connector.parent === null)
 	{
 		this.parent.add(connector);
@@ -203,7 +233,7 @@ NodeSocket.prototype.attachConnector = function(connector)
 };
 
 /**
- * Check if this socket can be connected (is compatible) with another socket.
+ * Check if this socket is compatible (type and direction) with another socket.
  *
  * For two sockets to be compatible the data flow should be correct (one input and a output) and they should carry the same data type.
  *
@@ -212,45 +242,89 @@ NodeSocket.prototype.attachConnector = function(connector)
  */
 NodeSocket.prototype.isCompatible = function(socket)
 {
-	return this.direction !== socket.direction && this.type === socket.type;
+	return this.direction !== socket.direction && this.category === socket.category;
 };
 
-NodeSocket.prototype.destroy = function()
+/**
+ * Check if this node socket can have a new connector attached to it.
+ *
+ * Otherwise it might be necessary to destroy old connectors before adding a new connector.
+ *
+ * @return {boolean} True if its possible to add a new connector to the socket, false otherwise.
+ */
+NodeSocket.prototype.canAddConnector = function()
 {
-	Circle.prototype.destroy.call(this);
+	return !(this.connectors.length > 0 && ((this.direction === NodeSocket.INPUT) || (this.direction === NodeSocket.OUTPUT && !this.multiple)));
+};
 
-	if(this.connector !== null)
+/**
+ * Check if this socket can be connected with another socket, they have to be compatible and have space for a new connector.
+ *
+ * @param {NodeSocket} socket Socket to verify connectivity with.
+ * @return {boolean} Returns true if the two sockets can be connected.
+ */
+NodeSocket.prototype.canConnect = function(socket)
+{
+	return this.isCompatible(socket) && this.canAddConnector();
+};
+
+/**
+ * Destroy a connector attached to this socket, calls the destroy() method of the connection.
+ */
+NodeSocket.prototype.removeConnector = function(connector)
+{
+	var index = this.connectors.indexOf(connector);
+	if(index !== -1)
 	{
-		this.connector.destroy();
+		this.connectors.splice(index, 1);
+		connector.destroy();
 	}
 };
 
-NodeSocket.prototype.onPointerDragStart = function(pointer, viewport)
+/**
+ * Destroy all connectors attached to this socket.
+ *
+ * Should be called when destroying the object or to clean up the object.
+ */
+NodeSocket.prototype.destroyConnectors = function()
 {
-	if(this.connector === null)
+	for(var i = 0; i < this.connectors.length; i++)
 	{
-		this.attachConnector(new NodeConnector());
+		this.connectors[i].destroy();
 	}
 };
 
+NodeSocket.prototype.destroy = function()
+{
+	Circle.prototype.destroy.call(this);
+
+	this.destroyConnectors();
+};
+
+NodeSocket.prototype.onPointerDragStart = function(pointer, viewport)
+{
+	this.creatingConnection = true;
+	this.attachConnector(new NodeConnector());
+};
+
 NodeSocket.prototype.onPointerDrag = function(pointer, viewport, delta, position)
 {
-	if(this.connector !== null)
+	if(this.creatingConnection)
 	{
 		if(this.direction === NodeSocket.INPUT)
 		{
-			this.connector.from.copy(position);
+			this.connectors[this.connectors.length - 1].from.copy(position);
 		}
 		else if(this.direction === NodeSocket.OUTPUT)
 		{
-			this.connector.to.copy(position);
+			this.connectors[this.connectors.length - 1].to.copy(position);
 		}
 	}
 };
 
 NodeSocket.prototype.onPointerDragEnd = function(pointer, viewport)
 {
-	if(this.connector !== null)
+	if(this.creatingConnection)
 	{
 		var position = viewport.inverseMatrix.transformPoint(pointer.position);
 		var objects = this.parent.getWorldPointIntersections(position);
@@ -262,7 +336,7 @@ NodeSocket.prototype.onPointerDragEnd = function(pointer, viewport)
 			{
 				if(this.isCompatible(objects[i]))
 				{
-					objects[i].attachConnector(this.connector);
+					objects[i].attachConnector(this.connectors[this.connectors.length - 1]);
 					found = true;
 					break;
 				}
@@ -271,9 +345,46 @@ NodeSocket.prototype.onPointerDragEnd = function(pointer, viewport)
 
 		if(!found)
 		{
-			this.connector.destroy();
+			this.connectors[this.connectors.length - 1].destroy();
 		}
 	}
+
+	this.creatingConnection = false;
+};
+
+NodeSocket.prototype.serialize = function(recursive)
+{
+	var data = Circle.prototype.serialize.call(this, recursive);
+
+	data.name = this.name;
+	data.category = this.category;
+	data.multiple = this.multiple;
+	data.direction = this.direction;
+	data.node = this.node.uuid;
+
+	data.connectors = [];
+	for(var i = 0; i < this.connectors.length; i++)
+	{
+		data.connectors.push(this.connectors[i].uuid);
+	}
+
+	return data;
+};
+
+NodeSocket.prototype.parse = function(data, root)
+{
+	Circle.prototype.parse.call(this, data, root);
+
+	this.name = data.name;
+	this.category = data.category;
+	this.multiple = data.multiple;
+	this.direction = data.direction;
+
+	this.node = root.getChildByUUID(data.node);
+	for(var i = 0; i < data.connectors.length; i++)
+	{
+		this.connectors.push(root.getChildByUUID(data.connectors[i]));
+	}
 };
 
 export {NodeSocket};
@@ -287,13 +398,13 @@ export {NodeSocket};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_FileUtils.js.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: utils/FileUtils.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: utils/FileUtils.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * File utils is used to read and write files.
+ *
+ * Can be used alongside with object serialization to store and load objects from file.
+ *
+ * @class
+ * @static
+ */
+function FileUtils(){}
+
+/**
+ * Read a local or remote file as text data.
+ *
+ * @param {string} fname Path or URL of the file being read.
+ * @param {Function} onLoad onLoad callback receives the read data as parameter.
+ * @param {Function} onError onError call is called when a error occurs while reading the file.
+ */
+FileUtils.read = function(fname, onLoad, onError)
+{
+	var file = new XMLHttpRequest();
+	file.overrideMimeType("text/plain");
+	file.open("GET", fname, true);
+	if(onLoad !== undefined)
+	{
+		file.onload = function()
+		{
+			onLoad(file.response);
+		};
+	}
+
+	if(onError !== undefined)
+	{
+		file.onerror = onError;
+	}
+
+	file.send(null);
+};
+
+/**
+ * Write text to a file and automatically download it from blob storage.
+ *
+ * @method writeFile
+ * @param {string} fname Path of the file to write.
+ * @param {string} data Text data to be written to the file.
+ */
+FileUtils.write = function(fname, data)
+{
+	var blob = new Blob([data], {type:"octet/stream"});
+	var download = document.createElement("a");
+	download.download = fname;
+	download.href = window.URL.createObjectURL(blob);
+	download.style.display = "none";
+	download.onclick = function()
+	{
+		document.body.removeChild(this);
+	};
+	document.body.appendChild(download);
+	download.click();
+};
+
+/**
+ * Open file chooser dialog window for the user to select files stored in the system.
+ *
+ * The files selected are retrieved using the onLoad callback that receives a array of File objects.
+ *
+ * @param {Function} onLoad onLoad callback that receives array of files as parameter.
+ * @param {string} filter File type filter (e.g. ".zip,.rar, etc)
+ */
+FileUtils.select = function(onLoad, filter)
+{
+	var chooser = document.createElement("input");
+	chooser.type = "file";
+	chooser.style.display = "none";
+	document.body.appendChild(chooser);
+
+	if(filter !== undefined)
+	{
+		chooser.accept = filter;
+	}
+
+	chooser.onchange = function(event)
+	{
+		if(onLoad !== undefined)
+		{
+			onLoad(chooser.files);
+		}
+
+		document.body.removeChild(chooser);
+	};
+
+	chooser.click();
+};
+
+
+export {FileUtils};
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/utils_Helpers.js.html

@@ -148,13 +148,13 @@ export {Helpers};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#connector">connector</a></li><li><a href="global.html#direction">direction</a></li><li><a href="global.html#inputs">inputs</a></li><li><a href="global.html#inputSocket">inputSocket</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#node">node</a></li><li><a href="global.html#outputs">outputs</a></li><li><a href="global.html#outputSocket">outputSocket</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#type">type</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</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="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Thu May 14 2020 18:22:31 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Mon May 18 2020 18:40:48 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>