itowns 2.34.0 → 2.36.2

package/lib/Controls/GlobeControls.js

@@ -48,7 +48,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 // private members
-var EPS = 0.000001; // Orbit
+var EPS = 0.000001;
+var direction = {
+  up: new THREE.Vector2(0, 1),
+  bottom: new THREE.Vector2(0, -1),
+  left: new THREE.Vector2(1, 0),
+  right: new THREE.Vector2(-1, 0)
+}; // Orbit
 
 var rotateStart = new THREE.Vector2();
 var rotateEnd = new THREE.Vector2();
@@ -102,8 +108,7 @@ var intersection = new THREE.Vector3(); // Set to true to enable target helper
 
 var enableTargetHelper = false;
 var helpers = {};
-// current downed key
-var currentKey;
+
 /**
  * Globe control pan event. Fires after camera pan
  * @event GlobeControls#pan-changed
@@ -150,7 +155,6 @@ var currentKey;
  * @property RANGE_CHANGED {string} Fires when camera's range to target change
  * @property CAMERA_TARGET_CHANGED {string} Fires when camera's target change
  */
-
 var CONTROL_EVENTS = {
   PAN_CHANGED: 'pan-changed',
   ORIENTATION_CHANGED: 'orientation-changed',
@@ -183,13 +187,12 @@ var previous;
  * @param      {number}  options.minDistance Minimum distance between ground and camera
  * @param      {number}  options.maxDistance Maximum distance between ground and camera
  * @param      {bool}  options.handleCollision enable collision camera with ground
- * @property   {bool} enabled enable control
  * @property   {number} minDistance Minimum distance between ground and camera
  * @property   {number} maxDistance Maximum distance between ground and camera
  * @property   {number} zoomSpeed Speed zoom with mouse
  * @property   {number} rotateSpeed Speed camera rotation in orbit and panoramic mode
  * @property   {number} minDistanceCollision Minimum distance collision between ground and camera
- * @property   {bool} enableDamping enable camera damping, if it's disabled the camera immediately when the mouse button is released.
+ * @property   {boolean} enableDamping enable camera damping, if it's disabled the camera immediately when the mouse button is released.
  * If it's enabled, the camera movement is decelerate.
  */
 
@@ -208,10 +211,17 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
     _this.view = view;
     _this.camera = view.camera.camera3D; // State control
 
-    _this.states = new _StateControl["default"](_this.view);
-    _this.state = _this.states.NONE; // Set to false to disable this control
+    _this.states = new _StateControl["default"](_this.view); // this.enabled property has moved to StateControl
 
-    _this.enabled = true; // These options actually enables dollying in and out; left as "zoom" for
+    Object.defineProperty((0, _assertThisInitialized2["default"])(_this), 'enabled', {
+      get: function get() {
+        return _this.states.enabled;
+      },
+      set: function set(value) {
+        console.warn('GlobeControls.enabled property is deprecated. Use StateControl.enabled instead ' + '- which you can access with GlobeControls.states.enabled.');
+        _this.states.enabled = value;
+      }
+    }); // These options actually enables dollying in and out; left as "zoom" for
     // backwards compatibility
 
     if (options.zoomSpeed) {
@@ -246,9 +256,17 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
     // Set collision options
 
     _this.handleCollision = typeof options.handleCollision !== 'undefined' ? options.handleCollision : true;
-    _this.minDistanceCollision = 60; // Set to true to disable use of the keys
-
-    _this.enableKeys = true; // Enable Damping
+    _this.minDistanceCollision = 60; // this.enableKeys property has moved to StateControl
+
+    Object.defineProperty((0, _assertThisInitialized2["default"])(_this), 'enableKeys', {
+      get: function get() {
+        return _this.states.enableKeys;
+      },
+      set: function set(value) {
+        console.warn('GlobeControls.enableKeys property is deprecated. Use StateControl.enableKeys instead ' + '- which you can access with GlobeControls.states.enableKeys.');
+        _this.states.enableKeys = value;
+      }
+    }); // Enable Damping
 
     _this.enableDamping = true;
     _this.dampingMoveFactor = options.dampingMoveFactor != undefined ? options.dampingMoveFactor : dampingFactorDefault;
@@ -264,46 +282,42 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
       view.notifyChange(_this.camera);
     } : function () {};
     _this._onEndingMove = null;
-    _this._onMouseMove = _this.onMouseMove.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onMouseUp = _this.onMouseUp.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onMouseDown = _this.onMouseDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onMouseWheel = _this.onMouseWheel.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onContextMenuListener = _this.onContextMenuListener.bind((0, _assertThisInitialized2["default"])(_this));
     _this._onTravel = _this.travel.bind((0, _assertThisInitialized2["default"])(_this));
     _this._onTouchStart = _this.onTouchStart.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._update = _this.update.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onTouchEnd = _this.onTouchEnd.bind((0, _assertThisInitialized2["default"])(_this));
     _this._onTouchMove = _this.onTouchMove.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onKeyDown = _this.onKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onKeyUp = _this.onKeyUp.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._onBlurListener = _this.onBlurListener.bind((0, _assertThisInitialized2["default"])(_this));
-
-    _this.view.domElement.addEventListener('contextmenu', _this._onContextMenuListener, false);
-
-    _this.view.domElement.addEventListener('mousedown', _this._onMouseDown, false);
+    _this._onStateChange = _this.onStateChange.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onRotation = _this.handleRotation.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onDrag = _this.handleDrag.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onDolly = _this.handleDolly.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onPan = _this.handlePan.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onPanoramic = _this.handlePanoramic.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onZoom = _this.handleZoom.bind((0, _assertThisInitialized2["default"])(_this));
 
-    _this.view.domElement.addEventListener('mousewheel', _this._onMouseWheel, false);
+    _this.states.addEventListener('state-changed', _this._onStateChange, false);
 
-    _this.view.domElement.addEventListener('DOMMouseScroll', _this._onMouseWheel, false); // firefox
+    _this.states.addEventListener(_this.states.ORBIT._event, _this._onRotation, false);
 
+    _this.states.addEventListener(_this.states.MOVE_GLOBE._event, _this._onDrag, false);
 
-    _this.view.domElement.addEventListener('touchstart', _this._onTouchStart, false);
+    _this.states.addEventListener(_this.states.DOLLY._event, _this._onDolly, false);
 
-    _this.view.domElement.addEventListener('touchend', _this._onMouseUp, false);
+    _this.states.addEventListener(_this.states.PAN._event, _this._onPan, false);
 
-    _this.view.domElement.addEventListener('touchmove', _this._onTouchMove, false);
+    _this.states.addEventListener(_this.states.PANORAMIC._event, _this._onPanoramic, false);
 
-    _this.states.addEventListener('travel_in', _this._onTravel, false);
+    _this.states.addEventListener('zoom', _this._onZoom, false);
 
-    _this.states.addEventListener('travel_out', _this._onTravel, false); // refresh control for each animation's frame
+    _this.view.domElement.addEventListener('touchstart', _this._onTouchStart, false);
 
+    _this.view.domElement.addEventListener('touchend', _this._onTouchEnd, false);
 
-    _this.player.addEventListener('animation-frame', _this._update); // TODO: Why windows
+    _this.view.domElement.addEventListener('touchmove', _this._onTouchMove, false);
 
+    _this.states.addEventListener(_this.states.TRAVEL_IN._event, _this._onTravel, false);
 
-    window.addEventListener('keydown', _this._onKeyDown, false);
-    window.addEventListener('keyup', _this._onKeyUp, false); // Reset key/mouse when window loose focus
+    _this.states.addEventListener(_this.states.TRAVEL_OUT._event, _this._onTravel, false);
 
-    window.addEventListener('blur', _this._onBlurListener);
     view.scene.add(cameraTarget);
 
     if (enableTargetHelper) {
@@ -344,7 +358,8 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
   }, {
     key: "isPaused",
     get: function get() {
-      return this.state == this.states.NONE;
+      // TODO : also check if CameraUtils is performing an animation
+      return this.states.currentState === this.states.NONE && !this.player.isPlaying();
     }
   }, {
     key: "onEndingMove",
@@ -354,7 +369,6 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
         this._onEndingMove = null;
       }
 
-      this.state = this.states.NONE;
       this.handlingEvent(current);
     }
   }, {
@@ -395,7 +409,6 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
     key: "mouseToPan",
     value: function mouseToPan(deltaX, deltaY) {
       var gfx = this.view.mainLoop.gfxEngine;
-      this.state = this.states.PAN;
 
       if (this.camera.isPerspectiveCamera) {
         var targetDistance = this.camera.position.distanceTo(this.getCameraTargetPosition()); // half of the fov is center to top of screen
@@ -443,6 +456,9 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
   }, {
     key: "update",
     value: function update() {
+      var _this2 = this;
+
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.states.currentState;
       // We compute distance between camera's bounding sphere and geometry's obb up face
       minDistanceZ = Infinity;
 
@@ -469,7 +485,7 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
         }
       }
 
-      switch (this.state) {
+      switch (state) {
         // MOVE_GLOBE Rotate globe with mouse
         case this.states.MOVE_GLOBE:
           if (minDistanceZ < 0) {
@@ -588,89 +604,166 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
       } // Launch animationdamping if mouse stops these movements
 
 
-      if (this.enableDamping && this.state === this.states.ORBIT && this.player.isStopped() && (sphericalDelta.theta > EPS || sphericalDelta.phi > EPS)) {
+      if (this.enableDamping && state === this.states.ORBIT && this.player.isStopped() && (sphericalDelta.theta > EPS || sphericalDelta.phi > EPS)) {
+        this.player.setCallback(function () {
+          _this2.update(_this2.states.ORBIT);
+        });
         this.player.playLater(durationDampingOrbital, 2);
       }
     }
   }, {
-    key: "onMouseMove",
-    value: function onMouseMove(event) {
-      if (this.player.isPlaying()) {
-        this.player.stop();
-      }
-
-      if (this.enabled === false) {
+    key: "onStateChange",
+    value: function onStateChange(event) {
+      // If the state changed to NONE, end the movement associated to the previous state.
+      if (this.states.currentState === this.states.NONE) {
+        this.handleEndMovement(event);
         return;
-      }
+      } // Stop CameraUtils ongoing animations, which can for instance be triggered with `this.travel` or
+      // `this.lookAtCoordinate` methods.
 
-      event.preventDefault();
-      var coords = this.view.eventToViewCoords(event);
 
-      switch (this.state) {
-        case this.states.ORBIT:
-        case this.states.PANORAMIC:
-          {
-            rotateEnd.copy(coords);
-            rotateDelta.subVectors(rotateEnd, rotateStart);
-            var gfx = this.view.mainLoop.gfxEngine;
-            this.rotateLeft(2 * Math.PI * rotateDelta.x / gfx.width * this.rotateSpeed); // rotating up and down along whole screen attempts to go 360, but limited to 180
+      _CameraUtils["default"].stop(this.view, this.camera); // Dispatch events which specify if changes occurred in camera transform options.
 
-            this.rotateUp(2 * Math.PI * rotateDelta.y / gfx.height * this.rotateSpeed);
-            rotateStart.copy(rotateEnd);
-            break;
-          }
 
-        case this.states.DOLLY:
-          dollyEnd.copy(coords);
-          dollyDelta.subVectors(dollyEnd, dollyStart);
-          this.dolly(-dollyDelta.y);
-          dollyStart.copy(dollyEnd);
-          break;
+      this.onEndingMove(); // Stop eventual damping movement.
 
-        case this.states.PAN:
-          panEnd.copy(coords);
-          panDelta.subVectors(panEnd, panStart);
-          this.mouseToPan(panDelta.x, panDelta.y);
-          panStart.copy(panEnd);
-          break;
+      this.player.stop(); // Update camera transform options.
 
-        case this.states.MOVE_GLOBE:
-          {
-            var normalized = this.view.viewToNormalizedCoords(coords);
-            raycaster.setFromCamera(normalized, this.camera); // If there's intersection then move globe else we stop the move
+      this.updateTarget();
+      previous = _CameraUtils["default"].getTransformCameraLookingAtTarget(this.view, this.camera, pickedPosition); // Initialize rotation and panoramic movements.
 
-            if (raycaster.ray.intersectSphere(pickSphere, intersection)) {
-              normalizedIntersection.copy(intersection).normalize();
-              moveAroundGlobe.setFromUnitVectors(normalizedIntersection, lastNormalizedIntersection);
-              lastTimeMouseMove = Date.now();
-            } else {
-              this.onMouseUp();
-            }
+      rotateStart.copy(event.viewCoords); // Initialize drag movement.
 
-            break;
-          }
+      if (this.view.getPickingPositionFromDepth(event.viewCoords, pickingPoint)) {
+        pickSphere.radius = pickingPoint.length();
+        lastNormalizedIntersection.copy(pickingPoint).normalize();
+        this.updateHelper(pickingPoint, helpers.picking);
+      } // Initialize dolly movement.
 
-        default:
-      }
 
-      if (this.state !== this.states.NONE) {
+      dollyStart.copy(event.viewCoords); // Initialize pan movement.
+
+      panStart.copy(event.viewCoords);
+    }
+  }, {
+    key: "handleRotation",
+    value: function handleRotation(event) {
+      // Stop player if needed. Player can be playing while moving mouse in the case of rotation. This is due to the
+      // fact that a damping move can occur while rotating (without the need of releasing the mouse button)
+      this.player.stop();
+      this.handlePanoramic(event);
+    }
+  }, {
+    key: "handleDrag",
+    value: function handleDrag(event) {
+      var normalized = this.view.viewToNormalizedCoords(event.viewCoords); // An updateMatrixWorld on the camera prevents camera jittering when moving globe on a zoomed out view, with
+      // devtools open in web browser.
+
+      this.camera.updateMatrixWorld();
+      raycaster.setFromCamera(normalized, this.camera); // If there's intersection then move globe else we stop the move
+
+      if (raycaster.ray.intersectSphere(pickSphere, intersection)) {
+        normalizedIntersection.copy(intersection).normalize();
+        moveAroundGlobe.setFromUnitVectors(normalizedIntersection, lastNormalizedIntersection);
+        lastTimeMouseMove = Date.now();
         this.update();
+      } else {
+        this.states.onPointerUp();
+      }
+    }
+  }, {
+    key: "handleDolly",
+    value: function handleDolly(event) {
+      dollyEnd.copy(event.viewCoords);
+      dollyDelta.subVectors(dollyEnd, dollyStart);
+      this.dolly(-dollyDelta.y);
+      dollyStart.copy(dollyEnd);
+      this.update();
+    }
+  }, {
+    key: "handlePan",
+    value: function handlePan(event) {
+      if (event.viewCoords) {
+        panEnd.copy(event.viewCoords);
+        panDelta.subVectors(panEnd, panStart);
+        panStart.copy(panEnd);
+      } else if (event.direction) {
+        panDelta.copy(direction[event.direction]).multiplyScalar(this.keyPanSpeed);
+      }
+
+      this.mouseToPan(panDelta.x, panDelta.y);
+      this.update(this.states.PAN);
+    }
+  }, {
+    key: "handlePanoramic",
+    value: function handlePanoramic(event) {
+      rotateEnd.copy(event.viewCoords);
+      rotateDelta.subVectors(rotateEnd, rotateStart);
+      var gfx = this.view.mainLoop.gfxEngine;
+      sphericalDelta.theta -= 2 * Math.PI * rotateDelta.x / gfx.width * this.rotateSpeed; // rotating up and down along whole screen attempts to go 360, but limited to 180
+
+      sphericalDelta.phi -= 2 * Math.PI * rotateDelta.y / gfx.height * this.rotateSpeed;
+      rotateStart.copy(rotateEnd);
+      this.update();
+    }
+  }, {
+    key: "handleEndMovement",
+    value: function handleEndMovement() {
+      var _this3 = this;
+
+      var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.dispatchEvent(this.endEvent);
+      this.player.stop(); // Launch damping movement for :
+      //      * this.states.ORBIT
+      //      * this.states.MOVE_GLOBE
+
+      if (this.enableDamping) {
+        if (event.previous === this.states.ORBIT && (sphericalDelta.theta > EPS || sphericalDelta.phi > EPS)) {
+          this.player.setCallback(function () {
+            _this3.update(_this3.states.ORBIT);
+          });
+          this.player.play(durationDampingOrbital);
+
+          this._onEndingMove = function () {
+            return _this3.onEndingMove();
+          };
+
+          this.player.addEventListener('animation-stopped', this._onEndingMove);
+        } else if (event.previous === this.states.MOVE_GLOBE && Date.now() - lastTimeMouseMove < 50) {
+          this.player.setCallback(function () {
+            _this3.update(_this3.states.MOVE_GLOBE);
+          }); // animation since mouse up event occurs less than 50ms after the last mouse move
+
+          this.player.play(durationDampingMove);
+
+          this._onEndingMove = function () {
+            return _this3.onEndingMove();
+          };
+
+          this.player.addEventListener('animation-stopped', this._onEndingMove);
+        } else {
+          this.onEndingMove();
+        }
+      } else {
+        this.onEndingMove();
       }
     }
   }, {
     key: "updateTarget",
     value: function updateTarget() {
-      // Update camera's target position
-      this.view.getPickingPositionFromDepth(null, pickedPosition);
-      var distance = !isNaN(pickedPosition.x) ? this.camera.position.distanceTo(pickedPosition) : 100;
-      targetPosition.set(0, 0, -distance);
-      this.camera.localToWorld(targetPosition); // set new camera target on globe
-
-      positionObject(targetPosition, cameraTarget);
-      cameraTarget.matrixWorldInverse.copy(cameraTarget.matrixWorld).invert();
-      targetPosition.copy(this.camera.position);
-      targetPosition.applyMatrix4(cameraTarget.matrixWorldInverse);
-      spherical.setFromVector3(targetPosition);
+      // Check if the middle of the screen is on the globe (to prevent having a dark-screen bug if outside the globe)
+      if (this.view.getPickingPositionFromDepth(null, pickedPosition)) {
+        // Update camera's target position
+        var distance = !isNaN(pickedPosition.x) ? this.camera.position.distanceTo(pickedPosition) : 100;
+        targetPosition.set(0, 0, -distance);
+        this.camera.localToWorld(targetPosition); // set new camera target on globe
+
+        positionObject(targetPosition, cameraTarget);
+        cameraTarget.matrixWorldInverse.copy(cameraTarget.matrixWorld).invert();
+        targetPosition.copy(this.camera.position);
+        targetPosition.applyMatrix4(cameraTarget.matrixWorldInverse);
+        spherical.setFromVector3(targetPosition);
+      }
     }
   }, {
     key: "handlingEvent",
@@ -721,68 +814,9 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
         }
       }
     }
-  }, {
-    key: "onMouseDown",
-    value: function onMouseDown(event) {
-      _CameraUtils["default"].stop(this.view, this.camera);
-
-      this.player.stop();
-      this.onEndingMove();
-
-      if (this.enabled === false) {
-        return;
-      }
-
-      this.updateTarget();
-      previous = _CameraUtils["default"].getTransformCameraLookingAtTarget(this.view, this.camera, pickedPosition);
-      this.state = this.states.inputToState(event.button, currentKey);
-      var coords = this.view.eventToViewCoords(event);
-
-      switch (this.state) {
-        case this.states.ORBIT:
-        case this.states.PANORAMIC:
-          rotateStart.copy(coords);
-          break;
-
-        case this.states.MOVE_GLOBE:
-          {
-            // update picking on sphere
-            if (this.view.getPickingPositionFromDepth(coords, pickingPoint)) {
-              pickSphere.radius = pickingPoint.length();
-              lastNormalizedIntersection.copy(pickingPoint).normalize();
-              this.updateHelper(pickingPoint, helpers.picking);
-            } else {
-              this.state = this.states.NONE;
-            }
-
-            break;
-          }
-
-        case this.states.DOLLY:
-          dollyStart.copy(coords);
-          break;
-
-        case this.states.PAN:
-          panStart.copy(coords);
-          break;
-
-        default:
-      }
-
-      if (this.state != this.states.NONE) {
-        this.view.domElement.addEventListener('mousemove', this._onMouseMove, false);
-        this.view.domElement.addEventListener('mouseup', this._onMouseUp, false);
-        this.view.domElement.addEventListener('mouseleave', this._onMouseUp, false);
-        this.dispatchEvent(this.startEvent);
-      }
-    }
   }, {
     key: "travel",
     value: function travel(event) {
-      if (this.enabled === false) {
-        return;
-      }
-
       this.player.stop();
       var point = this.view.getPickingPositionFromDepth(event.viewCoords);
       var range = this.getRange(point);
@@ -790,74 +824,20 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
       if (point && range > this.minDistance) {
         return this.lookAtCoordinate({
           coord: new _Coordinates["default"]('EPSG:4978', point),
-          range: range * (event.type === 'travel_out' ? 1 / 0.6 : 0.6),
+          range: range * (event.direction === 'out' ? 1 / 0.6 : 0.6),
           time: 1500
         });
       }
     }
   }, {
-    key: "onMouseUp",
-    value: function onMouseUp() {
-      var _this2 = this;
-
-      if (this.enabled === false) {
-        return;
-      }
-
-      this.view.domElement.removeEventListener('mousemove', this._onMouseMove, false);
-      this.view.domElement.removeEventListener('mouseup', this._onMouseUp, false);
-      this.view.domElement.removeEventListener('mouseleave', this._onMouseUp, false);
-      this.dispatchEvent(this.endEvent);
-      this.player.stop(); // Launch damping movement for :
-      //      * this.states.ORBIT
-      //      * this.states.MOVE_GLOBE
-
-      if (this.enableDamping) {
-        if (this.state === this.states.ORBIT && (sphericalDelta.theta > EPS || sphericalDelta.phi > EPS)) {
-          this.player.play(durationDampingOrbital);
-
-          this._onEndingMove = function () {
-            return _this2.onEndingMove();
-          };
-
-          this.player.addEventListener('animation-stopped', this._onEndingMove);
-        } else if (this.state === this.states.MOVE_GLOBE && Date.now() - lastTimeMouseMove < 50) {
-          // animation since mouse up event occurs less than 50ms after the last mouse move
-          this.player.play(durationDampingMove);
-
-          this._onEndingMove = function () {
-            return _this2.onEndingMove();
-          };
-
-          this.player.addEventListener('animation-stopped', this._onEndingMove);
-        } else {
-          this.onEndingMove();
-        }
-      } else {
-        this.onEndingMove();
-      }
-    }
-  }, {
-    key: "onMouseWheel",
-    value: function onMouseWheel(event) {
+    key: "handleZoom",
+    value: function handleZoom(event) {
       this.player.stop();
 
-      if (!this.enabled || !this.states.DOLLY.enable) {
-        return;
-      }
-
       _CameraUtils["default"].stop(this.view, this.camera);
 
-      event.preventDefault();
       this.updateTarget();
-      var delta = 0; // WebKit / Opera / Explorer 9
-
-      if (event.wheelDelta !== undefined) {
-        delta = event.wheelDelta; // Firefox
-      } else if (event.detail !== undefined) {
-        delta = -event.detail;
-      }
-
+      var delta = -event.delta;
       this.dolly(delta);
       var previousRange = this.getRange(pickedPosition);
       this.update();
@@ -874,61 +854,13 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
       this.dispatchEvent(this.startEvent);
       this.dispatchEvent(this.endEvent);
     }
-  }, {
-    key: "onKeyUp",
-    value: function onKeyUp() {
-      if (this.enabled === false || this.enableKeys === false) {
-        return;
-      }
-
-      currentKey = undefined;
-    }
-  }, {
-    key: "onKeyDown",
-    value: function onKeyDown(event) {
-      this.player.stop();
-
-      if (this.enabled === false || this.enableKeys === false) {
-        return;
-      }
-
-      currentKey = event.keyCode;
-
-      switch (event.keyCode) {
-        case this.states.PAN.up:
-          this.mouseToPan(0, this.keyPanSpeed);
-          this.state = this.states.PAN;
-          this.update();
-          break;
-
-        case this.states.PAN.bottom:
-          this.mouseToPan(0, -this.keyPanSpeed);
-          this.state = this.states.PAN;
-          this.update();
-          break;
-
-        case this.states.PAN.left:
-          this.mouseToPan(this.keyPanSpeed, 0);
-          this.state = this.states.PAN;
-          this.update();
-          break;
-
-        case this.states.PAN.right:
-          this.mouseToPan(-this.keyPanSpeed, 0);
-          this.state = this.states.PAN;
-          this.update();
-          break;
-
-        default:
-      }
-    }
   }, {
     key: "onTouchStart",
     value: function onTouchStart(event) {
       // CameraUtils.stop(view);
-      this.player.stop();
+      this.player.stop(); // TODO : this.states.enabled check should be removed when moving touch events management to StateControl
 
-      if (this.enabled === false) {
+      if (this.states.enabled === false) {
         return;
       }
 
@@ -980,9 +912,10 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
     value: function onTouchMove(event) {
       if (this.player.isPlaying()) {
         this.player.stop();
-      }
+      } // TODO : this.states.enabled check should be removed when moving touch events management to StateControl
+
 
-      if (this.enabled === false) {
+      if (this.states.enabled === false) {
         return;
       }
 
@@ -993,7 +926,10 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
         case this.states.MOVE_GLOBE.finger:
           {
             var coords = this.view.eventToViewCoords(event);
-            var normalized = this.view.viewToNormalizedCoords(coords);
+            var normalized = this.view.viewToNormalizedCoords(coords); // An updateMatrixWorld on the camera prevents camera jittering when moving globe on a zoomed out view, with
+            // devtools open in web browser.
+
+            this.camera.updateMatrixWorld();
             raycaster.setFromCamera(normalized, this.camera); // If there's intersection then move globe else we stop the move
 
             if (raycaster.ray.intersectSphere(pickSphere, intersection)) {
@@ -1001,7 +937,7 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
               moveAroundGlobe.setFromUnitVectors(normalizedIntersection, lastNormalizedIntersection);
               lastTimeMouseMove = Date.now();
             } else {
-              this.onMouseUp.bind(this)();
+              this.onTouchEnd();
             }
 
             break;
@@ -1040,41 +976,33 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
       }
 
       if (this.state !== this.states.NONE) {
-        this.update();
+        this.update(this.state);
       }
     }
   }, {
-    key: "onContextMenuListener",
-    value: function onContextMenuListener(event) {
-      event.preventDefault();
-    }
-  }, {
-    key: "onBlurListener",
-    value: function onBlurListener() {
-      this.onKeyUp();
-      this.onMouseUp();
+    key: "onTouchEnd",
+    value: function onTouchEnd() {
+      this.handleEndMovement({
+        previous: this.state
+      });
+      this.state = this.states.NONE;
     }
   }, {
     key: "dispose",
     value: function dispose() {
-      this.view.domElement.removeEventListener('contextmenu', this._onContextMenuListener, false);
-      this.view.domElement.removeEventListener('mousedown', this._onMouseDown, false);
-      this.view.domElement.removeEventListener('mousemove', this._onMouseMove, false);
-      this.view.domElement.removeEventListener('mousewheel', this._onMouseWheel, false);
-      this.view.domElement.removeEventListener('DOMMouseScroll', this._onMouseWheel, false); // firefox
-
-      this.view.domElement.removeEventListener('mouseup', this._onMouseUp, false);
-      this.view.domElement.removeEventListener('mouseleave', this._onMouseUp, false);
       this.view.domElement.removeEventListener('touchstart', this._onTouchStart, false);
-      this.view.domElement.removeEventListener('touchend', this._onMouseUp, false);
+      this.view.domElement.removeEventListener('touchend', this._onTouchEnd, false);
       this.view.domElement.removeEventListener('touchmove', this._onTouchMove, false);
       this.states.dispose();
-      this.states.removeEventListener('travel_in', this._onTravel, false);
-      this.states.removeEventListener('travel_out', this._onTravel, false);
-      this.player.removeEventListener('animation-frame', this._onKeyUp);
-      window.removeEventListener('keydown', this._onKeyDown, false);
-      window.removeEventListener('keyup', this._onKeyUp, false);
-      window.removeEventListener('blur', this._onBlurListener);
+      this.states.removeEventListener('state-changed', this._onStateChange, false);
+      this.states.removeEventListener(this.states.ORBIT._event, this._onRotation, false);
+      this.states.removeEventListener(this.states.MOVE_GLOBE._event, this._onDrag, false);
+      this.states.removeEventListener(this.states.DOLLY._event, this._onDolly, false);
+      this.states.removeEventListener(this.states.PAN._event, this._onPan, false);
+      this.states.removeEventListener(this.states.PANORAMIC._event, this._onPanoramic, false);
+      this.states.removeEventListener('zoom', this._onZoom, false);
+      this.states.removeEventListener(this.states.TRAVEL_IN._event, this._onTravel, false);
+      this.states.removeEventListener(this.states.TRAVEL_OUT._event, this._onTravel, false);
       this.dispatchEvent({
         type: 'dispose'
       });
@@ -1178,7 +1106,7 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
     key: "pan",
     value: function pan(pVector) {
       this.mouseToPan(pVector.x, pVector.y);
-      this.update();
+      this.update(this.states.PAN);
       return Promise.resolve();
     }
     /**
@@ -1368,7 +1296,7 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
   }, {
     key: "lookAtCoordinate",
     value: function lookAtCoordinate() {
-      var _this3 = this;
+      var _this4 = this;
 
       var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var isAnimated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.isAnimationEnabled();
@@ -1409,11 +1337,11 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
           type: 'animation-started'
         });
         return _CameraUtils["default"].animateCameraToLookAtTarget(this.view, this.camera, params).then(function (result) {
-          _this3.dispatchEvent({
+          _this4.dispatchEvent({
             type: 'animation-ended'
           });
 
-          _this3.handlingEvent(result);
+          _this4.handlingEvent(result);
 
           return result;
         });
@@ -1421,7 +1349,7 @@ var GlobeControls = /*#__PURE__*/function (_THREE$EventDispatche) {
         return _CameraUtils["default"].transformCameraToLookAtTarget(this.view, this.camera, params).then(function (result) {
           cameraTarget.position.copy(result.targetWorldPosition);
 
-          _this3.handlingEvent(result);
+          _this4.handlingEvent(result);
 
           return result;
         });