centerObject

build/trenette.js

@@ -979,6 +979,20 @@
 	 */
 	Object2D.prototype.draw = function(context, viewport, canvas){};
 
+	/**
+	 * Callback method while the object is being dragged across the screen.
+	 *
+	 * By default is adds the delta value to the object position (making it follow the mouse movement).
+	 *
+	 * Delta is the movement of the pointer already translated into local object coordinates.
+	 *
+	 * Receives (pointer, viewport, delta) as arguments.
+	 */
+	Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
+	{
+		this.position.add(delta);
+	};
+
 	/**
 	 * Method called when the object its added to a parent.
 	 *
@@ -1021,20 +1035,6 @@
 	 */
 	Object2D.prototype.onPointerOver = null;
 
-	/**
-	 * Callback method while the object is being dragged across the screen.
-	 *
-	 * By default is adds the delta value to the object position (making it follow the mouse movement).
-	 *
-	 * Delta is the movement of the pointer already translated into local object coordinates.
-	 *
-	 * Receives (pointer, viewport, delta) as arguments.
-	 */
-	Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
-	{
-		this.position.add(delta);
-	};
-
 	/**
 	 * Callback method called while the pointer button is pressed.
 	 *
@@ -1882,7 +1882,7 @@
 
 			if(this.moveOnScale)
 			{	
-				var speed = pointer.wheel / this.scale;
+				var speed = pointer.wheel;
 				var halfWidth = pointer.canvas.width / 2;
 				var halfWeight = pointer.canvas.height / 2;
 
@@ -1893,7 +1893,7 @@
 
 		if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 		{
-			this.rotation += pointer.delta.angle() * 1e-2;
+			this.rotation += pointer.delta.angle() * 1e-3;
 		}
 		else if(pointer.buttonPressed(Pointer.RIGHT))
 		{
@@ -1917,6 +1917,23 @@
 		}
 	};
 
+	/**
+	 * Center the viewport relative to a object.
+	 *
+	 * @param {Object2D} object Object to be centered on the viewport.
+	 * @param {DOM} canvas Canvas element where the image is drawn.
+	 */
+	Viewport.prototype.centerObject = function(object, canvas)
+	{
+		var position = object.globalMatrix.transformPoint(new Vector2());
+		position.multiplyScalar(-this.scale);
+
+		position.x += canvas.width / 2;
+		position.y += canvas.height / 2;
+
+		this.position.copy(position);
+	};
+
 	/**
 	 * Box is described by a minimum and maximum points.
 	 *
@@ -2174,6 +2191,8 @@
 	 *
 	 * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
 	 *
+	 * A mask objects is draw using the context.clip() method.
+	 *
 	 * @class
 	 */
 	function Mask()

build/trenette.module.js

@@ -973,6 +973,20 @@ Object2D.prototype.transform = function(context, viewport)
  */
 Object2D.prototype.draw = function(context, viewport, canvas){};
 
+/**
+ * Callback method while the object is being dragged across the screen.
+ *
+ * By default is adds the delta value to the object position (making it follow the mouse movement).
+ *
+ * Delta is the movement of the pointer already translated into local object coordinates.
+ *
+ * Receives (pointer, viewport, delta) as arguments.
+ */
+Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
+{
+	this.position.add(delta);
+};
+
 /**
  * Method called when the object its added to a parent.
  *
@@ -1015,20 +1029,6 @@ Object2D.prototype.onPointerLeave = null;
  */
 Object2D.prototype.onPointerOver = null;
 
-/**
- * Callback method while the object is being dragged across the screen.
- *
- * By default is adds the delta value to the object position (making it follow the mouse movement).
- *
- * Delta is the movement of the pointer already translated into local object coordinates.
- *
- * Receives (pointer, viewport, delta) as arguments.
- */
-Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
-{
-	this.position.add(delta);
-};
-
 /**
  * Callback method called while the pointer button is pressed.
  *
@@ -1876,7 +1876,7 @@ Viewport.prototype.updateControls = function(pointer)
 
 		if(this.moveOnScale)
 		{	
-			var speed = pointer.wheel / this.scale;
+			var speed = pointer.wheel;
 			var halfWidth = pointer.canvas.width / 2;
 			var halfWeight = pointer.canvas.height / 2;
 
@@ -1887,7 +1887,7 @@ Viewport.prototype.updateControls = function(pointer)
 
 	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 	{
-		this.rotation += pointer.delta.angle() * 1e-2;
+		this.rotation += pointer.delta.angle() * 1e-3;
 	}
 	else if(pointer.buttonPressed(Pointer.RIGHT))
 	{
@@ -1911,6 +1911,23 @@ Viewport.prototype.updateMatrix = function()
 	}
 };
 
+/**
+ * Center the viewport relative to a object.
+ *
+ * @param {Object2D} object Object to be centered on the viewport.
+ * @param {DOM} canvas Canvas element where the image is drawn.
+ */
+Viewport.prototype.centerObject = function(object, canvas)
+{
+	var position = object.globalMatrix.transformPoint(new Vector2());
+	position.multiplyScalar(-this.scale);
+
+	position.x += canvas.width / 2;
+	position.y += canvas.height / 2;
+
+	this.position.copy(position);
+};
+
 /**
  * Box is described by a minimum and maximum points.
  *
@@ -2168,6 +2185,8 @@ Box2.prototype.equals = function(box)
  *
  * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
  *
+ * A mask objects is draw using the context.clip() method.
+ *
  * @class
  */
 function Mask()

docs/BezierCurve.html

@@ -211,9 +211,7 @@
 
 
 <div class="description">
-    Initial point of the curve.
-
-Can be equal to the position object of another object. (Making it automatically follow that object.)
+    Initial point of the curve.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 </div>
 
 
@@ -461,9 +459,7 @@ Can be equal to the position object of another object. (Making it automatically
 
 
 <div class="description">
-    Final point of the curve.
-
-Can be equal to the position object of another object. (Making it automatically follow that object.)
+    Final point of the curve.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 </div>
 
 
@@ -695,7 +691,7 @@ Can be equal to the position object of another object. (Making it automatically
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box2.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Box is described by a minimum and maximum points.
-
-Can be used for collision detection with points and other boxes.
+    Box is described by a minimum and maximum points.

Can be used for collision detection with points and other boxes.
 </div>
 
 
@@ -247,9 +245,7 @@ Can be used for collision detection with points and other boxes.
 
 
 <div class="description">
-    Check if the box fully contains another box inside (different from intersects box).
-
-Only returns true if the box is fully contained.
+    Check if the box fully contains another box inside (different from intersects box).

Only returns true if the box is fully contained.
 </div>
 
 
@@ -1127,9 +1123,7 @@ Only returns true if the box is fully contained.
 
 
 <div class="description">
-    Expand the box by adding a border with the vector size.
-
-Vector is subtracted from min and added to the max points.
+    Expand the box by adding a border with the vector size.

Vector is subtracted from min and added to the max points.
 </div>
 
 
@@ -1393,9 +1387,7 @@ Vector is subtracted from min and added to the max points.
 
 
 <div class="description">
-    Make a intersection between this box and another box.
-
-Store the result in this object.
+    Make a intersection between this box and another box.

Store the result in this object.
 </div>
 
 
@@ -1691,9 +1683,7 @@ Store the result in this object.
 
 
 <div class="description">
-    Check if the box is empty (size equals zero or is negative).
-
-The box size is condireded valid on two negative axis.
+    Check if the box is empty (size equals zero or is negative).

The box size is condireded valid on two negative axis.
 </div>
 
 
@@ -2182,9 +2172,7 @@ The box size is condireded valid on two negative axis.
 
 
 <div class="description">
-    Make a union between this box and another box.
-
-Store the result in this object.
+    Make a union between this box and another box.

Store the result in this object.
 </div>
 
 
@@ -2329,7 +2317,7 @@ Store the result in this object.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxMask.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Box mask can be used to clear a box mask region.
-
-It will limit the drwaing region to this box.
+    Box mask can be used to clear a box mask region.

It will limit the drwaing region to this box.
 </div>
 
 
@@ -442,7 +440,7 @@ It will limit the drwaing region to this box.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line32">line 32</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line34">line 34</a>
     </li></ul></dd>
     
 
@@ -494,7 +492,7 @@ It will limit the drwaing region to this box.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/DOM.html

@@ -49,11 +49,7 @@
 
 
 <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.
+    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>
 
 
@@ -215,9 +211,7 @@ Use the normal DOM events for interaction.
 
 
 <div class="description">
-    DOM element contained by this object.
-
-Bye default it has the pointerEvents style set to none.
+    DOM element contained by this object.

Bye default it has the pointerEvents style set to none.
 </div>
 
 
@@ -419,7 +413,7 @@ Bye default it has the pointerEvents style set to none.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    EventManager is used to manager DOM events creationg and destruction in a single function call.
-
-It is used by objects to make it easier to add and remove events from global DOM objects.
+    EventManager is used to manager DOM events creationg and destruction in a single function call.

It is used by objects to make it easier to add and remove events from global DOM objects.
 </div>
 
 
@@ -151,9 +149,7 @@ It is used by objects to make it easier to add and remove events from global DOM
 
 
 <div class="description">
-    Stores all events in the manager, their target and callback.
-
-Format [target, event, callback, active]
+    Stores all events in the manager, their target and callback.

Format [target, event, callback, active]
 </div>
 
 
@@ -692,7 +688,7 @@ Format [target, event, callback, active]
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Graph.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Graph object is used to draw simple graph data into the canvas.
-
-Graph data is composed of X, Y values.
+    Graph object is used to draw simple graph data into the canvas.

Graph data is composed of X, Y values.
 </div>
 
 
@@ -213,9 +211,7 @@ Graph data is composed of X, Y values.
 
 
 <div class="description">
-    Data to be presented in the graph.
-
-The array should store numeric values.
+    Data to be presented in the graph.

The array should store numeric values.
 </div>
 
 
@@ -603,7 +599,7 @@ The array should store numeric values.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Helpers.html

@@ -157,11 +157,7 @@
 
 
 <div class="description">
-    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.
+    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.
 </div>
 
 
@@ -249,9 +245,7 @@ This method required to object to have a box property.
 
 
 <div class="description">
-    Create a rotation tool helper.
-
-When the object is dragged is changes the parent object rotation.
+    Create a rotation tool helper.

When the object is dragged is changes the parent object rotation.
 </div>
 
 
@@ -347,7 +341,7 @@ When the object is dragged is changes the parent object rotation.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Image.html

@@ -346,9 +346,7 @@
 
 
 <div class="description">
-    Set the image of the object.
-
-Automatically sets the box size to match the image.
+    Set the image of the object.

Automatically sets the box size to match the image.
 </div>
 
 
@@ -493,7 +491,7 @@ Automatically sets the box size to match the image.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -211,9 +211,7 @@
 
 
 <div class="description">
-    Initial point of the line.
-
-Can be equal to the position object of another object. (Making it automatically follow that object.)
+    Initial point of the line.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 </div>
 
 
@@ -399,9 +397,7 @@ Can be equal to the position object of another object. (Making it automatically
 
 
 <div class="description">
-    Final point of the line.
-
-Can be equal to the position object of another object. (Making it automatically follow that object.)
+    Final point of the line.

Can be equal to the position object of another object. (Making it automatically follow that object.)
 </div>
 
 
@@ -479,7 +475,7 @@ Can be equal to the position object of another object. (Making it automatically
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Mask.html

@@ -49,11 +49,7 @@
 
 
 <div class="description">
-    A mask can be used to set the drawing region.
-
-Masks are treated as objects their shape is used to filter other objects shape.
-
-Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
+    A mask can be used to set the drawing region.

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

Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.

A mask objects is draw using the context.clip() method.
 </div>
 
 
@@ -97,7 +93,7 @@ Multiple mask objects can be active simulatenously, they have to be attached to
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line16">line 16</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line18">line 18</a>
     </li></ul></dd>
     
 
@@ -300,7 +296,7 @@ Multiple mask objects can be active simulatenously, they have to be attached to
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line32">line 32</a>
+        <a href="objects_mask_Mask.js.html">objects/mask/Mask.js</a>, <a href="objects_mask_Mask.js.html#line34">line 34</a>
     </li></ul></dd>
     
 
@@ -352,7 +348,7 @@ Multiple mask objects can be active simulatenously, they have to be attached to
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

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

docs/Object2D.html

@@ -273,9 +273,7 @@
 
 
 <div class="description">
-    Indicates if its possible to drag the object around.
-
-If true the onPointerDrag callback is used to update the state of the object.
+    Indicates if its possible to drag the object around.

If true the onPointerDrag callback is used to update the state of the object.
 </div>
 
 
@@ -337,9 +335,7 @@ If true the onPointerDrag callback is used to update the state of the object.
 
 
 <div class="description">
-    Global transformation matrix multiplied by the parent matrix.
-
-Used to transform the object before projecting into screen coordinates.
+    Global transformation matrix multiplied by the parent matrix.

Used to transform the object before projecting into screen coordinates.
 </div>
 
 
@@ -463,9 +459,7 @@ Used to transform the object before projecting into screen coordinates.
 
 
 <div class="description">
-    Inverse of the global matrix.
-
-Used to convert pointer input points into object coordinates.
+    Inverse of the global matrix.

Used to convert pointer input points into object coordinates.
 </div>
 
 
@@ -527,9 +521,7 @@ Used to convert pointer input points into object coordinates.
 
 
 <div class="description">
-    Layer of this object, objects are sorted by layer value.
-
-Lower layer value is draw first.
+    Layer of this object, objects are sorted by layer value.

Lower layer value is draw first.
 </div>
 
 
@@ -591,9 +583,7 @@ Lower layer value is draw first.
 
 
 <div class="description">
-    Depth level in the object tree, objects with higher depth are drawn on top.
-
-The layer value is considered first.
+    Depth level in the object tree, objects with higher depth are drawn on top.

The layer value is considered first.
 </div>
 
 
@@ -655,9 +645,7 @@ The layer value is considered first.
 
 
 <div class="description">
-    Masks being applied to this object.
-
-Multiple masks can be used simultaneously.
+    Masks being applied to this object.

Multiple masks can be used simultaneously.
 </div>
 
 
@@ -843,9 +831,7 @@ Multiple masks can be used simultaneously.
 
 
 <div class="description">
-    Method called when the object its added to a parent.
-
-Receives (parent) as arguments.
+    Method called when the object its added to a parent.

Receives (parent) as arguments.
 </div>
 
 
@@ -883,7 +869,7 @@ Receives (parent) as arguments.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line265">line 265</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
     </li></ul></dd>
     
 
@@ -907,9 +893,7 @@ Receives (parent) as arguments.
 
 
 <div class="description">
-    Callback method called when the pointer button is pressed down (single time).
-
-Receives (pointer, viewport) as arguments.
+    Callback method called when the pointer button is pressed down (single time).

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -971,9 +955,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called while the pointer button is pressed.
-
-Receives (pointer, viewport) as arguments.
+    Callback method called while the pointer button is pressed.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1035,9 +1017,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called when the pointer button is released (single time).
-
-Receives (pointer, viewport) as arguments.
+    Callback method called when the pointer button is released (single time).

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1099,9 +1079,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called when the pointer enters the object.
-
-Receives (pointer, viewport) as arguments.
+    Callback method called when the pointer enters the object.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1139,7 +1117,7 @@ Receives (pointer, viewport) as arguments.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line286">line 286</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line300">line 300</a>
     </li></ul></dd>
     
 
@@ -1163,9 +1141,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method called when the was inside of the object and leaves 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>
 
 
@@ -1203,7 +1179,7 @@ Receives (pointer, viewport) as arguments.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line293">line 293</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -1227,9 +1203,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Callback method while the pointer is over (inside) of the object.
-
-Receives (pointer, viewport) as arguments.
+    Callback method while the pointer is over (inside) of the object.

Receives (pointer, viewport) as arguments.
 </div>
 
 
@@ -1267,7 +1241,7 @@ Receives (pointer, viewport) as arguments.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line300">line 300</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line314">line 314</a>
     </li></ul></dd>
     
 
@@ -1291,9 +1265,7 @@ Receives (pointer, viewport) as arguments.
 
 
 <div class="description">
-    Method called when the object gets removed from its parent
-
-Receives (parent) as arguments.
+    Method called when the object gets removed from its parent

Receives (parent) as arguments.
 </div>
 
 
@@ -1331,7 +1303,7 @@ Receives (parent) as arguments.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line272">line 272</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line286">line 286</a>
     </li></ul></dd>
     
 
@@ -1355,9 +1327,7 @@ Receives (parent) as arguments.
 
 
 <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.
+    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>
 
 
@@ -1395,7 +1365,7 @@ Can be used to run preparation code, move the object, etc.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line279">line 279</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line293">line 293</a>
     </li></ul></dd>
     
 
@@ -1543,9 +1513,7 @@ Can be used to run preparation code, move the object, etc.
 
 
 <div class="description">
-    Indicates if this object uses pointer events.
-
-Can be set false to skip the pointer interaction events.
+    Indicates if this object uses pointer events.

Can be set false to skip the pointer interaction events.
 </div>
 
 
@@ -1607,9 +1575,7 @@ Can be set false to skip the pointer interaction events.
 
 
 <div class="description">
-    Flag indicating if the pointer is inside of the element.
-
-Used to control object event.
+    Flag indicating if the pointer is inside of the element.

Used to control object event.
 </div>
 
 
@@ -2249,9 +2215,7 @@ Used to control object event.
 
 
 <div class="description">
-    Draw the object into the canvas.
-
-Has to be implemented by underlying classes.
+    Draw the object into the canvas.

Has to be implemented by underlying classes.
 </div>
 
 
@@ -2522,13 +2486,7 @@ Has to be implemented by underlying classes.
 
 
 <div class="description">
-    Callback method while the object is being dragged across the screen.
-
-By default is adds the delta value to the object position (making it follow the mouse movement).
-
-Delta is the movement of the pointer already translated into local object coordinates.
-
-Receives (pointer, viewport, delta) as arguments.
+    Callback method while the object is being dragged across the screen.

By default is adds the delta value to the object position (making it follow the mouse movement).

Delta is the movement of the pointer already translated into local object coordinates.

Receives (pointer, viewport, delta) as arguments.
 </div>
 
 
@@ -2572,7 +2530,7 @@ Receives (pointer, viewport, delta) as arguments.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line311">line 311</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line269">line 269</a>
     </li></ul></dd>
     
 
@@ -2748,11 +2706,7 @@ Receives (pointer, viewport, delta) as arguments.
 
 
 <div class="description">
-    Apply the transform to the rendering context.
-
-It is assumed that the viewport transform is pre-applied to the context.
-
-Can also be used for pre rendering logic.
+    Apply the transform to the rendering context.

It is assumed that the viewport transform is pre-applied to the context.

Can also be used for pre rendering logic.
 </div>
 
 
@@ -3140,7 +3094,7 @@ Can also be used for pre rendering logic.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -285,6 +285,20 @@ Object2D.prototype.transform = function(context, viewport)
  */
 Object2D.prototype.draw = function(context, viewport, canvas){};
 
+/**
+ * Callback method while the object is being dragged across the screen.
+ *
+ * By default is adds the delta value to the object position (making it follow the mouse movement).
+ *
+ * Delta is the movement of the pointer already translated into local object coordinates.
+ *
+ * Receives (pointer, viewport, delta) as arguments.
+ */
+Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
+{
+	this.position.add(delta);
+};
+
 /**
  * Method called when the object its added to a parent.
  *
@@ -327,20 +341,6 @@ Object2D.prototype.onPointerLeave = null;
  */
 Object2D.prototype.onPointerOver = null;
 
-/**
- * Callback method while the object is being dragged across the screen.
- *
- * By default is adds the delta value to the object position (making it follow the mouse movement).
- *
- * Delta is the movement of the pointer already translated into local object coordinates.
- *
- * Receives (pointer, viewport, delta) as arguments.
- */
-Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
-{
-	this.position.add(delta);
-};
-
 /**
  * Callback method called while the pointer button is pressed.
  *
@@ -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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

@@ -49,9 +49,7 @@
 
 
 <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.
+    Pattern object draw a image repeated as a pattern.

Its similar to the Image class but the image can be repeat infinitly.
 </div>
 
 
@@ -349,9 +347,7 @@ Its similar to the Image class but the image can be repeat infinitly.
 
 
 <div class="description">
-    Set the image of the object.
-
-Automatically sets the box size to match the image.
+    Set the image of the object.

Automatically sets the box size to match the image.
 </div>
 
 
@@ -447,7 +443,7 @@ Automatically sets the box size to match the image.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    Pointer instance for input in sync with the running 3D application.
-
-The pointer object provided by scripts is automatically updated by the runtime handler.
+    Pointer instance for input in sync with the running 3D application.

The pointer object provided by scripts is automatically updated by the runtime handler.
 </div>
 
 
@@ -781,11 +779,7 @@ The pointer object provided by scripts is automatically updated by the runtime h
 
 
 <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.
+    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>
 
 
@@ -2192,9 +2186,7 @@ When the update method is called the raw data is reset.
 
 
 <div class="description">
-    Update a pointer button.
-
-Automatically called by the runtime.
+    Update a pointer button.

Automatically called by the runtime.
 </div>
 
 
@@ -2354,9 +2346,7 @@ Automatically called by the runtime.
 
 
 <div class="description">
-    Update pointer position.
-
-Automatically called by the runtime.
+    Update pointer position.

Automatically called by the runtime.
 </div>
 
 
@@ -2570,7 +2560,7 @@ Automatically called by the runtime.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -49,9 +49,7 @@
 
 
 <div class="description">
-    The renderer is resposible for drawing the structure into the canvas element.
-
-Its also resposible for managing the canvas state.
+    The renderer is resposible for drawing the structure into the canvas element.

Its also resposible for managing the canvas state.
 </div>
 
 
@@ -411,9 +409,7 @@ Its also resposible for managing the canvas state.
 
 
 <div class="description">
-    Creates a infinite render loop to render the group into a viewport each frame.
-
-The render loop cannot be destroyed.
+    Creates a infinite render loop to render the group into a viewport each frame.

The render loop cannot be destroyed.
 </div>
 
 
@@ -596,13 +592,7 @@ The render loop cannot be destroyed.
 
 
 <div class="description">
-    Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.
-
-Render the object using the viewport into a canvas element.
-
-The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one.
-
-Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop.
+    Update the renderer state, update the input handlers, calculate the object and viewport transformation matrices.

Render the object using the viewport into a canvas element.

The canvas state is saved and restored for each individual object, ensuring that the code of one object does not affect another one.

Should be called at a fixed rate preferably using the requestAnimationFrame() method, its also possible to use the createRenderLoop() method, that automatically creates a infinite render loop.
 </div>
 
 
@@ -760,7 +750,7 @@ Should be called at a fixed rate preferably using the requestAnimationFrame() me
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -330,7 +330,7 @@ export {Renderer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

@@ -149,9 +149,7 @@
 
 
 <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
+    Generate new random UUID v4 as string.

http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
 </div>
 
 
@@ -229,7 +227,7 @@ http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascrip
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Vector2.html

@@ -1727,9 +1727,7 @@
 
 
 <div class="description">
-    Set the maximum of x and y coordinates between two vectors.
-
-X is set as the max between this vector and the other vector.
+    Set the maximum of x and y coordinates between two vectors.

X is set as the max between this vector and the other vector.
 </div>
 
 
@@ -1866,9 +1864,7 @@ X is set as the max between this vector and the other vector.
 
 
 <div class="description">
-    Set the minimum of x and y coordinates between two vectors.
-
-X is set as the min between this vector and the other vector.
+    Set the minimum of x and y coordinates between two vectors.

X is set as the min between this vector and the other vector.
 </div>
 
 
@@ -3309,7 +3305,7 @@ X is set as the min between this vector and the other vector.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.html

@@ -335,9 +335,7 @@
 
 
 <div class="description">
-    Flag to indicate if the viewport should move when scalling.
-
-For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+    Flag to indicate if the viewport should move when scalling.

For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
 </div>
 
 
@@ -523,9 +521,7 @@ For some application its easier to focus the target if the viewport moves to the
 
 
 <div class="description">
-    Value of the initial point of rotation if the viewport is being rotated.
-
-Is set to null when the viewport is not being rotated.
+    Value of the initial point of rotation if the viewport is being rotated.

Is set to null when the viewport is not being rotated.
 </div>
 
 
@@ -709,6 +705,166 @@ Is set to null when the viewport is not being rotated.
     
         <h3 class="subsection-title">Methods</h3>
 
+        
+            
+
+    
+
+    
+    <h4 class="name" id="centerObject"><span class="type-signature"></span>centerObject<span class="signature">(object, canvas)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Center the viewport relative to a 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>object</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Object2D.html">Object2D</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Object to be centered on the viewport.</td>
+        </tr>
+
+    
+
+        <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 element where the image is drawn.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="Viewport.js.html">Viewport.js</a>, <a href="Viewport.js.html#line117">line 117</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         
             
 
@@ -907,7 +1063,7 @@ Is set to null when the viewport is not being rotated.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -101,7 +101,7 @@ Viewport.prototype.updateControls = function(pointer)
 
 		if(this.moveOnScale)
 		{	
-			var speed = pointer.wheel / this.scale;
+			var speed = pointer.wheel;
 			var halfWidth = pointer.canvas.width / 2;
 			var halfWeight = pointer.canvas.height / 2;
 
@@ -112,7 +112,7 @@ Viewport.prototype.updateControls = function(pointer)
 
 	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 	{
-		this.rotation += pointer.delta.angle() * 1e-2;
+		this.rotation += pointer.delta.angle() * 1e-3;
 	}
 	else if(pointer.buttonPressed(Pointer.RIGHT))
 	{
@@ -136,6 +136,23 @@ Viewport.prototype.updateMatrix = function()
 	}
 };
 
+/**
+ * Center the viewport relative to a object.
+ *
+ * @param {Object2D} object Object to be centered on the viewport.
+ * @param {DOM} canvas Canvas element where the image is drawn.
+ */
+Viewport.prototype.centerObject = function(object, canvas)
+{
+	var position = object.globalMatrix.transformPoint(new Vector2());
+	position.multiplyScalar(-this.scale);
+
+	position.x += canvas.width / 2;
+	position.y += canvas.height / 2;
+
+	this.position.copy(position);
+};
+
 export {Viewport};
 </code></pre>
         </article>
@@ -153,7 +170,7 @@ export {Viewport};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -297,7 +297,7 @@ export {Box2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -271,7 +271,7 @@ export {Matrix};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -439,7 +439,7 @@ export {Vector2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_Mask.js.html

@@ -39,6 +39,8 @@ import {Box2} from "../../math/Box2.js";
  *
  * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
  *
+ * A mask objects is draw using the context.clip() method.
+ *
  * @class
  */
 function Mask()
@@ -75,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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 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 Mon Jun 10 2019 15:53:44 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 11 2019 14:45:44 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

examples/diagram.html

@@ -192,6 +192,10 @@
 		circle.radius = 60;
 		circle.position.set(300, 0);
 		circle.draggable = true;
+		circle.onButtonDown = function()
+		{
+			viewport.centerObject(circle, canvas);
+		}
 		group.add(circle);
 
 		var text = new Trenette.Text();

package.json

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

source/Object2D.js

@@ -257,6 +257,20 @@ Object2D.prototype.transform = function(context, viewport)
  */
 Object2D.prototype.draw = function(context, viewport, canvas){};
 
+/**
+ * Callback method while the object is being dragged across the screen.
+ *
+ * By default is adds the delta value to the object position (making it follow the mouse movement).
+ *
+ * Delta is the movement of the pointer already translated into local object coordinates.
+ *
+ * Receives (pointer, viewport, delta) as arguments.
+ */
+Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
+{
+	this.position.add(delta);
+};
+
 /**
  * Method called when the object its added to a parent.
  *
@@ -299,20 +313,6 @@ Object2D.prototype.onPointerLeave = null;
  */
 Object2D.prototype.onPointerOver = null;
 
-/**
- * Callback method while the object is being dragged across the screen.
- *
- * By default is adds the delta value to the object position (making it follow the mouse movement).
- *
- * Delta is the movement of the pointer already translated into local object coordinates.
- *
- * Receives (pointer, viewport, delta) as arguments.
- */
-Object2D.prototype.onPointerDrag = function(pointer, viewport, delta)
-{
-	this.position.add(delta);
-};
-
 /**
  * Callback method called while the pointer button is pressed.
  *

source/Viewport.js

@@ -73,7 +73,7 @@ Viewport.prototype.updateControls = function(pointer)
 
 		if(this.moveOnScale)
 		{	
-			var speed = pointer.wheel / this.scale;
+			var speed = pointer.wheel;
 			var halfWidth = pointer.canvas.width / 2;
 			var halfWeight = pointer.canvas.height / 2;
 
@@ -84,7 +84,7 @@ Viewport.prototype.updateControls = function(pointer)
 
 	if(pointer.buttonPressed(Pointer.RIGHT) && pointer.buttonPressed(Pointer.LEFT))
 	{
-		this.rotation += pointer.delta.angle() * 1e-2;
+		this.rotation += pointer.delta.angle() * 1e-3;
 	}
 	else if(pointer.buttonPressed(Pointer.RIGHT))
 	{
@@ -108,4 +108,21 @@ Viewport.prototype.updateMatrix = function()
 	}
 };
 
+/**
+ * Center the viewport relative to a object.
+ *
+ * @param {Object2D} object Object to be centered on the viewport.
+ * @param {DOM} canvas Canvas element where the image is drawn.
+ */
+Viewport.prototype.centerObject = function(object, canvas)
+{
+	var position = object.globalMatrix.transformPoint(new Vector2());
+	position.multiplyScalar(-this.scale);
+
+	position.x += canvas.width / 2;
+	position.y += canvas.height / 2;
+
+	this.position.copy(position);
+};
+
 export {Viewport};