Derp

README.md

@@ -1,2 +1,5 @@
 # diagram.js
 Web based diagram canvas library.
+
+Entity based system.
+

build/diagram.js

@@ -576,15 +576,15 @@
 
 		return function generateUUID()
 		{
-			var d0 = Math.random() * 0xffffffff | 0;
-			var d1 = Math.random() * 0xffffffff | 0;
-			var d2 = Math.random() * 0xffffffff | 0;
-			var d3 = Math.random() * 0xffffffff | 0;
+			var d0 = Math.random() * 0XFFFFFFFF | 0;
+			var d1 = Math.random() * 0XFFFFFFFF | 0;
+			var d2 = Math.random() * 0XFFFFFFFF | 0;
+			var d3 = Math.random() * 0XFFFFFFFF | 0;
 
-			var uuid = lut[ d0 & 0xff ] + lut[ d0 >> 8 & 0xff ] + lut[ d0 >> 16 & 0xff ] + lut[ d0 >> 24 & 0xff ] + "-" +
-				lut[ d1 & 0xff ] + lut[ d1 >> 8 & 0xff ] + "-" + lut[ d1 >> 16 & 0x0f | 0x40 ] + lut[ d1 >> 24 & 0xff ] + "-" +
-				lut[ d2 & 0x3f | 0x80 ] + lut[ d2 >> 8 & 0xff ] + "-" + lut[ d2 >> 16 & 0xff ] + lut[ d2 >> 24 & 0xff ] +
-				lut[ d3 & 0xff ] + lut[ d3 >> 8 & 0xff ] + lut[ d3 >> 16 & 0xff ] + lut[ d3 >> 24 & 0xff ];
+			var uuid = lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + "-" +
+				lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + "-" + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + "-" +
+				lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + "-" + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
+				lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff];
 
 			return uuid.toUpperCase();
 		};
@@ -627,6 +627,11 @@
 		 */
 		this.rotation = 0.0;
 
+		/**
+		 * Indicates if the object is visible.
+		 */
+		this.visible = true;
+
 		/**
 		 * Layer of this object, objects are sorted by layer value.
 		 *
@@ -649,7 +654,7 @@
 		/**
 		 * Inverse of the global matrix.
 		 *
-		 * Used to convert mouse input points into object coordinates.
+		 * Used to convert pointer input points into object coordinates.
 		 */
 		this.inverseGlobalMatrix = new Matrix();
 
@@ -758,38 +763,45 @@
 	 */
 	Object2D.prototype.draw = function(context){};
 
+	/**
+	 * Callback method called every time before the object is draw into the canvas.
+	 *
+	 * Can be used to run preparation code, move the object, etc.
+	 */
+	Object2D.prototype.onUpdate = null;
+
 	/**
 	 * Callback method called when the pointer enters the object.
 	 *
-	 * Receives (mouse, viewport) as arguments.
+	 * Receives (pointer, viewport) as arguments.
 	 */
 	Object2D.prototype.onPointerEnter = null;
 
 	/**
 	 * Callback method called when the was inside of the object and leaves the object.
 	 *
-	 * Receives (mouse, viewport) as arguments.
+	 * Receives (pointer, viewport) as arguments.
 	 */
 	Object2D.prototype.onPointerLeave = null;
 
 	/**
 	 * Callback method while the pointer is over (inside) of the object.
 	 *
-	 * Receives (mouse, viewport) as arguments.
+	 * Receives (pointer, viewport) as arguments.
 	 */
 	Object2D.prototype.onPointerOver = null;
 
 	/**
 	 * Callback method while the object is being dragged across the screen.
 	 *
-	 * Receives (mouse, viewport, delta) as arguments. Delta is the movement of the mouse already translated into local object coordinates.
+	 * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
 	 */
 	Object2D.prototype.onPointerDrag = null;
 
 	/**
 	 * Callback method called while the pointer button is pressed.
 	 *
-	 * Receives (mouse, viewport) as arguments.
+	 * Receives (pointer, viewport) as arguments.
 	 */
 	Object2D.prototype.onButtonPressed = null;
 
@@ -804,7 +816,7 @@
 	Object2D.prototype.onButtonUp = null;
 
 	/**
-	 * Key is used by Keyboard, Mouse, etc, to represent a key state.
+	 * Key is used by Keyboard, Pointer, etc, to represent a key state.
 	 *
 	 * @class
 	*/
@@ -885,15 +897,15 @@
 	};
 
 	/**
-	 * Mouse instance for input in sync with the running 3D application.
+	 * Pointer instance for input in sync with the running 3D application.
 	 *
-	 * The mouse object provided by scripts is automatically updated by the runtime handler.
+	 * The pointer object provided by scripts is automatically updated by the runtime handler.
 	 * 
 	 * @class
-	 * @param {DOM} domElement DOM element to craete the mouse events.
-	 * @param {Boolean} dontInitialize If true the mouse events are not created.
+	 * @param {DOM} domElement DOM element to craete the pointer events.
+	 * @param {Boolean} dontInitialize If true the pointer events are not created.
 	 */
-	function Mouse(domElement, dontInitialize)
+	function Pointer(domElement)
 	{
 		//Raw data
 		this._keys = new Array(5);
@@ -905,37 +917,37 @@
 		this._doubleClicked = new Array(5);
 
 		/**
-		 * Array with mouse buttons status.
+		 * Array with pointer buttons status.
 		 */
 		this.keys = new Array(5);
 
 		/**
-		 * Mouse position inside of the window (coordinates in window space).
+		 * Pointer position inside of the window (coordinates in window space).
 		 */
 		this.position = new Vector2(0, 0);
 
 		/**
-		 * Mouse movement (coordinates in window space).
+		 * Pointer movement (coordinates in window space).
 		 */
 		this.delta = new Vector2(0, 0);
 
 		/**
-		 * Mouse scroll wheel movement.
+		 * Pointer scroll wheel movement.
 		 */
 		this.wheel = 0;
 		
 		/**
-		 * Indicates a button of the mouse was double clicked.
+		 * Indicates a button of the pointer was double clicked.
 		 */
 		this.doubleClicked = new Array(5);
 
 		/**
-		 * DOM element where to attach the mouse events.
+		 * DOM element where to attach the pointer events.
 		 */
 		this.domElement = (domElement !== undefined) ? domElement : window;
 
 		/**
-		 * Canvas attached to this mouse instance used to calculate position and delta in element space coordinates.
+		 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
 		 */
 		this.canvas = null;
 		
@@ -1000,7 +1012,7 @@
 				var touch = event.touches[0];
 
 				self.updatePosition(touch.clientX, touch.clientY, 0, 0);
-				self.updateKey(Mouse.LEFT, Key.DOWN);
+				self.updateKey(Pointer.LEFT, Key.DOWN);
 
 				lastTouch.set(touch.clientX, touch.clientY);
 			});
@@ -1008,13 +1020,13 @@
 			//Touch end event
 			this.events.add(this.domElement, "touchend", function(event)
 			{
-				self.updateKey(Mouse.LEFT, Key.UP);
+				self.updateKey(Pointer.LEFT, Key.UP);
 			});
 
 			//Touch cancel event
 			this.events.add(this.domElement, "touchcancel", function(event)
 			{
-				self.updateKey(Mouse.LEFT, Key.UP);
+				self.updateKey(Pointer.LEFT, Key.UP);
 			});
 
 			//Touch move event
@@ -1050,124 +1062,121 @@
 			self.updateKey(event.which - 1, Key.UP);
 		});
 
-		//Mouse double click
+		//Pointer double click
 		this.events.add(this.domElement, "dblclick", function(event)
 		{	
 			self._doubleClicked[event.which - 1] = true;
 		});
 
-		if(dontInitialize !== true)
-		{
-			this.create();
-		}
+		this.create();
 	}
 
-	Mouse.prototype = Mouse;
-	Mouse.prototype.constructor = Mouse;
+	Pointer.prototype = Pointer;
+	Pointer.prototype.constructor = Pointer;
 
 	/**
-	 * Left mouse button.
+	 * Left pointer button.
 	 */
-	Mouse.LEFT = 0;
+	Pointer.LEFT = 0;
 
 	/**
-	 * Middle mouse button.
+	 * Middle pointer button.
 	 */
-	Mouse.MIDDLE = 1;
+	Pointer.MIDDLE = 1;
 
 	/**
-	 * Right mouse button.
+	 * Right pointer button.
 	 */
-	Mouse.RIGHT = 2;
+	Pointer.RIGHT = 2;
 
 	/**
-	 * Back mouse navigation button.
+	 * Back pointer navigation button.
 	 */
-	Mouse.BACK = 3;
+	Pointer.BACK = 3;
 
 	/**
-	 * Forward mouse navigation button.
+	 * Forward pointer navigation button.
 	 */
-	Mouse.FORWARD = 4;
+	Pointer.FORWARD = 4;
 
 	/**
 	 * Element to be used for coordinates calculation relative to that canvas.
 	 * 
-	 * @param {DOM} canvas Canvas to be attached to the Mouse instance
+	 * @param {DOM} canvas Canvas to be attached to the Pointer instance
 	 */
-	Mouse.setCanvas = function(element)
+	Pointer.setCanvas = function(element)
 	{
 		this.canvas = element;
 
-		element.mouseInside = false;
+		element.pointerInside = false;
 
 		element.addEventListener("mouseenter", function()
 		{
-			this.mouseInside = true;
+			this.pointerInside = true;
 		});
 
 		element.addEventListener("mouseleave", function()
 		{
-			this.mouseInside = false;
+			this.pointerInside = false;
 		});
 	};
 
 	/**
-	 * Check if mouse is inside attached canvas (updated async).
+	 * Check if pointer is inside attached canvas (updated async).
 	 * 
-	 * @return {boolean} True if mouse is currently inside the canvas
+	 * @return {boolean} True if pointer is currently inside the canvas
 	 */
-	Mouse.insideCanvas = function()
+	Pointer.insideCanvas = function()
 	{
-		return this.canvas !== null && this.canvas.mouseInside;
+		return this.canvas !== null && this.canvas.pointerInside;
 	};
 
 	/**
-	 * Check if mouse button is currently pressed.
+	 * Check if pointer button is currently pressed.
 	 * 
 	 * @param {Number} button Button to check status of
 	 * @return {boolean} True if button is currently pressed
 	 */
-	Mouse.buttonPressed = function(button)
+	Pointer.buttonPressed = function(button)
 	{
 		return this.keys[button].pressed;
 	};
 
 	/**
-	 * Check if mouse button was double clicked.
+	 * Check if pointer button was double clicked.
 	 * 
 	 * @param {Number} button Button to check status of
-	 * @return {boolean} True if some mouse button was just double clicked
+	 * @return {boolean} True if some pointer button was just double clicked
 	 */
-	Mouse.buttonDoubleClicked = function(button)
+	Pointer.buttonDoubleClicked = function(button)
 	{
 		return this.doubleClicked[button];
 	};
 
 	/**
-	 * Check if a mouse button was just pressed.
+	 * Check if a pointer button was just pressed.
 	 * 
 	 * @param {Number} button Button to check status of
 	 * @return {boolean} True if button was just pressed
 	 */
-	Mouse.buttonJustPressed = function(button)
+	Pointer.buttonJustPressed = function(button)
 	{
 		return this.keys[button].justPressed;
 	};
 
 	/**
-	 * Check if a mouse button was just released.
+	 * Check if a pointer button was just released.
 	 * 
 	 * @param {Number} button Button to check status of
 	 * @return {boolean} True if button was just released
 	 */
-	Mouse.buttonJustReleased = function(button)
+	Pointer.buttonJustReleased = function(button)
 	{
 		return this.keys[button].justReleased;
 	};
 
 	/**
-	 * Update mouse position.
+	 * Update pointer position.
 	 *
 	 * Automatically called by the runtime.
 	 * 
@@ -1176,7 +1185,7 @@
 	 * @param {Number} xDiff
 	 * @param {Number} yDiff
 	 */
-	Mouse.updatePosition = function(x, y, xDiff, yDiff)
+	Pointer.updatePosition = function(x, y, xDiff, yDiff)
 	{
 		if(this.canvas !== null)
 		{
@@ -1192,14 +1201,14 @@
 	};
 
 	/**
-	 * Update a mouse button.
+	 * Update a pointer button.
 	 * 
 	 * Automatically called by the runtime.
 	 *
 	 * @param {Number} button
 	 * @param {Number} action
 	 */
-	Mouse.updateKey = function(button, action)
+	Pointer.updateKey = function(button, action)
 	{
 		if(button > -1)
 		{
@@ -1208,11 +1217,11 @@
 	};
 
 	/**
-	 * Update mouse buttons state, position, wheel and delta synchronously.
+	 * Update pointer buttons state, position, wheel and delta synchronously.
 	 */
-	Mouse.update = function()
+	Pointer.update = function()
 	{
-		//Update mouse keys state
+		//Update pointer keys state
 		for(var i = 0; i < 5; i++)
 		{
 			if(this._keys[i].justPressed && this.keys[i].justPressed)
@@ -1226,7 +1235,7 @@
 
 			this.keys[i].set(this._keys[i].justPressed, this._keys[i].pressed, this._keys[i].justReleased);
 
-			//Update mouse double click
+			//Update pointer double click
 			if(this._doubleClicked[i] === true)
 			{
 				this.doubleClicked[i] = true;
@@ -1238,7 +1247,7 @@
 			}
 		}
 
-		//Update mouse wheel
+		//Update pointer wheel
 		if(this._wheelUpdated)
 		{
 			this.wheel = this._wheel;
@@ -1249,7 +1258,7 @@
 			this.wheel = 0;
 		}
 
-		//Update mouse Position if needed
+		//Update pointer Position if needed
 		if(this._positionUpdated)
 		{
 			this.delta.copy(this._delta);
@@ -1266,17 +1275,17 @@
 	};
 
 	/**
-	 * Create mouse events.
+	 * Create pointer events.
 	 */
-	Mouse.create = function()
+	Pointer.create = function()
 	{
 		this.events.create();
 	};
 
 	/**
-	 * Dispose mouse events.
+	 * Dispose pointer events.
 	 */
-	Mouse.dispose = function()
+	Pointer.dispose = function()
 	{
 		this.events.destroy();
 	};
@@ -1303,10 +1312,10 @@
 		this.context.globalCompositeOperation = "source-over";
 
 		/**
-		 * Mouse input handler object.
+		 * Pointer input handler object.
 		 */
-		this.mouse = new Mouse();
-		this.mouse.setCanvas(canvas);
+		this.pointer = new Pointer();
+		this.pointer.setCanvas(canvas);
 	}
 
 	/**
@@ -1317,46 +1326,44 @@
 	 */
 	Renderer.prototype.update = function(object, viewport)
 	{
-		this.mouse.update();
+		this.pointer.update();
 
-		var mouse = this.mouse;
+		var pointer = this.pointer;
 
 		// Viewport transform matrix
-		viewport.updateControls(mouse);
+		viewport.updateControls(pointer);
 		viewport.updateMatrix();
 
-		// Project mouse coordinates
-		var point = mouse.position.clone();
+		// Project pointer coordinates
+		var point = pointer.position.clone();
 		var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
 		// Object transformation matrices
 		object.traverse(function(child)
-		{
-			child.updateMatrix();
-			
+		{		
 			var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
-			// Check if the mouse pointer is inside
+			// Check if the pointer pointer is inside
 			if(child.isInside(childPoint))
 			{
 				// Pointer enter
 				if(!child.pointerInside && child.onPointerEnter !== null)
 				{			
-					child.onPointerEnter(mouse, viewport);
+					child.onPointerEnter(pointer, viewport);
 				}
 
 				// Pointer over
 				if(child.onPointerOver !== null)
 				{
-					child.onPointerOver(mouse, viewport);
+					child.onPointerOver(pointer, viewport);
 				}
 
 				// Pointer just pressed
-				if(mouse.buttonJustPressed(Mouse.LEFT))
+				if(pointer.buttonJustPressed(Pointer.LEFT))
 				{
 					if(child.onButtonDown !== null)
 					{
-						child.onButtonDown(mouse, viewport);
+						child.onButtonDown(pointer, viewport);
 					}
 
 					if(child.draggable)
@@ -1366,15 +1373,15 @@
 				}
 
 				// Pointer pressed
-				if(mouse.buttonPressed(Mouse.LEFT) && child.onButtonPressed !== null)
+				if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
 				{	
-					child.onButtonPressed(mouse, viewport);
+					child.onButtonPressed(pointer, viewport);
 				}
 
 				// Just released
-				if(mouse.buttonJustReleased(Mouse.LEFT) && child.onButtonUp !== null)
+				if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
 				{	
-					child.onButtonUp(mouse, viewport);
+					child.onButtonUp(pointer, viewport);
 				}
 
 				child.pointerInside = true;
@@ -1384,14 +1391,14 @@
 				// Pointer leave
 				if(child.onPointerLeave !== null)
 				{
-					child.onPointerLeave(mouse, viewport);
+					child.onPointerLeave(pointer, viewport);
 				}
 
 				child.pointerInside = false;
 			}
 
 			// Stop object drag
-			if(mouse.buttonJustReleased(Mouse.LEFT))
+			if(pointer.buttonJustReleased(Pointer.LEFT))
 			{	
 				if(child.draggable)
 				{
@@ -1406,14 +1413,22 @@
 				matrix.multiply(child.inverseGlobalMatrix);
 				matrix.setPosition(0, 0);
 
-				var delta = matrix.transformPoint(mouse.delta);
+				var delta = matrix.transformPoint(pointer.delta);
 				child.position.add(delta);
 
 				if(child.onPointerDrag !== null)
 				{
-					child.onPointerDrag(mouse, viewport, delta);
+					child.onPointerDrag(pointer, viewport, delta);
 				}
 			}
+
+			// On update
+			if(child.onUpdate !== null)
+			{
+				child.onUpdate();
+			}
+
+			child.updateMatrix();
 		});
 	};
 
@@ -1440,7 +1455,10 @@
 		var objects = [];
 		object.traverse(function(child)
 		{
-			objects.push(child);
+			if(child.visible)
+			{
+				objects.push(child);
+			}
 		});
 
 		// Sort objects by layer
@@ -1510,29 +1528,29 @@
 	}
 
 	/**
-	 * Update the viewport controls using the mouse object.
+	 * Update the viewport controls using the pointer object.
 	 */
-	Viewport.prototype.updateControls = function(mouse)
+	Viewport.prototype.updateControls = function(pointer)
 	{	
-		if(mouse.wheel !== 0)
+		if(pointer.wheel !== 0)
 		{
-			this.scale -= mouse.wheel * 1e-3 * this.scale;
+			this.scale -= pointer.wheel * 1e-3 * this.scale;
 
 			if(this.moveOnScale)
 			{	
-				var speed = mouse.wheel / this.scale;
-				var halfWidth = mouse.canvas.width / 2;
-				var halfWeight = mouse.canvas.height / 2;
+				var speed = pointer.wheel / this.scale;
+				var halfWidth = pointer.canvas.width / 2;
+				var halfWeight = pointer.canvas.height / 2;
 
-				this.position.x += ((mouse.position.x - halfWidth) / halfWidth) * speed;
-				this.position.y += ((mouse.position.y - halfWeight) / halfWeight) * speed;
+				this.position.x += ((pointer.position.x - halfWidth) / halfWidth) * speed;
+				this.position.y += ((pointer.position.y - halfWeight) / halfWeight) * speed;
 			}
 		}
 
-		if(mouse.buttonPressed(Mouse.RIGHT))
+		if(pointer.buttonPressed(Pointer.RIGHT))
 		{
-			this.position.x += mouse.delta.x;
-			this.position.y += mouse.delta.y;
+			this.position.x += pointer.delta.x;
+			this.position.y += pointer.delta.y;
 		}
 	};
 
@@ -1748,12 +1766,12 @@
 		return point.length() <= this.radius;
 	};
 
-	Circle.prototype.onPointerEnter = function(mouse, viewport)
+	Circle.prototype.onPointerEnter = function(pointer, viewport)
 	{
 		this.fillStyle = "#CCCCCC";
 	};
 
-	Circle.prototype.onPointerLeave = function(mouse, viewport)
+	Circle.prototype.onPointerLeave = function(pointer, viewport)
 	{
 		this.fillStyle = "#FFFFFF";
 	};
@@ -1818,7 +1836,7 @@
 
 		var topRight = new Circle();
 		topRight.radius = 4;
-		topRight.onPointerDrag = function()
+		topRight.onPointerDrag = function(pointer, viewport, delta)
 		{
 			self.box.min.copy(topRight.position);
 			updateHelpers();
@@ -1827,7 +1845,7 @@
 
 		var topLeft = new Circle();
 		topLeft.radius = 4;
-		topLeft.onPointerDrag = function()
+		topLeft.onPointerDrag = function(pointer, viewport, delta)
 		{
 			self.box.max.x = topLeft.position.x;
 			self.box.min.y = topLeft.position.y;
@@ -1837,7 +1855,7 @@
 
 		var bottomLeft = new Circle();
 		bottomLeft.radius = 4;
-		bottomLeft.onPointerDrag = function()
+		bottomLeft.onPointerDrag = function(pointer, viewport, delta)
 		{
 			self.box.max.copy(bottomLeft.position);
 			updateHelpers();
@@ -1846,7 +1864,7 @@
 
 		var bottomRight = new Circle();
 		bottomRight.radius = 4;
-		bottomRight.onPointerDrag = function()
+		bottomRight.onPointerDrag = function(pointer, viewport, delta)
 		{
 			self.box.min.x = bottomRight.position.x;
 			self.box.max.y = bottomRight.position.y;
@@ -1857,12 +1875,12 @@
 		updateHelpers();
 	};
 
-	Box.prototype.onPointerEnter = function(mouse, viewport)
+	Box.prototype.onPointerEnter = function(pointer, viewport)
 	{
 		this.fillStyle = "#CCCCCC";
 	};
 
-	Box.prototype.onPointerLeave = function(mouse, viewport)
+	Box.prototype.onPointerLeave = function(pointer, viewport)
 	{
 		this.fillStyle = "#FFFFFF";
 	};
@@ -1980,8 +1998,8 @@
 	exports.Key = Key;
 	exports.Line = Line;
 	exports.Matrix = Matrix;
-	exports.Mouse = Mouse;
 	exports.Object2D = Object2D;
+	exports.Pointer = Pointer;
 	exports.Renderer = Renderer;
 	exports.Text = Text;
 	exports.UUID = UUID;

build/diagram.module.js

@@ -570,15 +570,15 @@ UUID.generate = (function ()
 
 	return function generateUUID()
 	{
-		var d0 = Math.random() * 0xffffffff | 0;
-		var d1 = Math.random() * 0xffffffff | 0;
-		var d2 = Math.random() * 0xffffffff | 0;
-		var d3 = Math.random() * 0xffffffff | 0;
+		var d0 = Math.random() * 0XFFFFFFFF | 0;
+		var d1 = Math.random() * 0XFFFFFFFF | 0;
+		var d2 = Math.random() * 0XFFFFFFFF | 0;
+		var d3 = Math.random() * 0XFFFFFFFF | 0;
 
-		var uuid = lut[ d0 & 0xff ] + lut[ d0 >> 8 & 0xff ] + lut[ d0 >> 16 & 0xff ] + lut[ d0 >> 24 & 0xff ] + "-" +
-			lut[ d1 & 0xff ] + lut[ d1 >> 8 & 0xff ] + "-" + lut[ d1 >> 16 & 0x0f | 0x40 ] + lut[ d1 >> 24 & 0xff ] + "-" +
-			lut[ d2 & 0x3f | 0x80 ] + lut[ d2 >> 8 & 0xff ] + "-" + lut[ d2 >> 16 & 0xff ] + lut[ d2 >> 24 & 0xff ] +
-			lut[ d3 & 0xff ] + lut[ d3 >> 8 & 0xff ] + lut[ d3 >> 16 & 0xff ] + lut[ d3 >> 24 & 0xff ];
+		var uuid = lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + "-" +
+			lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + "-" + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + "-" +
+			lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + "-" + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
+			lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff];
 
 		return uuid.toUpperCase();
 	};
@@ -621,6 +621,11 @@ function Object2D()
 	 */
 	this.rotation = 0.0;
 
+	/**
+	 * Indicates if the object is visible.
+	 */
+	this.visible = true;
+
 	/**
 	 * Layer of this object, objects are sorted by layer value.
 	 *
@@ -643,7 +648,7 @@ function Object2D()
 	/**
 	 * Inverse of the global matrix.
 	 *
-	 * Used to convert mouse input points into object coordinates.
+	 * Used to convert pointer input points into object coordinates.
 	 */
 	this.inverseGlobalMatrix = new Matrix();
 
@@ -752,38 +757,45 @@ Object2D.prototype.updateMatrix = function(context)
  */
 Object2D.prototype.draw = function(context){};
 
+/**
+ * Callback method called every time before the object is draw into the canvas.
+ *
+ * Can be used to run preparation code, move the object, etc.
+ */
+Object2D.prototype.onUpdate = null;
+
 /**
  * Callback method called when the pointer enters the object.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerEnter = null;
 
 /**
  * Callback method called when the was inside of the object and leaves the object.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerLeave = null;
 
 /**
  * Callback method while the pointer is over (inside) of the object.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerOver = null;
 
 /**
  * Callback method while the object is being dragged across the screen.
  *
- * Receives (mouse, viewport, delta) as arguments. Delta is the movement of the mouse already translated into local object coordinates.
+ * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
  */
 Object2D.prototype.onPointerDrag = null;
 
 /**
  * Callback method called while the pointer button is pressed.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonPressed = null;
 
@@ -798,7 +810,7 @@ Object2D.prototype.onButtonDown = null;
 Object2D.prototype.onButtonUp = null;
 
 /**
- * Key is used by Keyboard, Mouse, etc, to represent a key state.
+ * Key is used by Keyboard, Pointer, etc, to represent a key state.
  *
  * @class
 */
@@ -879,15 +891,15 @@ Key.prototype.reset = function()
 };
 
 /**
- * Mouse instance for input in sync with the running 3D application.
+ * Pointer instance for input in sync with the running 3D application.
  *
- * The mouse object provided by scripts is automatically updated by the runtime handler.
+ * The pointer object provided by scripts is automatically updated by the runtime handler.
  * 
  * @class
- * @param {DOM} domElement DOM element to craete the mouse events.
- * @param {Boolean} dontInitialize If true the mouse events are not created.
+ * @param {DOM} domElement DOM element to craete the pointer events.
+ * @param {Boolean} dontInitialize If true the pointer events are not created.
  */
-function Mouse(domElement, dontInitialize)
+function Pointer(domElement)
 {
 	//Raw data
 	this._keys = new Array(5);
@@ -899,37 +911,37 @@ function Mouse(domElement, dontInitialize)
 	this._doubleClicked = new Array(5);
 
 	/**
-	 * Array with mouse buttons status.
+	 * Array with pointer buttons status.
 	 */
 	this.keys = new Array(5);
 
 	/**
-	 * Mouse position inside of the window (coordinates in window space).
+	 * Pointer position inside of the window (coordinates in window space).
 	 */
 	this.position = new Vector2(0, 0);
 
 	/**
-	 * Mouse movement (coordinates in window space).
+	 * Pointer movement (coordinates in window space).
 	 */
 	this.delta = new Vector2(0, 0);
 
 	/**
-	 * Mouse scroll wheel movement.
+	 * Pointer scroll wheel movement.
 	 */
 	this.wheel = 0;
 	
 	/**
-	 * Indicates a button of the mouse was double clicked.
+	 * Indicates a button of the pointer was double clicked.
 	 */
 	this.doubleClicked = new Array(5);
 
 	/**
-	 * DOM element where to attach the mouse events.
+	 * DOM element where to attach the pointer events.
 	 */
 	this.domElement = (domElement !== undefined) ? domElement : window;
 
 	/**
-	 * Canvas attached to this mouse instance used to calculate position and delta in element space coordinates.
+	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
 	 */
 	this.canvas = null;
 	
@@ -994,7 +1006,7 @@ function Mouse(domElement, dontInitialize)
 			var touch = event.touches[0];
 
 			self.updatePosition(touch.clientX, touch.clientY, 0, 0);
-			self.updateKey(Mouse.LEFT, Key.DOWN);
+			self.updateKey(Pointer.LEFT, Key.DOWN);
 
 			lastTouch.set(touch.clientX, touch.clientY);
 		});
@@ -1002,13 +1014,13 @@ function Mouse(domElement, dontInitialize)
 		//Touch end event
 		this.events.add(this.domElement, "touchend", function(event)
 		{
-			self.updateKey(Mouse.LEFT, Key.UP);
+			self.updateKey(Pointer.LEFT, Key.UP);
 		});
 
 		//Touch cancel event
 		this.events.add(this.domElement, "touchcancel", function(event)
 		{
-			self.updateKey(Mouse.LEFT, Key.UP);
+			self.updateKey(Pointer.LEFT, Key.UP);
 		});
 
 		//Touch move event
@@ -1044,124 +1056,121 @@ function Mouse(domElement, dontInitialize)
 		self.updateKey(event.which - 1, Key.UP);
 	});
 
-	//Mouse double click
+	//Pointer double click
 	this.events.add(this.domElement, "dblclick", function(event)
 	{	
 		self._doubleClicked[event.which - 1] = true;
 	});
 
-	if(dontInitialize !== true)
-	{
-		this.create();
-	}
+	this.create();
 }
 
-Mouse.prototype = Mouse;
-Mouse.prototype.constructor = Mouse;
+Pointer.prototype = Pointer;
+Pointer.prototype.constructor = Pointer;
 
 /**
- * Left mouse button.
+ * Left pointer button.
  */
-Mouse.LEFT = 0;
+Pointer.LEFT = 0;
 
 /**
- * Middle mouse button.
+ * Middle pointer button.
  */
-Mouse.MIDDLE = 1;
+Pointer.MIDDLE = 1;
 
 /**
- * Right mouse button.
+ * Right pointer button.
  */
-Mouse.RIGHT = 2;
+Pointer.RIGHT = 2;
 
 /**
- * Back mouse navigation button.
+ * Back pointer navigation button.
  */
-Mouse.BACK = 3;
+Pointer.BACK = 3;
 
 /**
- * Forward mouse navigation button.
+ * Forward pointer navigation button.
  */
-Mouse.FORWARD = 4;
+Pointer.FORWARD = 4;
 
 /**
  * Element to be used for coordinates calculation relative to that canvas.
  * 
- * @param {DOM} canvas Canvas to be attached to the Mouse instance
+ * @param {DOM} canvas Canvas to be attached to the Pointer instance
  */
-Mouse.setCanvas = function(element)
+Pointer.setCanvas = function(element)
 {
 	this.canvas = element;
 
-	element.mouseInside = false;
+	element.pointerInside = false;
 
 	element.addEventListener("mouseenter", function()
 	{
-		this.mouseInside = true;
+		this.pointerInside = true;
 	});
 
 	element.addEventListener("mouseleave", function()
 	{
-		this.mouseInside = false;
+		this.pointerInside = false;
 	});
 };
 
 /**
- * Check if mouse is inside attached canvas (updated async).
+ * Check if pointer is inside attached canvas (updated async).
  * 
- * @return {boolean} True if mouse is currently inside the canvas
+ * @return {boolean} True if pointer is currently inside the canvas
  */
-Mouse.insideCanvas = function()
+Pointer.insideCanvas = function()
 {
-	return this.canvas !== null && this.canvas.mouseInside;
+	return this.canvas !== null && this.canvas.pointerInside;
 };
 
 /**
- * Check if mouse button is currently pressed.
+ * Check if pointer button is currently pressed.
  * 
  * @param {Number} button Button to check status of
  * @return {boolean} True if button is currently pressed
  */
-Mouse.buttonPressed = function(button)
+Pointer.buttonPressed = function(button)
 {
 	return this.keys[button].pressed;
 };
 
 /**
- * Check if mouse button was double clicked.
+ * Check if pointer button was double clicked.
  * 
  * @param {Number} button Button to check status of
- * @return {boolean} True if some mouse button was just double clicked
+ * @return {boolean} True if some pointer button was just double clicked
  */
-Mouse.buttonDoubleClicked = function(button)
+Pointer.buttonDoubleClicked = function(button)
 {
 	return this.doubleClicked[button];
 };
 
 /**
- * Check if a mouse button was just pressed.
+ * Check if a pointer button was just pressed.
  * 
  * @param {Number} button Button to check status of
  * @return {boolean} True if button was just pressed
  */
-Mouse.buttonJustPressed = function(button)
+Pointer.buttonJustPressed = function(button)
 {
 	return this.keys[button].justPressed;
 };
 
 /**
- * Check if a mouse button was just released.
+ * Check if a pointer button was just released.
  * 
  * @param {Number} button Button to check status of
  * @return {boolean} True if button was just released
  */
-Mouse.buttonJustReleased = function(button)
+Pointer.buttonJustReleased = function(button)
 {
 	return this.keys[button].justReleased;
 };
 
 /**
- * Update mouse position.
+ * Update pointer position.
  *
  * Automatically called by the runtime.
  * 
@@ -1170,7 +1179,7 @@ Mouse.buttonJustReleased = function(button)
  * @param {Number} xDiff
  * @param {Number} yDiff
  */
-Mouse.updatePosition = function(x, y, xDiff, yDiff)
+Pointer.updatePosition = function(x, y, xDiff, yDiff)
 {
 	if(this.canvas !== null)
 	{
@@ -1186,14 +1195,14 @@ Mouse.updatePosition = function(x, y, xDiff, yDiff)
 };
 
 /**
- * Update a mouse button.
+ * Update a pointer button.
  * 
  * Automatically called by the runtime.
  *
  * @param {Number} button
  * @param {Number} action
  */
-Mouse.updateKey = function(button, action)
+Pointer.updateKey = function(button, action)
 {
 	if(button > -1)
 	{
@@ -1202,11 +1211,11 @@ Mouse.updateKey = function(button, action)
 };
 
 /**
- * Update mouse buttons state, position, wheel and delta synchronously.
+ * Update pointer buttons state, position, wheel and delta synchronously.
  */
-Mouse.update = function()
+Pointer.update = function()
 {
-	//Update mouse keys state
+	//Update pointer keys state
 	for(var i = 0; i < 5; i++)
 	{
 		if(this._keys[i].justPressed && this.keys[i].justPressed)
@@ -1220,7 +1229,7 @@ Mouse.update = function()
 
 		this.keys[i].set(this._keys[i].justPressed, this._keys[i].pressed, this._keys[i].justReleased);
 
-		//Update mouse double click
+		//Update pointer double click
 		if(this._doubleClicked[i] === true)
 		{
 			this.doubleClicked[i] = true;
@@ -1232,7 +1241,7 @@ Mouse.update = function()
 		}
 	}
 
-	//Update mouse wheel
+	//Update pointer wheel
 	if(this._wheelUpdated)
 	{
 		this.wheel = this._wheel;
@@ -1243,7 +1252,7 @@ Mouse.update = function()
 		this.wheel = 0;
 	}
 
-	//Update mouse Position if needed
+	//Update pointer Position if needed
 	if(this._positionUpdated)
 	{
 		this.delta.copy(this._delta);
@@ -1260,17 +1269,17 @@ Mouse.update = function()
 };
 
 /**
- * Create mouse events.
+ * Create pointer events.
  */
-Mouse.create = function()
+Pointer.create = function()
 {
 	this.events.create();
 };
 
 /**
- * Dispose mouse events.
+ * Dispose pointer events.
  */
-Mouse.dispose = function()
+Pointer.dispose = function()
 {
 	this.events.destroy();
 };
@@ -1297,10 +1306,10 @@ function Renderer(canvas)
 	this.context.globalCompositeOperation = "source-over";
 
 	/**
-	 * Mouse input handler object.
+	 * Pointer input handler object.
 	 */
-	this.mouse = new Mouse();
-	this.mouse.setCanvas(canvas);
+	this.pointer = new Pointer();
+	this.pointer.setCanvas(canvas);
 }
 
 /**
@@ -1311,46 +1320,44 @@ function Renderer(canvas)
  */
 Renderer.prototype.update = function(object, viewport)
 {
-	this.mouse.update();
+	this.pointer.update();
 
-	var mouse = this.mouse;
+	var pointer = this.pointer;
 
 	// Viewport transform matrix
-	viewport.updateControls(mouse);
+	viewport.updateControls(pointer);
 	viewport.updateMatrix();
 
-	// Project mouse coordinates
-	var point = mouse.position.clone();
+	// Project pointer coordinates
+	var point = pointer.position.clone();
 	var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
 	// Object transformation matrices
 	object.traverse(function(child)
-	{
-		child.updateMatrix();
-		
+	{		
 		var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
-		// Check if the mouse pointer is inside
+		// Check if the pointer pointer is inside
 		if(child.isInside(childPoint))
 		{
 			// Pointer enter
 			if(!child.pointerInside && child.onPointerEnter !== null)
 			{			
-				child.onPointerEnter(mouse, viewport);
+				child.onPointerEnter(pointer, viewport);
 			}
 
 			// Pointer over
 			if(child.onPointerOver !== null)
 			{
-				child.onPointerOver(mouse, viewport);
+				child.onPointerOver(pointer, viewport);
 			}
 
 			// Pointer just pressed
-			if(mouse.buttonJustPressed(Mouse.LEFT))
+			if(pointer.buttonJustPressed(Pointer.LEFT))
 			{
 				if(child.onButtonDown !== null)
 				{
-					child.onButtonDown(mouse, viewport);
+					child.onButtonDown(pointer, viewport);
 				}
 
 				if(child.draggable)
@@ -1360,15 +1367,15 @@ Renderer.prototype.update = function(object, viewport)
 			}
 
 			// Pointer pressed
-			if(mouse.buttonPressed(Mouse.LEFT) && child.onButtonPressed !== null)
+			if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
 			{	
-				child.onButtonPressed(mouse, viewport);
+				child.onButtonPressed(pointer, viewport);
 			}
 
 			// Just released
-			if(mouse.buttonJustReleased(Mouse.LEFT) && child.onButtonUp !== null)
+			if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
 			{	
-				child.onButtonUp(mouse, viewport);
+				child.onButtonUp(pointer, viewport);
 			}
 
 			child.pointerInside = true;
@@ -1378,14 +1385,14 @@ Renderer.prototype.update = function(object, viewport)
 			// Pointer leave
 			if(child.onPointerLeave !== null)
 			{
-				child.onPointerLeave(mouse, viewport);
+				child.onPointerLeave(pointer, viewport);
 			}
 
 			child.pointerInside = false;
 		}
 
 		// Stop object drag
-		if(mouse.buttonJustReleased(Mouse.LEFT))
+		if(pointer.buttonJustReleased(Pointer.LEFT))
 		{	
 			if(child.draggable)
 			{
@@ -1400,14 +1407,22 @@ Renderer.prototype.update = function(object, viewport)
 			matrix.multiply(child.inverseGlobalMatrix);
 			matrix.setPosition(0, 0);
 
-			var delta = matrix.transformPoint(mouse.delta);
+			var delta = matrix.transformPoint(pointer.delta);
 			child.position.add(delta);
 
 			if(child.onPointerDrag !== null)
 			{
-				child.onPointerDrag(mouse, viewport, delta);
+				child.onPointerDrag(pointer, viewport, delta);
 			}
 		}
+
+		// On update
+		if(child.onUpdate !== null)
+		{
+			child.onUpdate();
+		}
+
+		child.updateMatrix();
 	});
 };
 
@@ -1434,7 +1449,10 @@ Renderer.prototype.render = function(object, viewport)
 	var objects = [];
 	object.traverse(function(child)
 	{
-		objects.push(child);
+		if(child.visible)
+		{
+			objects.push(child);
+		}
 	});
 
 	// Sort objects by layer
@@ -1504,29 +1522,29 @@ function Viewport()
 }
 
 /**
- * Update the viewport controls using the mouse object.
+ * Update the viewport controls using the pointer object.
  */
-Viewport.prototype.updateControls = function(mouse)
+Viewport.prototype.updateControls = function(pointer)
 {	
-	if(mouse.wheel !== 0)
+	if(pointer.wheel !== 0)
 	{
-		this.scale -= mouse.wheel * 1e-3 * this.scale;
+		this.scale -= pointer.wheel * 1e-3 * this.scale;
 
 		if(this.moveOnScale)
 		{	
-			var speed = mouse.wheel / this.scale;
-			var halfWidth = mouse.canvas.width / 2;
-			var halfWeight = mouse.canvas.height / 2;
+			var speed = pointer.wheel / this.scale;
+			var halfWidth = pointer.canvas.width / 2;
+			var halfWeight = pointer.canvas.height / 2;
 
-			this.position.x += ((mouse.position.x - halfWidth) / halfWidth) * speed;
-			this.position.y += ((mouse.position.y - halfWeight) / halfWeight) * speed;
+			this.position.x += ((pointer.position.x - halfWidth) / halfWidth) * speed;
+			this.position.y += ((pointer.position.y - halfWeight) / halfWeight) * speed;
 		}
 	}
 
-	if(mouse.buttonPressed(Mouse.RIGHT))
+	if(pointer.buttonPressed(Pointer.RIGHT))
 	{
-		this.position.x += mouse.delta.x;
-		this.position.y += mouse.delta.y;
+		this.position.x += pointer.delta.x;
+		this.position.y += pointer.delta.y;
 	}
 };
 
@@ -1742,12 +1760,12 @@ Circle.prototype.isInside = function(point)
 	return point.length() <= this.radius;
 };
 
-Circle.prototype.onPointerEnter = function(mouse, viewport)
+Circle.prototype.onPointerEnter = function(pointer, viewport)
 {
 	this.fillStyle = "#CCCCCC";
 };
 
-Circle.prototype.onPointerLeave = function(mouse, viewport)
+Circle.prototype.onPointerLeave = function(pointer, viewport)
 {
 	this.fillStyle = "#FFFFFF";
 };
@@ -1812,7 +1830,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var topRight = new Circle();
 	topRight.radius = 4;
-	topRight.onPointerDrag = function()
+	topRight.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.min.copy(topRight.position);
 		updateHelpers();
@@ -1821,7 +1839,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var topLeft = new Circle();
 	topLeft.radius = 4;
-	topLeft.onPointerDrag = function()
+	topLeft.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.max.x = topLeft.position.x;
 		self.box.min.y = topLeft.position.y;
@@ -1831,7 +1849,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var bottomLeft = new Circle();
 	bottomLeft.radius = 4;
-	bottomLeft.onPointerDrag = function()
+	bottomLeft.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.max.copy(bottomLeft.position);
 		updateHelpers();
@@ -1840,7 +1858,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var bottomRight = new Circle();
 	bottomRight.radius = 4;
-	bottomRight.onPointerDrag = function()
+	bottomRight.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.min.x = bottomRight.position.x;
 		self.box.max.y = bottomRight.position.y;
@@ -1851,12 +1869,12 @@ Box.prototype.createResizeHelpers = function(first_argument)
 	updateHelpers();
 };
 
-Box.prototype.onPointerEnter = function(mouse, viewport)
+Box.prototype.onPointerEnter = function(pointer, viewport)
 {
 	this.fillStyle = "#CCCCCC";
 };
 
-Box.prototype.onPointerLeave = function(mouse, viewport)
+Box.prototype.onPointerLeave = function(pointer, viewport)
 {
 	this.fillStyle = "#FFFFFF";
 };
@@ -1966,4 +1984,4 @@ Image.prototype.draw = function(context)
 	context.drawImage(this.image, 0, 0);
 };
 
-export { Box, Box2, Circle, EventManager, Image, Key, Line, Matrix, Mouse, Object2D, Renderer, Text, UUID, Vector2, Viewport };
+export { Box, Box2, Circle, EventManager, Image, Key, Line, Matrix, Object2D, Pointer, Renderer, Text, UUID, Vector2, Viewport };

examples/diagram.html

@@ -35,6 +35,12 @@
 		// Create the diagram
 		var group = new Diagram.Object2D();
 
+		var image = new Diagram.Image("grid.png");
+		image.position.set(-300, -400);
+		image.scale.set(1, 1);
+		image.layer = 5;
+		group.add(image);
+
 		var background = new Diagram.Image("hexagon.jpg");
 		background.position.set(-300, -400);
 		background.scale.set(1, 1);
@@ -81,7 +87,10 @@
 
 		// Update and render the diagram
 		function loop()
-		{
+		{	
+			group.rotation += 0.001;
+			image.rotation += 0.01;
+
 			renderer.update(group, viewport);
 			renderer.render(group, viewport);
 

source/Diagram.js

@@ -6,7 +6,7 @@ export {Renderer} from "./Renderer.js";
 export {Viewport} from "./Viewport.js";
 
 export {Key} from "./input/Key.js";
-export {Mouse} from "./input/Mouse.js";
+export {Pointer} from "./input/Pointer.js";
 
 export {Box2} from "./math/Box2.js";
 export {Matrix} from "./math/Matrix.js";

source/Object2D.js

@@ -41,6 +41,11 @@ function Object2D()
 	 */
 	this.rotation = 0.0;
 
+	/**
+	 * Indicates if the object is visible.
+	 */
+	this.visible = true;
+
 	/**
 	 * Layer of this object, objects are sorted by layer value.
 	 *
@@ -63,7 +68,7 @@ function Object2D()
 	/**
 	 * Inverse of the global matrix.
 	 *
-	 * Used to convert mouse input points into object coordinates.
+	 * Used to convert pointer input points into object coordinates.
 	 */
 	this.inverseGlobalMatrix = new Matrix();
 
@@ -172,38 +177,45 @@ Object2D.prototype.updateMatrix = function(context)
  */
 Object2D.prototype.draw = function(context){};
 
+/**
+ * Callback method called every time before the object is draw into the canvas.
+ *
+ * Can be used to run preparation code, move the object, etc.
+ */
+Object2D.prototype.onUpdate = null;
+
 /**
  * Callback method called when the pointer enters the object.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerEnter = null;
 
 /**
  * Callback method called when the was inside of the object and leaves the object.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerLeave = null;
 
 /**
  * Callback method while the pointer is over (inside) of the object.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onPointerOver = null;
 
 /**
  * Callback method while the object is being dragged across the screen.
  *
- * Receives (mouse, viewport, delta) as arguments. Delta is the movement of the mouse already translated into local object coordinates.
+ * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
  */
 Object2D.prototype.onPointerDrag = null;
 
 /**
  * Callback method called while the pointer button is pressed.
  *
- * Receives (mouse, viewport) as arguments.
+ * Receives (pointer, viewport) as arguments.
  */
 Object2D.prototype.onButtonPressed = null;
 

source/Renderer.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import {Mouse} from "./input/Mouse.js";
+import {Pointer} from "./input/Pointer.js";
 
 /**
  * The renderer is resposible for drawing the structure into the canvas element.
@@ -24,10 +24,10 @@ function Renderer(canvas)
 	this.context.globalCompositeOperation = "source-over";
 
 	/**
-	 * Mouse input handler object.
+	 * Pointer input handler object.
 	 */
-	this.mouse = new Mouse();
-	this.mouse.setCanvas(canvas);
+	this.pointer = new Pointer();
+	this.pointer.setCanvas(canvas);
 }
 
 /**
@@ -38,46 +38,44 @@ function Renderer(canvas)
  */
 Renderer.prototype.update = function(object, viewport)
 {
-	this.mouse.update();
+	this.pointer.update();
 
-	var mouse = this.mouse;
+	var pointer = this.pointer;
 
 	// Viewport transform matrix
-	viewport.updateControls(mouse);
+	viewport.updateControls(pointer);
 	viewport.updateMatrix();
 
-	// Project mouse coordinates
-	var point = mouse.position.clone();
+	// Project pointer coordinates
+	var point = pointer.position.clone();
 	var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
 	// Object transformation matrices
 	object.traverse(function(child)
-	{
-		child.updateMatrix();
-		
+	{		
 		var childPoint = child.inverseGlobalMatrix.transformPoint(viewportPoint);
 
-		// Check if the mouse pointer is inside
+		// Check if the pointer pointer is inside
 		if(child.isInside(childPoint))
 		{
 			// Pointer enter
 			if(!child.pointerInside && child.onPointerEnter !== null)
 			{			
-				child.onPointerEnter(mouse, viewport);
+				child.onPointerEnter(pointer, viewport);
 			}
 
 			// Pointer over
 			if(child.onPointerOver !== null)
 			{
-				child.onPointerOver(mouse, viewport);
+				child.onPointerOver(pointer, viewport);
 			}
 
 			// Pointer just pressed
-			if(mouse.buttonJustPressed(Mouse.LEFT))
+			if(pointer.buttonJustPressed(Pointer.LEFT))
 			{
 				if(child.onButtonDown !== null)
 				{
-					child.onButtonDown(mouse, viewport);
+					child.onButtonDown(pointer, viewport);
 				}
 
 				if(child.draggable)
@@ -87,15 +85,15 @@ Renderer.prototype.update = function(object, viewport)
 			}
 
 			// Pointer pressed
-			if(mouse.buttonPressed(Mouse.LEFT) && child.onButtonPressed !== null)
+			if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
 			{	
-				child.onButtonPressed(mouse, viewport);
+				child.onButtonPressed(pointer, viewport);
 			}
 
 			// Just released
-			if(mouse.buttonJustReleased(Mouse.LEFT) && child.onButtonUp !== null)
+			if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
 			{	
-				child.onButtonUp(mouse, viewport);
+				child.onButtonUp(pointer, viewport);
 			}
 
 			child.pointerInside = true;
@@ -105,14 +103,14 @@ Renderer.prototype.update = function(object, viewport)
 			// Pointer leave
 			if(child.onPointerLeave !== null)
 			{
-				child.onPointerLeave(mouse, viewport);
+				child.onPointerLeave(pointer, viewport);
 			}
 
 			child.pointerInside = false;
 		}
 
 		// Stop object drag
-		if(mouse.buttonJustReleased(Mouse.LEFT))
+		if(pointer.buttonJustReleased(Pointer.LEFT))
 		{	
 			if(child.draggable)
 			{
@@ -127,14 +125,22 @@ Renderer.prototype.update = function(object, viewport)
 			matrix.multiply(child.inverseGlobalMatrix);
 			matrix.setPosition(0, 0);
 
-			var delta = matrix.transformPoint(mouse.delta);
+			var delta = matrix.transformPoint(pointer.delta);
 			child.position.add(delta);
 
 			if(child.onPointerDrag !== null)
 			{
-				child.onPointerDrag(mouse, viewport, delta)
+				child.onPointerDrag(pointer, viewport, delta);
 			}
 		}
+
+		// On update
+		if(child.onUpdate !== null)
+		{
+			child.onUpdate();
+		}
+
+		child.updateMatrix();
 	});
 };
 
@@ -161,7 +167,10 @@ Renderer.prototype.render = function(object, viewport)
 	var objects = []
 	object.traverse(function(child)
 	{
-		objects.push(child);
+		if(child.visible)
+		{
+			objects.push(child);
+		}
 	});
 
 	// Sort objects by layer

source/Viewport.js

@@ -3,7 +3,7 @@
 import {Vector2} from "./math/Vector2.js";
 import {Matrix} from "./math/Matrix.js";
 import {UUID} from "./math/UUID.js";
-import {Mouse} from "./input/Mouse.js";
+import {Pointer} from "./input/Pointer.js";
 
 /**
  * Used to indicate how the user views the content inside of the canvas.
@@ -56,29 +56,29 @@ function Viewport()
 }
 
 /**
- * Update the viewport controls using the mouse object.
+ * Update the viewport controls using the pointer object.
  */
-Viewport.prototype.updateControls = function(mouse)
+Viewport.prototype.updateControls = function(pointer)
 {	
-	if(mouse.wheel !== 0)
+	if(pointer.wheel !== 0)
 	{
-		this.scale -= mouse.wheel * 1e-3 * this.scale;
+		this.scale -= pointer.wheel * 1e-3 * this.scale;
 
 		if(this.moveOnScale)
 		{	
-			var speed = mouse.wheel / this.scale;
-			var halfWidth = mouse.canvas.width / 2;
-			var halfWeight = mouse.canvas.height / 2;
+			var speed = pointer.wheel / this.scale;
+			var halfWidth = pointer.canvas.width / 2;
+			var halfWeight = pointer.canvas.height / 2;
 
-			this.position.x += ((mouse.position.x - halfWidth) / halfWidth) * speed;
-			this.position.y += ((mouse.position.y - halfWeight) / halfWeight) * speed;
+			this.position.x += ((pointer.position.x - halfWidth) / halfWidth) * speed;
+			this.position.y += ((pointer.position.y - halfWeight) / halfWeight) * speed;
 		}
 	}
 
-	if(mouse.buttonPressed(Mouse.RIGHT))
+	if(pointer.buttonPressed(Pointer.RIGHT))
 	{
-		this.position.x += mouse.delta.x;
-		this.position.y += mouse.delta.y;
+		this.position.x += pointer.delta.x;
+		this.position.y += pointer.delta.y;
 	}
 };
 

source/input/Key.js

@@ -1,7 +1,7 @@
 "use strict";
 
 /**
- * Key is used by Keyboard, Mouse, etc, to represent a key state.
+ * Key is used by Keyboard, Pointer, etc, to represent a key state.
  *
  * @class
 */

source/input/Mouse.js → source/input/Pointer.js

@@ -5,15 +5,15 @@ import {Vector2} from "../math/Vector2.js";
 import {Key} from "./Key.js";
 
 /**
- * Mouse instance for input in sync with the running 3D application.
+ * Pointer instance for input in sync with the running 3D application.
  *
- * The mouse object provided by scripts is automatically updated by the runtime handler.
+ * The pointer object provided by scripts is automatically updated by the runtime handler.
  * 
  * @class
- * @param {DOM} domElement DOM element to craete the mouse events.
- * @param {Boolean} dontInitialize If true the mouse events are not created.
+ * @param {DOM} domElement DOM element to craete the pointer events.
+ * @param {Boolean} dontInitialize If true the pointer events are not created.
  */
-function Mouse(domElement, dontInitialize)
+function Pointer(domElement)
 {
 	//Raw data
 	this._keys = new Array(5);
@@ -25,37 +25,37 @@ function Mouse(domElement, dontInitialize)
 	this._doubleClicked = new Array(5);
 
 	/**
-	 * Array with mouse buttons status.
+	 * Array with pointer buttons status.
 	 */
 	this.keys = new Array(5);
 
 	/**
-	 * Mouse position inside of the window (coordinates in window space).
+	 * Pointer position inside of the window (coordinates in window space).
 	 */
 	this.position = new Vector2(0, 0);
 
 	/**
-	 * Mouse movement (coordinates in window space).
+	 * Pointer movement (coordinates in window space).
 	 */
 	this.delta = new Vector2(0, 0);
 
 	/**
-	 * Mouse scroll wheel movement.
+	 * Pointer scroll wheel movement.
 	 */
 	this.wheel = 0;
 	
 	/**
-	 * Indicates a button of the mouse was double clicked.
+	 * Indicates a button of the pointer was double clicked.
 	 */
 	this.doubleClicked = new Array(5);
 
 	/**
-	 * DOM element where to attach the mouse events.
+	 * DOM element where to attach the pointer events.
 	 */
 	this.domElement = (domElement !== undefined) ? domElement : window;
 
 	/**
-	 * Canvas attached to this mouse instance used to calculate position and delta in element space coordinates.
+	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
 	 */
 	this.canvas = null;
 	
@@ -120,7 +120,7 @@ function Mouse(domElement, dontInitialize)
 			var touch = event.touches[0];
 
 			self.updatePosition(touch.clientX, touch.clientY, 0, 0);
-			self.updateKey(Mouse.LEFT, Key.DOWN);
+			self.updateKey(Pointer.LEFT, Key.DOWN);
 
 			lastTouch.set(touch.clientX, touch.clientY);
 		});
@@ -128,13 +128,13 @@ function Mouse(domElement, dontInitialize)
 		//Touch end event
 		this.events.add(this.domElement, "touchend", function(event)
 		{
-			self.updateKey(Mouse.LEFT, Key.UP);
+			self.updateKey(Pointer.LEFT, Key.UP);
 		});
 
 		//Touch cancel event
 		this.events.add(this.domElement, "touchcancel", function(event)
 		{
-			self.updateKey(Mouse.LEFT, Key.UP);
+			self.updateKey(Pointer.LEFT, Key.UP);
 		});
 
 		//Touch move event
@@ -170,124 +170,121 @@ function Mouse(domElement, dontInitialize)
 		self.updateKey(event.which - 1, Key.UP);
 	});
 
-	//Mouse double click
+	//Pointer double click
 	this.events.add(this.domElement, "dblclick", function(event)
 	{	
 		self._doubleClicked[event.which - 1] = true;
 	});
 
-	if(dontInitialize !== true)
-	{
-		this.create();
-	}
+	this.create();
 }
 
-Mouse.prototype = Mouse;
-Mouse.prototype.constructor = Mouse;
+Pointer.prototype = Pointer;
+Pointer.prototype.constructor = Pointer;
 
 /**
- * Left mouse button.
+ * Left pointer button.
  */
-Mouse.LEFT = 0;
+Pointer.LEFT = 0;
 
 /**
- * Middle mouse button.
+ * Middle pointer button.
  */
-Mouse.MIDDLE = 1;
+Pointer.MIDDLE = 1;
 
 /**
- * Right mouse button.
+ * Right pointer button.
  */
-Mouse.RIGHT = 2;
+Pointer.RIGHT = 2;
 
 /**
- * Back mouse navigation button.
+ * Back pointer navigation button.
  */
-Mouse.BACK = 3;
+Pointer.BACK = 3;
 
 /**
- * Forward mouse navigation button.
+ * Forward pointer navigation button.
  */
-Mouse.FORWARD = 4;
+Pointer.FORWARD = 4;
 
 /**
  * Element to be used for coordinates calculation relative to that canvas.
  * 
- * @param {DOM} canvas Canvas to be attached to the Mouse instance
+ * @param {DOM} canvas Canvas to be attached to the Pointer instance
  */
-Mouse.setCanvas = function(element)
+Pointer.setCanvas = function(element)
 {
 	this.canvas = element;
 
-	element.mouseInside = false;
+	element.pointerInside = false;
 
 	element.addEventListener("mouseenter", function()
 	{
-		this.mouseInside = true;
+		this.pointerInside = true;
 	});
 
 	element.addEventListener("mouseleave", function()
 	{
-		this.mouseInside = false;
+		this.pointerInside = false;
 	});
 };
 
 /**
- * Check if mouse is inside attached canvas (updated async).
+ * Check if pointer is inside attached canvas (updated async).
  * 
- * @return {boolean} True if mouse is currently inside the canvas
+ * @return {boolean} True if pointer is currently inside the canvas
  */
-Mouse.insideCanvas = function()
+Pointer.insideCanvas = function()
 {
-	return this.canvas !== null && this.canvas.mouseInside;
+	return this.canvas !== null && this.canvas.pointerInside;
 };
 
 /**
- * Check if mouse button is currently pressed.
+ * Check if pointer button is currently pressed.
  * 
  * @param {Number} button Button to check status of
  * @return {boolean} True if button is currently pressed
  */
-Mouse.buttonPressed = function(button)
+Pointer.buttonPressed = function(button)
 {
 	return this.keys[button].pressed;
 };
 
 /**
- * Check if mouse button was double clicked.
+ * Check if pointer button was double clicked.
  * 
  * @param {Number} button Button to check status of
- * @return {boolean} True if some mouse button was just double clicked
+ * @return {boolean} True if some pointer button was just double clicked
  */
-Mouse.buttonDoubleClicked = function(button)
+Pointer.buttonDoubleClicked = function(button)
 {
 	return this.doubleClicked[button];
 };
 
 /**
- * Check if a mouse button was just pressed.
+ * Check if a pointer button was just pressed.
  * 
  * @param {Number} button Button to check status of
  * @return {boolean} True if button was just pressed
  */
-Mouse.buttonJustPressed = function(button)
+Pointer.buttonJustPressed = function(button)
 {
 	return this.keys[button].justPressed;
 };
 
 /**
- * Check if a mouse button was just released.
+ * Check if a pointer button was just released.
  * 
  * @param {Number} button Button to check status of
  * @return {boolean} True if button was just released
  */
-Mouse.buttonJustReleased = function(button)
+Pointer.buttonJustReleased = function(button)
 {
 	return this.keys[button].justReleased;
 };
 
 /**
- * Update mouse position.
+ * Update pointer position.
  *
  * Automatically called by the runtime.
  * 
@@ -296,7 +293,7 @@ Mouse.buttonJustReleased = function(button)
  * @param {Number} xDiff
  * @param {Number} yDiff
  */
-Mouse.updatePosition = function(x, y, xDiff, yDiff)
+Pointer.updatePosition = function(x, y, xDiff, yDiff)
 {
 	if(this.canvas !== null)
 	{
@@ -312,14 +309,14 @@ Mouse.updatePosition = function(x, y, xDiff, yDiff)
 };
 
 /**
- * Update a mouse button.
+ * Update a pointer button.
  * 
  * Automatically called by the runtime.
  *
  * @param {Number} button
  * @param {Number} action
  */
-Mouse.updateKey = function(button, action)
+Pointer.updateKey = function(button, action)
 {
 	if(button > -1)
 	{
@@ -328,11 +325,11 @@ Mouse.updateKey = function(button, action)
 };
 
 /**
- * Update mouse buttons state, position, wheel and delta synchronously.
+ * Update pointer buttons state, position, wheel and delta synchronously.
  */
-Mouse.update = function()
+Pointer.update = function()
 {
-	//Update mouse keys state
+	//Update pointer keys state
 	for(var i = 0; i < 5; i++)
 	{
 		if(this._keys[i].justPressed && this.keys[i].justPressed)
@@ -346,7 +343,7 @@ Mouse.update = function()
 
 		this.keys[i].set(this._keys[i].justPressed, this._keys[i].pressed, this._keys[i].justReleased);
 
-		//Update mouse double click
+		//Update pointer double click
 		if(this._doubleClicked[i] === true)
 		{
 			this.doubleClicked[i] = true;
@@ -358,7 +355,7 @@ Mouse.update = function()
 		}
 	}
 
-	//Update mouse wheel
+	//Update pointer wheel
 	if(this._wheelUpdated)
 	{
 		this.wheel = this._wheel;
@@ -369,7 +366,7 @@ Mouse.update = function()
 		this.wheel = 0;
 	}
 
-	//Update mouse Position if needed
+	//Update pointer Position if needed
 	if(this._positionUpdated)
 	{
 		this.delta.copy(this._delta);
@@ -386,20 +383,20 @@ Mouse.update = function()
 };
 
 /**
- * Create mouse events.
+ * Create pointer events.
  */
-Mouse.create = function()
+Pointer.create = function()
 {
 	this.events.create();
 };
 
 /**
- * Dispose mouse events.
+ * Dispose pointer events.
  */
-Mouse.dispose = function()
+Pointer.dispose = function()
 {
 	this.events.destroy();
 };
 
 
-export {Mouse};
+export {Pointer};

source/math/UUID.js

@@ -23,15 +23,15 @@ UUID.generate = (function ()
 
 	return function generateUUID()
 	{
-		var d0 = Math.random() * 0xffffffff | 0;
-		var d1 = Math.random() * 0xffffffff | 0;
-		var d2 = Math.random() * 0xffffffff | 0;
-		var d3 = Math.random() * 0xffffffff | 0;
+		var d0 = Math.random() * 0XFFFFFFFF | 0;
+		var d1 = Math.random() * 0XFFFFFFFF | 0;
+		var d2 = Math.random() * 0XFFFFFFFF | 0;
+		var d3 = Math.random() * 0XFFFFFFFF | 0;
 
-		var uuid = lut[ d0 & 0xff ] + lut[ d0 >> 8 & 0xff ] + lut[ d0 >> 16 & 0xff ] + lut[ d0 >> 24 & 0xff ] + "-" +
-			lut[ d1 & 0xff ] + lut[ d1 >> 8 & 0xff ] + "-" + lut[ d1 >> 16 & 0x0f | 0x40 ] + lut[ d1 >> 24 & 0xff ] + "-" +
-			lut[ d2 & 0x3f | 0x80 ] + lut[ d2 >> 8 & 0xff ] + "-" + lut[ d2 >> 16 & 0xff ] + lut[ d2 >> 24 & 0xff ] +
-			lut[ d3 & 0xff ] + lut[ d3 >> 8 & 0xff ] + lut[ d3 >> 16 & 0xff ] + lut[ d3 >> 24 & 0xff ];
+		var uuid = lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + "-" +
+			lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + "-" + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + "-" +
+			lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + "-" + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
+			lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff];
 
 		return uuid.toUpperCase();
 	};

source/objects/Box.js

@@ -50,7 +50,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var topRight = new Circle();
 	topRight.radius = 4;
-	topRight.onPointerDrag = function()
+	topRight.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.min.copy(topRight.position);
 		updateHelpers();
@@ -59,7 +59,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var topLeft = new Circle();
 	topLeft.radius = 4;
-	topLeft.onPointerDrag = function()
+	topLeft.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.max.x = topLeft.position.x;
 		self.box.min.y = topLeft.position.y;
@@ -69,7 +69,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var bottomLeft = new Circle();
 	bottomLeft.radius = 4;
-	bottomLeft.onPointerDrag = function()
+	bottomLeft.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.max.copy(bottomLeft.position);
 		updateHelpers();
@@ -78,7 +78,7 @@ Box.prototype.createResizeHelpers = function(first_argument)
 
 	var bottomRight = new Circle();
 	bottomRight.radius = 4;
-	bottomRight.onPointerDrag = function()
+	bottomRight.onPointerDrag = function(pointer, viewport, delta)
 	{
 		self.box.min.x = bottomRight.position.x;
 		self.box.max.y = bottomRight.position.y;
@@ -89,12 +89,12 @@ Box.prototype.createResizeHelpers = function(first_argument)
 	updateHelpers();
 };
 
-Box.prototype.onPointerEnter = function(mouse, viewport)
+Box.prototype.onPointerEnter = function(pointer, viewport)
 {
 	this.fillStyle = "#CCCCCC";
 };
 
-Box.prototype.onPointerLeave = function(mouse, viewport)
+Box.prototype.onPointerLeave = function(pointer, viewport)
 {
 	this.fillStyle = "#FFFFFF";
 };

source/objects/Circle.js

@@ -33,12 +33,12 @@ Circle.prototype.isInside = function(point)
 	return point.length() <= this.radius;
 };
 
-Circle.prototype.onPointerEnter = function(mouse, viewport)
+Circle.prototype.onPointerEnter = function(pointer, viewport)
 {
 	this.fillStyle = "#CCCCCC";
 };
 
-Circle.prototype.onPointerLeave = function(mouse, viewport)
+Circle.prototype.onPointerLeave = function(pointer, viewport)
 {
 	this.fillStyle = "#FFFFFF";
 };