Export viewport controls

build/trenette.js

@@ -1637,9 +1637,10 @@
 		this.rotationPoint = null;
 	}
 
-
 	/**
 	 * Calculate and update the viewport transformation matrix.
+	 *
+	 * Also updates the inverse matrix of the viewport.
 	 */
 	Viewport.prototype.updateMatrix = function()
 	{
@@ -1654,6 +1655,8 @@
 	/**
 	 * Center the viewport relative to a object.
 	 *
+	 * The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
+	 *
 	 * @param {Object2D} object Object to be centered on the viewport.
 	 * @param {DOM} canvas Canvas element where the image is drawn.
 	 */
@@ -1683,11 +1686,15 @@
 
 		/**
 		 * Button used to drag and viewport around.
+		 *
+		 * On touch enabled devices the touch event is represented as a LEFT button.
 		 */
 		this.dragButton = Pointer.RIGHT;
 
 		/**
 		 * Is set to true allow the viewport to be scalled.
+		 *
+		 * Scaling is performed using the pointer scroll.
 		 */
 		this.allowScale = true;
 
@@ -1700,6 +1707,8 @@
 
 		/**
 		 * If true allows the viewport to be rotated.
+		 *
+		 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
 		 */
 		this.allowRotation = false;
 
@@ -1719,6 +1728,8 @@
 	/**
 	 * Update the viewport controls using the pointer object.
 	 *
+	 * Should be called every frame before rendering.
+	 *
 	 * @param {Pointer} pointer
 	 */
 	ViewportControls.prototype.update = function(pointer)
@@ -3137,6 +3148,7 @@
 	exports.UUID = UUID;
 	exports.Vector2 = Vector2;
 	exports.Viewport = Viewport;
+	exports.ViewportControls = ViewportControls;
 
 	Object.defineProperty(exports, '__esModule', { value: true });
 

build/trenette.module.js

@@ -1631,9 +1631,10 @@ function Viewport()
 	this.rotationPoint = null;
 }
 
-
 /**
  * Calculate and update the viewport transformation matrix.
+ *
+ * Also updates the inverse matrix of the viewport.
  */
 Viewport.prototype.updateMatrix = function()
 {
@@ -1648,6 +1649,8 @@ Viewport.prototype.updateMatrix = function()
 /**
  * Center the viewport relative to a object.
  *
+ * The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
+ *
  * @param {Object2D} object Object to be centered on the viewport.
  * @param {DOM} canvas Canvas element where the image is drawn.
  */
@@ -1677,11 +1680,15 @@ function ViewportControls(viewport)
 
 	/**
 	 * Button used to drag and viewport around.
+	 *
+	 * On touch enabled devices the touch event is represented as a LEFT button.
 	 */
 	this.dragButton = Pointer.RIGHT;
 
 	/**
 	 * Is set to true allow the viewport to be scalled.
+	 *
+	 * Scaling is performed using the pointer scroll.
 	 */
 	this.allowScale = true;
 
@@ -1694,6 +1701,8 @@ function ViewportControls(viewport)
 
 	/**
 	 * If true allows the viewport to be rotated.
+	 *
+	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
 	 */
 	this.allowRotation = false;
 
@@ -1713,6 +1722,8 @@ function ViewportControls(viewport)
 /**
  * Update the viewport controls using the pointer object.
  *
+ * Should be called every frame before rendering.
+ *
  * @param {Pointer} pointer
  */
 ViewportControls.prototype.update = function(pointer)
@@ -3109,4 +3120,4 @@ BezierCurve.prototype.draw = function(context, viewport, canvas)
 	context.stroke();
 };
 
-export { BezierCurve, Box, Box2, BoxMask, Circle, DOM, EventManager, Graph, Helpers, Image, Key, Line, Mask, Matrix, Object2D, Pattern, Pointer, Renderer, Text, UUID, Vector2, Viewport };
+export { BezierCurve, Box, Box2, BoxMask, Circle, DOM, EventManager, Graph, Helpers, Image, Key, Line, Mask, Matrix, Object2D, Pattern, Pointer, Renderer, Text, UUID, Vector2, Viewport, ViewportControls };

docs/BezierCurve.html

@@ -691,7 +691,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box.html

@@ -413,7 +413,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box2.html

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

docs/BoxMask.html

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

docs/Circle.html

@@ -413,7 +413,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/DOM.html

@@ -413,7 +413,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

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

docs/EventManager.js.html

@@ -111,7 +111,7 @@ export {EventManager};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Graph.html

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

docs/Helpers.html

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

docs/Image.html

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

docs/Key.html

@@ -619,7 +619,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -475,7 +475,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Mask.html

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

docs/Matrix.html

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

docs/Object2D.html

@@ -3094,7 +3094,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -379,7 +379,7 @@ export {Object2D};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

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

docs/Pointer.html

@@ -2560,7 +2560,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -750,7 +750,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -333,7 +333,7 @@ export {Renderer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

@@ -413,7 +413,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

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

docs/Vector2.html

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

docs/Viewport.html

@@ -719,7 +719,7 @@
 
 
 <div class="description">
-    Center the viewport relative to a object.
+    Center the viewport relative to a object.

The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
 </div>
 
 
@@ -835,7 +835,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line85">line 85</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line88">line 88</a>
     </li></ul></dd>
     
 
@@ -879,7 +879,7 @@
 
 
 <div class="description">
-    Calculate and update the viewport transformation matrix.
+    Calculate and update the viewport transformation matrix.

Also updates the inverse matrix of the viewport.
 </div>
 
 
@@ -923,7 +923,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line69">line 69</a>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line70">line 70</a>
     </li></ul></dd>
     
 
@@ -975,7 +975,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -90,9 +90,10 @@ function Viewport()
 	this.rotationPoint = null;
 }
 
-
 /**
  * Calculate and update the viewport transformation matrix.
+ *
+ * Also updates the inverse matrix of the viewport.
  */
 Viewport.prototype.updateMatrix = function()
 {
@@ -107,6 +108,8 @@ Viewport.prototype.updateMatrix = function()
 /**
  * Center the viewport relative to a object.
  *
+ * The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
+ *
  * @param {Object2D} object Object to be centered on the viewport.
  * @param {DOM} canvas Canvas element where the image is drawn.
  */
@@ -138,7 +141,7 @@ export {Viewport};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/ViewportControls.html

@@ -198,7 +198,7 @@
 
 
 <div class="description">
-    If true allows the viewport to be rotated.
+    If true allows the viewport to be rotated.

Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
 </div>
 
 
@@ -236,7 +236,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line39">line 39</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line45">line 45</a>
     </li></ul></dd>
     
 
@@ -260,7 +260,7 @@
 
 
 <div class="description">
-    Is set to true allow the viewport to be scalled.
+    Is set to true allow the viewport to be scalled.

Scaling is performed using the pointer scroll.
 </div>
 
 
@@ -298,7 +298,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line27">line 27</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line31">line 31</a>
     </li></ul></dd>
     
 
@@ -322,7 +322,7 @@
 
 
 <div class="description">
-    Button used to drag and viewport around.
+    Button used to drag and viewport around.

On touch enabled devices the touch event is represented as a LEFT button.
 </div>
 
 
@@ -360,7 +360,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line22">line 22</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line24">line 24</a>
     </li></ul></dd>
     
 
@@ -422,7 +422,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line34">line 34</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line38">line 38</a>
     </li></ul></dd>
     
 
@@ -484,7 +484,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line51">line 51</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line57">line 57</a>
     </li></ul></dd>
     
 
@@ -546,7 +546,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line46">line 46</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line52">line 52</a>
     </li></ul></dd>
     
 
@@ -644,7 +644,7 @@
 
 
 <div class="description">
-    Update the viewport controls using the pointer object.
+    Update the viewport controls using the pointer object.

Should be called every frame before rendering.
 </div>
 
 
@@ -737,7 +737,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line59">line 59</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line67">line 67</a>
     </li></ul></dd>
     
 
@@ -789,7 +789,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:07 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/controls_ViewportControls.js.html

@@ -46,11 +46,15 @@ function ViewportControls(viewport)
 
 	/**
 	 * Button used to drag and viewport around.
+	 *
+	 * On touch enabled devices the touch event is represented as a LEFT button.
 	 */
 	this.dragButton = Pointer.RIGHT;
 
 	/**
 	 * Is set to true allow the viewport to be scalled.
+	 *
+	 * Scaling is performed using the pointer scroll.
 	 */
 	this.allowScale = true;
 
@@ -63,6 +67,8 @@ function ViewportControls(viewport)
 
 	/**
 	 * If true allows the viewport to be rotated.
+	 *
+	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
 	 */
 	this.allowRotation = false;
 
@@ -82,6 +88,8 @@ function ViewportControls(viewport)
 /**
  * Update the viewport controls using the pointer object.
  *
+ * Should be called every frame before rendering.
+ *
  * @param {Pointer} pointer
  */
 ViewportControls.prototype.update = function(pointer)
@@ -143,7 +151,7 @@ export {ViewportControls};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/index.html

@@ -56,7 +56,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Key.js.html

@@ -126,7 +126,7 @@ export {Key};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Pointer.js.html

@@ -443,7 +443,7 @@ export {Pointer};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -316,7 +316,7 @@ export {Box2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -274,7 +274,7 @@ export {Matrix};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_UUID.js.html

@@ -83,7 +83,7 @@ export {UUID};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -485,7 +485,7 @@ export {Vector2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_BezierCurve.js.html

@@ -154,7 +154,7 @@ export {BezierCurve};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Box.js.html

@@ -111,7 +111,7 @@ export {Box};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Circle.js.html

@@ -107,7 +107,7 @@ export {Circle};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -114,7 +114,7 @@ export {DOM};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Graph.js.html

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

docs/objects_Image.js.html

@@ -109,7 +109,7 @@ export {Image};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

@@ -101,7 +101,7 @@ export {Line};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Pattern.js.html

@@ -121,7 +121,7 @@ export {Pattern};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Text.js.html

@@ -89,7 +89,7 @@ export {Text};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_BoxMask.js.html

@@ -100,7 +100,7 @@ export {BoxMask};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_Mask.js.html

@@ -77,7 +77,7 @@ export {Mask};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_Helpers.js.html

@@ -155,7 +155,7 @@ export {Helpers};</code></pre>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Wed Jun 12 2019 09:13:16 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 09:46:06 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

package.json

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

source/Trenette.js

@@ -25,4 +25,6 @@ export {Pattern} from "./objects/Pattern.js";
 export {Graph} from "./objects/Graph.js";
 export {BezierCurve} from "./objects/BezierCurve.js";
 
+export {ViewportControls} from "./controls/ViewportControls.js";
+
 export {Helpers} from "./utils/Helpers.js";

source/Viewport.js

@@ -62,9 +62,10 @@ function Viewport()
 	this.rotationPoint = null;
 }
 
-
 /**
  * Calculate and update the viewport transformation matrix.
+ *
+ * Also updates the inverse matrix of the viewport.
  */
 Viewport.prototype.updateMatrix = function()
 {
@@ -79,6 +80,8 @@ Viewport.prototype.updateMatrix = function()
 /**
  * Center the viewport relative to a object.
  *
+ * The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
+ *
  * @param {Object2D} object Object to be centered on the viewport.
  * @param {DOM} canvas Canvas element where the image is drawn.
  */

source/controls/ViewportControls.js

@@ -18,11 +18,15 @@ function ViewportControls(viewport)
 
 	/**
 	 * Button used to drag and viewport around.
+	 *
+	 * On touch enabled devices the touch event is represented as a LEFT button.
 	 */
 	this.dragButton = Pointer.RIGHT;
 
 	/**
 	 * Is set to true allow the viewport to be scalled.
+	 *
+	 * Scaling is performed using the pointer scroll.
 	 */
 	this.allowScale = true;
 
@@ -35,6 +39,8 @@ function ViewportControls(viewport)
 
 	/**
 	 * If true allows the viewport to be rotated.
+	 *
+	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
 	 */
 	this.allowRotation = false;
 
@@ -54,6 +60,8 @@ function ViewportControls(viewport)
 /**
  * Update the viewport controls using the pointer object.
  *
+ * Should be called every frame before rendering.
+ *
  * @param {Pointer} pointer
  */
 ViewportControls.prototype.update = function(pointer)