x_ite 4.0.5 → 4.7.5

package/src/x_ite/Browser/Picking/IntersectionType.js

@@ -0,0 +1,63 @@
+/* -*- Mode: JavaScript; coding: utf-8; tab-width: 3; indent-tabs-mode: tab; c-basic-offset: 3 -*-
+ *******************************************************************************
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright create3000, Scheffelstraße 31a, Leipzig, Germany 2011.
+ *
+ * All rights reserved. Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * The copyright notice above does not evidence any actual of intended
+ * publication of such source code, and is an unpublished work by create3000.
+ * This material contains CONFIDENTIAL INFORMATION that is the property of
+ * create3000.
+ *
+ * No permission is granted to copy, distribute, or create derivative works from
+ * the contents of this software, in whole or in part, without the prior written
+ * permission of create3000.
+ *
+ * NON-MILITARY USE ONLY
+ *
+ * All create3000 software are effectively free software with a non-military use
+ * restriction. It is free. Well commented source is provided. You may reuse the
+ * source in any way you please with the exception anything that uses it must be
+ * marked to indicate is contains 'non-military use only' components.
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright 2015, 2016 Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * This file is part of the X_ITE Project.
+ *
+ * X_ITE is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License version 3 only, as published by the
+ * Free Software Foundation.
+ *
+ * X_ITE is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU General Public License version 3 for more
+ * details (a copy is included in the LICENSE file that accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version 3
+ * along with X_ITE.  If not, see <http://www.gnu.org/licenses/gpl.html> for a
+ * copy of the GPLv3 License.
+ *
+ * For Silvio, Joy and Adi.
+ *
+ ******************************************************************************/
+
+
+define (function ()
+{
+"use strict";
+
+	var i = 0;
+
+	var IntersectionType =
+	{
+		BOUNDS:   i ++,
+		GEOMETRY: i ++,
+	};
+
+	return IntersectionType;
+});

package/src/x_ite/Browser/Picking/MatchCriterion.js

@@ -0,0 +1,64 @@
+/* -*- Mode: JavaScript; coding: utf-8; tab-width: 3; indent-tabs-mode: tab; c-basic-offset: 3 -*-
+ *******************************************************************************
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright create3000, Scheffelstraße 31a, Leipzig, Germany 2011.
+ *
+ * All rights reserved. Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * The copyright notice above does not evidence any actual of intended
+ * publication of such source code, and is an unpublished work by create3000.
+ * This material contains CONFIDENTIAL INFORMATION that is the property of
+ * create3000.
+ *
+ * No permission is granted to copy, distribute, or create derivative works from
+ * the contents of this software, in whole or in part, without the prior written
+ * permission of create3000.
+ *
+ * NON-MILITARY USE ONLY
+ *
+ * All create3000 software are effectively free software with a non-military use
+ * restriction. It is free. Well commented source is provided. You may reuse the
+ * source in any way you please with the exception anything that uses it must be
+ * marked to indicate is contains 'non-military use only' components.
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright 2015, 2016 Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * This file is part of the X_ITE Project.
+ *
+ * X_ITE is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License version 3 only, as published by the
+ * Free Software Foundation.
+ *
+ * X_ITE is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU General Public License version 3 for more
+ * details (a copy is included in the LICENSE file that accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version 3
+ * along with X_ITE.  If not, see <http://www.gnu.org/licenses/gpl.html> for a
+ * copy of the GPLv3 License.
+ *
+ * For Silvio, Joy and Adi.
+ *
+ ******************************************************************************/
+
+
+define (function ()
+{
+"use strict";
+
+	var i = 0;
+
+	var MatchCriterion =
+	{
+		MATCH_ANY:      i ++,
+		MATCH_EVERY:    i ++,
+		MATCH_ONLY_ONE: i ++,
+	};
+
+	return MatchCriterion;
+});

package/src/x_ite/Browser/Picking/SortOrder.js

@@ -0,0 +1,65 @@
+/* -*- Mode: JavaScript; coding: utf-8; tab-width: 3; indent-tabs-mode: tab; c-basic-offset: 3 -*-
+ *******************************************************************************
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright create3000, Scheffelstraße 31a, Leipzig, Germany 2011.
+ *
+ * All rights reserved. Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * The copyright notice above does not evidence any actual of intended
+ * publication of such source code, and is an unpublished work by create3000.
+ * This material contains CONFIDENTIAL INFORMATION that is the property of
+ * create3000.
+ *
+ * No permission is granted to copy, distribute, or create derivative works from
+ * the contents of this software, in whole or in part, without the prior written
+ * permission of create3000.
+ *
+ * NON-MILITARY USE ONLY
+ *
+ * All create3000 software are effectively free software with a non-military use
+ * restriction. It is free. Well commented source is provided. You may reuse the
+ * source in any way you please with the exception anything that uses it must be
+ * marked to indicate is contains 'non-military use only' components.
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright 2015, 2016 Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * This file is part of the X_ITE Project.
+ *
+ * X_ITE is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License version 3 only, as published by the
+ * Free Software Foundation.
+ *
+ * X_ITE is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU General Public License version 3 for more
+ * details (a copy is included in the LICENSE file that accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version 3
+ * along with X_ITE.  If not, see <http://www.gnu.org/licenses/gpl.html> for a
+ * copy of the GPLv3 License.
+ *
+ * For Silvio, Joy and Adi.
+ *
+ ******************************************************************************/
+
+
+define (function ()
+{
+"use strict";
+
+	var i = 0;
+
+	var SortOrder =
+	{
+		ANY:        i ++,
+		CLOSEST:    i ++,
+		ALL:        i ++,
+		ALL_SORTED: i ++,
+	};
+
+	return SortOrder;
+});

package/src/x_ite/Browser/Picking/VolumePicker.js

@@ -0,0 +1,197 @@
+/* -*- Mode: JavaScript; coding: utf-8; tab-width: 3; indent-tabs-mode: tab; c-basic-offset: 3 -*-
+ *******************************************************************************
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright create3000, Scheffelstraße 31a, Leipzig, Germany 2011.
+ *
+ * All rights reserved. Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * The copyright notice above does not evidence any actual of intended
+ * publication of such source code, and is an unpublished work by create3000.
+ * This material contains CONFIDENTIAL INFORMATION that is the property of
+ * create3000.
+ *
+ * No permission is granted to copy, distribute, or create derivative works from
+ * the contents of this software, in whole or in part, without the prior written
+ * permission of create3000.
+ *
+ * NON-MILITARY USE ONLY
+ *
+ * All create3000 software are effectively free software with a non-military use
+ * restriction. It is free. Well commented source is provided. You may reuse the
+ * source in any way you please with the exception anything that uses it must be
+ * marked to indicate is contains 'non-military use only' components.
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright 2015, 2016 Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * This file is part of the X_ITE Project.
+ *
+ * X_ITE is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License version 3 only, as published by the
+ * Free Software Foundation.
+ *
+ * X_ITE is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU General Public License version 3 for more
+ * details (a copy is included in the LICENSE file that accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version 3
+ * along with X_ITE.  If not, see <http://www.gnu.org/licenses/gpl.html> for a
+ * copy of the GPLv3 License.
+ *
+ * For Silvio, Joy and Adi.
+ *
+ ******************************************************************************/
+
+
+define ([
+	"standard/Math/Numbers/Vector3",
+	"standard/Math/Numbers/Rotation4",
+	"standard/Math/Numbers/Matrix4",
+	X3D .getComponentUrl ("rigid-body-physics"),
+],
+function (Vector3,
+          Rotation4,
+          Matrix4,
+          RigidBodyPhysics)
+{
+"use strict";
+
+	var Ammo = RigidBodyPhysics .Ammo;
+
+	function VolumePicker ()
+	{
+		this .broadphase             = new Ammo .btDbvtBroadphase ();
+		this .collisionConfiguration = new Ammo .btDefaultCollisionConfiguration ();
+		this .dispatcher             = new Ammo .btCollisionDispatcher (this .collisionConfiguration);
+		this .collisionWorld         = new Ammo .btCollisionWorld (this .dispatcher, this .broadphase, this .collisionConfiguration);
+
+		this .compoundShape1         = new Ammo .btCompoundShape ();
+		this .motionState1           = new Ammo .btDefaultMotionState ();
+		this .constructionInfo1      = new Ammo .btRigidBodyConstructionInfo (0, this .motionState1, this .compoundShape1);
+		this .rigidBody1             = new Ammo .btRigidBody (this .constructionInfo1);
+
+		this .compoundShape2         = new Ammo .btCompoundShape ();
+		this .motionState2           = new Ammo .btDefaultMotionState ();
+		this .constructionInfo2      = new Ammo .btRigidBodyConstructionInfo (0, this .motionState2, this .compoundShape2);
+		this .rigidBody2             = new Ammo .btRigidBody (this .constructionInfo2);
+
+		this .collisionWorld .addCollisionObject (this .rigidBody1);
+		this .collisionWorld .addCollisionObject (this .rigidBody2);
+	}
+
+	VolumePicker .prototype =
+	{
+		constuctor: VolumePicker,
+		setChildShape1: function (matrix, childShape)
+		{
+			this .setChildShape (this .compoundShape1, matrix, childShape);
+		},
+		setChildShape2: function (matrix, childShape)
+		{
+			this .setChildShape (this .compoundShape2, matrix, childShape);
+		},
+		setChildShape1Components: function (transform, localScaling, childShape)
+		{
+			this .setChildShapeComponents (this .compoundShape1, transform, localScaling, childShape);
+		},
+		setChildShape2Components: function (transform, localScaling, childShape)
+		{
+			this .setChildShapeComponents (this .compoundShape2, transform, localScaling, childShape);
+		},
+		setChildShape: (function ()
+		{
+			var
+				translation = new Vector3 (0, 0, 0),
+				rotation    = new Rotation4 (0, 0, 1, 0),
+				scale       = new Vector3 (1, 1, 1),
+				s           = new Ammo .btVector3 (0, 0, 0);
+
+			return function (compoundShape, matrix, childShape)
+			{
+				try
+				{
+					if (compoundShape .getNumChildShapes ())
+						compoundShape .removeChildShapeByIndex (0);
+
+					if (childShape .getNumChildShapes ())
+					{
+						matrix .get (translation, rotation, scale);
+
+						s .setValue (scale .x, scale .y, scale .z);
+
+						childShape .setLocalScaling (s);
+						compoundShape .addChildShape (this .getTransform (translation, rotation), childShape);
+					}
+				}
+				catch (error)
+				{
+					// matrix .get
+				}
+			};
+		})(),
+		setChildShapeComponents: function (compoundShape, transform, localScaling, childShape)
+		{
+			if (compoundShape .getNumChildShapes ())
+				compoundShape .removeChildShapeByIndex (0);
+
+			if (childShape .getNumChildShapes ())
+			{
+				childShape .setLocalScaling (localScaling);
+				compoundShape .addChildShape (transform, childShape);
+			}
+		},
+		contactTest: function ()
+		{
+			this .collisionWorld .performDiscreteCollisionDetection ();
+
+			var numManifolds = this .dispatcher .getNumManifolds ();
+
+			for (var i = 0; i < numManifolds; ++ i)
+			{
+				var
+					contactManifold = this .dispatcher .getManifoldByIndexInternal (i),
+					numContacts     = contactManifold .getNumContacts ();
+
+				for (var j = 0; j < numContacts; ++ j)
+				{
+					var pt = contactManifold .getContactPoint (j);
+
+					if (pt .getDistance () <= 0)
+						return true;
+				}
+			}
+
+			return false;
+		},
+		getTransform: (function ()
+		{
+			var
+				T = new Ammo .btTransform (),
+				o = new Ammo .btVector3 (0, 0, 0),
+				m = new Matrix4 ();
+
+			return function (translation, rotation, transform)
+			{
+				var t = transform || T;
+
+				m .set (translation, rotation);
+
+				o .setValue (m [12], m [13], m [14]);
+
+				t .getBasis () .setValue (m [0], m [4], m [8],
+				                          m [1], m [5], m [9],
+				                          m [2], m [6], m [10]);
+
+				t .setOrigin (o);
+
+				return t;
+			};
+		})(),
+	};
+
+	return VolumePicker;
+});

package/src/x_ite/Browser/Picking/X3DPickingContext.js

@@ -0,0 +1,130 @@
+/* -*- Mode: JavaScript; coding: utf-8; tab-width: 3; indent-tabs-mode: tab; c-basic-offset: 3 -*-
+ *******************************************************************************
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright create3000, Scheffelstraße 31a, Leipzig, Germany 2011.
+ *
+ * All rights reserved. Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * The copyright notice above does not evidence any actual of intended
+ * publication of such source code, and is an unpublished work by create3000.
+ * This material contains CONFIDENTIAL INFORMATION that is the property of
+ * create3000.
+ *
+ * No permission is granted to copy, distribute, or create derivative works from
+ * the contents of this software, in whole or in part, without the prior written
+ * permission of create3000.
+ *
+ * NON-MILITARY USE ONLY
+ *
+ * All create3000 software are effectively free software with a non-military use
+ * restriction. It is free. Well commented source is provided. You may reuse the
+ * source in any way you please with the exception anything that uses it must be
+ * marked to indicate is contains 'non-military use only' components.
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright 2015, 2016 Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * This file is part of the X_ITE Project.
+ *
+ * X_ITE is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License version 3 only, as published by the
+ * Free Software Foundation.
+ *
+ * X_ITE is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU General Public License version 3 for more
+ * details (a copy is included in the LICENSE file that accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version 3
+ * along with X_ITE.  If not, see <http://www.gnu.org/licenses/gpl.html> for a
+ * copy of the GPLv3 License.
+ *
+ * For Silvio, Joy and Adi.
+ *
+ ******************************************************************************/
+
+
+define ([
+	"x_ite/Bits/TraverseType",
+],
+function (TraverseType)
+{
+"use strict";
+
+	function X3DPickingContext ()
+	{
+		this .transformSensorNodes = new Set ();
+		this .pickSensorNodes      = [ new Set () ];
+		this .pickingHierarchy     = [ ];
+		this .pickable             = [ false ];
+		this .pickingTime          = 0;
+	}
+
+	X3DPickingContext .prototype =
+	{
+		initialize: function ()
+		{ },
+		addTransformSensor: function (transformSensorNode)
+		{
+			this .transformSensorNodes .add (transformSensorNode);
+			this .enablePicking ();
+		},
+		removeTransformSensor: function (transformSensorNode)
+		{
+			this .transformSensorNodes .delete (transformSensorNode);
+			this .enablePicking ();
+		},
+		addPickSensor: function (pickSensorNode)
+		{
+			this .pickSensorNodes [0] .add (pickSensorNode);
+			this .enablePicking ();
+		},
+		removePickSensor: function (pickSensorNode)
+		{
+			this .pickSensorNodes [0] .delete (pickSensorNode);
+			this .enablePicking ();
+		},
+		getPickSensors: function ()
+		{
+			return this .pickSensorNodes;
+		},
+		getPickingHierarchy: function ()
+		{
+			return this .pickingHierarchy;
+		},
+		getPickable: function ()
+		{
+			return this .pickable;
+		},
+		enablePicking: function ()
+		{
+			if (this .transformSensorNodes .size || this .pickSensorNodes [0] .size)
+				this .sensorEvents_ .addInterest ("picking", this);
+			else
+				this .sensorEvents_ .removeInterest ("picking", this);
+		},
+		picking: function ()
+		{
+			var t0 = performance .now ();
+		
+			this .getWorld () .traverse (TraverseType .PICKING, null);
+
+			this .transformSensorNodes .forEach (function (transformSensorNode)
+			{
+				transformSensorNode .process ();
+			});
+
+			this .pickSensorNodes [0] .forEach (function (pickSensorNode)
+			{
+				pickSensorNode .process ();
+			});
+
+			this .pickingTime = performance .now () - t0;
+		},
+	};
+
+	return X3DPickingContext;
+});

package/src/x_ite/Browser/PointingDeviceSensor/PointingDevice.js

@@ -55,7 +55,7 @@ function ($,
           X3DBaseNode)
 {
 "use strict";
-	
+
 	function PointingDevice (executionContext)
 	{
 		X3DBaseNode .call (this, executionContext);
@@ -65,19 +65,26 @@ function ($,
 		this .motionTime = 0;
 	}
 
-	PointingDevice .prototype = $.extend (Object .create (X3DBaseNode .prototype),
+	PointingDevice .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
 	{
 		constructor: PointingDevice,
+		getTypeName: function ()
+		{
+			return "PointingDevice";
+		},
 		initialize: function ()
 		{
-			var canvas = this .getBrowser () .getCanvas ();
-
-			//canvas .bind ("mousewheel.PointingDevice", this .mousewheel .bind (this));
-			canvas .bind ("mousedown.PointingDevice",  this .mousedown  .bind (this));
-			canvas .bind ("mouseup.PointingDevice",    this .mouseup    .bind (this));
-			canvas .bind ("dblclick.PointingDevice",   this .dblclick   .bind (this));
-			canvas .bind ("mousemove.PointingDevice",  this .mousemove  .bind (this));
-			canvas .bind ("mouseout.PointingDevice",   this .onmouseout .bind (this));
+			var element = this .getBrowser () .getSurface ();
+
+			//element .bind ("mousewheel.PointingDevice", this .mousewheel .bind (this));
+			element .bind ("mousedown.PointingDevice" + this .getId (), this .mousedown  .bind (this));
+			element .bind ("mouseup.PointingDevice"   + this .getId (), this .mouseup    .bind (this));
+			element .bind ("dblclick.PointingDevice"  + this .getId (), this .dblclick   .bind (this));
+			element .bind ("mousemove.PointingDevice" + this .getId (), this .mousemove  .bind (this));
+			element .bind ("mouseout.PointingDevice"  + this .getId (), this .onmouseout .bind (this));
+
+			element .bind ("touchstart.PointingDevice" + this .getId (), this .touchstart .bind (this));
+			element .bind ("touchend.PointingDevice"   + this .getId (), this .touchend   .bind (this));
 		},
 		mousewheel: function (event)
 		{
@@ -87,7 +94,7 @@ function ($,
 		{
 			var browser = this .getBrowser ();
 
-			browser .getCanvas () .focus ();
+			browser .getElement () .focus ();
 
 			if (browser .getShiftKey () && browser .getControlKey ())
 				return;
@@ -95,13 +102,17 @@ function ($,
 			if (event .button === 0)
 			{
 				var
-					offset = browser .getCanvas () .offset (), 
-					x      = event .pageX - offset .left,
-					y      = browser .getCanvas () .height () - (event .pageY - offset .top);
+					element = browser .getSurface (),
+					offset  = element .offset (),
+					x       = event .pageX - offset .left - parseFloat (element .css ('borderLeftWidth')),
+					y       = element .innerHeight () - (event .pageY - offset .top - parseFloat (element .css ('borderTopWidth')));
 
-				browser .getCanvas () .unbind ("mousemove.PointingDevice");
-				$(document) .bind ("mouseup.PointingDevice"   + this .getId (), this .mouseup .bind (this));
+				element .unbind ("mousemove.PointingDevice" + this .getId ());
+
+				$(document) .bind ("mouseup.PointingDevice"   + this .getId (), this .mouseup   .bind (this));
 				$(document) .bind ("mousemove.PointingDevice" + this .getId (), this .mousemove .bind (this));
+				$(document) .bind ("touchend.PointingDevice"  + this .getId (), this .touchend  .bind (this));
+				$(document) .bind ("touchmove.PointingDevice" + this .getId (), this .touchmove .bind (this));
 
 				if (browser .buttonPressEvent (x, y))
 				{
@@ -116,22 +127,21 @@ function ($,
 		mouseup: function (event)
 		{
 			event .preventDefault ();
-	
-			var browser = this .getBrowser ();
 
 			if (event .button === 0)
 			{
-				event .preventDefault ();
-				browser .buttonReleaseEvent ();
-
 				var
-					offset = browser .getCanvas () .offset (), 
-					x      = event .pageX - offset .left,
-					y      = browser .getCanvas () .height () - (event .pageY - offset .top);
-			
-				$(document) .unbind (".PointingDevice" + this .getId ());
-				browser .getCanvas () .bind ("mousemove.PointingDevice", this .mousemove .bind (this));
+					browser = this .getBrowser (),
+					element = browser .getSurface (),
+					offset  = element .offset (),
+					x       = event .pageX - offset .left - parseFloat (element .css ('borderLeftWidth')),
+					y       = element .innerHeight () - (event .pageY - offset .top - parseFloat (element .css ('borderTopWidth')));
 
+
+				$(document) .unbind (".PointingDevice"   + this .getId ());
+				element .bind ("mousemove.PointingDevice" + this .getId (), this .mousemove .bind (this));
+
+				browser .buttonReleaseEvent ();
 				browser .setCursor (this .isOver ? "HAND" : "DEFAULT");
 				browser .finished () .addInterest ("onverifymotion", this, x, y);
 				browser .addBrowserEvent ();
@@ -156,12 +166,61 @@ function ($,
 			this .motionTime = browser .getCurrentTime ();
 
 			var
-				offset = browser .getCanvas () .offset (), 
-				x      = event .pageX - offset .left,
-				y      = browser .getCanvas () .height () - (event .pageY - offset .top);
+				element = browser .getSurface (),
+				offset  = element .offset (),
+				x       = event .pageX - offset .left - parseFloat (element .css ('borderLeftWidth')),
+				y       = element .innerHeight () - (event .pageY - offset .top - parseFloat (element .css ('borderTopWidth')));
 
 			this .onmotion (x, y);
 		},
+		touchstart: function (event)
+		{
+			var touches = event .originalEvent .touches;
+
+			switch (touches .length)
+			{
+				case 1:
+				{
+					// button 0.
+
+					event .button = 0;
+					event .pageX  = touches [0] .pageX;
+					event .pageY  = touches [0] .pageY;
+
+					this .mousedown (event);
+					break;
+				}
+				case 2:
+				{
+					this .touchend (event);
+					break;
+				}
+			}
+		},
+		touchend: function (event)
+		{
+			event .button = 0;
+			this .mouseup (event);
+		},
+		touchmove: function (event)
+		{
+			var touches = event .originalEvent .touches;
+
+			switch (touches .length)
+			{
+				case 1:
+				{
+					// button 0.
+
+					event .button = 0;
+					event .pageX  = touches [0] .pageX;
+					event .pageY  = touches [0] .pageY;
+
+					this .mousemove (event);
+					break;
+				}
+			}
+		},
 		onmotion: function (x, y)
 		{
 			var browser = this .getBrowser ();