x_ite 4.0.5 → 4.7.5

package/src/x_ite/Browser/Navigation/ExamineViewer.js

@@ -49,89 +49,156 @@
 
 define ([
 	"jquery",
+	"x_ite/Fields",
+	"x_ite/Basic/X3DFieldDefinition",
+	"x_ite/Basic/FieldDefinitionArray",
+	"x_ite/Bits/X3DConstants",
 	"x_ite/Browser/Navigation/X3DViewer",
+	"x_ite/Components/Followers/PositionChaser",
+	"x_ite/Components/Followers/OrientationChaser",
+	"standard/Math/Numbers/Vector2",
 	"standard/Math/Numbers/Vector3",
 	"standard/Math/Numbers/Rotation4",
 	"jquery-mousewheel",
 ],
-function ($, X3DViewer, Vector3, Rotation4)
+function ($,
+          Fields,
+          X3DFieldDefinition,
+          FieldDefinitionArray,
+          X3DConstants,
+          X3DViewer,
+          PositionChaser,
+          OrientationChaser,
+          Vector2,
+          Vector3,
+          Rotation4)
 {
 "use strict";
 
+	var macOS = /Mac OS X/i .test (navigator .userAgent)
+
 	var
 		MOTION_TIME       = 0.05 * 1000,
-		SPIN_RELEASE_TIME = 0.01 * 1000,
-		SPIN_ANGLE        = 0.006,
+		SPIN_RELEASE_TIME = 0.04 * 1000,
+		SPIN_ANGLE        = 0.003,
 		SPIN_FACTOR       = 0.6,
-		SCROLL_FACTOR     = 1.0 / 50.0,
-		FRAME_RATE        = 60;
-
-	var
-		positionOffset         = new Vector3 (0, 0, 0),
-		centerOfRotationOffset = new Vector3 (0, 0, 0),
-		distance               = new Vector3 (0, 0, 0),
-		vector                 = new Vector3 (0, 0, 0),
-		rotation               = new Rotation4 (0, 0, 1, 0),
-		orientationOffset      = new Rotation4 (0, 0, 1, 0),
-		result                 = new Rotation4 (0, 0, 1, 0);
+		SCROLL_FACTOR     = macOS ? 1 / 120 : 1 / 20,
+		MOVE_TIME         = 0.2,
+		ROTATE_TIME       = 0.2,
+		MAX_ANGLE         = 0.97;
 
 	function ExamineViewer (executionContext)
 	{
 		X3DViewer .call (this, executionContext);
 
-		this .button            = -1;
-		this .orientationOffset = new Rotation4 (0, 0, 1, 0);
-		this .rotation          = new Rotation4 (0, 0, 1, 0);
-		this .fromVector        = new Vector3 (0, 0, 0);
-		this .toVector          = new Vector3 (0, 0, 0);
-		this .fromPoint         = new Vector3 (0, 0, 0);
-		this .toPoint           = new Vector3 (0, 0, 0);
-		this .pressTime         = 0;
-		this .motionTime        = 0;
-		this .spinId            = undefined;
+		this .button                   = -1;
+		this .orientationOffset        = new Rotation4 (0, 0, 1, 0);
+		this .fromVector               = new Vector3 (0, 0, 0);
+		this .toVector                 = new Vector3 (0, 0, 0);
+		this .fromPoint                = new Vector3 (0, 0, 0);
+		this .toPoint                  = new Vector3 (0, 0, 0);
+		this .rotation                 = new Rotation4 (0, 0, 1, 0);
+		this .pressTime                = 0;
+		this .motionTime               = 0;
+
+		this .touchMode                = 0;
+		this .touch1                   = new Vector2 (0, 0);
+		this .touch2                   = new Vector2 (0, 0);
+		this .tapStart                 = 0;
+		this .dblTapInterval           = 0.4;
+
+		this .initialPositionOffset    = new Vector3 (0, 0, 0);
+		this .initialOrientationOffset = new Rotation4 (0, 0, 1, 0);
+		this .positionChaser           = new PositionChaser (executionContext);
+		this .centerOfRotationChaser   = new PositionChaser (executionContext);
+		this .rotationChaser           = new OrientationChaser (executionContext);
 	}
 
-	ExamineViewer .prototype = $.extend (Object .create (X3DViewer .prototype),
+	ExamineViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
 	{
 		constructor: ExamineViewer,
+		fieldDefinitions: new FieldDefinitionArray ([
+			new X3DFieldDefinition (X3DConstants .outputOnly, "isActive", new Fields .SFBool ()),
+		]),
 		initialize: function ()
 		{
 			X3DViewer .prototype .initialize .call (this);
 
 			var
 			   browser = this .getBrowser (),
-			   canvas  = browser .getCanvas ();
+			   element = browser .getSurface ();
+
+			// Disconnect from spin.
+
+			this .getNavigationInfo () .transitionStart_ .addInterest ("disconnect", this);
+			browser .activeViewpoint_ .addInterest ("set_activeViewpoint__", this);
+
+			// Bind pointing device events.
+
+			element .bind ("mousedown.ExamineViewer",  this .mousedown  .bind (this));
+			element .bind ("mouseup.ExamineViewer",    this .mouseup    .bind (this));
+			element .bind ("dblclick.ExamineViewer",   this .dblclick   .bind (this));
+			element .bind ("mousewheel.ExamineViewer", this .mousewheel .bind (this));
+
+			element .bind ("touchstart.ExamineViewer",  this .touchstart .bind (this));
+			element .bind ("touchend.ExamineViewer",    this .touchend   .bind (this));
+
+			// Setup scroll chaser.
+
+			this .positionChaser .duration_ = MOVE_TIME;
+			this .positionChaser .setPrivate (true);
+			this .positionChaser .setup ();
+
+			this .centerOfRotationChaser .duration_ = MOVE_TIME;
+			this .centerOfRotationChaser .setPrivate (true);
+			this .centerOfRotationChaser .setup ();
+
+			this .rotationChaser .duration_ = ROTATE_TIME;
+			this .rotationChaser .setPrivate (true);
+			this .rotationChaser .setup ();
+
+			this .set_activeViewpoint__ ();
+		},
+		set_activeViewpoint__: function ()
+		{
+			if (this .getStraightenHorizon ())
+			{
+				var viewpoint = this .getActiveViewpoint ();
+
+				if (viewpoint)
+					viewpoint .orientationOffset_ = this .getOrientationOffset (Rotation4 .Identity, viewpoint .orientationOffset_ .getValue (), false);
+			}
 
-			canvas .bind ("mousedown.ExamineViewer",  this .mousedown  .bind (this));
-			canvas .bind ("mouseup.ExamineViewer",    this .mouseup    .bind (this));
-			canvas .bind ("dblclick.ExamineViewer",   this .dblclick   .bind (this));
-			canvas .bind ("mousewheel.ExamineViewer", this .mousewheel .bind (this));
+			this .disconnect ();
 		},
 		mousedown: function (event)
 		{
 			if (this .button >= 0)
 				return;
-		
+
 			this .pressTime = performance .now ();
 
 			var
-				offset = this .getBrowser () .getCanvas () .offset (),
+				offset = this .getBrowser () .getSurface () .offset (),
 				x      = event .pageX - offset .left,
 				y      = event .pageY - offset .top;
 
-			switch (event .button)
+			switch (this .getButton (event .button))
 			{
 				case 0:
 				{
-					// Stop event propagation.
+					// Start rotate.
 
+					// Stop event propagation.
 					event .preventDefault ();
 					event .stopImmediatePropagation ();
 
 					this .button = event .button;
-					
+
 					$(document) .bind ("mouseup.ExamineViewer"   + this .getId (), this .mouseup   .bind (this));
 					$(document) .bind ("mousemove.ExamineViewer" + this .getId (), this .mousemove .bind (this));
+					$(document) .bind ("touchend.ExamineViewer"  + this .getId (), this .touchend  .bind (this));
+					$(document) .bind ("touchmove.ExamineViewer" + this .getId (), this .touchmove .bind (this));
 
 					this .disconnect ();
 					this .getActiveViewpoint () .transitionStop ();
@@ -140,28 +207,33 @@ function ($, X3DViewer, Vector3, Rotation4)
 					this .trackballProjectToSphere (x, y, this .fromVector);
 					this .rotation .assign (Rotation4 .Identity);
 
-					this .motionTime = 0;			
+					this .motionTime = 0;
+
+					this .isActive_ = true;
 					break;
 				}
 				case 1:
 				{
-					// Stop event propagation.
+					// Start pan.
 
+					// Stop event propagation.
 					event .preventDefault ();
 					event .stopImmediatePropagation ();
 
 					this .button = event .button;
-					
-					this .getBrowser () .getCanvas () .unbind ("mousemove.ExamineViewer");
 
 					$(document) .bind ("mouseup.ExamineViewer"   + this .getId (), this .mouseup   .bind (this));
 					$(document) .bind ("mousemove.ExamineViewer" + this .getId (), this .mousemove .bind (this));
-		
+					$(document) .bind ("touchend.ExamineViewer"  + this .getId (), this .touchend  .bind (this));
+					$(document) .bind ("touchmove.ExamineViewer" + this .getId (), this .touchmove .bind (this));
+
 					this .disconnect ();
 					this .getActiveViewpoint () .transitionStop ();
 					this .getBrowser () .setCursor ("MOVE");
 
 					this .getPointOnCenterPlane (x, y, this .fromPoint);
+
+					this .isActive_ = true;
 					break;
 				}
 			}
@@ -172,44 +244,45 @@ function ($, X3DViewer, Vector3, Rotation4)
 				return;
 
 			this .button = -1;
-		
-			$(document) .unbind ("mousemove.ExamineViewer" + this .getId ());
-			$(document) .unbind ("mouseup.ExamineViewer"   + this .getId ());
 
-			switch (event .button)
+			$(document) .unbind (".ExamineViewer" + this .getId ());
+
+			switch (this .getButton (event .button))
 			{
 				case 0:
 				{
-					// Stop event propagation.
+					// End rotate.
 
+					// Stop event propagation.
 					event .preventDefault ();
 					event .stopImmediatePropagation ();
 
+					var viewpoint = this .getActiveViewpoint ();
+
 					this .getBrowser () .setCursor ("DEFAULT");
 
 					if (Math .abs (this .rotation .angle) > SPIN_ANGLE && performance .now () - this .motionTime < SPIN_RELEASE_TIME)
 					{
-						try
-						{
-							this .rotation .assign (rotation .assign (Rotation4 .Identity) .slerp (this .rotation, SPIN_FACTOR));
-							this .addSpinning ();
-						}
-						catch (error)
-						{
-							console .log (error);
-						}
+						if (this .getStraightenHorizon () && viewpoint .getTypeName () !== "GeoViewpoint")
+							this .rotation = this .getHorizonRotation (this .rotation);
+
+						this .addSpinning (this .rotation);
 					}
 
+					this .isActive_ = false;
 					break;
 				}
 				case 1:
 				{
-					// Stop event propagation.
+					// End pan.
 
+					// Stop event propagation.
 					event .preventDefault ();
 					event .stopImmediatePropagation ();
 
 					this .getBrowser () .setCursor ("DEFAULT");
+
+					this .isActive_ = false;
 					break;
 				}
 			}
@@ -217,137 +290,524 @@ function ($, X3DViewer, Vector3, Rotation4)
 		dblclick: function (event)
 		{
 			// Stop event propagation.
-
 			event .preventDefault ();
 			event .stopImmediatePropagation ();
 
-			var
-				offset = this .getBrowser () .getCanvas () .offset (), 
-				x      = event .pageX - offset .left,
-				y      = this .getBrowser () .getCanvas () .height () - (event .pageY - offset .top);
+			const
+				element = this .getBrowser () .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 .lookAt (x, y);
+			this .disconnect ();
+			this .lookAtBBox (x, y, this .getStraightenHorizon ());
 		},
-		mousemove: function (event)
+		mousemove: (function ()
 		{
-			var
-				offset = this .getBrowser () .getCanvas () .offset (),
-				x      = event .pageX - offset .left,
-				y      = event .pageY - offset .top;
+			var fromPoint = new Vector3 (0, 0, 0);
 
-			switch (this .button)
+			return function (event)
 			{
-				case 0:
+				var
+					offset = this .getBrowser () .getSurface () .offset (),
+					x      = event .pageX - offset .left,
+					y      = event .pageY - offset .top;
+
+				switch (this .getButton (this .button))
 				{
-					// Stop event propagation.
+					case 0:
+					{
+						// Rotate view around Viewpoint.centerOfRotation.
 
-					event .preventDefault ();
+						// Stop event propagation.
+						event .preventDefault ();
+						event .stopImmediatePropagation ();
 
-					// Move.
+						var toVector = this .trackballProjectToSphere (x, y, this .toVector);
 
-					var
-						viewpoint = this .getActiveViewpoint (),
-						toVector  = this .trackballProjectToSphere (x, y, this .toVector);
+						this .rotation .setFromToVec (toVector, this .fromVector);
 
-					this .rotation .setFromToVec (toVector, this .fromVector);
+						if (Math .abs (this .rotation .angle) < SPIN_ANGLE && performance .now () - this .pressTime < MOTION_TIME)
+							return;
 
-					if (Math .abs (this .rotation .angle) < SPIN_ANGLE && performance .now () - this .pressTime < MOTION_TIME)
-						return false;
+						this .addRotate (this .rotation);
 
-					viewpoint .orientationOffset_ = this .getOrientationOffset ();
-					viewpoint .positionOffset_    = this .getPositionOffset ();
+						this .fromVector .assign (toVector);
+						this .motionTime = performance .now ();
+						break;
+					}
+					case 1:
+					{
+						// Move view along center plane.
 
-					this .fromVector .assign (toVector);
-					this .motionTime = performance .now ();
-					break;
+						// Stop event propagation.
+						event .preventDefault ();
+						event .stopImmediatePropagation ();
+
+						var
+							viewpoint   = this .getActiveViewpoint (),
+							toPoint     = this .getPointOnCenterPlane (x, y, this .toPoint),
+							translation = viewpoint .getUserOrientation () .multVecRot (fromPoint .assign (this .fromPoint) .subtract (toPoint));
+
+						this .addMove (translation, translation);
+
+						this .fromPoint .assign (toPoint);
+						break;
+					}
 				}
+			};
+		})(),
+		mousewheel: (function ()
+		{
+			var
+				step        = new Vector3 (0, 0, 0),
+				translation = new Vector3 (0, 0, 0);
+
+			return function (event)
+			{
+				// Stop event propagation.
+				event .preventDefault ();
+				event .stopImmediatePropagation ();
+
+				// Change viewpoint position.
+
+				var
+					browser   = this .getBrowser (),
+					viewpoint = this .getActiveViewpoint ();
+
+				browser .prepareEvents () .removeInterest ("spin", this);
+				viewpoint .transitionStop ();
+
+				step        = this .getDistanceToCenter (step) .multiply (event .zoomFactor || SCROLL_FACTOR),
+				translation = viewpoint .getUserOrientation () .multVecRot (translation .set (0, 0, step .abs ()));
+
+				if (event .deltaY > 0)
+					this .addMove (translation .negate (), Vector3 .Zero);
+
+				else if (event .deltaY < 0)
+					this .addMove (translation, Vector3 .Zero);
+			};
+		})(),
+		touchstart: function (event)
+		{
+			var touches = event .originalEvent .touches;
+
+			switch (touches .length)
+			{
 				case 1:
 				{
-					// Stop event propagation.
+					// Start rotate (button 0).
 
-					event .preventDefault ();
-					event .stopImmediatePropagation ();
+					event .button = 0;
+					event .pageX  = touches [0] .pageX;
+					event .pageY  = touches [0] .pageY;
+
+					this .mousedown (event);
+
+					// Remember tap.
+
+					this .touch1 .set (touches [0] .pageX, touches [0] .pageY);
+					break;
+				}
+				case 2:
+				{
+					// End rotate (button 0).
+
+					this .touchend (event);
 
-					// Move.
+					// Start move (button 1).
 
-					var
-						viewpoint   = this .getActiveViewpoint (),
-						toPoint     = this .getPointOnCenterPlane (x, y, this .toPoint),
-						translation = viewpoint .getUserOrientation () .multVecRot (vector .assign (this .fromPoint) .subtract (toPoint));
+					event .button = 1;
+					event .pageX  = (touches [0] .pageX + touches [1] .pageX) / 2;
+					event .pageY  = (touches [0] .pageY + touches [1] .pageY) / 2;
 
-					viewpoint .positionOffset_         = positionOffset .assign (viewpoint .positionOffset_ .getValue ()) .add (translation);
-					viewpoint .centerOfRotationOffset_ = centerOfRotationOffset .assign (viewpoint .centerOfRotationOffset_ .getValue ()) .add (translation);
+					this .mousedown (event);
 
-					this .fromPoint .assign (toPoint);
+					// Start zoom (mouse wheel).
+
+					this .touch1 .set (touches [0] .pageX, touches [0] .pageY);
+					this .touch2 .set (touches [1] .pageX, touches [1] .pageY);
+					break;
+				}
+				case 3:
+				{
+					// End move (button 1).
+					this .touchend (event);
 					break;
 				}
 			}
 		},
-		mousewheel: function (event)
+		touchend: function (event)
 		{
-			// Stop event propagation.
+			switch (this .button)
+			{
+				case 0:
+				{
+					// End rotate (button 0).
 
-			event .preventDefault ();
-			event .stopImmediatePropagation ();
+					event .button = 0;
 
-			// Change viewpoint position.
+					this .mouseup (event);
 
-			var viewpoint = this .getActiveViewpoint ();
+					// Start dblclick (button 0).
 
-			//viewpoint .transitionStop ();
+					if (this .getBrowser () .getCurrentTime () - this .tapStart < this .dblTapInterval)
+					{
+						event .button = 0;
+						event .pageX  = this .touch1 .x;
+						event .pageY  = this .touch1 .y;
 
-			var step = this .getDistanceToCenter (distance) .multiply (SCROLL_FACTOR);
+						this .dblclick (event);
+					}
 
-			viewpoint .getUserOrientation () .multVecRot (positionOffset .set (0, 0, step .abs ()));
+					this .tapStart = this .getBrowser () .getCurrentTime ();
+					break;
+				}
+				case 1:
+				{
+					// End move (button 1).
 
-			if (event .deltaY > 0)
-				viewpoint .positionOffset_ = viewpoint .positionOffset_ .getValue () .subtract (positionOffset);		
-			
-			else if (event .deltaY < 0)
-				viewpoint .positionOffset_ = viewpoint .positionOffset_ .getValue () .add (positionOffset);
+					this .touchMode = 0;
+					event .button   = 1;
+
+					this .mouseup (event);
+					break;
+				}
+			}
 		},
-		getPositionOffset: function ()
+		touchmove: (function ()
 		{
-			var viewpoint = this .getActiveViewpoint ();
+			var
+				MOVE_ANGLE   = 0.7,
+				ZOOM_ANGLE   = -0.7,
+				touch1Change = new Vector2 (0, 0),
+				touch2Change = new Vector2 (0, 0);
 
-			this .getDistanceToCenter (distance);
+			return function (event)
+			{
+				var touches = event .originalEvent .touches;
 
-			return (orientationOffset .assign (this .orientationOffset) .inverse ()
-			        .multRight (viewpoint .orientationOffset_ .getValue ())
-			        .multVecRot (vector .assign (distance))
-			        .subtract (distance)
-			        .add (viewpoint .positionOffset_ .getValue ()));
-		},
-		getOrientationOffset: function ()
+				switch (touches .length)
+				{
+					case 1:
+					{
+						// Rotate (button 0).
+
+						event .pageX = touches [0] .pageX;
+						event .pageY = touches [0] .pageY;
+
+						this .mousemove (event);
+						break;
+					}
+					case 2:
+					{
+						touch1Change .set (touches [0] .pageX, touches [0] .pageY) .subtract (this .touch1) .normalize ();
+						touch2Change .set (touches [1] .pageX, touches [1] .pageY) .subtract (this .touch2) .normalize ();
+
+						var
+							move = touch1Change .dot (touch2Change) > MOVE_ANGLE,
+							zoom = touch1Change .dot (touch2Change) < ZOOM_ANGLE,
+							mode = this .touchMode || (move ? 1 : (zoom ? 2 : 0));
+
+						switch (mode)
+						{
+							case 1:
+							{
+								// Move (button 1).
+
+								this .touchMode = 1;
+
+								event .pageX = (touches [0] .pageX + touches [1] .pageX) / 2;
+								event .pageY = (touches [0] .pageY + touches [1] .pageY) / 2;
+
+								this .mousemove (event);
+
+								break;
+							}
+							case 2:
+							{
+								// Zoom (mouse wheel).
+
+								this .touchMode = 2;
+
+								var distance1 = this .touch1 .distance (this .touch2);
+
+								this .touch1 .set (touches [0] .pageX, touches [0] .pageY);
+								this .touch2 .set (touches [1] .pageX, touches [1] .pageY);
+
+								var
+									distance2 = this .touch1 .distance (this .touch2),
+									delta     = distance2 - distance1;
+
+								event .deltaY     = delta;
+								event .zoomFactor = Math .abs (delta) / $(window) .width ();
+
+								this .mousewheel (event);
+
+								break;
+							}
+						}
+
+						this .touch1 .set (touches [0] .pageX, touches [0] .pageY);
+						this .touch2 .set (touches [1] .pageX, touches [1] .pageY);
+						break;
+					}
+				}
+			};
+		})(),
+		spin: function ()
 		{
 			var viewpoint = this .getActiveViewpoint ();
 
 			this .orientationOffset .assign (viewpoint .orientationOffset_ .getValue ());
 
-			return result .assign (viewpoint .getOrientation ()) .inverse () .multRight (this .rotation) .multRight (viewpoint .getUserOrientation ());
+			viewpoint .orientationOffset_ = this .getOrientationOffset (this .rotation, this .orientationOffset);
+			viewpoint .positionOffset_    = this .getPositionOffset (viewpoint .positionOffset_ .getValue (), this .orientationOffset, viewpoint .orientationOffset_ .getValue ());
 		},
-		spin: function ()
+		set_positionOffset__: function (value)
 		{
 			var viewpoint = this .getActiveViewpoint ();
 
-			viewpoint .orientationOffset_ = this .getOrientationOffset ();
-			viewpoint .positionOffset_    = this .getPositionOffset ();
+			viewpoint .positionOffset_ = value;
 		},
-		addSpinning: function ()
+		set_centerOfRotationOffset__: function (value)
 		{
-			if (! this .spinId)
-				this .spinId = setInterval (this .spin .bind (this), 1000.0 / FRAME_RATE);
+			var viewpoint = this .getActiveViewpoint ();
+
+			viewpoint .centerOfRotationOffset_ = value;
 		},
+		set_rotation__: function (value)
+		{
+			var viewpoint = this .getActiveViewpoint ();
+
+			viewpoint .orientationOffset_ = this .getOrientationOffset (value .getValue (), this .initialOrientationOffset, false);
+			viewpoint .positionOffset_    = this .getPositionOffset (this .initialPositionOffset, this .initialOrientationOffset, viewpoint .orientationOffset_ .getValue ());
+		},
+		addRotate: (function ()
+		{
+			var destination = new Rotation4 ();
+
+			return function (rotationChange)
+			{
+				var viewpoint = this .getActiveViewpoint ();
+
+				if (this .rotationChaser .isActive_ .getValue () && this .rotationChaser .value_changed_ .hasInterest ("set_rotation__", this))
+				{
+					try
+					{
+						destination .assign (this .rotationChaser .set_destination_ .getValue ())
+							.multLeft (rotationChange);
+
+						// Check for critical angle.
+						this .getOrientationOffset (destination, this .initialOrientationOffset, true);
+
+						this .rotationChaser .set_destination_ = destination;
+					}
+					catch (error)
+					{
+						// Slide along critical angle.
+
+						rotationChange = this .getHorizonRotation (rotationChange);
+
+						destination .assign (this .rotationChaser .set_destination_ .getValue ())
+							.multLeft (rotationChange);
+
+						this .rotationChaser .set_destination_ = destination;
+					}
+				}
+				else
+				{
+					try
+					{
+						this .initialOrientationOffset .assign (viewpoint .orientationOffset_ .getValue ());
+						this .initialPositionOffset    .assign (viewpoint .positionOffset_    .getValue ());
+
+						// Check for critical angle.
+						this .getOrientationOffset (rotationChange, this .initialOrientationOffset, true);
+
+						this .rotationChaser .set_value_       = Rotation4 .Identity;
+						this .rotationChaser .set_destination_ = rotationChange;
+					}
+					catch (error)
+					{
+						// Slide along critical angle.
+
+						this .rotationChaser .set_value_       = Rotation4 .Identity;
+						this .rotationChaser .set_destination_ = this .getHorizonRotation (rotationChange);
+					}
+				}
+
+				this .disconnect ();
+				this .rotationChaser .value_changed_ .addInterest ("set_rotation__", this);
+			};
+		})(),
+		addSpinning: (function ()
+		{
+			var rotation = new Rotation4 (0, 0, 1, 0);
+
+			return function (rotationChange)
+			{
+				try
+				{
+					this .disconnect ();
+					this .getBrowser () .prepareEvents () .addInterest ("spin", this);
+
+					this .rotation .assign (rotation .assign (Rotation4 .Identity) .slerp (rotationChange, SPIN_FACTOR));
+				}
+				catch (error)
+				{
+					console .log (error);
+				}
+			};
+		})(),
+		addMove: (function ()
+		{
+			var
+				positionOffset         = new Vector3 (0, 0, 0),
+				centerOfRotationOffset = new Vector3 (0, 0, 0);
+
+			return function (positionOffsetChange, centerOfRotationOffsetChange)
+			{
+				var viewpoint = this .getActiveViewpoint ();
+
+				if (this .positionChaser .isActive_ .getValue () && this .positionChaser .value_changed_ .hasInterest ("set_positionOffset__", this))
+				{
+					positionOffset
+						.assign (this .positionChaser .set_destination_ .getValue ())
+						.add (positionOffsetChange);
+
+					this .positionChaser .set_destination_ = positionOffset;
+				}
+				else
+				{
+					positionOffset
+						.assign (viewpoint .positionOffset_ .getValue ())
+						.add (positionOffsetChange);
+
+					this .positionChaser .set_value_       = viewpoint .positionOffset_;
+					this .positionChaser .set_destination_ = positionOffset;
+				}
+
+				if (this .centerOfRotationChaser .isActive_ .getValue () && this .centerOfRotationChaser .value_changed_ .hasInterest ("set_centerOfRotationOffset__", this))
+				{
+					centerOfRotationOffset
+						.assign (this .centerOfRotationChaser .set_destination_ .getValue ())
+						.add (centerOfRotationOffsetChange);
+
+					this .centerOfRotationChaser .set_destination_ = centerOfRotationOffset;
+				}
+				else
+				{
+					centerOfRotationOffset
+						.assign (viewpoint .centerOfRotationOffset_ .getValue ())
+						.add (centerOfRotationOffsetChange);
+
+					this .centerOfRotationChaser .set_value_       = viewpoint .centerOfRotationOffset_;
+					this .centerOfRotationChaser .set_destination_ = centerOfRotationOffset;
+				}
+
+				this .disconnect ();
+				this .positionChaser         .value_changed_ .addInterest ("set_positionOffset__",         this);
+				this .centerOfRotationChaser .value_changed_ .addInterest ("set_centerOfRotationOffset__", this);
+			};
+		})(),
+		getPositionOffset: (function ()
+		{
+			var
+				distance = new Vector3 (0, 0, 0),
+				d        = new Vector3 (0, 0, 0),
+				oob      = new Rotation4 (0, 0, 1, 0);
+
+			return function (positionOffsetBefore, orientationOffsetBefore, orientationOffsetAfter)
+			{
+				this .getDistanceToCenter (distance, positionOffsetBefore);
+
+				return (oob
+					.assign (orientationOffsetBefore)
+					.inverse ()
+					.multRight (orientationOffsetAfter)
+					.multVecRot (d .assign (distance))
+					.subtract (distance)
+					.add (positionOffsetBefore));
+			};
+		})(),
+		getOrientationOffset: (function ()
+		{
+			var
+				userOrientation   = new Rotation4 (0, 0, 1, 0),
+				orientationOffset = new Rotation4 (0, 0, 1, 0),
+				zAxis             = new Vector3 (0, 0, 0);
+
+			return function (rotation, orientationOffsetBefore, _throw)
+			{
+				var
+					viewpoint         = this .getActiveViewpoint (),
+					straightenHorizon = this .getStraightenHorizon ();
+
+				userOrientation
+					.assign (rotation)
+					.multRight (viewpoint .getOrientation ())
+					.multRight (orientationOffsetBefore);
+
+				if (straightenHorizon && viewpoint .getTypeName () !== "GeoViewpoint")
+					viewpoint .straightenHorizon (userOrientation);
+
+				var orientationOffsetAfter = orientationOffset
+					.assign (viewpoint .getOrientation ())
+					.inverse ()
+					.multRight (userOrientation);
+
+				if (straightenHorizon && viewpoint .getTypeName () !== "GeoViewpoint")
+				{
+					if (! _throw)
+						return orientationOffsetAfter;
+
+					var userVector = userOrientation .multVecRot (zAxis .assign (Vector3 .zAxis));
+
+					if (Math .abs (viewpoint .getUpVector () .dot (userVector)) < MAX_ANGLE)
+						return orientationOffsetAfter;
+
+					throw new Error ("Critical angle");
+				}
+				else
+				{
+					return orientationOffsetAfter;
+				}
+			};
+		})(),
+		getHorizonRotation: (function ()
+		{
+			var zAxis = new Vector3 (0, 0, 0);
+
+			return function (rotation)
+			{
+				var viewpoint = this .getActiveViewpoint ();
+
+				var
+					V = rotation .multVecRot (zAxis .assign (Vector3 .zAxis)) .normalize (),
+					N = Vector3 .cross (viewpoint .getUpVector (), V) .normalize (),
+					H = Vector3 .cross (N, viewpoint .getUpVector ()) .normalize ();
+
+				return new Rotation4 (Vector3 .zAxis, H);
+			};
+		})(),
 		disconnect: function ()
 		{
-			clearInterval (this .spinId);
+			var browser = this .getBrowser ();
+
+			this .positionChaser         .value_changed_ .removeInterest ("set_positionOffset__",         this)
+			this .centerOfRotationChaser .value_changed_ .removeInterest ("set_centerOfRotationOffset__", this)
+			this .rotationChaser         .value_changed_ .removeInterest ("set_rotation__",               this);
 
-			this .spinId = undefined;
+			browser .prepareEvents () .removeInterest ("spin", this);
 		},
 		dispose: function ()
 		{
+			var browser = this .getBrowser ();
+
 			this .disconnect ();
-			this .getBrowser () .getCanvas () .unbind (".ExamineViewer");
+			browser .activeViewpoint_ .removeInterest ("set_activeViewpoint__", this);
+			browser .getSurface () .unbind (".ExamineViewer");
 			$(document) .unbind (".ExamineViewer" + this .getId ());
 		},
 	});