Kezdőlap Felfedezés Súgó
Bejelentkezés
javascript
/
tentone.escher.js
tükrözi: https://github.com/tentone/escher.js.git
2
0
Másolás 0
Fájlok Problémák 0 Wiki
Forráskód Böngészése

Pattern object

tentone 6 éve
szülő
4c9504f95b
commit
ab5c866123
53 módosított fájl, 14915 hozzáadás és 869 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 8 0
      README.md
  2. 445 377
      build/trenette.js
  3. 0 0
      build/trenette.min.js
  4. 445 377
      build/trenette.module.js
  5. 360 0
      docs/Box.html
  6. 1458 0
      docs/Box2.html
  7. 360 0
      docs/Circle.html
  8. 360 0
      docs/DOM.html
  9. 3 3
      docs/EventManager.html
  10. 2 2
      docs/EventManager.js.html
  11. 500 0
      docs/Image.html
  12. 628 0
      docs/Key.html
  13. 484 0
      docs/Line.html
  14. 1890 0
      docs/Matrix.html
  15. 461 37
      docs/Object2D.html
  16. 44 6
      docs/Object2D.js.html
  17. 452 0
      docs/Pattern.html
  18. 2569 0
      docs/Pointer.html
  19. 65 3
      docs/Renderer.html
  20. 55 33
      docs/Renderer.js.html
  21. 262 0
      docs/Stencil.html
  22. 65 0
      docs/Stencil.js.html
  23. 422 0
      docs/Text.html
  24. 236 0
      docs/UUID.html
  25. 262 0
      docs/Vector2.html
  26. 2 2
      docs/Viewport.html
  27. 3 3
      docs/Viewport.js.html
  28. 407 0
      docs/global.html
  29. 2 2
      docs/index.html
  30. 135 0
      docs/input_Key.js.html
  31. 452 0
      docs/input_Pointer.js.html
  32. 249 0
      docs/math_Box2.js.html
  33. 280 0
      docs/math_Matrix.js.html
  34. 90 0
      docs/math_UUID.js.html
  35. 333 0
      docs/math_Vector2.js.html
  36. 117 0
      docs/objects_Box.js.html
  37. 114 0
      docs/objects_Circle.js.html
  38. 103 0
      docs/objects_DOM.js.html
  39. 115 0
      docs/objects_Image.js.html
  40. 110 0
      docs/objects_Line.js.html
  41. 128 0
      docs/objects_Pattern.js.html
  42. 97 0
      docs/objects_Text.js.html
  43. 75 0
      docs/stencil_Stencil.js.html
  44. 154 0
      docs/utils_Helpers.js.html
  45. 1 1
      examples/diagram.html
  46. 1 1
      package.json
  47. 0 1
      source/Object2D.js
  48. 2 1
      source/Trenette.js
  49. 50 13
      source/math/Box2.js
  50. 2 0
      source/objects/Box.js
  51. 4 2
      source/objects/Image.js
  52. 40 4
      source/objects/Pattern.js
  53. 13 1
      source/stencil/Stencil.js

+ 8 - 0
README.md
Fájl Megtekintése 

@@ -3,3 +3,11 @@
 
  - Web based diagram and graph building framework.
 
  - Entity based diagram build system.
 
 
+
 
+## Basic example
 
+
 
+
 
+## Rendering pipeline
 
+
 
+ - 
+

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 445 - 377
build/trenette.js


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
build/trenette.min.js


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 445 - 377
build/trenette.module.js


+ 360 - 0
docs/Box.html
Fájl Megtekintése 

@@ -0,0 +1,360 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Box</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: Box</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Box<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Box"><span class="type-signature"></span>new Box<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Box object draw a box.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line14">line 14</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Box object containing the size of the object.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line23">line 23</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="fillStyle"><span class="type-signature"></span>fillStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Background color of the box.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line33">line 33</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Color of the box border line.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line28">line 28</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 1458 - 0
docs/Box2.html
Fájl Megtekintése 

@@ -0,0 +1,1458 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Box2</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: Box2</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Box2<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Box2"><span class="type-signature"></span>new Box2<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Box is described by a minimum and maximum points.

Can be used for collision detection with points and other boxes.
 
+</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#line12">line 12</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="clone"><span class="type-signature"></span>clone<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Clone the box into a new object.
 
+</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#line61">line 61</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="copy"><span class="type-signature"></span>copy<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Copy the box value from another box.
 
+</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#line71">line 71</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="distanceToPoint"><span class="type-signature"></span>distanceToPoint<span class="signature">(point)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Calculate the distance to a point.
 
+</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>point</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line143">line 143</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="equals"><span class="type-signature"></span>equals<span class="signature">(box)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Checks if two boxes are equal.
 
+</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>box</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="Box2.html">Box2</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line193">line 193</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<h5>Returns:</h5>
 
+
 
+        
+<div class="param-desc">
 
+    True if the two boxes are equal.
 
+</div>
 
+
 
+
 
+
 
+<dl>
 
+    <dt>
 
+        Type
 
+    </dt>
 
+    <dd>
 
+        
+<span class="param-type">boolean</span>
 
+
 
+
 
+    </dd>
 
+</dl>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="intersect"><span class="type-signature"></span>intersect<span class="signature">(box)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Make a intersection between this box and another box.

Store the result in this 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>box</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="Box2.html">Box2</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line157">line 157</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="intersectsBox"><span class="type-signature"></span>intersectsBox<span class="signature">(box)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Check if two boxes intersect each other, using 4 splitting planes to rule out intersections.
 
+</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>box</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="Box2.html">Box2</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line128">line 128</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="set"><span class="type-signature"></span>set<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set the box values.
 
+</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#line21">line 21</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="setFromCenterAndSize"><span class="type-signature"></span>setFromCenterAndSize<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set the box minimum and maximum from center point and size.
 
+</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#line48">line 48</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="setFromPoints"><span class="type-signature"></span>setFromPoints<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set the box from a list of Vector2 points.
 
+</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#line32">line 32</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="translate"><span class="type-signature"></span>translate<span class="signature">(offset)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Translate the box by a offset value, adds the offset to booth min and max.
 
+</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>offset</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line181">line 181</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="union"><span class="type-signature"></span>union<span class="signature">(box)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Make a union between this box and another box.

Store the result in this 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>box</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="Box2.html">Box2</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_Box2.js.html">math/Box2.js</a>, <a href="math_Box2.js.html#line170">line 170</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 360 - 0
docs/Circle.html
Fájl Megtekintése 

@@ -0,0 +1,360 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Circle</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: Circle</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Circle<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Circle"><span class="type-signature"></span>new Circle<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Circle object draw a circular object, into the canvas.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line11">line 11</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="fillStyle"><span class="type-signature"></span>fillStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Background color of the circle.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line28">line 28</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="radius"><span class="type-signature"></span>radius<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Radius of the circle.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line18">line 18</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Color of the circle border line.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Circle.js.html">objects/Circle.js</a>, <a href="objects_Circle.js.html#line23">line 23</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 360 - 0
docs/DOM.html
Fájl Megtekintése 

@@ -0,0 +1,360 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: DOM</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: DOM</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>DOM<span class="signature">(parent, type)</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="DOM"><span class="type-signature"></span>new DOM<span class="signature">(parent, type)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    A DOM object transformed using CSS3D to ver included in the graph.

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

Use the normal DOM events for interaction.
 
+</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>parent</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Parent DOM element that contains the drawing canvas.</td>
 
+        </tr>
 
+
 
+    
+
 
+        <tr>
 
+            
+                <td class="name"><code>type</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Type of the DOM element (e.g. "div", "p", ...)</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line17">line 17</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="element"><span class="type-signature"></span>element<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    DOM element contained by this object.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line24">line 24</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="size"><span class="type-signature"></span>size<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Size of the DOM element (in world coordinates).
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_DOM.js.html">objects/DOM.js</a>, <a href="objects_DOM.js.html#line36">line 36</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 3 - 3
docs/EventManager.html
Fájl Megtekintése 

@@ -275,7 +275,7 @@
 
             <td class="type">
 
             
                 
-<span class="param-type">DOM</span>
 
+<span class="param-type"><a href="DOM.html">DOM</a></span>
 
 
 
             
@@ -682,13 +682,13 @@
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 2 - 2
docs/EventManager.js.html
Fájl Megtekintése 

@@ -105,13 +105,13 @@ export {EventManager};
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 500 - 0
docs/Image.html
Fájl Megtekintése 

@@ -0,0 +1,500 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Image</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: Image</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Image<span class="signature">(src<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Image"><span class="type-signature"></span>new Image<span class="signature">(src<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Image object is used to draw an image from URL.
 
+</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>src</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">string</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+                <td class="attributes">
 
+                
+                    &lt;optional><br>
 
+                
+
 
+                
+
 
+                
+                </td>
 
+            
+
 
+            
+
 
+            <td class="description last">Source URL of the image.</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line13">line 13</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Box object containing the size of the object.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line20">line 20</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="image"><span class="type-signature"></span>image<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Image source DOM element.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line25">line 25</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="setImage"><span class="type-signature"></span>setImage<span class="signature">(src)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set the image of the object.

Automatically sets the box size to match the image.
 
+</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>src</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">string</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Source URL of the image.</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line42">line 42</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 628 - 0
docs/Key.html
Fájl Megtekintése 

@@ -0,0 +1,628 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Key</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: Key</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Key<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Key"><span class="type-signature"></span>new Key<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Key is used by Keyboard, Pointer, etc, to represent a key state.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line8">line 8</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="justPressed"><span class="type-signature"></span>justPressed<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Indicates if this key was just pressed.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line18">line 18</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="justReleased"><span class="type-signature"></span>justReleased<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Indicates if this key was just released.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line23">line 23</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="pressed"><span class="type-signature"></span>pressed<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Indicates if this key is currently pressed.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line13">line 13</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="reset"><span class="type-signature"></span>reset<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Reset key to default values.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line77">line 77</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="set"><span class="type-signature"></span>set<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set this key attributes manually.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line67">line 67</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Update Key status based on new key state.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line36">line 36</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 484 - 0
docs/Line.html
Fájl Megtekintése 

@@ -0,0 +1,484 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Line</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: Line</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Line<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Line"><span class="type-signature"></span>new Line<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Line object draw a line from one point to another.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line11">line 11</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="dashPattern"><span class="type-signature"></span>dashPattern<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Dash line pattern to be used, is empty draws a solid line.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line37">line 37</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="from"><span class="type-signature"></span>from<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Initial point of the line.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line20">line 20</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="lineWidth"><span class="type-signature"></span>lineWidth<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Line width.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line42">line 42</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Color of the line.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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="to"><span class="type-signature"></span>to<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Final point of the line.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line27">line 27</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 1890 - 0
docs/Matrix.html
Fájl Megtekintése 

@@ -0,0 +1,1890 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Matrix</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: Matrix</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Matrix<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Matrix"><span class="type-signature"></span>new Matrix<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    2D 3x2 transformation matrix, applied to the canvas elements.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line10">line 10</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="clone"><span class="type-signature"></span>clone<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Create a new matrix object with a copy of the content of this one.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line33">line 33</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="compose"><span class="type-signature"></span>compose<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Compose this transformation matrix with position scale and rotation and origin point.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line83">line 83</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="copy"><span class="type-signature"></span>copy<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Copy the content of another matrix and store in this one.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line25">line 25</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="determinant"><span class="type-signature"></span>determinant<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Get the matrix determinant.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line182">line 182</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="getInverse"><span class="type-signature"></span>getInverse<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Get the inverse matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line190">line 190</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="getPosition"><span class="type-signature"></span>getPosition<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Get the position from the transformation matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line166">line 166</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="getScale"><span class="type-signature"></span>getScale<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Get the scale from the transformation matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line158">line 158</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="identity"><span class="type-signature"></span>identity<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Reset this matrix to indentity.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line41">line 41</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="multiply"><span class="type-signature"></span>multiply<span class="signature">(mat)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Multiply another matrix by this one and store the result.
 
+</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>mat</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Matrix array.</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line51">line 51</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="premultiply"><span class="type-signature"></span>premultiply<span class="signature">(mat)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Premultiply another matrix by this one and store the result.
 
+</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>mat</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Matrix array to multiply.</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line68">line 68</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="rotate"><span class="type-signature"></span>rotate<span class="signature">(angle)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Apply rotation to this matrix.
 
+</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>angle</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Angle in radians.</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line119">line 119</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="scale"><span class="type-signature"></span>scale<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Apply scale to this matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line138">line 138</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="setContextTransform"><span class="type-signature"></span>setContextTransform<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set a canvas context to use this transformation.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line211">line 211</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="setPosition"><span class="type-signature"></span>setPosition<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set the position of the transformation matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line149">line 149</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="skew"><span class="type-signature"></span>skew<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Apply skew to this matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line174">line 174</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="tranformContext"><span class="type-signature"></span>tranformContext<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Transform on top of the current context transformation.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line219">line 219</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="transformPoint"><span class="type-signature"></span>transformPoint<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Transform a point using this matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line200">line 200</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="translate"><span class="type-signature"></span>translate<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Apply translation to this matrix.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<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#line108">line 108</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 461 - 37
docs/Object2D.html
Fájl Megtekintése 

@@ -187,7 +187,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line97">line 97</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line122">line 122</a>
 
     </li></ul></dd>
 
     
 
@@ -311,7 +311,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line85">line 85</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line90">line 90</a>
 
     </li></ul></dd>
 
     
 
@@ -373,7 +373,69 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line66">line 66</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line71">line 71</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="ignoreViewport"><span class="type-signature"></span>ignoreViewport<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Flag to indicate wheter this objet ignores the viewport transformation.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line95">line 95</a>
 
     </li></ul></dd>
 
     
 
@@ -435,7 +497,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line73">line 73</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line78">line 78</a>
 
     </li></ul></dd>
 
     
 
@@ -497,7 +559,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line54">line 54</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line59">line 59</a>
 
     </li></ul></dd>
 
     
 
@@ -559,7 +621,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line59">line 59</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line64">line 64</a>
 
     </li></ul></dd>
 
     
 
@@ -621,7 +683,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line78">line 78</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line83">line 83</a>
 
     </li></ul></dd>
 
     
 
@@ -683,7 +745,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line225">line 225</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line263">line 263</a>
 
     </li></ul></dd>
 
     
 
@@ -745,7 +807,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line220">line 220</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line258">line 258</a>
 
     </li></ul></dd>
 
     
 
@@ -807,7 +869,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line230">line 230</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line268">line 268</a>
 
     </li></ul></dd>
 
     
 
@@ -825,13 +887,13 @@
 
 
         
             
-<h4 class="name" id="onPointerDrag"><span class="type-signature"></span>onPointerDrag<span class="type-signature"></span></h4>
 
+<h4 class="name" id="onPointerEnter"><span class="type-signature"></span>onPointerEnter<span class="type-signature"></span></h4>
 
 
 
 
 
 <div class="description">
 
-    Callback method while the object is being dragged across the screen.

Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
 
+    Callback method called when the pointer enters the object.

Receives (pointer, viewport) as arguments.
 
 </div>
 
 
 
@@ -869,7 +931,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line213">line 213</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line227">line 227</a>
 
     </li></ul></dd>
 
     
 
@@ -887,13 +949,13 @@
 
 
         
             
-<h4 class="name" id="onPointerEnter"><span class="type-signature"></span>onPointerEnter<span class="type-signature"></span></h4>
 
+<h4 class="name" id="onPointerLeave"><span class="type-signature"></span>onPointerLeave<span class="type-signature"></span></h4>
 
 
 
 
 
 <div class="description">
 
-    Callback method called when the pointer enters the object.

Receives (pointer, viewport) as arguments.
 
+    Callback method called when the was inside of the object and leaves the object.

Receives (pointer, viewport) as arguments.
 
 </div>
 
 
 
@@ -931,7 +993,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line192">line 192</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line234">line 234</a>
 
     </li></ul></dd>
 
     
 
@@ -949,13 +1011,13 @@
 
 
         
             
-<h4 class="name" id="onPointerLeave"><span class="type-signature"></span>onPointerLeave<span class="type-signature"></span></h4>
 
+<h4 class="name" id="onPointerOver"><span class="type-signature"></span>onPointerOver<span class="type-signature"></span></h4>
 
 
 
 
 
 <div class="description">
 
-    Callback method called when the was inside of the object and leaves the object.

Receives (pointer, viewport) as arguments.
 
+    Callback method while the pointer is over (inside) of the object.

Receives (pointer, viewport) as arguments.
 
 </div>
 
 
 
@@ -993,7 +1055,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line199">line 199</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line241">line 241</a>
 
     </li></ul></dd>
 
     
 
@@ -1011,13 +1073,13 @@
 
 
         
             
-<h4 class="name" id="onPointerOver"><span class="type-signature"></span>onPointerOver<span class="type-signature"></span></h4>
 
+<h4 class="name" id="onUpdate"><span class="type-signature"></span>onUpdate<span class="type-signature"></span></h4>
 
 
 
 
 
 <div class="description">
 
-    Callback method while the pointer is over (inside) of the object.

Receives (pointer, viewport) as arguments.
 
+    Callback method called every time before the object is draw into the canvas.

Can be used to run preparation code, move the object, etc.
 
 </div>
 
 
 
@@ -1055,7 +1117,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line206">line 206</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line220">line 220</a>
 
     </li></ul></dd>
 
     
 
@@ -1073,13 +1135,13 @@
 
 
         
             
-<h4 class="name" id="onUpdate"><span class="type-signature"></span>onUpdate<span class="type-signature"></span></h4>
 
+<h4 class="name" id="origin"><span class="type-signature"></span>origin<span class="type-signature"></span></h4>
 
 
 
 
 
 <div class="description">
 
-    Callback method called every time before the object is draw into the canvas.

Can be used to run preparation code, move the object, etc.
 
+    Origin of the object used as point of rotation.
 
 </div>
 
 
 
@@ -1117,7 +1179,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line185">line 185</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line37">line 37</a>
 
     </li></ul></dd>
 
     
 
@@ -1241,7 +1303,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line92">line 92</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line117">line 117</a>
 
     </li></ul></dd>
 
     
 
@@ -1321,6 +1383,130 @@
 
 
         
             
+<h4 class="name" id="restoreContextState"><span class="type-signature"></span>restoreContextState<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Flag to indicate if the context of canvas should be restored after render.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line105">line 105</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="restoreContextState"><span class="type-signature"></span>restoreContextState<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Flag to indicate if the context of canvas should be restored after render.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line110">line 110</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
 <h4 class="name" id="rotation"><span class="type-signature"></span>rotation<span class="type-signature"></span></h4>
 
 
 
@@ -1365,7 +1551,69 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line42">line 42</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line47">line 47</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="saveContextState"><span class="type-signature"></span>saveContextState<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Flag to indicate if the context of canvas should be saved before render.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line100">line 100</a>
 
     </li></ul></dd>
 
     
 
@@ -1427,7 +1675,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line37">line 37</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line42">line 42</a>
 
     </li></ul></dd>
 
     
 
@@ -1551,7 +1799,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line47">line 47</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line52">line 52</a>
 
     </li></ul></dd>
 
     
 
@@ -1675,7 +1923,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line122">line 122</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line147">line 147</a>
 
     </li></ul></dd>
 
     
 
@@ -1807,7 +2055,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line178">line 178</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line213">line 213</a>
 
     </li></ul></dd>
 
     
 
@@ -1895,7 +2143,95 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line146">line 146</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line171">line 171</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="onPointerDrag"><span class="type-signature"></span>onPointerDrag<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Callback method while the object is being dragged across the screen.

Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line248">line 248</a>
 
     </li></ul></dd>
 
     
 
@@ -2027,7 +2363,95 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line133">line 133</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line158">line 158</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Apply the transform to the rendering context.

Can also be used for pre rendering logic.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line201">line 201</a>
 
     </li></ul></dd>
 
     
 
@@ -2159,7 +2583,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line105">line 105</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line130">line 130</a>
 
     </li></ul></dd>
 
     
 
@@ -2247,7 +2671,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line154">line 154</a>
 
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line179">line 179</a>
 
     </li></ul></dd>
 
     
 
@@ -2293,13 +2717,13 @@
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 44 - 6
docs/Object2D.js.html
Fájl Megtekintése 

@@ -59,6 +59,11 @@ function Object2D()
 
 	 */
 
 	this.position = new Vector2(0, 0);
 
 
+	/**
 
+	 * Origin of the object used as point of rotation.
 
+	 */
 
+	this.origin = new Vector2(0, 0);
 
+
 
 	/**
 
 	 * Scale of the object.
 
 	 */
 
@@ -110,7 +115,27 @@ function Object2D()
 
 	 *
 
 	 * If true the onPointerDrag callback is used to update the state of the object.
 
 	 */
 
-	this.draggable = true;
 
+	this.draggable = false;
 
+
 
+	/**
 
+	 * Flag to indicate wheter this objet ignores the viewport transformation.
 
+	 */
 
+	this.ignoreViewport = false;
 
+
 
+	/**
 
+	 * Flag to indicate if the context of canvas should be saved before render.
 
+	 */
 
+	this.saveContextState = true;
 
+
 
+	/**
 
+	 * Flag to indicate if the context of canvas should be restored after render.
 
+	 */
 
+	this.restoreContextState = true;
 
+
 
+	/**
 
+	 * Flag to indicate if the context of canvas should be restored after render.
 
+	 */
 
+	this.restoreContextState = true;
 
 
 	/**
 
 	 * Flag indicating if the pointer is inside of the element.
 
@@ -183,7 +208,7 @@ Object2D.prototype.updateMatrix = function(context)
 
 {
 
 	if(this.matrixNeedsUpdate)
 
 	{
 
-		this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation);
 
+		this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.origin.x, this.origin.y, this.rotation);
 
 		this.globalMatrix.copy(this.matrix);
 
 
 		if(this.parent !== null)
 
@@ -196,6 +221,16 @@ Object2D.prototype.updateMatrix = function(context)
 
 	}
 
 };
 
 
+/**
 
+ * Apply the transform to the rendering context.
 
+ *
 
+ * Can also be used for pre rendering logic.
 
+ */
 
+Object2D.prototype.transform = function(context, viewport)
 
+{
 
+	this.globalMatrix.tranformContext(context);
 
+};
 
+
 
 /**
 
  * Draw the object into the canvas.
 
  *
 
@@ -203,7 +238,7 @@ Object2D.prototype.updateMatrix = function(context)
 
  *
 
  * @param context Canvas 2d drawing context.
 
  */
 
-Object2D.prototype.draw = function(context){};
 
+Object2D.prototype.draw = function(context, viewport){};
 
 
 /**
 
  * Callback method called every time before the object is draw into the canvas.
 
@@ -238,7 +273,10 @@ Object2D.prototype.onPointerOver = null;
 
  *
 
  * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
 
  */
 
-Object2D.prototype.onPointerDrag = null;
 
+Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
 
+{
 
+	this.position.add(delta);
 
+};
 
 
 /**
 
  * Callback method called while the pointer button is pressed.
 
@@ -268,13 +306,13 @@ export {Object2D};
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 452 - 0
docs/Pattern.html
Fájl Megtekintése 

@@ -0,0 +1,452 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Pattern</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: Pattern</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Pattern<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Pattern"><span class="type-signature"></span>new Pattern<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Pattern object draw a image repeated as a pattern.

Its similar to the Image class but the image can be repeat infinitly.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line16">line 16</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Box object containing the size of the object.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line23">line 23</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="image"><span class="type-signature"></span>image<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Image source DOM element.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line28">line 28</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="repetition"><span class="type-signature"></span>repetition<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    A DOMString indicating how to repeat the pattern image.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line33">line 33</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="setImage"><span class="type-signature"></span>setImage<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Set the image of the object.

Automatically sets the box size to match the image.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line48">line 48</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 2569 - 0
docs/Pointer.html
Fájl Megtekintése 

@@ -0,0 +1,2569 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Pointer</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: Pointer</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Pointer<span class="signature">(domElement, dontInitialize)</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Pointer"><span class="type-signature"></span>new Pointer<span class="signature">(domElement, dontInitialize)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Pointer instance for input in sync with the running 3D application.

The pointer object provided by scripts is automatically updated by the runtime handler.
 
+</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>domElement</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">DOM element to craete the pointer events.</td>
 
+        </tr>
 
+
 
+    
+
 
+        <tr>
 
+            
+                <td class="name"><code>dontInitialize</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Boolean</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">If true the pointer events are not created.</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line16">line 16</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id=".BACK"><span class="type-signature">(static) </span>BACK<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Back pointer navigation button.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line203">line 203</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id=".FORWARD"><span class="type-signature">(static) </span>FORWARD<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Forward pointer navigation button.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line208">line 208</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id=".LEFT"><span class="type-signature">(static) </span>LEFT<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Left pointer button.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line188">line 188</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id=".MIDDLE"><span class="type-signature">(static) </span>MIDDLE<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Middle pointer button.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line193">line 193</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id=".RIGHT"><span class="type-signature">(static) </span>RIGHT<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Right pointer button.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line198">line 198</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line60">line 60</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="delta"><span class="type-signature"></span>delta<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Pointer movement (coordinates in window space).
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line40">line 40</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="domElement"><span class="type-signature"></span>domElement<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    DOM element where to attach the pointer events.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line55">line 55</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="doubleClicked"><span class="type-signature"></span>doubleClicked<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Indicates a button of the pointer was double clicked.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line50">line 50</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="events"><span class="type-signature"></span>events<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Event manager responsible for updating the raw data variables.

Diferent events are used depending on the host platform.

When the update method is called the raw data is reset.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line69">line 69</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="keys"><span class="type-signature"></span>keys<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Array with pointer buttons status.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line30">line 30</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="position"><span class="type-signature"></span>position<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Pointer position inside of the window (coordinates in window space).
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line35">line 35</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="wheel"><span class="type-signature"></span>wheel<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Pointer scroll wheel movement.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line45">line 45</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".buttonDoubleClicked"><span class="type-signature">(static) </span>buttonDoubleClicked<span class="signature">(button)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Check if pointer button was double clicked.
 
+</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>button</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Button to check status of</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line259">line 259</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<h5>Returns:</h5>
 
+
 
+        
+<div class="param-desc">
 
+    True if some pointer button was just double clicked
 
+</div>
 
+
 
+
 
+
 
+<dl>
 
+    <dt>
 
+        Type
 
+    </dt>
 
+    <dd>
 
+        
+<span class="param-type">boolean</span>
 
+
 
+
 
+    </dd>
 
+</dl>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".buttonJustPressed"><span class="type-signature">(static) </span>buttonJustPressed<span class="signature">(button)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Check if a pointer button was just pressed.
 
+</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>button</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Button to check status of</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line270">line 270</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<h5>Returns:</h5>
 
+
 
+        
+<div class="param-desc">
 
+    True if button was just pressed
 
+</div>
 
+
 
+
 
+
 
+<dl>
 
+    <dt>
 
+        Type
 
+    </dt>
 
+    <dd>
 
+        
+<span class="param-type">boolean</span>
 
+
 
+
 
+    </dd>
 
+</dl>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".buttonJustReleased"><span class="type-signature">(static) </span>buttonJustReleased<span class="signature">(button)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Check if a pointer button was just released.
 
+</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>button</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Button to check status of</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line281">line 281</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<h5>Returns:</h5>
 
+
 
+        
+<div class="param-desc">
 
+    True if button was just released
 
+</div>
 
+
 
+
 
+
 
+<dl>
 
+    <dt>
 
+        Type
 
+    </dt>
 
+    <dd>
 
+        
+<span class="param-type">boolean</span>
 
+
 
+
 
+    </dd>
 
+</dl>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".buttonPressed"><span class="type-signature">(static) </span>buttonPressed<span class="signature">(button)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Check if pointer button is currently pressed.
 
+</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>button</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Button to check status of</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line248">line 248</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<h5>Returns:</h5>
 
+
 
+        
+<div class="param-desc">
 
+    True if button is currently pressed
 
+</div>
 
+
 
+
 
+
 
+<dl>
 
+    <dt>
 
+        Type
 
+    </dt>
 
+    <dd>
 
+        
+<span class="param-type">boolean</span>
 
+
 
+
 
+    </dd>
 
+</dl>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".create"><span class="type-signature">(static) </span>create<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Create pointer events.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line388">line 388</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".dispose"><span class="type-signature">(static) </span>dispose<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Dispose pointer events.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line396">line 396</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".insideCanvas"><span class="type-signature">(static) </span>insideCanvas<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Check if pointer is inside attached canvas (updated async).
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line237">line 237</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<h5>Returns:</h5>
 
+
 
+        
+<div class="param-desc">
 
+    True if pointer is currently inside the canvas
 
+</div>
 
+
 
+
 
+
 
+<dl>
 
+    <dt>
 
+        Type
 
+    </dt>
 
+    <dd>
 
+        
+<span class="param-type">boolean</span>
 
+
 
+
 
+    </dd>
 
+</dl>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".setCanvas"><span class="type-signature">(static) </span>setCanvas<span class="signature">(canvas)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Element to be used for coordinates calculation relative to that canvas.
 
+</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>canvas</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last">Canvas to be attached to the Pointer instance</td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line215">line 215</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".update"><span class="type-signature">(static) </span>update<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Update pointer buttons state, position, wheel and delta synchronously.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line330">line 330</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".updateKey"><span class="type-signature">(static) </span>updateKey<span class="signature">(button, action)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Update a pointer button.

Automatically called by the runtime.
 
+</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>button</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+
 
+        <tr>
 
+            
+                <td class="name"><code>action</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line319">line 319</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id=".updatePosition"><span class="type-signature">(static) </span>updatePosition<span class="signature">(x, y, xDiff, yDiff)</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Update pointer position.

Automatically called by the runtime.
 
+</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>x</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+
 
+        <tr>
 
+            
+                <td class="name"><code>y</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+
 
+        <tr>
 
+            
+                <td class="name"><code>xDiff</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+
 
+        <tr>
 
+            
+                <td class="name"><code>yDiff</code></td>
 
+            
+
 
+            <td class="type">
 
+            
+                
+<span class="param-type">Number</span>
 
+
 
+
 
+            
+            </td>
 
+
 
+            
+
 
+            
+
 
+            <td class="description last"></td>
 
+        </tr>
 
+
 
+    
+    </tbody>
 
+</table>
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line296">line 296</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 65 - 3
docs/Renderer.html
Fájl Megtekintése 

@@ -143,6 +143,68 @@
 
 
         
             
+<h4 class="name" id="autoClear"><span class="type-signature"></span>autoClear<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Indicates if the canvas should be automatically cleared on each new frame.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line35">line 35</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
 <h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"></span></h4>
 
 
 
@@ -453,7 +515,7 @@
 
     
     <dt class="tag-source">Source:</dt>
 
     <dd class="tag-source"><ul class="dummy"><li>
 
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line45">line 45</a>
 
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line50">line 50</a>
 
     </li></ul></dd>
 
     
 
@@ -499,13 +561,13 @@
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 55 - 33
docs/Renderer.js.html
Fájl Megtekintése 

@@ -56,6 +56,11 @@ function Renderer(canvas)
 
 	 */
 
 	this.pointer = new Pointer();
 
 	this.pointer.setCanvas(canvas);
 
+
 
+	/**
 
+	 * Indicates if the canvas should be automatically cleared on each new frame.
 
+	 */
 
+	this.autoClear = true;
 
 }
 
 
 /**
 
@@ -104,7 +109,7 @@ Renderer.prototype.update = function(object, viewport)
 
 	for(var i = 0; i &lt; objects.length; i++)
 
 	{
 
 		var child = objects[i];
 
-		var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
+		var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
 
 
 		// Check if the pointer pointer is inside
 
 		if(child.isInside(childPoint))
 
@@ -121,6 +126,18 @@ Renderer.prototype.update = function(object, viewport)
 
 				child.onPointerOver(pointer, viewport);
 
 			}
 
 
+			// Pointer pressed
 
+			if(pointer.buttonPressed(Pointer.LEFT) &amp;&amp; child.onButtonPressed !== null)
 
+			{	
+				child.onButtonPressed(pointer, viewport);
 
+			}
 
+
 
+			// Just released
 
+			if(pointer.buttonJustReleased(Pointer.LEFT) &amp;&amp; child.onButtonUp !== null)
 
+			{	
+				child.onButtonUp(pointer, viewport);
 
+			}
 
+
 
 			// Pointer just pressed
 
 			if(pointer.buttonJustPressed(Pointer.LEFT))
 
 			{
 
@@ -132,22 +149,12 @@ Renderer.prototype.update = function(object, viewport)
 
 				if(child.draggable)
 
 				{
 
 					child.beingDragged = true;
 
+
 
+					// Only start a drag operation on the top element.
 
 					break;
 
 				}
 
 			}
 
 
-			// Pointer pressed
 
-			if(pointer.buttonPressed(Pointer.LEFT) &amp;&amp; child.onButtonPressed !== null)
 
-			{	
-				child.onButtonPressed(pointer, viewport);
 
-			}
 
-
 
-			// Just released
 
-			if(pointer.buttonJustReleased(Pointer.LEFT) &amp;&amp; child.onButtonUp !== null)
 
-			{	
-				child.onButtonUp(pointer, viewport);
 
-			}
 
-
 
 			child.pointerInside = true;
 
 		}
 
 		else if(child.pointerInside)
 
@@ -177,17 +184,19 @@ Renderer.prototype.update = function(object, viewport)
 
 		var child = objects[i];
 
 
 		if(child.beingDragged)
 
-		{
 
-			var matrix = viewport.inverseMatrix.clone();
 
-			matrix.multiply(child.inverseGlobalMatrix);
 
-			matrix.setPosition(0, 0);
 
+		{	
+			var lastPosition = pointer.position.clone();
 
+			lastPosition.sub(pointer.delta);
 
+
 
+			var positionWorld =  viewport.inverseMatrix.transformPoint(pointer.position);
 
+			var lastWorld =  viewport.inverseMatrix.transformPoint(lastPosition);
 
 
-			var delta = matrix.transformPoint(pointer.delta);
 
-			child.position.add(delta);
 
+			// Mouse delta in world coordinates
 
+			positionWorld.sub(lastWorld);
 
 
 			if(child.onPointerDrag !== null)
 
 			{
 
-				child.onPointerDrag(pointer, viewport, delta);
 
+				child.onPointerDrag(pointer, viewport, positionWorld);
 
 			}
 
 		}
 
 
@@ -206,23 +215,36 @@ Renderer.prototype.update = function(object, viewport)
 
 		return a.layer - b.layer;
 
 	});
 
 
-	// Render the content
 
-	var context = this.context;
 
-
 
 	// Clear canvas
 
-	context.setTransform(1, 0, 0, 1, 0, 0);
 
-	context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
+	if(this.autoClear)
 
+	{
 
+		this.context.setTransform(1, 0, 0, 1, 0, 0);
 
+		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
+	}
 
 
 	// Set viewport matrix transform
 
-	viewport.matrix.setContextTransform(context);
 
+	viewport.matrix.setContextTransform(this.context);
 
 
 	// Render into the canvas
 
 	for(var i = 0; i &lt; objects.length; i++)
 
-	{
 
-		context.save();
 
-		objects[i].globalMatrix.tranformContext(context);
 
-		objects[i].draw(context);
 
-		context.restore();
 
+	{	
+		if(objects[i].saveContextState)
 
+		{
 
+			this.context.save();
 
+		}
 
+
 
+		if(objects[i].ignoreViewport)
 
+		{
 
+			this.context.setTransform(1, 0, 0, 1, 0, 0);
 
+		}
 
+
 
+		objects[i].transform(this.context, viewport);
 
+		objects[i].draw(this.context, viewport);
 
+
 
+		if(objects[i].restoreContextState)
 
+		{
 
+			this.context.restore();
 
+		}
 
 	}
 
 };
 
 
@@ -237,13 +259,13 @@ export {Renderer};
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 262 - 0
docs/Stencil.html
Fájl Megtekintése 

@@ -0,0 +1,262 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Stencil</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: Stencil</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Stencil<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Stencil"><span class="type-signature"></span>new Stencil<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    A stencil can be used to set the drawing region.

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

Multiple stencil objects can be active simulatenously.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="stencil_Stencil.js.html">stencil/Stencil.js</a>, <a href="stencil_Stencil.js.html#line12">line 12</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="draw"><span class="type-signature"></span>draw<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Activate the stencil.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="stencil_Stencil.js.html">stencil/Stencil.js</a>, <a href="stencil_Stencil.js.html#line20">line 20</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 65 - 0
docs/Stencil.js.html
Fájl Megtekintése 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: Stencil.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: Stencil.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+/**
 
+ * A stencil can be used to set the drawing region.
 
+ *
 
+ * Stencils are treated as objects their shaphe is used to filter other objects shape.
 
+ *
 
+ * @class
 
+ */
 
+function Stencil()
 
+{
 
+	//TODO &lt;ADD CODE HERE>
 
+}
 
+
 
+export {Stencil}</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 11:50:45 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 422 - 0
docs/Text.html
Fájl Megtekintése 

@@ -0,0 +1,422 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Text</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: Text</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Text<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Text"><span class="type-signature"></span>new Text<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Text element, used to draw text into the canvas.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Text.js.html">objects/Text.js</a>, <a href="objects_Text.js.html#line10">line 10</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="color"><span class="type-signature"></span>color<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Color (style) of the text.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Text.js.html">objects/Text.js</a>, <a href="objects_Text.js.html#line27">line 27</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="font"><span class="type-signature"></span>font<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Font of the text.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Text.js.html">objects/Text.js</a>, <a href="objects_Text.js.html#line22">line 22</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="text"><span class="type-signature"></span>text<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Text value.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Text.js.html">objects/Text.js</a>, <a href="objects_Text.js.html#line17">line 17</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="textAlign"><span class="type-signature"></span>textAlign<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Text align property.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Text.js.html">objects/Text.js</a>, <a href="objects_Text.js.html#line32">line 32</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 236 - 0
docs/UUID.html
Fájl Megtekintése 

@@ -0,0 +1,236 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: UUID</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: UUID</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>UUID<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="UUID"><span class="type-signature"></span>new UUID<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Implements all UUID related methods.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_UUID.js.html">math/UUID.js</a>, <a href="math_UUID.js.html#line8">line 8</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id=".generate"><span class="type-signature">(static) </span>generate<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Generate new random UUID v4 as string.

http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="math_UUID.js.html">math/UUID.js</a>, <a href="math_UUID.js.html#line15">line 15</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 262 - 0
docs/Vector2.html
Fájl Megtekintése 

@@ -0,0 +1,262 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Class: Vector2</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: Vector2</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>Vector2<span class="signature">()</span><span class="type-signature"></span></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+    
+
 
+    
+    <h4 class="name" id="Vector2"><span class="type-signature"></span>new Vector2<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line9">line 9</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="angle"><span class="type-signature"></span>angle<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Computes the angle in radians with respect to the positive x-axis
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <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#line200">line 200</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 2 - 2
docs/Viewport.html
Fájl Megtekintése 

@@ -835,13 +835,13 @@
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 3 - 3
docs/Viewport.js.html
Fájl Megtekintése 

@@ -117,7 +117,7 @@ Viewport.prototype.updateMatrix = function()
 
 {
 
 	if(this.matrixNeedsUpdate)
 
 	{
 
-		this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, this.rotation);
 
+		this.matrix.compose(this.position.x, this.position.y, this.scale, this.scale, 0, 0, this.rotation);
 
 		this.inverseMatrix = this.matrix.getInverse();
 
 		//this.matrixNeedsUpdate = false;
 
 	}
 
@@ -134,13 +134,13 @@ export {Viewport};
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 407 - 0
docs/global.html
Fájl Megtekintése 

@@ -0,0 +1,407 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Global</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">Global</h1>
 
+
 
+    
+
 
+
 
+
 
+
 
+<section>
 
+
 
+<header>
 
+    
+        <h2></h2>
 
+        
+    
+</header>
 
+
 
+<article>
 
+    <div class="container-overview">
 
+    
+        
+
 
+        
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+        
+    
+    </div>
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+        <h3 class="subsection-title">Members</h3>
 
+
 
+        
+            
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Box object containing the size of the object.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line21">line 21</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="fillStyle"><span class="type-signature"></span>fillStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Background color of the box.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line31">line 31</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+            
+<h4 class="name" id="strokeStyle"><span class="type-signature"></span>strokeStyle<span class="type-signature"></span></h4>
 
+
 
+
 
+
 
+
 
+<div class="description">
 
+    Color of the box border line.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line26">line 26</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+        <h3 class="subsection-title">Methods</h3>
 
+
 
+        
+            
+
 
+    
+
 
+    
+    <h4 class="name" id="Box"><span class="type-signature"></span>Box<span class="signature">()</span><span class="type-signature"></span></h4>
 
+    
+
 
+    
+
 
+
 
+
 
+<div class="description">
 
+    Box object draw a box.
 
+</div>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<dl class="details">
 
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+
 
+    
+    <dt class="tag-source">Source:</dt>
 
+    <dd class="tag-source"><ul class="dummy"><li>
 
+        <a href="objects_Box.js.html">objects/Box.js</a>, <a href="objects_Box.js.html#line12">line 12</a>
 
+    </li></ul></dd>
 
+    
+
 
+    
+
 
+    
+
 
+    
+</dl>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+        
+    
+
 
+    
+
 
+    
+</article>
 
+
 
+</section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul><h3>Global</h3><ul><li><a href="global.html#Box">Box</a></li><li><a href="global.html#box">box</a></li><li><a href="global.html#fillStyle">fillStyle</a></li><li><a href="global.html#strokeStyle">strokeStyle</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 11:41:33 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 2 - 2
docs/index.html
Fájl Megtekintése 

@@ -50,13 +50,13 @@
 
 </div>
 
 
 <nav>
 
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
 </nav>
 
 
 <br class="clear">
 
 
 <footer>
 
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
 </footer>
 
 
 <script> prettyPrint(); </script>

+ 135 - 0
docs/input_Key.js.html
Fájl Megtekintése 

@@ -0,0 +1,135 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: input/Key.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: input/Key.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+/**
 
+ * Key is used by Keyboard, Pointer, etc, to represent a key state.
 
+ *
 
+ * @class
 
+*/
 
+function Key()
 
+{
 
+	/**
 
+	 * Indicates if this key is currently pressed.
 
+	 */
 
+	this.pressed = false;
 
+
 
+	/**
 
+	 * Indicates if this key was just pressed.
 
+	 */
 
+	this.justPressed = false;
 
+	
+	/**
 
+	 * Indicates if this key was just released.
 
+	 */
 
+	this.justReleased = false;
 
+}
 
+
 
+
 
+Key.DOWN = -1;
 
+Key.UP = 1;
 
+Key.RESET = 0;
 
+
 
+Key.prototype.constructor = Key;
 
+
 
+/**
 
+ * Update Key status based on new key state.
 
+ */
 
+Key.prototype.update = function(action)
 
+{
 
+	this.justPressed = false;
 
+	this.justReleased = false;
 
+
 
+	if(action === Key.DOWN)
 
+	{
 
+		if(this.pressed === false)
 
+		{
 
+			this.justPressed = true;
 
+		}
 
+		this.pressed = true;
 
+	}
 
+	else if(action === Key.UP)
 
+	{
 
+		if(this.pressed)
 
+		{
 
+			this.justReleased = true;
 
+		}
 
+		this.pressed = false;
 
+	}
 
+	else if(action === Key.RESET)
 
+	{
 
+		this.justReleased = false;
 
+		this.justPressed = false;
 
+	}
 
+};
 
+
 
+/**
 
+ * Set this key attributes manually.
 
+ */
 
+Key.prototype.set = function(justPressed, pressed, justReleased)
 
+{
 
+	this.justPressed = justPressed;
 
+	this.pressed = pressed;
 
+	this.justReleased = justReleased;
 
+};
 
+
 
+/**
 
+ * Reset key to default values.
 
+*/
 
+Key.prototype.reset = function()
 
+{
 
+	this.justPressed = false;
 
+	this.pressed = false;
 
+	this.justReleased = false;
 
+};
 
+
 
+export {Key};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 452 - 0
docs/input_Pointer.js.html
Fájl Megtekintése 

@@ -0,0 +1,452 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: input/Pointer.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: input/Pointer.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {EventManager} from "../EventManager.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+import {Key} from "./Key.js";
 
+
 
+/**
 
+ * Pointer instance for input in sync with the running 3D application.
 
+ *
 
+ * The pointer object provided by scripts is automatically updated by the runtime handler.
 
+ * 
+ * @class
 
+ * @param {DOM} domElement DOM element to craete the pointer events.
 
+ * @param {Boolean} dontInitialize If true the pointer events are not created.
 
+ */
 
+function Pointer(domElement)
 
+{
 
+	//Raw data
 
+	this._keys = new Array(5);
 
+	this._position = new Vector2(0, 0);
 
+	this._positionUpdated = false;
 
+	this._delta = new Vector2(0, 0);
 
+	this._wheel = 0;
 
+	this._wheelUpdated = false;
 
+	this._doubleClicked = new Array(5);
 
+
 
+	/**
 
+	 * Array with pointer buttons status.
 
+	 */
 
+	this.keys = new Array(5);
 
+
 
+	/**
 
+	 * Pointer position inside of the window (coordinates in window space).
 
+	 */
 
+	this.position = new Vector2(0, 0);
 
+
 
+	/**
 
+	 * Pointer movement (coordinates in window space).
 
+	 */
 
+	this.delta = new Vector2(0, 0);
 
+
 
+	/**
 
+	 * Pointer scroll wheel movement.
 
+	 */
 
+	this.wheel = 0;
 
+	
+	/**
 
+	 * Indicates a button of the pointer was double clicked.
 
+	 */
 
+	this.doubleClicked = new Array(5);
 
+
 
+	/**
 
+	 * DOM element where to attach the pointer events.
 
+	 */
 
+	this.domElement = (domElement !== undefined) ? domElement : window;
 
+
 
+	/**
 
+	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
 
+	 */
 
+	this.canvas = null;
 
+	
+	/**
 
+	 * Event manager responsible for updating the raw data variables.
 
+	 *
 
+	 * Diferent events are used depending on the host platform.
 
+	 *
 
+	 * When the update method is called the raw data is reset.
 
+	 */
 
+	this.events = new EventManager();
 
+
 
+	//Initialize key instances
 
+	for(var i = 0; i &lt; 5; i++)
 
+	{
 
+		this._doubleClicked[i] = false;
 
+		this.doubleClicked[i] = false;
 
+		this._keys[i] = new Key();
 
+		this.keys[i] = new Key();
 
+	}
 
+
 
+	//Self pointer
 
+	var self = this;
 
+
 
+	//Scroll wheel
 
+	if(window.onmousewheel !== undefined)
 
+	{
 
+		//Chrome, edge
 
+		this.events.add(this.domElement, "mousewheel", function(event)
 
+		{
 
+			self._wheel = event.deltaY;
 
+			self._wheelUpdated = true;
 
+		});
 
+	}
 
+	else if(window.addEventListener !== undefined)
 
+	{
 
+		//Firefox
 
+		this.events.add(this.domElement, "DOMMouseScroll", function(event)
 
+		{
 
+			self._wheel = event.detail * 30;
 
+			self._wheelUpdated = true;
 
+		});
 
+	}
 
+	else
 
+	{
 
+		this.events.add(this.domElement, "wheel", function(event)
 
+		{
 
+			self._wheel = event.deltaY;
 
+			self._wheelUpdated = true;
 
+		});
 
+	}
 
+
 
+	//Touchscreen input events
 
+	if(window.ontouchstart !== undefined || navigator.msMaxTouchPoints > 0)
 
+	{
 
+		//Auxiliar variables to calculate touch delta
 
+		var lastTouch = new Vector2(0, 0);
 
+
 
+		//Touch start event
 
+		this.events.add(this.domElement, "touchstart", function(event)
 
+		{
 
+			var touch = event.touches[0];
 
+
 
+			self.updatePosition(touch.clientX, touch.clientY, 0, 0);
 
+			self.updateKey(Pointer.LEFT, Key.DOWN);
 
+
 
+			lastTouch.set(touch.clientX, touch.clientY);
 
+		});
 
+
 
+		//Touch end event
 
+		this.events.add(this.domElement, "touchend", function(event)
 
+		{
 
+			self.updateKey(Pointer.LEFT, Key.UP);
 
+		});
 
+
 
+		//Touch cancel event
 
+		this.events.add(this.domElement, "touchcancel", function(event)
 
+		{
 
+			self.updateKey(Pointer.LEFT, Key.UP);
 
+		});
 
+
 
+		//Touch move event
 
+		this.events.add(document.body, "touchmove", function(event)
 
+		{
 
+			var touch = event.touches[0];
 
+			self.updatePosition(touch.clientX, touch.clientY, touch.clientX - lastTouch.x, touch.clientY - lastTouch.y);
 
+			lastTouch.set(touch.clientX, touch.clientY);
 
+		});
 
+	}
 
+
 
+	//Move
 
+	this.events.add(this.domElement, "mousemove", function(event)
 
+	{
 
+		self.updatePosition(event.clientX, event.clientY, event.movementX, event.movementY);
 
+	});
 
+
 
+	//Button pressed
 
+	this.events.add(this.domElement, "mousedown", function(event)
 
+	{
 
+		self.updateKey(event.which - 1, Key.DOWN);
 
+	});
 
+
 
+	//Button released
 
+	this.events.add(this.domElement, "mouseup", function(event)
 
+	{
 
+		self.updateKey(event.which - 1, Key.UP);
 
+	});
 
+
 
+	//Drag start
 
+	this.events.add(this.domElement, "dragstart", function(event)
 
+	{
 
+		self.updateKey(event.which - 1, Key.UP);
 
+	});
 
+
 
+	//Pointer double click
 
+	this.events.add(this.domElement, "dblclick", function(event)
 
+	{	
+		self._doubleClicked[event.which - 1] = true;
 
+	});
 
+
 
+	this.create();
 
+}
 
+
 
+Pointer.prototype = Pointer;
 
+Pointer.prototype.constructor = Pointer;
 
+
 
+/**
 
+ * Left pointer button.
 
+ */
 
+Pointer.LEFT = 0;
 
+
 
+/**
 
+ * Middle pointer button.
 
+ */
 
+Pointer.MIDDLE = 1;
 
+
 
+/**
 
+ * Right pointer button.
 
+ */
 
+Pointer.RIGHT = 2;
 
+
 
+/**
 
+ * Back pointer navigation button.
 
+ */
 
+Pointer.BACK = 3;
 
+
 
+/**
 
+ * Forward pointer navigation button.
 
+ */
 
+Pointer.FORWARD = 4;
 
+
 
+/**
 
+ * Element to be used for coordinates calculation relative to that canvas.
 
+ * 
+ * @param {DOM} canvas Canvas to be attached to the Pointer instance
 
+ */
 
+Pointer.setCanvas = function(element)
 
+{
 
+	this.canvas = element;
 
+
 
+	element.pointerInside = false;
 
+
 
+	element.addEventListener("mouseenter", function()
 
+	{
 
+		this.pointerInside = true;
 
+	});
 
+
 
+	element.addEventListener("mouseleave", function()
 
+	{
 
+		this.pointerInside = false;
 
+	});
 
+};
 
+
 
+/**
 
+ * Check if pointer is inside attached canvas (updated async).
 
+ * 
+ * @return {boolean} True if pointer is currently inside the canvas
 
+ */
 
+Pointer.insideCanvas = function()
 
+{
 
+	return this.canvas !== null &amp;&amp; this.canvas.pointerInside;
 
+};
 
+
 
+/**
 
+ * Check if pointer button is currently pressed.
 
+ * 
+ * @param {Number} button Button to check status of
 
+ * @return {boolean} True if button is currently pressed
 
+ */
 
+Pointer.buttonPressed = function(button)
 
+{
 
+	return this.keys[button].pressed;
 
+};
 
+
 
+/**
 
+ * Check if pointer button was double clicked.
 
+ * 
+ * @param {Number} button Button to check status of
 
+ * @return {boolean} True if some pointer button was just double clicked
 
+ */
 
+Pointer.buttonDoubleClicked = function(button)
 
+{
 
+	return this.doubleClicked[button];
 
+};
 
+
 
+/**
 
+ * Check if a pointer button was just pressed.
 
+ * 
+ * @param {Number} button Button to check status of
 
+ * @return {boolean} True if button was just pressed
 
+ */
 
+Pointer.buttonJustPressed = function(button)
 
+{
 
+	return this.keys[button].justPressed;
 
+};
 
+
 
+/**
 
+ * Check if a pointer button was just released.
 
+ * 
+ * @param {Number} button Button to check status of
 
+ * @return {boolean} True if button was just released
 
+ */
 
+Pointer.buttonJustReleased = function(button)
 
+{
 
+	return this.keys[button].justReleased;
 
+};
 
+
 
+/**
 
+ * Update pointer position.
 
+ *
 
+ * Automatically called by the runtime.
 
+ * 
+ * @param {Number} x
 
+ * @param {Number} y
 
+ * @param {Number} xDiff
 
+ * @param {Number} yDiff
 
+ */
 
+Pointer.updatePosition = function(x, y, xDiff, yDiff)
 
+{
 
+	if(this.canvas !== null)
 
+	{
 
+		var rect = this.canvas.getBoundingClientRect();
 
+		x -= rect.left;
 
+		y -= rect.top;
 
+	}
 
+
 
+	this._position.set(x, y);
 
+	this._delta.x += xDiff;
 
+	this._delta.y += yDiff;
 
+	this._positionUpdated = true;
 
+};
 
+
 
+/**
 
+ * Update a pointer button.
 
+ * 
+ * Automatically called by the runtime.
 
+ *
 
+ * @param {Number} button
 
+ * @param {Number} action
 
+ */
 
+Pointer.updateKey = function(button, action)
 
+{
 
+	if(button > -1)
 
+	{
 
+		this._keys[button].update(action);
 
+	}
 
+};
 
+
 
+/**
 
+ * Update pointer buttons state, position, wheel and delta synchronously.
 
+ */
 
+Pointer.update = function()
 
+{
 
+	//Update pointer keys state
 
+	for(var i = 0; i &lt; 5; i++)
 
+	{
 
+		if(this._keys[i].justPressed &amp;&amp; this.keys[i].justPressed)
 
+		{
 
+			this._keys[i].justPressed = false;
 
+		}
 
+		if(this._keys[i].justReleased &amp;&amp; this.keys[i].justReleased)
 
+		{
 
+			this._keys[i].justReleased = false;
 
+		}
 
+
 
+		this.keys[i].set(this._keys[i].justPressed, this._keys[i].pressed, this._keys[i].justReleased);
 
+
 
+		//Update pointer double click
 
+		if(this._doubleClicked[i] === true)
 
+		{
 
+			this.doubleClicked[i] = true;
 
+			this._doubleClicked[i] = false;
 
+		}
 
+		else
 
+		{
 
+			this.doubleClicked[i] = false;
 
+		}
 
+	}
 
+
 
+	//Update pointer wheel
 
+	if(this._wheelUpdated)
 
+	{
 
+		this.wheel = this._wheel;
 
+		this._wheelUpdated = false;
 
+	}
 
+	else
 
+	{
 
+		this.wheel = 0;
 
+	}
 
+
 
+	//Update pointer Position if needed
 
+	if(this._positionUpdated)
 
+	{
 
+		this.delta.copy(this._delta);
 
+		this.position.copy(this._position);
 
+
 
+		this._delta.set(0,0);
 
+		this._positionUpdated = false;
 
+	}
 
+	else
 
+	{
 
+		this.delta.x = 0;
 
+		this.delta.y = 0;
 
+	}
 
+};
 
+
 
+/**
 
+ * Create pointer events.
 
+ */
 
+Pointer.create = function()
 
+{
 
+	this.events.create();
 
+};
 
+
 
+/**
 
+ * Dispose pointer events.
 
+ */
 
+Pointer.dispose = function()
 
+{
 
+	this.events.destroy();
 
+};
 
+
 
+
 
+export {Pointer};</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 249 - 0
docs/math_Box2.js.html
Fájl Megtekintése 

@@ -0,0 +1,249 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: math/Box2.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: math/Box2.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Vector2} from "./Vector2.js";
 
+
 
+/**
 
+ * Box is described by a minimum and maximum points.
 
+ *
 
+ * Can be used for collision detection with points and other boxes.
 
+ *
 
+ * @class
 
+ */
 
+function Box2(min, max)
 
+{
 
+	this.min = (min !== undefined) ? min : new Vector2();
 
+	this.max = (max !== undefined) ? max : new Vector2();
 
+}
 
+
 
+/**
 
+ * Set the box values.
 
+ */
 
+Box2.prototype.set = function(min, max)
 
+{
 
+	this.min.copy(min);
 
+	this.max.copy(max);
 
+
 
+	return this;
 
+};
 
+
 
+/**
 
+ * Set the box from a list of Vector2 points.
 
+ */
 
+Box2.prototype.setFromPoints = function(points)
 
+{
 
+	this.min = new Vector2(+Infinity, +Infinity);
 
+	this.max = new Vector2(-Infinity, -Infinity);
 
+
 
+	for(var i = 0, il = points.length; i &lt; il; i++)
 
+	{
 
+		this.expandByPoint(points[i]);
 
+	}
 
+
 
+	return this;
 
+};
 
+
 
+/** 
+ * Set the box minimum and maximum from center point and size.
 
+ */
 
+Box2.prototype.setFromCenterAndSize = function(center, size)
 
+{
 
+	var v1 = new Vector2();
 
+	var halfSize = v1.copy(size).multiplyScalar(0.5);
 
+	this.min.copy(center).sub(halfSize);
 
+	this.max.copy(center).add(halfSize);
 
+
 
+	return this;
 
+};
 
+
 
+/**
 
+ * Clone the box into a new object.
 
+ */
 
+Box2.prototype.clone = function()
 
+{
 
+	var box = new Box2();
 
+	box.copy(this);
 
+	return box;
 
+};
 
+
 
+/**
 
+ * Copy the box value from another box.
 
+ */
 
+Box2.prototype.copy = function(box)
 
+{
 
+	this.min.copy(box.min);
 
+	this.max.copy(box.max);
 
+};
 
+
 
+Box2.prototype.isEmpty = function()
 
+{
 
+	// this is a more robust check for empty than ( volume &lt;= 0 ) because volume can get positive with two negative axes
 
+	return (this.max.x &lt; this.min.x) || (this.max.y &lt; this.min.y);
 
+};
 
+
 
+Box2.prototype.getCenter = function(target)
 
+{
 
+	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
 
+};
 
+
 
+Box2.prototype.getSize = function(target)
 
+{
 
+	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
 
+};
 
+
 
+Box2.prototype.expandByPoint = function(point)
 
+{
 
+	this.min.min(point);
 
+	this.max.max(point);
 
+
 
+	return this;
 
+};
 
+
 
+Box2.prototype.expandByVector = function(vector)
 
+{
 
+	this.min.sub(vector);
 
+	this.max.add(vector);
 
+};
 
+
 
+Box2.prototype.expandByScalar = function(scalar)
 
+{
 
+	this.min.addScalar(-scalar);
 
+	this.max.addScalar(scalar);
 
+};
 
+
 
+Box2.prototype.containsPoint = function(point)
 
+{
 
+	return point.x &lt; this.min.x || point.x > this.max.x || point.y &lt; this.min.y || point.y > this.max.y ? false : true;
 
+};
 
+
 
+Box2.prototype.containsBox = function(box)
 
+{
 
+	return this.min.x &lt;= box.min.x &amp;&amp; box.max.x &lt;= this.max.x &amp;&amp; this.min.y &lt;= box.min.y &amp;&amp; box.max.y &lt;= this.max.y;
 
+};
 
+
 
+/**
 
+ * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections.
 
+ * 
+ * @param {Box2} box
 
+ */
 
+Box2.prototype.intersectsBox = function(box)
 
+{
 
+	return box.max.x &lt; this.min.x || box.min.x > this.max.x || box.max.y &lt; this.min.y || box.min.y > this.max.y ? false : true;
 
+};
 
+
 
+Box2.prototype.clampPoint = function(point, target)
 
+{
 
+	return target.copy(point).clamp(this.min, this.max);
 
+};
 
+
 
+/**
 
+ * Calculate the distance to a point.
 
+ *
 
+ * @param {Vector2} point
 
+ */
 
+Box2.prototype.distanceToPoint = function(point)
 
+{
 
+	var v = new Vector2();
 
+	var clampedPoint = v.copy(point).clamp(this.min, this.max);
 
+	return clampedPoint.sub(point).length();
 
+};
 
+
 
+/**
 
+ * Make a intersection between this box and another box.
 
+ *
 
+ * Store the result in this object.
 
+ *
 
+ * @param {Box2} box
 
+ */
 
+Box2.prototype.intersect = function(box)
 
+{
 
+	this.min.max(box.min);
 
+	this.max.min(box.max);
 
+};
 
+
 
+/**
 
+ * Make a union between this box and another box.
 
+ *
 
+ * Store the result in this object.
 
+ *
 
+ * @param {Box2} box
 
+ */
 
+Box2.prototype.union = function(box)
 
+{
 
+	this.min.min(box.min);
 
+	this.max.max(box.max);
 
+};
 
+
 
+/**
 
+ * Translate the box by a offset value, adds the offset to booth min and max.
 
+ *
 
+ * @param {Vector2} offset
 
+ */
 
+Box2.prototype.translate = function(offset)
 
+{
 
+	this.min.add(offset);
 
+	this.max.add(offset);
 
+};
 
+
 
+/**
 
+ * Checks if two boxes are equal.
 
+ *
 
+ * @param {Box2} box
 
+ * @return {boolean} True if the two boxes are equal.
 
+ */
 
+Box2.prototype.equals = function(box)
 
+{
 
+	return box.min.equals(this.min) &amp;&amp; box.max.equals(this.max);
 
+};
 
+
 
+export {Box2};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 280 - 0
docs/math_Matrix.js.html
Fájl Megtekintése 

@@ -0,0 +1,280 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: math/Matrix.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: math/Matrix.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Vector2} from "./Vector2.js";
 
+
 
+/**
 
+ * 2D 3x2 transformation matrix, applied to the canvas elements.
 
+ *
 
+ * @class
 
+ */
 
+function Matrix(values)
 
+{
 
+	if(values !== undefined)
 
+	{
 
+		this.m = values;
 
+	}
 
+	else
 
+	{
 
+		this.identity();
 
+	}
 
+}
 
+
 
+/**
 
+ * Copy the content of another matrix and store in this one.
 
+ */
 
+Matrix.prototype.copy = function(mat)
 
+{
 
+	this.m = mat.m.slice(0);
 
+};
 
+
 
+/**
 
+ * Create a new matrix object with a copy of the content of this one.
 
+ */
 
+Matrix.prototype.clone = function()
 
+{
 
+	return new Matrix(this.m.slice(0))
 
+};
 
+
 
+/**
 
+ * Reset this matrix to indentity.
 
+ */
 
+Matrix.prototype.identity = function()
 
+{
 
+	this.m = [1, 0, 0, 1, 0, 0];
 
+};
 
+
 
+/**
 
+ * Multiply another matrix by this one and store the result.
 
+ *
 
+ * @param mat Matrix array.
 
+ */
 
+Matrix.prototype.multiply = function(mat)
 
+{
 
+	var m0 = this.m[0] * mat.m[0] + this.m[2] * mat.m[1];
 
+	var m1 = this.m[1] * mat.m[0] + this.m[3] * mat.m[1];
 
+	var m2 = this.m[0] * mat.m[2] + this.m[2] * mat.m[3];
 
+	var m3 = this.m[1] * mat.m[2] + this.m[3] * mat.m[3];
 
+	var m4 = this.m[0] * mat.m[4] + this.m[2] * mat.m[5] + this.m[4];
 
+	var m5 = this.m[1] * mat.m[4] + this.m[3] * mat.m[5] + this.m[5];
 
+	
+	this.m = [m0, m1, m2, m3, m4, m5];
 
+};
 
+
 
+/**
 
+ * Premultiply another matrix by this one and store the result.
 
+ *
 
+ * @param mat Matrix array to multiply.
 
+ */
 
+Matrix.prototype.premultiply = function(mat)
 
+{
 
+	var m0 = mat.m[0] * this.m[0] + mat.m[2] * this.m[1];
 
+	var m1 = mat.m[1] * this.m[0] + mat.m[3] * this.m[1];
 
+	var m2 = mat.m[0] * this.m[2] + mat.m[2] * this.m[3];
 
+	var m3 = mat.m[1] * this.m[2] + mat.m[3] * this.m[3];
 
+	var m4 = mat.m[0] * this.m[4] + mat.m[2] * this.m[5] + mat.m[4];
 
+	var m5 = mat.m[1] * this.m[4] + mat.m[3] * this.m[5] + mat.m[5];
 
+	
+	this.m = [m0, m1, m2, m3, m4, m5];
 
+};
 
+
 
+/**
 
+ * Compose this transformation matrix with position scale and rotation and origin point.
 
+ */
 
+Matrix.prototype.compose = function(px, py, sx, sy, ox, oy, a)
 
+{
 
+	this.m = [1, 0, 0, 1, px, py];
 
+
 
+	if(a !== 0)
 
+	{		
+		var c = Math.cos(a);
 
+		var s = Math.sin(a);
 
+		this.multiply(new Matrix([c, s, -s, c, 0, 0]));
 
+	}
 
+
 
+	if(ox !== 0 || oy !== 0)
 
+	{	
+		this.multiply(new Matrix([1, 0, 0, 1, -ox, -oy]));
 
+	}
 
+
 
+	if(sx !== 1 || sy !== 1)
 
+	{
 
+		this.scale(sx, sy);
 
+	}
 
+};
 
+
 
+/**
 
+ * Apply translation to this matrix.
 
+ */
 
+Matrix.prototype.translate = function(x, y)
 
+{
 
+	this.m[4] += this.m[0] * x + this.m[2] * y;
 
+	this.m[5] += this.m[1] * x + this.m[3] * y;
 
+};
 
+
 
+/**
 
+ * Apply rotation to this matrix.
 
+ *
 
+ * @param angle Angle in radians.
 
+ */
 
+Matrix.prototype.rotate = function(rad)
 
+{
 
+	var c = Math.cos(rad);
 
+	var s = Math.sin(rad);
 
+
 
+	var m11 = this.m[0] * c + this.m[2] * s;
 
+	var m12 = this.m[1] * c + this.m[3] * s;
 
+	var m21 = this.m[0] * -s + this.m[2] * c;
 
+	var m22 = this.m[1] * -s + this.m[3] * c;
 
+
 
+	this.m[0] = m11;
 
+	this.m[1] = m12;
 
+	this.m[2] = m21;
 
+	this.m[3] = m22;
 
+};
 
+
 
+/**
 
+ * Apply scale to this matrix.
 
+ */
 
+Matrix.prototype.scale = function(sx, sy)
 
+{
 
+	this.m[0] *= sx;
 
+	this.m[1] *= sx;
 
+	this.m[2] *= sy;
 
+	this.m[3] *= sy;
 
+};
 
+
 
+/**
 
+ * Set the position of the transformation matrix.
 
+ */
 
+Matrix.prototype.setPosition = function(x, y)
 
+{
 
+	this.m[4] = x;
 
+	this.m[5] = y;
 
+};
 
+
 
+/**
 
+ * Get the scale from the transformation matrix.
 
+ */
 
+Matrix.prototype.getScale = function()
 
+{
 
+	return new Vector2(this.m[0], this.m[3]);
 
+};
 
+
 
+/**
 
+ * Get the position from the transformation matrix.
 
+ */
 
+Matrix.prototype.getPosition = function()
 
+{
 
+	return new Vector2(this.m[4], this.m[5]);
 
+};
 
+
 
+/**
 
+ * Apply skew to this matrix.
 
+ */
 
+Matrix.prototype.skew = function(radianX, radianY)
 
+{
 
+	this.multiply(new Matrix([1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0]));
 
+};
 
+
 
+/**
 
+ * Get the matrix determinant.
 
+ */
 
+Matrix.prototype.determinant = function()
 
+{
 
+	return 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
 
+};
 
+
 
+/**
 
+ * Get the inverse matrix.
 
+ */
 
+Matrix.prototype.getInverse = function()
 
+{
 
+	var d = this.determinant();
 
+
 
+	return new Matrix([this.m[3] * d, -this.m[1] * d, -this.m[2] * d, this.m[0] * d, d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]), d * (this.m[1] * this.m[4] - this.m[0] * this.m[5])]);
 
+};
 
+
 
+/**
 
+ * Transform a point using this matrix.
 
+ */
 
+Matrix.prototype.transformPoint = function(p)
 
+{
 
+	var px = p.x * this.m[0] + p.y * this.m[2] + this.m[4];
 
+	var py = p.x * this.m[1] + p.y * this.m[3] + this.m[5];
 
+
 
+	return new Vector2(px, py);
 
+};
 
+
 
+/**
 
+ * Set a canvas context to use this transformation.
 
+ */
 
+Matrix.prototype.setContextTransform = function(context)
 
+{
 
+	context.setTransform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
 
+};
 
+
 
+/**
 
+ * Transform on top of the current context transformation.
 
+ */
 
+Matrix.prototype.tranformContext = function(context)
 
+{
 
+	context.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
 
+};
 
+
 
+Matrix.prototype.cssTransform = function()
 
+{
 
+	return "matrix(" + this.m[0] + "," + this.m[1] + "," + this.m[2] + "," + this.m[3] + "," + this.m[4] + "," + this.m[5] + ")";
 
+};
 
+
 
+export {Matrix};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 90 - 0
docs/math_UUID.js.html
Fájl Megtekintése 

@@ -0,0 +1,90 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: math/UUID.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: math/UUID.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+/**
 
+ * Implements all UUID related methods.
 
+ *
 
+ * @class
 
+ */
 
+function UUID(){}
 
+
 
+/**
 
+ * Generate new random UUID v4 as string.
 
+ *
 
+ * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
 
+ */
 
+UUID.generate = (function ()
 
+{
 
+	var lut = [];
 
+
 
+	for(var i = 0; i &lt; 256; i++)
 
+	{
 
+		lut[i] = (i &lt; 16 ? "0" : "") + (i).toString(16);
 
+	}
 
+
 
+	return function generateUUID()
 
+	{
 
+		var d0 = Math.random() * 0XFFFFFFFF | 0;
 
+		var d1 = Math.random() * 0XFFFFFFFF | 0;
 
+		var d2 = Math.random() * 0XFFFFFFFF | 0;
 
+		var d3 = Math.random() * 0XFFFFFFFF | 0;
 
+
 
+		var uuid = lut[d0 &amp; 0xff] + lut[d0 >> 8 &amp; 0xff] + lut[d0 >> 16 &amp; 0xff] + lut[d0 >> 24 &amp; 0xff] + "-" +
 
+			lut[d1 &amp; 0xff] + lut[d1 >> 8 &amp; 0xff] + "-" + lut[d1 >> 16 &amp; 0x0f | 0x40] + lut[d1 >> 24 &amp; 0xff] + "-" +
 
+			lut[d2 &amp; 0x3f | 0x80] + lut[d2 >> 8 &amp; 0xff] + "-" + lut[d2 >> 16 &amp; 0xff] + lut[d2 >> 24 &amp; 0xff] +
 
+			lut[d3 &amp; 0xff] + lut[d3 >> 8 &amp; 0xff] + lut[d3 >> 16 &amp; 0xff] + lut[d3 >> 24 &amp; 0xff];
 
+
 
+		return uuid.toUpperCase();
 
+	};
 
+})();
 
+
 
+export {UUID};</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 333 - 0
docs/math_Vector2.js.html
Fájl Megtekintése 

@@ -0,0 +1,333 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: math/Vector2.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: math/Vector2.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+
 
+/** 
+ * Class representing a 2D vector. A 2D vector is an ordered pair of numbers (labeled x and y), which can be used to represent points in space, directions, etc.
 
+ *
 
+ * @class
 
+ */
 
+function Vector2(x, y)
 
+{
 
+	this.x = x || 0;
 
+	this.y = y || 0;
 
+}
 
+
 
+Vector2.prototype.set = function(x, y)
 
+{
 
+	this.x = x;
 
+	this.y = y;
 
+};
 
+
 
+Vector2.prototype.setScalar = function(scalar)
 
+{
 
+	this.x = scalar;
 
+	this.y = scalar;
 
+};
 
+
 
+Vector2.prototype.clone = function()
 
+{
 
+	return new Vector2(this.x, this.y);
 
+};
 
+
 
+Vector2.prototype.copy = function(v)
 
+{
 
+	this.x = v.x;
 
+	this.y = v.y;
 
+};
 
+
 
+Vector2.prototype.add = function(v)
 
+{
 
+	this.x += v.x;
 
+	this.y += v.y;
 
+};
 
+
 
+Vector2.prototype.addScalar = function(s)
 
+{
 
+	this.x += s;
 
+	this.y += s;
 
+};
 
+
 
+Vector2.prototype.addVectors = function(a, b)
 
+{
 
+	this.x = a.x + b.x;
 
+	this.y = a.y + b.y;
 
+};
 
+
 
+Vector2.prototype.addScaledVector = function(v, s)
 
+{
 
+	this.x += v.x * s;
 
+	this.y += v.y * s;
 
+};
 
+
 
+Vector2.prototype.sub = function(v)
 
+{
 
+	this.x -= v.x;
 
+	this.y -= v.y;
 
+};
 
+
 
+Vector2.prototype.subScalar = function(s)
 
+{
 
+	this.x -= s;
 
+	this.y -= s;
 
+};
 
+
 
+Vector2.prototype.subVectors = function(a, b)
 
+{
 
+	this.x = a.x - b.x;
 
+	this.y = a.y - b.y;
 
+};
 
+
 
+Vector2.prototype.multiply = function(v)
 
+{
 
+	this.x *= v.x;
 
+	this.y *= v.y;
 
+};
 
+
 
+Vector2.prototype.multiplyScalar = function(scalar)
 
+{
 
+	this.x *= scalar;
 
+	this.y *= scalar;
 
+};
 
+
 
+Vector2.prototype.divide = function(v)
 
+{
 
+	this.x /= v.x;
 
+	this.y /= v.y;
 
+};
 
+
 
+Vector2.prototype.divideScalar = function(scalar)
 
+{
 
+	return this.multiplyScalar(1 / scalar);
 
+};
 
+
 
+Vector2.prototype.min = function(v)
 
+{
 
+	this.x = Math.min(this.x, v.x);
 
+	this.y = Math.min(this.y, v.y);
 
+};
 
+
 
+Vector2.prototype.max = function(v)
 
+{
 
+	this.x = Math.max(this.x, v.x);
 
+	this.y = Math.max(this.y, v.y);
 
+};
 
+
 
+Vector2.prototype.clamp = function(min, max)
 
+{
 
+	// assumes min &lt; max, componentwise
 
+	this.x = Math.max(min.x, Math.min(max.x, this.x));
 
+	this.y = Math.max(min.y, Math.min(max.y, this.y));
 
+};
 
+
 
+Vector2.prototype.clampScalar = function(minVal, maxVal)
 
+{
 
+	this.x = Math.max(minVal, Math.min(maxVal, this.x));
 
+	this.y = Math.max(minVal, Math.min(maxVal, this.y));
 
+};
 
+
 
+Vector2.prototype.clampLength = function(min, max)
 
+{
 
+	var length = this.length();
 
+
 
+	return this.divideScalar(length || 1).multiplyScalar(Math.max(min, Math.min(max, length)));
 
+};
 
+
 
+Vector2.prototype.floor = function()
 
+{
 
+	this.x = Math.floor(this.x);
 
+	this.y = Math.floor(this.y);
 
+};
 
+
 
+Vector2.prototype.ceil = function()
 
+{
 
+	this.x = Math.ceil(this.x);
 
+	this.y = Math.ceil(this.y);
 
+};
 
+
 
+Vector2.prototype.round = function()
 
+{
 
+	this.x = Math.round(this.x);
 
+	this.y = Math.round(this.y);
 
+};
 
+
 
+Vector2.prototype.roundToZero = function()
 
+{
 
+	this.x = (this.x &lt; 0) ? Math.ceil(this.x) : Math.floor(this.x);
 
+	this.y = (this.y &lt; 0) ? Math.ceil(this.y) : Math.floor(this.y);
 
+};
 
+
 
+Vector2.prototype.negate = function()
 
+{
 
+	this.x = -this.x;
 
+	this.y = -this.y;
 
+
 
+	return this;
 
+};
 
+
 
+Vector2.prototype.dot = function(v)
 
+{
 
+	return this.x * v.x + this.y * v.y;
 
+};
 
+
 
+Vector2.prototype.cross = function(v)
 
+{
 
+	return this.x * v.y - this.y * v.x;
 
+};
 
+
 
+Vector2.prototype.lengthSq = function()
 
+{
 
+	return this.x * this.x + this.y * this.y;
 
+};
 
+
 
+Vector2.prototype.length = function()
 
+{
 
+	return Math.sqrt(this.x * this.x + this.y * this.y);
 
+};
 
+
 
+Vector2.prototype.manhattanLength = function()
 
+{
 
+	return Math.abs(this.x) + Math.abs(this.y);
 
+};
 
+
 
+Vector2.prototype.normalize = function()
 
+{
 
+	return this.divideScalar(this.length() || 1);
 
+};
 
+
 
+/**
 
+ * Computes the angle in radians with respect to the positive x-axis
 
+ */
 
+Vector2.prototype.angle = function()
 
+{
 
+	var angle = Math.atan2(this.y, this.x);
 
+
 
+	if(angle &lt; 0)
 
+	{
 
+		angle += 2 * Math.PI;
 
+	}
 
+	
+	return angle;
 
+};
 
+
 
+Vector2.prototype.distanceTo = function(v)
 
+{
 
+	return Math.sqrt(this.distanceToSquared(v));
 
+};
 
+
 
+Vector2.prototype.distanceToSquared = function(v)
 
+{
 
+	var dx = this.x - v.x;
 
+	var dy = this.y - v.y;
 
+
 
+	return dx * dx + dy * dy;
 
+};
 
+
 
+Vector2.prototype.manhattanDistanceTo = function(v)
 
+{
 
+	return Math.abs(this.x - v.x) + Math.abs(this.y - v.y);
 
+};
 
+
 
+Vector2.prototype.setLength = function(length)
 
+{
 
+	return this.normalize().multiplyScalar(length);
 
+};
 
+
 
+Vector2.prototype.lerp = function(v, alpha)
 
+{
 
+	this.x += (v.x - this.x) * alpha;
 
+	this.y += (v.y - this.y) * alpha;
 
+};
 
+
 
+Vector2.prototype.lerpVectors = function(v1, v2, alpha)
 
+{
 
+	return this.subVectors(v2, v1).multiplyScalar(alpha).add(v1);
 
+};
 
+
 
+Vector2.prototype.equals = function(v)
 
+{
 
+	return ((v.x === this.x) &amp;&amp; (v.y === this.y));
 
+};
 
+
 
+Vector2.prototype.fromArray = function(array, offset)
 
+{
 
+	if(offset === undefined) offset = 0;
 
+
 
+	this.x = array[offset];
 
+	this.y = array[offset + 1];
 
+};
 
+
 
+Vector2.prototype.toArray = function(array, offset)
 
+{
 
+	if(array === undefined) array = [];
 
+	if(offset === undefined) offset = 0;
 
+
 
+	array[offset] = this.x;
 
+	array[offset + 1] = this.y;
 
+
 
+	return array;
 
+};
 
+
 
+Vector2.prototype.rotateAround = function(center, angle)
 
+{
 
+	var c = Math.cos(angle);
 
+	var s = Math.sin(angle);
 
+
 
+	var x = this.x - center.x;
 
+	var y = this.y - center.y;
 
+
 
+	this.x = x * c - y * s + center.x;
 
+	this.y = x * s + y * c + center.y;
 
+};
 
+
 
+export {Vector2};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 117 - 0
docs/objects_Box.js.html
Fájl Megtekintése 

@@ -0,0 +1,117 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/Box.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/Box.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+import {Box2} from "../math/Box2.js";
 
+import {Helpers} from "../utils/Helpers.js";
 
+import {Circle} from "./Circle.js";
 
+
 
+/**
 
+ * Box object draw a box.
 
+ *
 
+ * @class
 
+ */
 
+function Box()
 
+{
 
+	Object2D.call(this);
 
+
 
+	var self = this;
 
+
 
+	/**
 
+	 * Box object containing the size of the object.
 
+	 */
 
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
 
+
 
+	/**
 
+	 * Color of the box border line.
 
+	 */
 
+	this.strokeStyle = "#000000";
 
+
 
+	/**
 
+	 * Background color of the box.
 
+	 */
 
+	this.fillStyle = "#FFFFFF";
 
+}
 
+
 
+Box.prototype = Object.create(Object2D.prototype);
 
+
 
+Box.prototype.onPointerEnter = function(pointer, viewport)
 
+{
 
+	this.fillStyle = "#CCCCCC";
 
+};
 
+
 
+Box.prototype.onPointerLeave = function(pointer, viewport)
 
+{
 
+	this.fillStyle = "#FFFFFF";
 
+};
 
+
 
+Box.prototype.isInside = function(point)
 
+{
 
+	return this.box.containsPoint(point);
 
+};
 
+
 
+Box.prototype.draw = function(context)
 
+{
 
+	var width = this.box.max.x - this.box.min.x;
 
+	var height = this.box.max.y - this.box.min.y;
 
+
 
+	context.fillStyle = this.fillStyle;
 
+	context.fillRect(this.box.min.x, this.box.min.y, width, height);
 
+
 
+	context.lineWidth = 1;
 
+	context.strokeStyle = this.strokeStyle;
 
+	context.strokeRect(this.box.min.x, this.box.min.y, width, height);
 
+};
 
+
 
+export {Box};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 114 - 0
docs/objects_Circle.js.html
Fájl Megtekintése 

@@ -0,0 +1,114 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/Circle.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/Circle.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+
 
+/**
 
+ * Circle object draw a circular object, into the canvas.
 
+ *
 
+ * @class
 
+ */
 
+function Circle()
 
+{
 
+	Object2D.call(this);
 
+
 
+	/**
 
+	 * Radius of the circle.
 
+	 */
 
+	this.radius = 10.0;
 
+
 
+	/**
 
+	 * Color of the circle border line.
 
+	 */
 
+	this.strokeStyle = "#000000";
 
+
 
+	/**
 
+	 * Background color of the circle.
 
+	 */
 
+	this.fillStyle = "#FFFFFF";
 
+}
 
+
 
+Circle.prototype = Object.create(Object2D.prototype);
 
+
 
+Circle.prototype.isInside = function(point)
 
+{
 
+	return point.length() &lt;= this.radius;
 
+};
 
+
 
+Circle.prototype.onPointerEnter = function(pointer, viewport)
 
+{
 
+	this.fillStyle = "#CCCCCC";
 
+};
 
+
 
+Circle.prototype.onPointerLeave = function(pointer, viewport)
 
+{
 
+	this.fillStyle = "#FFFFFF";
 
+};
 
+
 
+Circle.prototype.draw = function(context)
 
+{
 
+	context.fillStyle = this.fillStyle;
 
+
 
+	context.beginPath();
 
+	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 
+	context.fill();
 
+
 
+	context.lineWidth = 1;
 
+	context.strokeStyle = this.strokeStyle;
 
+
 
+	context.beginPath();
 
+	context.arc(0, 0, this.radius, 0, 2 * Math.PI);
 
+	context.stroke();
 
+};
 
+
 
+export {Circle};</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 103 - 0
docs/objects_DOM.js.html
Fájl Megtekintése 

@@ -0,0 +1,103 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/DOM.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/DOM.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+
 
+/**
 
+ * A DOM object transformed using CSS3D to ver included in the graph.
 
+ *
 
+ * DOM objects always stay on top of everything else, mouse events are not supported for these.
 
+ *
 
+ * Use the normal DOM events for interaction.
 
+ *
 
+ * @class
 
+ * @param parent Parent DOM element that contains the drawing canvas.
 
+ * @param type Type of the DOM element (e.g. "div", "p", ...)
 
+ */
 
+function DOM(parent, type)
 
+{
 
+	Object2D.call(this);
 
+
 
+	/**
 
+	 * DOM element contained by this object.
 
+	 */
 
+	this.element = document.createElement("div");
 
+	this.element.style.transformStyle = "preserve-3d";
 
+	this.element.style.position = "absolute";
 
+	this.element.style.top = "0px";
 
+	this.element.style.bottom = "0px";
 
+	this.element.style.transformOrigin = "0px 0px";
 
+	this.element.style.overflow = "auto";
 
+	parent.appendChild(this.element);
 
+	
+	/**
 
+	 * Size of the DOM element (in world coordinates).
 
+	 */
 
+	this.size = new Vector2(100, 100);
 
+}
 
+
 
+DOM.prototype = Object.create(Object2D.prototype);
 
+
 
+DOM.prototype.draw = function(context, viewport)
 
+{
 
+	// CSS trasnformation matrix
 
+	var projection = viewport.matrix.clone();
 
+	projection.multiply(this.globalMatrix);
 
+	this.element.style.transform = projection.cssTransform();
 
+
 
+	// Size of the element
 
+	this.element.style.width = this.size.x + "px";
 
+	this.element.style.height = this.size.y + "px";
 
+};
 
+
 
+export {DOM};</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 115 - 0
docs/objects_Image.js.html
Fájl Megtekintése 

@@ -0,0 +1,115 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/Image.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/Image.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+import {Box2} from "../math/Box2.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+
 
+/**
 
+ * Image object is used to draw an image from URL.
 
+ *
 
+ * @class
 
+ * @param {string} [src] Source URL of the image.
 
+ */
 
+function Image(src)
 
+{
 
+	Object2D.call(this);
 
+	
+	/**
 
+	 * Box object containing the size of the object.
 
+	 */
 
+	this.box = new Box2();
 
+
 
+	/**
 
+	 * Image source DOM element.
 
+	 */
 
+	this.image = document.createElement("img");
 
+
 
+	if(src !== undefined)
 
+	{
 
+		this.setImage(src);
 
+	}
 
+}
 
+
 
+Image.prototype = Object.create(Object2D.prototype);
 
+
 
+/**
 
+ * Set the image of the object.
 
+ *
 
+ * Automatically sets the box size to match the image.
 
+ *
 
+ * @param {string} src Source URL of the image.
 
+ */
 
+Image.prototype.setImage = function(src)
 
+{
 
+	var self = this;
 
+
 
+	this.image.onload = function()
 
+	{
 
+		self.box.min.set(0, 0);
 
+		self.box.max.set(this.naturalWidth, this.naturalHeight);
 
+	};
 
+	this.image.src = src;
 
+};
 
+
 
+Image.prototype.isInside = function(point)
 
+{
 
+	return this.box.containsPoint(point);
 
+};
 
+
 
+Image.prototype.draw = function(context)
 
+{
 
+	context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
 
+};
 
+
 
+export {Image};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 110 - 0
docs/objects_Line.js.html
Fájl Megtekintése 

@@ -0,0 +1,110 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/Line.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/Line.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+
 
+/**
 
+ * Line object draw a line from one point to another.
 
+ *
 
+ * @class
 
+ */
 
+function Line()
 
+{
 
+	Object2D.call(this);
 
+
 
+	/**
 
+	 * Initial point of the line.
 
+	 *
 
+	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
 
+	 */
 
+	this.from = new Vector2();
 
+
 
+	/**
 
+	 * Final point of the line.
 
+	 *
 
+	 * Can be equal to the position object of another object. (Making it automatically follow that object.)
 
+	 */
 
+	this.to = new Vector2();
 
+
 
+	/**
 
+	 * Color of the line.
 
+	 */
 
+	this.strokeStyle = "#000000";
 
+
 
+	/**
 
+	 * Dash line pattern to be used, is empty draws a solid line.
 
+	 */
 
+	this.dashPattern = [5, 5];
 
+
 
+	/**
 
+	 * Line width.
 
+	 */
 
+	this.lineWidth = 1;
 
+}
 
+
 
+Line.prototype = Object.create(Object2D.prototype);
 
+
 
+Line.prototype.draw = function(context)
 
+{
 
+	context.lineWidth = this.lineWidth;
 
+	context.strokeStyle = this.strokeStyle;
 
+	context.setLineDash(this.dashPattern);
 
+	
+	context.beginPath();
 
+	context.moveTo(this.from.x, this.from.y);
 
+	context.lineTo(this.to.x, this.to.y);
 
+	context.stroke();
 
+};
 
+
 
+export {Line};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 128 - 0
docs/objects_Pattern.js.html
Fájl Megtekintése 

@@ -0,0 +1,128 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/Pattern.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/Pattern.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+import {Vector2} from "../math/Vector2.js";
 
+import {Box2} from "../math/Box2.js";
 
+import {Helpers} from "../utils/Helpers.js";
 
+import {Circle} from "./Circle.js";
 
+
 
+/**
 
+ * Pattern object draw a image repeated as a pattern.
 
+ *
 
+ * Its similar to the Image class but the image can be repeat infinitly.
 
+ *
 
+ * @class
 
+ */
 
+function Pattern(src)
 
+{
 
+	Object2D.call(this);
 
+
 
+	/**
 
+	 * Box object containing the size of the object.
 
+	 */
 
+	this.box = new Box2();
 
+
 
+	/**
 
+	 * Image source DOM element.
 
+	 */
 
+	this.image = document.createElement("img");
 
+
 
+	/**
 
+	 * A DOMString indicating how to repeat the pattern image.
 
+	 */
 
+	this.repetition = "repeat"
 
+
 
+	if(src !== undefined)
 
+	{
 
+		this.setImage(src);
 
+	}
 
+}
 
+
 
+Pattern.prototype = Object.create(Object2D.prototype);
 
+
 
+/**
 
+ * Set the image of the object.
 
+ *
 
+ * Automatically sets the box size to match the image.
 
+ */
 
+Pattern.prototype.setImage = function(src)
 
+{
 
+	var self = this;
 
+
 
+	this.image.onload = function()
 
+	{
 
+		self.box.min.set(0, 0);
 
+		self.box.max.set(this.naturalWidth, this.naturalHeight);
 
+	};
 
+	this.image.src = src;
 
+};
 
+
 
+Pattern.prototype.isInside = function(point)
 
+{
 
+	return this.box.containsPoint(point);
 
+};
 
+
 
+Pattern.prototype.draw = function(context, viewport)
 
+{
 
+	var width = this.box.max.x - this.box.min.x;
 
+	var height = this.box.max.y - this.box.min.y;
 
+
 
+	var pattern = context.createPattern(this.image, this.repetition);
 
+	//pattern.setTransform();
 
+
 
+	context.fillStyle = pattern;
 
+	context.fillRect(this.box.min.x, this.box.min.y, width, height);
 
+};
 
+
 
+export {Pattern};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 97 - 0
docs/objects_Text.js.html
Fájl Megtekintése 

@@ -0,0 +1,97 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: objects/Text.js</title>
 
+
 
+    <script src="scripts/prettify/prettify.js"> </script>
 
+    <script src="scripts/prettify/lang-css.js"> </script>
 
+    <!--[if lt IE 9]>
 
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
+    <![endif]-->
 
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
 
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
 
+</head>
 
+
 
+<body>
 
+
 
+<div id="main">
 
+
 
+    <h1 class="page-title">Source: objects/Text.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Object2D} from "../Object2D.js";
 
+
 
+/**
 
+ * Text element, used to draw text into the canvas.
 
+ *
 
+ * @class
 
+ */
 
+function Text()
 
+{
 
+	Object2D.call(this);
 
+
 
+	/**
 
+	 * Text value.
 
+	 */
 
+	this.text = "";
 
+
 
+	/**
 
+	 * Font of the text.
 
+	 */
 
+	this.font = "16px Arial";
 
+
 
+	/**
 
+	 * Color (style) of the text.
 
+	 */
 
+	this.color = "#000000";
 
+
 
+	/**
 
+	 * Text align property.
 
+	 */
 
+	this.textAlign = "center";
 
+}
 
+
 
+Text.prototype = Object.create(Object2D.prototype);
 
+
 
+Text.prototype.draw = function(context)
 
+{
 
+	context.font = this.font;
 
+	context.textAlign = this.textAlign;
 
+	context.fillStyle = this.color;
 
+
 
+	context.fillText(this.text, 0, 0);
 
+};
 
+
 
+export {Text};
 
+</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 75 - 0
docs/stencil_Stencil.js.html
Fájl Megtekintése 

@@ -0,0 +1,75 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: stencil/Stencil.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: stencil/Stencil.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+/**
 
+ * A stencil can be used to set the drawing region.
 
+ *
 
+ * Stencils are treated as objects their shaphe is used to filter other objects shape.
 
+ *
 
+ * Multiple stencil objects can be active simulatenously.
 
+ *
 
+ * @class
 
+ */
 
+function Stencil()
 
+{
 
+	//TODO &lt;ADD CODE HERE>
 
+}
 
+
 
+/**
 
+ * Activate the stencil.
 
+ */
 
+Stencil.prototype.draw = function()
 
+{
 
+	// body...
 
+};
 
+
 
+export {Stencil};</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 154 - 0
docs/utils_Helpers.js.html
Fájl Megtekintése 

@@ -0,0 +1,154 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>JSDoc: Source: utils/Helpers.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/Helpers.js</h1>
 
+
 
+    
+
 
+
 
+
 
+    
+    <section>
 
+        <article>
 
+            <pre class="prettyprint source linenums"><code>"use strict";
 
+
 
+import {Circle} from "../objects/Circle.js";
 
+import {Object2D} from "../Object2D.js";
 
+
 
+function Helpers(){}
 
+
 
+
 
+/**
 
+ * Create a rotation tool
 
+ */
 
+Helpers.rotateTool = function(object)
 
+{
 
+	var tool = new Circle();
 
+	tool.radius = 4;
 
+	tool.layer = object.layer + 1;
 
+	tool.onPointerDrag = function(pointer, viewport, delta)
 
+	{
 
+		object.rotation += delta.x * 1e-3;
 
+	};
 
+	object.add(tool);
 
+};
 
+
 
+/**
 
+ * Create a box resize helper and attach it to an object to change the size of the object box.
 
+ *
 
+ * Each helper is positioned on one corner of the box, and the value of the corner is copied to the boxes as they are dragged.
 
+ *
 
+ * This method required to object to have a box property.
 
+ */
 
+Helpers.boxResizeTool = function(object)
 
+{
 
+	if(object.box === undefined)
 
+	{
 
+		console.warn("trenette.js: Helpers.boxResizeTool(), object box property missing.");
 
+		return;
 
+	}
 
+
 
+	function updateHelpers()
 
+	{
 
+		topRight.position.copy(object.box.min);
 
+		bottomLeft.position.copy(object.box.max);
 
+		topLeft.position.set(object.box.max.x, object.box.min.y);
 
+		bottomRight.position.set(object.box.min.x, object.box.max.y);
 
+	}
 
+
 
+	var topRight = new Circle();
 
+	topRight.radius = 4;
 
+	topRight.layer = object.layer + 1;
 
+	topRight.draggable = true;
 
+	topRight.onPointerDrag = function(pointer, viewport, delta)
 
+	{
 
+		Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
 
+
 
+		object.box.min.copy(topRight.position);
 
+		updateHelpers();
 
+	};
 
+	object.add(topRight);
 
+
 
+	var topLeft = new Circle();
 
+	topLeft.radius = 4;
 
+	topLeft.layer = object.layer + 1;
 
+	topLeft.draggable = true;
 
+	topLeft.onPointerDrag = function(pointer, viewport, delta)
 
+	{
 
+		Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
 
+
 
+		object.box.max.x = topLeft.position.x;
 
+		object.box.min.y = topLeft.position.y;
 
+		updateHelpers();
 
+	};
 
+	object.add(topLeft);
 
+
 
+	var bottomLeft = new Circle();
 
+	bottomLeft.radius = 4;
 
+	bottomLeft.layer = object.layer + 1;
 
+	bottomLeft.draggable = true;
 
+	bottomLeft.onPointerDrag = function(pointer, viewport, delta)
 
+	{
 
+		Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
 
+
 
+		object.box.max.copy(bottomLeft.position);
 
+		updateHelpers();
 
+	};
 
+	object.add(bottomLeft);
 
+
 
+	var bottomRight = new Circle();
 
+	bottomRight.radius = 4;
 
+	bottomRight.layer = object.layer + 1;
 
+	bottomRight.draggable = true;
 
+	bottomRight.onPointerDrag = function(pointer, viewport, delta)
 
+	{
 
+		Object2D.prototype.onPointerDrag.call(this, pointer, viewport, delta);
 
+
 
+		object.box.min.x = bottomRight.position.x;
 
+		object.box.max.y = bottomRight.position.y;
 
+		updateHelpers();
 
+	};
 
+	object.add(bottomRight);
 
+
 
+	updateHelpers();
 
+};
 
+
 
+export {Helpers};</code></pre>
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+
 
+</div>
 
+
 
+<nav>
 
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
 
+</nav>
 
+
 
+<br class="clear">
 
+
 
+<footer>
 
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 12:05:48 GMT+0100 (Western European Summer Time)
 
+</footer>
 
+
 
+<script> prettyPrint(); </script>
 
+<script src="scripts/linenumber.js"> </script>
 
+</body>
 
+</html>

+ 1 - 1
examples/diagram.html
Fájl Megtekintése 

@@ -77,7 +77,7 @@
 
 
 		// Create the diagram
 
 		var group = new Trenette.Object2D();
 
-		var image = new Trenette.Image("grid.png");
 
+		var image = new Trenette.Pattern("grid.png");
 
 		image.position.set(-300, -400);
 
 		image.layer = 5;
 
 		image.draggable = true;

+ 1 - 1
package.json
Fájl Megtekintése 

@@ -9,7 +9,7 @@
 
 	},
 
 	"scripts": {
 
 		"build": "rollup -c && npm run uglify",
 
-		"docs": "jsdoc -d docs source",
 
+		"docs": "jsdoc -d docs -r source",
 
 		"uglify": "uglifyjs --compress --mangle --output build/trenette.min.js -- build/trenette.js",
 
 		"pub": "npm run build && npm run docs && npm publish --access public ."
 
 	},

+ 0 - 1
source/Object2D.js
Fájl Megtekintése 

@@ -109,7 +109,6 @@ function Object2D()
 
 	 */
 
 	this.restoreContextState = true;
 
 
-
 
 	/**
 
 	 * Flag indicating if the pointer is inside of the element.
 
 	 *

+ 2 - 1
source/Trenette.js
Fájl Megtekintése 

@@ -4,7 +4,8 @@ export {EventManager} from "./EventManager.js";
 
 export {Object2D} from "./Object2D.js";
 
 export {Renderer} from "./Renderer.js";
 
 export {Viewport} from "./Viewport.js";
 
-export {Stencil}
 
+
 
+export {Stencil} from "./stencil/Stencil.js";
 
 
 export {Key} from "./input/Key.js";
 
 export {Pointer} from "./input/Pointer.js";

+ 50 - 13
source/math/Box2.js
Fájl Megtekintése 

@@ -15,6 +15,9 @@ function Box2(min, max)
 
 	this.max = (max !== undefined) ? max : new Vector2();
 
 }
 
 
+/**
 
+ * Set the box values.
 
+ */
 
 Box2.prototype.set = function(min, max)
 
 {
 
 	this.min.copy(min);
 
@@ -23,6 +26,9 @@ Box2.prototype.set = function(min, max)
 
 	return this;
 
 };
 
 
+/**
 
+ * Set the box from a list of Vector2 points.
 
+ */
 
 Box2.prototype.setFromPoints = function(points)
 
 {
 
 	this.min = new Vector2(+Infinity, +Infinity);
 
@@ -36,6 +42,9 @@ Box2.prototype.setFromPoints = function(points)
 
 	return this;
 
 };
 
 
+/** 
+ * Set the box minimum and maximum from center point and size.
 
+ */
 
 Box2.prototype.setFromCenterAndSize = function(center, size)
 
 {
 
 	var v1 = new Vector2();
 
@@ -46,6 +55,9 @@ Box2.prototype.setFromCenterAndSize = function(center, size)
 
 	return this;
 
 };
 
 
+/**
 
+ * Clone the box into a new object.
 
+ */
 
 Box2.prototype.clone = function()
 
 {
 
 	var box = new Box2();
 
@@ -53,12 +65,13 @@ Box2.prototype.clone = function()
 
 	return box;
 
 };
 
 
+/**
 
+ * Copy the box value from another box.
 
+ */
 
 Box2.prototype.copy = function(box)
 
 {
 
 	this.min.copy(box.min);
 
 	this.max.copy(box.max);
 
-
 
-	return this;
 
 };
 
 
 Box2.prototype.isEmpty = function()
 
@@ -89,16 +102,12 @@ Box2.prototype.expandByVector = function(vector)
 
 {
 
 	this.min.sub(vector);
 
 	this.max.add(vector);
 
-
 
-	return this;
 
 };
 
 
 Box2.prototype.expandByScalar = function(scalar)
 
 {
 
 	this.min.addScalar(-scalar);
 
 	this.max.addScalar(scalar);
 
-
 
-	return this;
 
 };
 
 
 Box2.prototype.containsPoint = function(point)
 
@@ -111,7 +120,11 @@ Box2.prototype.containsBox = function(box)
 
 	return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y;
 
 };
 
 
-// using 4 splitting planes to rule out intersections
 
+/**
 
+ * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections.
 
+ * 
+ * @param {Box2} box
 
+ */
 
 Box2.prototype.intersectsBox = function(box)
 
 {
 
 	return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y ? false : true;
 
@@ -122,6 +135,11 @@ Box2.prototype.clampPoint = function(point, target)
 
 	return target.copy(point).clamp(this.min, this.max);
 
 };
 
 
+/**
 
+ * Calculate the distance to a point.
 
+ *
 
+ * @param {Vector2} point
 
+ */
 
 Box2.prototype.distanceToPoint = function(point)
 
 {
 
 	var v = new Vector2();
 
@@ -129,30 +147,49 @@ Box2.prototype.distanceToPoint = function(point)
 
 	return clampedPoint.sub(point).length();
 
 };
 
 
+/**
 
+ * Make a intersection between this box and another box.
 
+ *
 
+ * Store the result in this object.
 
+ *
 
+ * @param {Box2} box
 
+ */
 
 Box2.prototype.intersect = function(box)
 
 {
 
 	this.min.max(box.min);
 
 	this.max.min(box.max);
 
-
 
-	return this;
 
 };
 
 
+/**
 
+ * Make a union between this box and another box.
 
+ *
 
+ * Store the result in this object.
 
+ *
 
+ * @param {Box2} box
 
+ */
 
 Box2.prototype.union = function(box)
 
 {
 
 	this.min.min(box.min);
 
 	this.max.max(box.max);
 
-
 
-	return this;
 
 };
 
 
+/**
 
+ * Translate the box by a offset value, adds the offset to booth min and max.
 
+ *
 
+ * @param {Vector2} offset
 
+ */
 
 Box2.prototype.translate = function(offset)
 
 {
 
 	this.min.add(offset);
 
 	this.max.add(offset);
 
-
 
-	return this;
 
 };
 
 
+/**
 
+ * Checks if two boxes are equal.
 
+ *
 
+ * @param {Box2} box
 
+ * @return {boolean} True if the two boxes are equal.
 
+ */
 
 Box2.prototype.equals = function(box)
 
 {
 
 	return box.min.equals(this.min) && box.max.equals(this.max);

+ 2 - 0
source/objects/Box.js
Fájl Megtekintése 

@@ -8,6 +8,8 @@ import {Circle} from "./Circle.js";
 
 
 /**
 
  * Box object draw a box.
 
+ *
 
+ * @class
 
  */
 
 function Box()
 
 {

+ 4 - 2
source/objects/Image.js
Fájl Megtekintése 

@@ -8,7 +8,7 @@ import {Vector2} from "../math/Vector2.js";
 
  * Image object is used to draw an image from URL.
 
  *
 
  * @class
 
- * @param src Source URL of the image (optional) 
+ * @param {string} [src] Source URL of the image.
 
  */
 
 function Image(src)
 
 {
 
@@ -17,7 +17,7 @@ function Image(src)
 
 	/**
 
 	 * Box object containing the size of the object.
 
 	 */
 
-	this.box = new Box2(new Vector2(0, 0), new Vector2(0, 0));
 
+	this.box = new Box2();
 
 
 	/**
 
 	 * Image source DOM element.
 
@@ -36,6 +36,8 @@ Image.prototype = Object.create(Object2D.prototype);
 
  * Set the image of the object.
 
  *
 
  * Automatically sets the box size to match the image.
 
+ *
 
+ * @param {string} src Source URL of the image.
 
  */
 
 Image.prototype.setImage = function(src)
 
 {

+ 40 - 4
source/objects/Pattern.js
Fájl Megtekintése 

@@ -2,17 +2,26 @@
 
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
-import {Pattern2} from "../math/Pattern2.js";
 
+import {Box2} from "../math/Box2.js";
 
 import {Helpers} from "../utils/Helpers.js";
 
 import {Circle} from "./Circle.js";
 
 
 /**
 
- * Pattern object draw a box.
 
+ * Pattern object draw a image repeated as a pattern.
 
+ *
 
+ * Its similar to the Image class but the image can be repeat infinitly.
 
+ *
 
+ * @class
 
  */
 
-function Pattern()
 
+function Pattern(src)
 
 {
 
 	Object2D.call(this);
 
 
+	/**
 
+	 * Box object containing the size of the object.
 
+	 */
 
+	this.box = new Box2();
 
+
 
 	/**
 
 	 * Image source DOM element.
 
 	 */
 
@@ -22,10 +31,37 @@ function Pattern()
 
 	 * A DOMString indicating how to repeat the pattern image.
 
 	 */
 
 	this.repetition = "repeat"
 
+
 
+	if(src !== undefined)
 
+	{
 
+		this.setImage(src);
 
+	}
 
 }
 
 
 Pattern.prototype = Object.create(Object2D.prototype);
 
 
+/**
 
+ * Set the image of the object.
 
+ *
 
+ * Automatically sets the box size to match the image.
 
+ */
 
+Pattern.prototype.setImage = function(src)
 
+{
 
+	var self = this;
 
+
 
+	this.image.onload = function()
 
+	{
 
+		self.box.min.set(0, 0);
 
+		self.box.max.set(this.naturalWidth, this.naturalHeight);
 
+	};
 
+	this.image.src = src;
 
+};
 
+
 
+Pattern.prototype.isInside = function(point)
 
+{
 
+	return this.box.containsPoint(point);
 
+};
 
+
 
 Pattern.prototype.draw = function(context, viewport)
 
 {
 
 	var width = this.box.max.x - this.box.min.x;
 
@@ -34,7 +70,7 @@ Pattern.prototype.draw = function(context, viewport)
 
 	var pattern = context.createPattern(this.image, this.repetition);
 
 	//pattern.setTransform();
 
 
-	context.fillStyle = this.fillStyle;
 
+	context.fillStyle = pattern;
 
 	context.fillRect(this.box.min.x, this.box.min.y, width, height);
 
 };

+ 13 - 1
source/Stencil.js → source/stencil/Stencil.js
Fájl Megtekintése 

@@ -4,10 +4,22 @@
 
  * A stencil can be used to set the drawing region.
 
  *
 
  * Stencils are treated as objects their shaphe is used to filter other objects shape.
 
+ *
 
+ * Multiple stencil objects can be active simulatenously.
 
+ *
 
+ * @class
 
  */
 
 function Stencil()
 
 {
 
 	//TODO <ADD CODE HERE>
 
 }
 
 
-export {Stencil}
 
+/**
 
+ * Activate the stencil.
 
+ */
 
+Stencil.prototype.draw = function()
 
+{
 
+	// body...
 
+};
 
+
 
+export {Stencil};

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott