photo-sphere-viewer - npm Package Compare versions

Comparing version 4.3.0-rc.1 to 4.3.0

dist/adapters/cubemap.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('three')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'three'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.CubemapAdapter = factory(global.PhotoSphereViewer, global.THREE)));
-}(this, (function (photoSphereViewer, THREE) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'three', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.CubemapAdapter = {}), global.THREE, global.PhotoSphereViewer));
+}(this, (function (exports, THREE, photoSphereViewer) { 'use strict';
 
@@ -17,5 +17,15 @@ function _inheritsLoose(subClass, superClass) {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   /**
@@ -51,13 +61,5 @@ * @typedef {Object} PSV.adapters.CubemapAdapter.Cubemap
      * @override
-     */
-    _proto.supportsTransition = function supportsTransition() {
-      return true;
-    }
-    /**
-     * @override
      * @param {string[] | PSV.adapters.CubemapAdapter.Cubemap} panorama
      * @returns {Promise.<PSV.TextureData>}
      */
-    ;
-
     _proto.loadTexture = function loadTexture(panorama) {
@@ -198,6 +200,10 @@ var _this = this;
   }(photoSphereViewer.AbstractAdapter);
+  CubemapAdapter.id = 'cubemap';
+  CubemapAdapter.supportsTransition = true;
 
-  return CubemapAdapter;
+  exports.CubemapAdapter = CubemapAdapter;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=cubemap.js.map

dist/adapters/equirectangular-tiles.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('three')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'three'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.EquirectangularTilesAdapter = factory(global.PhotoSphereViewer, global.THREE)));
-}(this, (function (photoSphereViewer, THREE) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'three', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.EquirectangularTilesAdapter = {}), global.THREE, global.PhotoSphereViewer));
+}(this, (function (exports, THREE, photoSphereViewer) { 'use strict';
 
@@ -35,5 +35,15 @@ function _extends() {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -50,3 +60,3 @@ if (self === void 0) {
    * @memberOf PSV.adapters.EquirectangularTilesAdapter
-   * @private
+   * @package
    */
@@ -100,3 +110,3 @@ var Task = /*#__PURE__*/function () {
    * @memberOf PSV.adapters.EquirectangularTilesAdapter
-   * @private
+   * @package
    */
@@ -192,2 +202,3 @@
    * @property {boolean} [showErrorTile=true] - shows a warning sign on tiles that cannot be loaded
+   * @property {boolean} [baseBlur=true] - applies a blur to the low resolution panorama
    */
@@ -238,3 +249,4 @@
       _this.config = _extends({
-        showErrorTile: true
+        showErrorTile: true,
+        baseBlur: true
       }, options);
@@ -287,2 +299,6 @@ /**
 
+      if (_this.psv.config.requestHeaders && typeof _this.psv.config.requestHeaders === 'object') {
+        _this.loader.setRequestHeader(_this.psv.config.requestHeaders);
+      }
+
       _this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.POSITION_UPDATED, _assertThisInitialized(_this));
@@ -347,10 +363,2 @@
      * @override
-     */
-    ;
-
-    _proto.supportsTransition = function supportsTransition() {
-      return false;
-    }
-    /**
-     * @override
      * @param {PSV.adapters.EquirectangularTilesAdapter.Panorama} panorama
@@ -406,3 +414,3 @@ * @returns {Promise.<PSV.TextureData>}
           return {
-            texture: photoSphereViewer.utils.createTexture(img),
+            texture: _this2.__createBaseTexture(img),
             panoData: panoData
@@ -488,2 +496,3 @@ };
       var tilesToLoad = [];
+      var tilePosition = new THREE.Vector3();
 
@@ -497,3 +506,3 @@ for (var col = 0; col <= panorama.cols; col++) {
           };
-          var tilePosition = this.psv.dataHelper.sphericalCoordsToVector3(this.psv.dataHelper.textureCoordsToSphericalCoords(tileTexturePosition));
+          this.psv.dataHelper.sphericalCoordsToVector3(this.psv.dataHelper.textureCoordsToSphericalCoords(tileTexturePosition), tilePosition);
 
@@ -615,2 +624,7 @@ if (tilePosition.dot(this.psv.prop.direction) > 0) {
       var url = panorama.tileUrl(tile.col, tile.row);
+
+      if (this.psv.config.requestHeaders && typeof this.psv.config.requestHeaders === 'function') {
+        this.loader.setRequestHeader(this.psv.config.requestHeaders(url));
+      }
+
       return new Promise(function (resolve, reject) {
@@ -736,2 +750,32 @@ return _this6.loader.load(url, resolve, undefined, reject);
       return this.prop.errorMaterial;
+    }
+    /**
+     * @summary Create the texture for the base image
+     * @param {HTMLImageElement} img
+     * @return {external:THREE.Texture}
+     * @private
+     */
+    ;
+
+    _proto.__createBaseTexture = function __createBaseTexture(img) {
+      if (img.width !== img.height * 2) {
+        photoSphereViewer.utils.logWarn('Invalid base image, the width should be twice the height');
+      }
+
+      if (this.config.baseBlur || img.width > photoSphereViewer.SYSTEM.maxTextureWidth) {
+        var ratio = Math.min(1, photoSphereViewer.SYSTEM.getMaxCanvasWidth() / img.width);
+        var buffer = document.createElement('canvas');
+        buffer.width = img.width * ratio;
+        buffer.height = buffer.width / 2;
+        var ctx = buffer.getContext('2d');
+
+        if (this.config.baseBlur) {
+          ctx.filter = 'blur(1px)';
+        }
+
+        ctx.drawImage(img, 0, 0, buffer.width, buffer.height);
+        return photoSphereViewer.utils.createTexture(buffer);
+      }
+
+      return photoSphereViewer.utils.createTexture(img);
     };
@@ -741,6 +785,33 @@
   }(photoSphereViewer.AbstractAdapter);
+  /* eslint-disable */
 
-  return EquirectangularTilesAdapter;
+  /**
+   * UNUSED : Returns the apparent size of a segment on the screen
+   * @private
+   */
+  // function getSegmentSize() {
+  //   const p1 = this.psv.prop.direction.clone();
+  //   const p2 = this.psv.prop.direction.clone();
+  //
+  //   const angle = Math.PI * 2 / SPHERE_SEGMENTS / 2;
+  //   const dst = Math.atan(angle) * CONSTANTS.SPHERE_RADIUS;
+  //   const horizontalAxis = new THREE.Vector3(0, 1, 0).cross(this.psv.prop.direction).normalize();
+  //
+  //   p1.add(horizontalAxis.clone().multiplyScalar(dst));
+  //   p2.add(horizontalAxis.clone().multiplyScalar(-dst));
+  //
+  //   const p1a = this.psv.dataHelper.vector3ToViewerCoords(p1);
+  //   const p2a = this.psv.dataHelper.vector3ToViewerCoords(p2);
+  //
+  //   const segmentSize = p2a.x - p1a.x;
+  // }
 
+  EquirectangularTilesAdapter.id = 'equirectangular-tiles';
+  EquirectangularTilesAdapter.supportsTransition = false;
+
+  exports.EquirectangularTilesAdapter = EquirectangularTilesAdapter;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=equirectangular-tiles.js.map

dist/plugins/autorotate-keypoints.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.AutorotateKeypointsPlugin = factory(global.PhotoSphereViewer)));
-}(this, (function (photoSphereViewer) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.AutorotateKeypointsPlugin = {}), global.PhotoSphereViewer));
+}(this, (function (exports, photoSphereViewer) { 'use strict';
 
@@ -35,5 +35,15 @@ function _extends() {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -130,2 +140,4 @@ if (self === void 0) {
 
+      _this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, _assertThisInitialized(_this));
+
       return _this;
@@ -138,2 +150,3 @@ }
       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.AUTOROTATE, this);
+      this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this);
       delete this.keypoints;
@@ -148,2 +161,4 @@ delete this.state;
         this.__configure();
+      } else if (e.type === photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER) {
+        this.__beforeRender(e.args[0]);
       }
@@ -169,3 +184,2 @@ }
           if (typeof pt === 'string') {
-            // eslint-disable-next-line no-param-reassign
             pt = {
@@ -175,3 +189,2 @@ markerId: pt
           } else if (photoSphereViewer.utils.isExtendedPosition(pt)) {
-            // eslint-disable-next-line no-param-reassign
             pt = {
@@ -214,4 +227,2 @@ position: pt
     _proto.__configure = function __configure() {
-      var _this3 = this;
-
       if (!this.psv.isAutorotateEnabled() || !this.keypoints) {
@@ -222,4 +233,6 @@ this.__hideTooltip();
         return;
-      }
+      } // cancel core rotation
 
+
+      this.psv.dynamics.position.stop();
       this.state = {
@@ -240,4 +253,6 @@ idx: -1,
 
+        var currentPosition = serializePt(this.psv.getPosition());
+
         var index = this.__findMinIndex(this.keypoints, function (keypoint) {
-          return photoSphereViewer.utils.greatArcDistance(keypoint.position, serializePt(_this3.psv.prop.position));
+          return photoSphereViewer.utils.greatArcDistance(keypoint.position, currentPosition);
         });
@@ -247,20 +262,22 @@
       }
+    }
+    /**
+     * @private
+     */
+    ;
 
-      var autorotateCb = function autorotateCb(e, timestamp) {
+    _proto.__beforeRender = function __beforeRender(timestamp) {
+      if (this.psv.isAutorotateEnabled()) {
         // initialisation
-        if (!_this3.state.startTime) {
-          _this3.state.endPt = serializePt(_this3.psv.prop.position);
+        if (!this.state.startTime) {
+          this.state.endPt = serializePt(this.psv.getPosition());
 
-          _this3.__nextStep();
+          this.__nextStep();
 
-          _this3.state.startTime = timestamp;
-          _this3.state.lastTime = timestamp;
+          this.state.startTime = timestamp;
+          this.state.lastTime = timestamp;
         }
 
-        _this3.__nextFrame(timestamp);
-      };
-
-      this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this.psv.prop.autorotateCb);
-      this.psv.prop.autorotateCb = autorotateCb;
-      this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this.psv.prop.autorotateCb);
+        this.__nextFrame(timestamp);
+      }
     }
@@ -331,3 +348,4 @@ /**
       if (this.state.idx === -1) {
-        workPoints.push(serializePt(this.psv.prop.position), serializePt(this.psv.prop.position), this.keypoints[0].position, this.keypoints[1].position);
+        var currentPosition = serializePt(this.psv.getPosition());
+        workPoints.push(currentPosition, currentPosition, this.keypoints[0].position, this.keypoints[1].position);
       } else {
@@ -515,8 +533,9 @@ for (var i = -1; i < 3; i++) {
   }(photoSphereViewer.AbstractPlugin);
-
   AutorotateKeypointsPlugin.id = 'autorotate-keypoints';
 
-  return AutorotateKeypointsPlugin;
+  exports.AutorotateKeypointsPlugin = AutorotateKeypointsPlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=autorotate-keypoints.js.map

dist/plugins/gyroscope.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('three')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'three'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.GyroscopePlugin = factory(global.PhotoSphereViewer, global.THREE)));
-}(this, (function (photoSphereViewer, THREE) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'three', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.GyroscopePlugin = {}), global.THREE, global.PhotoSphereViewer));
+}(this, (function (exports, THREE, photoSphereViewer) { 'use strict';
 
@@ -35,5 +35,15 @@ function _extends() {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -47,86 +57,92 @@ if (self === void 0) {
 
-  /**
-   * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)
-   */
+  const _zee = new THREE.Vector3(0, 0, 1);
 
-  var DeviceOrientationControls = function DeviceOrientationControls(object) {
-    var scope = this;
-    var changeEvent = {
-      type: 'change'
-    };
-    var EPS = 0.000001;
-    this.object = object;
-    this.object.rotation.reorder('YXZ');
-    this.enabled = true;
-    this.deviceOrientation = {};
-    this.screenOrientation = 0;
-    this.alphaOffset = 0; // radians
+  const _euler = new THREE.Euler();
 
-    var onDeviceOrientationChangeEvent = function onDeviceOrientationChangeEvent(event) {
-      scope.deviceOrientation = event;
-    };
+  const _q0 = new THREE.Quaternion();
 
-    var onScreenOrientationChangeEvent = function onScreenOrientationChangeEvent() {
-      scope.screenOrientation = window.orientation || 0;
-    }; // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
+  const _q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 around the x-axis
 
 
-    var setObjectQuaternion = function () {
-      var zee = new THREE.Vector3(0, 0, 1);
-      var euler = new THREE.Euler();
-      var q0 = new THREE.Quaternion();
-      var q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 around the x-axis
+  const _changeEvent = {
+    type: 'change'
+  };
 
-      return function (quaternion, alpha, beta, gamma, orient) {
-        euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
+  class DeviceOrientationControls extends THREE.EventDispatcher {
+    constructor(object) {
+      super();
 
-        quaternion.setFromEuler(euler); // orient the device
+      if (window.isSecureContext === false) {
+        console.error('THREE.DeviceOrientationControls: DeviceOrientationEvent is only available in secure contexts (https)');
+      }
 
-        quaternion.multiply(q1); // camera looks out the back of the device, not the top
+      const scope = this;
+      const EPS = 0.000001;
+      const lastQuaternion = new THREE.Quaternion();
+      this.object = object;
+      this.object.rotation.reorder('YXZ');
+      this.enabled = true;
+      this.deviceOrientation = {};
+      this.screenOrientation = 0;
+      this.alphaOffset = 0; // radians
 
-        quaternion.multiply(q0.setFromAxisAngle(zee, -orient)); // adjust for screen orientation
+      const onDeviceOrientationChangeEvent = function (event) {
+        scope.deviceOrientation = event;
       };
-    }();
 
-    this.connect = function () {
-      onScreenOrientationChangeEvent(); // run once on load
-      // iOS 13+
+      const onScreenOrientationChangeEvent = function () {
+        scope.screenOrientation = window.orientation || 0;
+      }; // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
 
-      if (window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function') {
-        window.DeviceOrientationEvent.requestPermission().then(function (response) {
-          if (response == 'granted') {
-            window.addEventListener('orientationchange', onScreenOrientationChangeEvent);
-            window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent);
-          }
-        }).catch(function (error) {
-          console.error('THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:', error);
-        });
-      } else {
-        window.addEventListener('orientationchange', onScreenOrientationChangeEvent);
-        window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent);
-      }
 
-      scope.enabled = true;
-    };
+      const setObjectQuaternion = function (quaternion, alpha, beta, gamma, orient) {
+        _euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
 
-    this.disconnect = function () {
-      window.removeEventListener('orientationchange', onScreenOrientationChangeEvent);
-      window.removeEventListener('deviceorientation', onDeviceOrientationChangeEvent);
-      scope.enabled = false;
-    };
 
-    this.update = function () {
-      var lastQuaternion = new THREE.Quaternion();
-      return function () {
+        quaternion.setFromEuler(_euler); // orient the device
+
+        quaternion.multiply(_q1); // camera looks out the back of the device, not the top
+
+        quaternion.multiply(_q0.setFromAxisAngle(_zee, -orient)); // adjust for screen orientation
+      };
+
+      this.connect = function () {
+        onScreenOrientationChangeEvent(); // run once on load
+        // iOS 13+
+
+        if (window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function') {
+          window.DeviceOrientationEvent.requestPermission().then(function (response) {
+            if (response == 'granted') {
+              window.addEventListener('orientationchange', onScreenOrientationChangeEvent);
+              window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent);
+            }
+          }).catch(function (error) {
+            console.error('THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:', error);
+          });
+        } else {
+          window.addEventListener('orientationchange', onScreenOrientationChangeEvent);
+          window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent);
+        }
+
+        scope.enabled = true;
+      };
+
+      this.disconnect = function () {
+        window.removeEventListener('orientationchange', onScreenOrientationChangeEvent);
+        window.removeEventListener('deviceorientation', onDeviceOrientationChangeEvent);
+        scope.enabled = false;
+      };
+
+      this.update = function () {
         if (scope.enabled === false) return;
-        var device = scope.deviceOrientation;
+        const device = scope.deviceOrientation;
 
         if (device) {
-          var alpha = device.alpha ? THREE.MathUtils.degToRad(device.alpha) + scope.alphaOffset : 0; // Z
+          const alpha = device.alpha ? THREE.MathUtils.degToRad(device.alpha) + scope.alphaOffset : 0; // Z
 
-          var beta = device.beta ? THREE.MathUtils.degToRad(device.beta) : 0; // X'
+          const beta = device.beta ? THREE.MathUtils.degToRad(device.beta) : 0; // X'
 
-          var gamma = device.gamma ? THREE.MathUtils.degToRad(device.gamma) : 0; // Y''
+          const gamma = device.gamma ? THREE.MathUtils.degToRad(device.gamma) : 0; // Y''
 
-          var orient = scope.screenOrientation ? THREE.MathUtils.degToRad(scope.screenOrientation) : 0; // O
+          const orient = scope.screenOrientation ? THREE.MathUtils.degToRad(scope.screenOrientation) : 0; // O
 
@@ -137,19 +153,17 @@ setObjectQuaternion(scope.object.quaternion, alpha, beta, gamma, orient);
             lastQuaternion.copy(scope.object.quaternion);
-            scope.dispatchEvent(changeEvent);
+            scope.dispatchEvent(_changeEvent);
           }
         }
       };
-    }();
 
-    this.dispose = function () {
-      scope.disconnect();
-    };
+      this.dispose = function () {
+        scope.disconnect();
+      };
 
-    this.connect();
-  };
+      this.connect();
+    }
 
-  DeviceOrientationControls.prototype = Object.create(THREE.EventDispatcher.prototype);
-  DeviceOrientationControls.prototype.constructor = DeviceOrientationControls;
+  }
 
-  var compass = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"currentColor\" d=\"M50 0a50 50 0 1 0 0 100A50 50 0 0 0 50 0zm0 88.81a38.86 38.86 0 0 1-38.81-38.8 38.86 38.86 0 0 1 38.8-38.82A38.86 38.86 0 0 1 88.82 50 38.87 38.87 0 0 1 50 88.81z\"/><path d=\"M72.07 25.9L40.25 41.06 27.92 74.12l31.82-15.18v-.01l12.32-33.03zM57.84 54.4L44.9 42.58l21.1-10.06-8.17 21.9z\"/><!--Created by iconoci from the Noun Project--></svg>\n";
+  var compass = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"currentColor\" d=\"M50 0a50 50 0 1 0 0 100A50 50 0 0 0 50 0zm0 88.81a38.86 38.86 0 0 1-38.81-38.8 38.86 38.86 0 0 1 38.8-38.82A38.86 38.86 0 0 1 88.82 50 38.87 38.87 0 0 1 50 88.81z\"/><path fill=\"currentColor\" d=\"M72.07 25.9L40.25 41.06 27.92 74.12l31.82-15.18v-.01l12.32-33.03zM57.84 54.4L44.9 42.58l21.1-10.06-8.17 21.9z\"/><!--Created by iconoci from the Noun Project--></svg>\n";
 
@@ -250,2 +264,3 @@ /**
   photoSphereViewer.registerButton(GyroscopeButton);
+  var direction = new THREE.Vector3();
   /**
@@ -280,3 +295,3 @@ * @summary Adds gyroscope controls on mobile devices
        * @property {number} alphaOffset - current alpha offset for gyroscope controls
-       * @property {Function} orientationCb - update callback of the device orientation
+       * @property {boolean} enabled
        * @property {boolean} config_moveInertia - original config "moveInertia"
@@ -288,3 +303,3 @@ */
         alphaOffset: 0,
-        orientationCb: null,
+        enabled: false,
         config_moveInertia: true
@@ -312,2 +327,4 @@ };
 
+      _this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, _assertThisInitialized(_this));
+
       return _this;
@@ -325,2 +342,3 @@ }
       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_ROTATE, this);
+      this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this);
       this.stop();
@@ -343,4 +361,9 @@ delete this.controls;
 
+        case photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER:
+          this.__onBeforeRender();
+
+          break;
+
         case photoSphereViewer.CONSTANTS.EVENTS.BEFORE_ROTATE:
-          this.__onRotate(e);
+          this.__onBeforeRotate(e);
 
@@ -357,3 +380,3 @@ break;
     _proto.isEnabled = function isEnabled() {
-      return !!this.prop.orientationCb;
+      return this.prop.enabled;
     }
@@ -390,13 +413,17 @@ /**
         _this2.prop.config_moveInertia = _this2.psv.config.moveInertia;
-        _this2.psv.config.moveInertia = false;
+        _this2.psv.config.moveInertia = false; // enable gyro controls
 
-        _this2.__configure();
-        /**
-         * @event gyroscope-updated
-         * @memberof PSV.plugins.GyroscopePlugin
-         * @summary Triggered when the gyroscope mode is enabled/disabled
-         * @param {boolean} enabled
-         */
+        if (!_this2.controls) {
+          _this2.controls = new DeviceOrientationControls(new THREE.Object3D());
+        } else {
+          _this2.controls.connect();
+        } // force reset
 
 
+        _this2.controls.deviceOrientation = null;
+        _this2.controls.screenOrientation = 0;
+        _this2.controls.alphaOffset = 0;
+        _this2.prop.alphaOffset = _this2.config.absolutePosition ? 0 : null;
+        _this2.prop.enabled = true;
+
         _this2.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, true);
@@ -414,4 +441,3 @@ });
         this.controls.disconnect();
-        this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this.prop.orientationCb);
-        this.prop.orientationCb = null;
+        this.prop.enabled = false;
         this.psv.config.moveInertia = this.prop.config_moveInertia;
@@ -434,3 +460,3 @@ this.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, false);
     /**
-     * @summary Attaches the {@link external:THREE.DeviceOrientationControls} to the camera
+     * @summary Handles gyro movements
      * @private
@@ -440,52 +466,30 @@ */
 
-    _proto.__configure = function __configure() {
-      var _this3 = this;
+    _proto.__onBeforeRender = function __onBeforeRender() {
+      if (!this.isEnabled()) {
+        return;
+      }
 
-      if (!this.controls) {
-        this.controls = new DeviceOrientationControls(this.psv.renderer.camera);
-      } else {
-        this.controls.connect();
-      } // force reset
+      if (!this.controls.deviceOrientation) {
+        return;
+      } // on first run compute the offset depending on the current viewer position and device orientation
 
 
-      this.controls.deviceOrientation = null;
-      this.controls.screenOrientation = 0;
-      this.controls.alphaOffset = 0;
-      this.prop.alphaOffset = this.config.absolutePosition ? 0 : null;
+      if (this.prop.alphaOffset === null) {
+        this.controls.update();
+        this.controls.object.getWorldDirection(direction);
+        var sphericalCoords = this.psv.dataHelper.vector3ToSphericalCoords(direction);
+        this.prop.alphaOffset = sphericalCoords.longitude - this.psv.getPosition().longitude;
+      } else {
+        this.controls.alphaOffset = this.prop.alphaOffset;
+        this.controls.update();
+        this.controls.object.getWorldDirection(direction);
 
-      this.prop.orientationCb = function () {
-        if (!_this3.controls.deviceOrientation) {
-          return;
-        } // on first run compute the offset depending on the current viewer position and device orientation
+        var _sphericalCoords = this.psv.dataHelper.vector3ToSphericalCoords(direction); // TODO use dynamic goto for smooth movement
 
 
-        if (_this3.prop.alphaOffset === null) {
-          _this3.controls.update();
-
-          var direction = new THREE.Vector3();
-
-          _this3.psv.renderer.camera.getWorldDirection(direction);
-
-          var sphericalCoords = _this3.psv.dataHelper.vector3ToSphericalCoords(direction);
-
-          _this3.prop.alphaOffset = sphericalCoords.longitude - _this3.psv.prop.position.longitude;
-        } else {
-          _this3.controls.alphaOffset = _this3.prop.alphaOffset;
-
-          _this3.controls.update();
-
-          _this3.psv.renderer.camera.getWorldDirection(_this3.psv.prop.direction);
-
-          _this3.psv.prop.direction.multiplyScalar(photoSphereViewer.CONSTANTS.SPHERE_RADIUS);
-
-          var _sphericalCoords = _this3.psv.dataHelper.vector3ToSphericalCoords(_this3.psv.prop.direction);
-
-          _this3.psv.prop.position.longitude = _sphericalCoords.longitude;
-          _this3.psv.prop.position.latitude = _sphericalCoords.latitude;
-
-          _this3.psv.needsUpdate();
-        }
-      };
-
-      this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this.prop.orientationCb);
+        this.psv.dynamics.position.setValue({
+          longitude: _sphericalCoords.longitude,
+          latitude: -_sphericalCoords.latitude
+        });
+      }
     }
@@ -499,3 +503,3 @@ /**
 
-    _proto.__onRotate = function __onRotate(e) {
+    _proto.__onBeforeRotate = function __onBeforeRotate(e) {
       if (this.isEnabled()) {
@@ -505,3 +509,3 @@ e.preventDefault();
         if (this.config.touchmove) {
-          this.prop.alphaOffset -= e.args[0].longitude - this.psv.prop.position.longitude;
+          this.prop.alphaOffset -= e.args[0].longitude - this.psv.getPosition().longitude;
         }
@@ -556,11 +560,18 @@ }
   }(photoSphereViewer.AbstractPlugin);
-
   GyroscopePlugin.id = 'gyroscope';
   GyroscopePlugin.EVENTS = {
+    /**
+     * @event gyroscope-updated
+     * @memberof PSV.plugins.GyroscopePlugin
+     * @summary Triggered when the gyroscope mode is enabled/disabled
+     * @param {boolean} enabled
+     */
     GYROSCOPE_UPDATED: 'gyroscope-updated'
   };
 
-  return GyroscopePlugin;
+  exports.GyroscopePlugin = GyroscopePlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=gyroscope.js.map

dist/plugins/markers.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('three')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'three'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.MarkersPlugin = factory(global.PhotoSphereViewer, global.THREE)));
-}(this, (function (photoSphereViewer, THREE) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'three', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.MarkersPlugin = {}), global.THREE, global.PhotoSphereViewer));
+}(this, (function (exports, THREE, photoSphereViewer) { 'use strict';
 
@@ -35,5 +35,15 @@ function _extends() {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -684,6 +694,6 @@ if (self === void 0) {
       else {
-          this.props.def = actualPoly.map(function (coord) {
-            return [photoSphereViewer.utils.parseAngle(coord[0]), photoSphereViewer.utils.parseAngle(coord[1], true)];
-          });
-        }
+        this.props.def = actualPoly.map(function (coord) {
+          return [photoSphereViewer.utils.parseAngle(coord[0]), photoSphereViewer.utils.parseAngle(coord[1], true)];
+        });
+      }
 
@@ -1163,8 +1173,2 @@ var centroid = this.isPolygon() ? getPolygonCenter(this.props.def) : getPolylineCenter(this.props.def);
       this.renderMarkers();
-      /**
-       * @event show-markers
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Triggered when the markers are shown
-       */
-
       this.trigger(MarkersPlugin.EVENTS.SHOW_MARKERS);
@@ -1181,8 +1185,2 @@ }
       this.renderMarkers();
-      /**
-       * @event hide-markers
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Triggered when the markers are hidden
-       */
-
       this.trigger(MarkersPlugin.EVENTS.HIDE_MARKERS);
@@ -1413,8 +1411,2 @@ }
       })).then(function () {
-        /**
-         * @event goto-marker-done
-         * @memberof PSV.plugins.MarkersPlugin
-         * @summary Triggered when the animation to a marker is done
-         * @param {PSV.plugins.MarkersPlugin.Marker} marker
-         */
         _this4.trigger(MarkersPlugin.EVENTS.GOTO_MARKER_DONE, marker);
@@ -1500,10 +1492,2 @@ });
       });
-      /**
-       * @event filter:render-markers-list
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Used to alter the list of markers displayed on the side-panel
-       * @param {PSV.plugins.MarkersPlugin.Marker[]} markers
-       * @returns {PSV.plugins.MarkersPlugin.Marker[]}
-       */
-
       markers = this.change(MarkersPlugin.EVENTS.RENDER_MARKERS_LIST, markers);
@@ -1520,10 +1504,3 @@ this.psv.panel.show({
             var marker = _this5.getMarker(markerId);
-            /**
-             * @event select-marker-list
-             * @memberof PSV.plugins.MarkersPlugin
-             * @summary Triggered when a marker is selected from the side panel
-             * @param {PSV.plugins.MarkersPlugin.Marker} marker
-             */
 
-
             _this5.trigger(MarkersPlugin.EVENTS.SELECT_MARKER_LIST, marker);
@@ -1681,3 +1658,3 @@
       if (marker.isPoly()) {
-        return this.psv.dataHelper.vector3ToViewerCoords(this.psv.dataHelper.sphericalCoordsToVector3(marker.props.position));
+        return this.psv.dataHelper.sphericalCoordsToViewerCoords(marker.props.position);
       } else {
@@ -1805,9 +1782,2 @@ var position = this.psv.dataHelper.vector3ToViewerCoords(marker.props.positions3D[0]);
         this.prop.hoveringMarker = marker;
-        /**
-         * @event over-marker
-         * @memberof PSV.plugins.MarkersPlugin
-         * @summary Triggered when the user puts the cursor hover a marker
-         * @param {PSV.plugins.MarkersPlugin.Marker} marker
-         */
-
         this.trigger(MarkersPlugin.EVENTS.OVER_MARKER, marker);
@@ -1833,8 +1803,2 @@
       if (marker && !(marker.isPoly() && this.__targetOnTooltip(e.relatedTarget, marker.tooltip))) {
-        /**
-         * @event leave-marker
-         * @memberof PSV.plugins.MarkersPlugin
-         * @summary Triggered when the user puts the cursor away from a marker
-         * @param {PSV.plugins.MarkersPlugin.Marker} marker
-         */
         this.trigger(MarkersPlugin.EVENTS.LEAVE_MARKER, marker);
@@ -1868,4 +1832,4 @@ this.prop.hoveringMarker = null;
       else if (this.prop.hoveringMarker && this.__targetOnTooltip(e.target, this.prop.hoveringMarker.tooltip)) {
-          marker = this.prop.hoveringMarker;
-        }
+        marker = this.prop.hoveringMarker;
+      }
 
@@ -1922,11 +1886,2 @@ if (marker) {
         this.prop.currentMarker = marker;
-        /**
-         * @event select-marker
-         * @memberof PSV.plugins.MarkersPlugin
-         * @summary Triggered when the user clicks on a marker. The marker can be retrieved from outside the event handler
-         * with {@link PSV.plugins.MarkersPlugin.getCurrentMarker}
-         * @param {PSV.plugins.MarkersPlugin.Marker} marker
-         * @param {PSV.plugins.MarkersPlugin.SelectMarkerData} data
-         */
-
         this.trigger(MarkersPlugin.EVENTS.SELECT_MARKER, marker, {
@@ -1949,8 +1904,2 @@ dblclick: dblclick,
       } else if (this.prop.currentMarker) {
-        /**
-         * @event unselect-marker
-         * @memberof PSV.plugins.MarkersPlugin
-         * @summary Triggered when a marker was selected and the user clicks elsewhere
-         * @param {PSV.plugins.MarkersPlugin.Marker} marker
-         */
         this.trigger(MarkersPlugin.EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
@@ -1997,13 +1946,75 @@ this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKER);
   }(photoSphereViewer.AbstractPlugin);
-
   MarkersPlugin.id = 'markers';
   MarkersPlugin.EVENTS = {
+    /**
+     * @event goto-marker-done
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the animation to a marker is done
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     GOTO_MARKER_DONE: 'goto-marker-done',
+
+    /**
+     * @event leave-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the user puts the cursor away from a marker
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     LEAVE_MARKER: 'leave-marker',
+
+    /**
+     * @event over-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the user puts the cursor hover a marker
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     OVER_MARKER: 'over-marker',
+
+    /**
+     * @event filter:render-markers-list
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Used to alter the list of markers displayed on the side-panel
+     * @param {PSV.plugins.MarkersPlugin.Marker[]} markers
+     * @returns {PSV.plugins.MarkersPlugin.Marker[]}
+     */
     RENDER_MARKERS_LIST: 'render-markers-list',
+
+    /**
+     * @event select-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the user clicks on a marker. The marker can be retrieved from outside the event handler
+     * with {@link PSV.plugins.MarkersPlugin.getCurrentMarker}
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     * @param {PSV.plugins.MarkersPlugin.SelectMarkerData} data
+     */
     SELECT_MARKER: 'select-marker',
+
+    /**
+     * @event select-marker-list
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when a marker is selected from the side panel
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     SELECT_MARKER_LIST: 'select-marker-list',
+
+    /**
+     * @event unselect-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when a marker was selected and the user clicks elsewhere
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     UNSELECT_MARKER: 'unselect-marker',
+
+    /**
+     * @event hide-markers
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the markers are hidden
+     */
     HIDE_MARKERS: 'hide-markers',
+
+    /**
+     * @event show-markers
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the markers are shown
+     */
     SHOW_MARKERS: 'show-markers'
@@ -2018,9 +2029,11 @@ };
     return "\n<div class=\"psv-panel-menu psv-panel-menu--stripped\">\n  <h1 class=\"psv-panel-menu-title\">" + icon + " " + title + "</h1>\n  <ul class=\"psv-panel-menu-list\">\n    " + markers.map(function (marker) {
-      return "\n    <li data-" + dataKey + "=\"" + marker.config.id + "\" class=\"psv-panel-menu-item\">\n      " + (marker.type === 'image' ? "<span class=\"psv-panel-menu-item-icon\" ><img src=\"" + marker.config.image + "\"/></span>" : '') + "\n      <span class=\"psv-panel-menu-item-label\">" + marker.getListContent() + "</span>\n    </li>\n    ";
+      return "\n    <li data-" + dataKey + "=\"" + marker.config.id + "\" class=\"psv-panel-menu-item\" tabindex=\"0\">\n      " + (marker.type === 'image' ? "<span class=\"psv-panel-menu-item-icon\" ><img src=\"" + marker.config.image + "\"/></span>" : '') + "\n      <span class=\"psv-panel-menu-item-label\">" + marker.getListContent() + "</span>\n    </li>\n    ";
     }).join('') + "\n  </ul>\n</div>\n";
   };
 
-  return MarkersPlugin;
+  exports.MarkersPlugin = MarkersPlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=markers.js.map

dist/plugins/resolution.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('photo-sphere-viewer/dist/plugins/settings')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'photo-sphere-viewer/dist/plugins/settings'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.ResolutionPlugin = factory(global.PhotoSphereViewer, global.PhotoSphereViewer.SettingsPlugin)));
-}(this, (function (photoSphereViewer, SettingsPlugin) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('photo-sphere-viewer'), require('photo-sphere-viewer/dist/plugins/settings')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'photo-sphere-viewer', 'photo-sphere-viewer/dist/plugins/settings'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.ResolutionPlugin = {}), global.PhotoSphereViewer, global.PhotoSphereViewer.SettingsPlugin));
+}(this, (function (exports, photoSphereViewer, settings) { 'use strict';
 
@@ -17,5 +17,15 @@ function _inheritsLoose(subClass, superClass) {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -106,3 +116,3 @@ if (self === void 0) {
 
-      _this.settings = SettingsPlugin ? psv.getPlugin(SettingsPlugin) : null;
+      _this.settings = settings.SettingsPlugin ? psv.getPlugin(settings.SettingsPlugin) : null;
 
@@ -168,3 +178,3 @@ if (!_this.settings) {
       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.PANORAMA_LOADED, this);
-      this.settings.removeSetting(SettingsPlugin.id);
+      this.settings.removeSetting(settings.SettingsPlugin.id);
 
@@ -267,3 +277,2 @@ _AbstractPlugin.prototype.destroy.call(this);
   }(photoSphereViewer.AbstractPlugin);
-
   ResolutionPlugin.id = 'resolution';
@@ -280,5 +289,7 @@ ResolutionPlugin.EVENTS = {
 
-  return ResolutionPlugin;
+  exports.ResolutionPlugin = ResolutionPlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=resolution.js.map

dist/plugins/settings.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.SettingsPlugin = factory(global.PhotoSphereViewer)));
-}(this, (function (photoSphereViewer) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.SettingsPlugin = {}), global.PhotoSphereViewer));
+}(this, (function (exports, photoSphereViewer) { 'use strict';
 
@@ -17,5 +17,15 @@ function _inheritsLoose(subClass, superClass) {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -386,3 +396,2 @@ if (self === void 0) {
   }(photoSphereViewer.AbstractPlugin);
-
   SettingsPlugin.id = 'settings';
@@ -413,5 +422,7 @@ SettingsPlugin.ID_PANEL = 'settings';
 
-  return SettingsPlugin;
+  exports.SettingsPlugin = SettingsPlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=settings.js.map

dist/plugins/stereo.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('photo-sphere-viewer/dist/plugins/gyroscope'), require('three')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'photo-sphere-viewer/dist/plugins/gyroscope', 'three'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.StereoPlugin = factory(global.PhotoSphereViewer, global.PhotoSphereViewer.GyroscopePlugin, global.THREE)));
-}(this, (function (photoSphereViewer, GyroscopePlugin, three) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('photo-sphere-viewer'), require('photo-sphere-viewer/dist/plugins/gyroscope')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'three', 'photo-sphere-viewer', 'photo-sphere-viewer/dist/plugins/gyroscope'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.StereoPlugin = {}), global.THREE, global.PhotoSphereViewer, global.PhotoSphereViewer.GyroscopePlugin));
+}(this, (function (exports, three, photoSphereViewer, gyroscope) { 'use strict';
 
@@ -17,5 +17,15 @@ function _inheritsLoose(subClass, superClass) {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -29,35 +39,38 @@ if (self === void 0) {
 
-  var StereoEffect = function StereoEffect(renderer) {
-    var _stereo = new three.StereoCamera();
+  class StereoEffect {
+    constructor(renderer) {
+      const _stereo = new three.StereoCamera();
 
-    _stereo.aspect = 0.5;
-    var size = new three.Vector2();
+      _stereo.aspect = 0.5;
+      const size = new three.Vector2();
 
-    this.setEyeSeparation = function (eyeSep) {
-      _stereo.eyeSep = eyeSep;
-    };
+      this.setEyeSeparation = function (eyeSep) {
+        _stereo.eyeSep = eyeSep;
+      };
 
-    this.setSize = function (width, height) {
-      renderer.setSize(width, height);
-    };
+      this.setSize = function (width, height) {
+        renderer.setSize(width, height);
+      };
 
-    this.render = function (scene, camera) {
-      scene.updateMatrixWorld();
-      if (camera.parent === null) camera.updateMatrixWorld();
+      this.render = function (scene, camera) {
+        scene.updateMatrixWorld();
+        if (camera.parent === null) camera.updateMatrixWorld();
 
-      _stereo.update(camera);
+        _stereo.update(camera);
 
-      renderer.getSize(size);
-      if (renderer.autoClear) renderer.clear();
-      renderer.setScissorTest(true);
-      renderer.setScissor(0, 0, size.width / 2, size.height);
-      renderer.setViewport(0, 0, size.width / 2, size.height);
-      renderer.render(scene, _stereo.cameraL);
-      renderer.setScissor(size.width / 2, 0, size.width / 2, size.height);
-      renderer.setViewport(size.width / 2, 0, size.width / 2, size.height);
-      renderer.render(scene, _stereo.cameraR);
-      renderer.setScissorTest(false);
-    };
-  };
+        renderer.getSize(size);
+        if (renderer.autoClear) renderer.clear();
+        renderer.setScissorTest(true);
+        renderer.setScissor(0, 0, size.width / 2, size.height);
+        renderer.setViewport(0, 0, size.width / 2, size.height);
+        renderer.render(scene, _stereo.cameraL);
+        renderer.setScissor(size.width / 2, 0, size.width / 2, size.height);
+        renderer.setViewport(size.width / 2, 0, size.width / 2, size.height);
+        renderer.render(scene, _stereo.cameraR);
+        renderer.setScissorTest(false);
+      };
+    }
 
+  }
+
   var mobileRotateIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"currentColor\" d=\"M66.7 19a14 14 0 0 1 13.8 12.1l-3.9-2.7c-.5-.3-1.1-.2-1.4.3-.3.5-.2 1.1.3 1.4l5.7 3.9.6.2c.3 0 .6-.2.8-.4l3.9-5.7c.3-.5.2-1.1-.3-1.4-.5-.3-1.1-.2-1.4.3l-2.4 3.5A16 16 0 0 0 66.7 17c-.6 0-1 .4-1 1s.4 1 1 1zM25 15h10c.6 0 1-.4 1-1s-.4-1-1-1H25c-.6 0-1 .4-1 1s.4 1 1 1zm-6.9 30H16l-2 .2a1 1 0 0 0-.8 1.2c.1.5.5.8 1 .8h.2l1.7-.2h2.1c.6 0 1-.4 1-1s-.5-1-1.1-1zm10 0h-4c-.6 0-1 .4-1 1s.4 1 1 1h4c.6 0 1-.4 1-1s-.4-1-1-1zM84 45H55V16A11 11 0 0 0 44 5H16A11 11 0 0 0 5 16v68a11 11 0 0 0 11 11h68a11 11 0 0 0 11-11V56a11 11 0 0 0-11-11zM16 93c-5 0-9-4-9-9V53.2c.3-.1.6-.3.7-.6a9.8 9.8 0 0 1 2-3c.4-.4.4-1 0-1.4a1 1 0 0 0-1.4 0l-1.2 1.5V16c0-5 4-9 9-9h28c5 0 9 4 9 9v68c0 5-4 9-9 9H16zm77-9c0 5-4 9-9 9H50.3c2.8-2 4.7-5.3 4.7-9V47h29c5 0 9 4 9 9v28zM38.1 45h-4c-.6 0-1 .4-1 1s.4 1 1 1h4c.6 0 1-.4 1-1s-.5-1-1-1zm9.9 0h-4c-.6 0-1 .4-1 1s.4 1 1 1h4c.6 0 1-.4 1-1s-.4-1-1-1zm38 19c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1s1-.4 1-1V65c0-.6-.4-1-1-1z\"/><!--Created by Anthony Bresset from the Noun Project--></svg>\n";
@@ -198,3 +211,3 @@
 
-      _this.gyroscope = GyroscopePlugin ? psv.getPlugin(GyroscopePlugin) : null;
+      _this.gyroscope = gyroscope.GyroscopePlugin ? psv.getPlugin(gyroscope.GyroscopePlugin) : null;
 
@@ -311,10 +324,3 @@ if (!_this.gyroscope) {
         _this2.psv.panel.hide();
-        /**
-         * @event stereo-updated
-         * @memberof PSV.plugins.StereoPlugin
-         * @summary Triggered when the stereo view is enabled/disabled
-         * @param {boolean} enabled
-         */
 
-
         _this2.trigger(StereoPlugin.EVENTS.STEREO_UPDATED, true);
@@ -469,12 +475,19 @@
   }(photoSphereViewer.AbstractPlugin);
-
   StereoPlugin.id = 'stereo';
   StereoPlugin.ID_OVERLAY_PLEASE_ROTATE = 'pleaseRotate';
   StereoPlugin.EVENTS = {
+    /**
+     * @event stereo-updated
+     * @memberof PSV.plugins.StereoPlugin
+     * @summary Triggered when the stereo view is enabled/disabled
+     * @param {boolean} enabled
+     */
     STEREO_UPDATED: 'stereo-updated'
   };
 
-  return StereoPlugin;
+  exports.StereoPlugin = StereoPlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=stereo.js.map

dist/plugins/visible-range.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,6 +8,6 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('three')) :
-  typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'three'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.VisibleRangePlugin = factory(global.PhotoSphereViewer, global.THREE)));
-}(this, (function (photoSphereViewer, THREE) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('photo-sphere-viewer')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'three', 'photo-sphere-viewer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.VisibleRangePlugin = {}), global.THREE, global.PhotoSphereViewer));
+}(this, (function (exports, THREE, photoSphereViewer) { 'use strict';
 
@@ -17,5 +17,15 @@ function _inheritsLoose(subClass, superClass) {
     subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
+
+    _setPrototypeOf(subClass, superClass);
   }
 
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -74,2 +84,4 @@ if (self === void 0) {
 
+      _this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.ZOOM_UPDATED, _assertThisInitialized(_this));
+
       _this.psv.on(photoSphereViewer.CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, _assertThisInitialized(_this));
@@ -90,2 +102,3 @@
       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.PANORAMA_LOADED, this);
+      this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.ZOOM_UPDATED, this);
       this.psv.off(photoSphereViewer.CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, this);
@@ -124,2 +137,11 @@ this.psv.off(photoSphereViewer.CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION, this);
         }
+      } else if (e.type === photoSphereViewer.CONSTANTS.EVENTS.ZOOM_UPDATED) {
+        var currentPosition = this.psv.getPosition();
+
+        var _this$applyRanges3 = this.applyRanges(currentPosition),
+            _rangedPosition2 = _this$applyRanges3.rangedPosition;
+
+        if (currentPosition.longitude !== _rangedPosition2.longitude || currentPosition.latitude !== _rangedPosition2.latitude) {
+          this.psv.rotate(_rangedPosition2);
+        }
       }
@@ -136,13 +158,11 @@ }
       if (range && range.length !== 2) {
-        photoSphereViewer.utils.logWarn('latitude range must have exactly two elements'); // eslint-disable-next-line no-param-reassign
-
+        photoSphereViewer.utils.logWarn('latitude range must have exactly two elements');
         range = null;
       } // latitude range must be ordered
       else if (range && range[0] > range[1]) {
-          photoSphereViewer.utils.logWarn('latitude range values must be ordered'); // eslint-disable-next-line no-param-reassign
+        photoSphereViewer.utils.logWarn('latitude range values must be ordered');
+        range = [range[1], range[0]];
+      } // latitude range is between -PI/2 and PI/2
 
-          range = [range[1], range[0]];
-        } // latitude range is between -PI/2 and PI/2
 
-
       if (range) {
@@ -169,4 +189,3 @@ this.config.latitudeRange = range.map(function (angle) {
       if (range && range.length !== 2) {
-        photoSphereViewer.utils.logWarn('longitude range must have exactly two elements'); // eslint-disable-next-line no-param-reassign
-
+        photoSphereViewer.utils.logWarn('longitude range must have exactly two elements');
         range = null;
@@ -346,8 +365,9 @@ } // longitude range is between 0 and 2*PI
   }(photoSphereViewer.AbstractPlugin);
-
   VisibleRangePlugin.id = 'visible-range';
 
-  return VisibleRangePlugin;
+  exports.VisibleRangePlugin = VisibleRangePlugin;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=visible-range.js.map

dist/viewer-compat.js

 /*!
-* Photo Sphere Viewer 4.3.0-rc.1
+* Photo Sphere Viewer 4.3.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -8,324 +8,11 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three'), require('photo-sphere-viewer'), require('photo-sphere-viewer/dist/plugins/gyroscope'), require('photo-sphere-viewer/dist/plugins/stereo'), require('photo-sphere-viewer/dist/plugins/markers'), require('photo-sphere-viewer/dist/plugins/visible-range')) :
-  typeof define === 'function' && define.amd ? define(['three', 'photo-sphere-viewer', 'photo-sphere-viewer/dist/plugins/gyroscope', 'photo-sphere-viewer/dist/plugins/stereo', 'photo-sphere-viewer/dist/plugins/markers', 'photo-sphere-viewer/dist/plugins/visible-range'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.ViewerCompat = factory(global.THREE, global.PhotoSphereViewer, global.PhotoSphereViewer.GyroscopePlugin, global.PhotoSphereViewer.StereoPlugin, global.PhotoSphereViewer.MarkersPlugin, global.PhotoSphereViewer.VisibleRangePlugin)));
-}(this, (function (THREE, photoSphereViewer, GyroscopePlugin, StereoPlugin, MarkersPlugin, VisibleRangePlugin) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.ViewerCompat = factory()));
+}(this, (function () { 'use strict';
 
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
-  }
-
-  /**
-   * @private
-   */
-
-  function snakeCaseToCamelCase(options) {
-    if (typeof options === 'object') {
-      photoSphereViewer.utils.each(options, function (value, key) {
-        if (typeof key === 'string' && key.indexOf('_') !== -1) {
-          var camelKey = key.replace(/(_\w)/g, function (matches) {
-            return matches[1].toUpperCase();
-          });
-          options[camelKey] = snakeCaseToCamelCase(value);
-          delete options[key];
-        }
-      });
-    }
-
-    return options;
-  }
-  /**
-   * @private
-   */
-
-
-  var RENAMED_OPTIONS = {
-    animSpeed: 'autorotateSpeed',
-    animLat: 'autorotateLat',
-    usexmpdata: 'useXmpData',
-    mousemoveHover: 'captureCursor',
-    zoomSpeed: 'zoomButtonIncrement',
-    mousewheelFactor: 'mousewheelSpeed'
+  var ViewerCompat = function ViewerCompat() {
+    throw new Error('PhotoSphereViewer#ViewerCompat has been removed, please migrate to v4 Viewer.');
   };
-  /**
-   * @summary Compatibility wrapper for version 3
-   * @memberOf PSV
-   * @deprecated
-   */
 
-  var ViewerCompat = /*#__PURE__*/function (_Viewer) {
-    _inheritsLoose(ViewerCompat, _Viewer);
-
-    /**
-     * @param {PSV.Options} options
-     * @fires PSV.ready
-     * @throws {PSV.PSVError} when the configuration is incorrect
-     */
-    function ViewerCompat(options) {
-      var _this;
-
-      snakeCaseToCamelCase(options);
-      photoSphereViewer.utils.each(RENAMED_OPTIONS, function (newName, oldName) {
-        if (oldName in options) {
-          options[newName] = options[oldName];
-          delete options[oldName];
-        }
-      });
-
-      if ('defaultFov' in options) {
-        var minFov = options.minFov !== undefined ? options.minFov : photoSphereViewer.DEFAULTS.minFov;
-        var maxFov = options.maxFov !== undefined ? options.maxFov : photoSphereViewer.DEFAULTS.maxFov;
-        var defaultFov = photoSphereViewer.utils.bound(options.defaultFov, minFov, maxFov);
-        options.defaultZoomLvl = (defaultFov - minFov) / (maxFov - minFov) * 100;
-        delete options.defaultFov;
-      }
-
-      if (!('timeAnim' in options)) {
-        options.autorotateDelay = 2000;
-      } else if (options.timeAnim === false) {
-        options.autorotateDelay = null;
-      } else if (typeof options.timeAnim === 'number') {
-        options.autorotateDelay = options.timeAnim;
-      }
-
-      delete options.timeAnim;
-      delete options.transition;
-
-      if ('panoramaRoll' in options) {
-        options.sphereCorrection = options.sphereCorrection || {};
-        options.sphereCorrection.roll = options.panoramaRoll;
-        delete options.panoramaRoll;
-      }
-
-      if (typeof options.navbar === 'string') {
-        options.navbar = options.navbar.split(' ');
-      }
-
-      if (Array.isArray(options.navbar)) {
-        var markersIdx = options.navbar.indexOf('markers');
-
-        if (markersIdx !== -1) {
-          options.navbar.splice(markersIdx, 1, 'markersList');
-        }
-      }
-
-      var clickEventOnMarker = options.clickEventOnMarker;
-      delete options.clickEventOnMarker;
-      var markers = options.markers;
-      delete options.markers;
-      var longitudeRange = options.longitudeRange;
-      delete options.longitudeRange;
-      var latitudeRange = options.latitudeRange;
-      delete options.latitudeRange;
-      options.plugins = [];
-
-      if (GyroscopePlugin) {
-        options.plugins.push(GyroscopePlugin);
-      }
-
-      if (StereoPlugin) {
-        options.plugins.push(StereoPlugin);
-      }
-
-      if (MarkersPlugin) {
-        options.plugins.push([MarkersPlugin, {
-          clickEventOnMarker: clickEventOnMarker,
-          markers: markers
-        }]);
-      }
-
-      if (VisibleRangePlugin) {
-        options.plugins.push([VisibleRangePlugin, {
-          longitudeRange: longitudeRange,
-          latitudeRange: latitudeRange
-        }]);
-      }
-
-      _this = _Viewer.call(this, options) || this;
-      _this.gyroscope = _this.getPlugin(GyroscopePlugin);
-      _this.stereo = _this.getPlugin(StereoPlugin);
-      _this.markers = _this.getPlugin(MarkersPlugin);
-      return _this;
-    } // GENERAL
-
-
-    var _proto = ViewerCompat.prototype;
-
-    _proto.render = function render() {
-      this.renderer.render();
-    };
-
-    _proto.setPanorama = function setPanorama(panorama, options, transition) {
-      if (options === void 0) {
-        options = {};
-      }
-
-      if (transition === void 0) {
-        transition = false;
-      }
-
-      snakeCaseToCamelCase(options);
-      options.transition = transition;
-      return _Viewer.prototype.setPanorama.call(this, panorama, options);
-    };
-
-    _proto.preloadPanorama = function preloadPanorama(panorama) {
-      return this.textureLoader.preloadPanorama(panorama);
-    };
-
-    _proto.clearPanoramaCache = function clearPanoramaCache(panorama) {
-      if (panorama) {
-        THREE.Cache.remove(panorama);
-      } else {
-        THREE.Cache.clear();
-      }
-    } // GYROSCOPE / STEREO
-    ;
-
-    _proto.isGyroscopeEnabled = function isGyroscopeEnabled() {
-      return this.gyroscope && this.gyroscope.isEnabled();
-    };
-
-    _proto.startGyroscopeControl = function startGyroscopeControl() {
-      return this.gyroscope && this.gyroscope.start();
-    };
-
-    _proto.stopGyroscopeControl = function stopGyroscopeControl() {
-      this.gyroscope && this.gyroscope.stop();
-    };
-
-    _proto.toggleGyroscopeControl = function toggleGyroscopeControl() {
-      this.gyroscope && this.gyroscope.toggle();
-    };
-
-    _proto.isStereoEnabled = function isStereoEnabled() {
-      return this.stereo && this.stereo.isEnabled();
-    };
-
-    _proto.startStereoView = function startStereoView() {
-      return this.stereo && this.stereo.start();
-    };
-
-    _proto.stopStereoView = function stopStereoView() {
-      this.stereo && this.stereo.stop();
-    };
-
-    _proto.toggleStereoView = function toggleStereoView() {
-      this.stereo && this.stereo.toggle();
-    } // MARKERS
-    ;
-
-    _proto.addMarker = function addMarker(marker, render) {
-      return this.markers && this.markers.addMarker(snakeCaseToCamelCase(marker), render);
-    };
-
-    _proto.getMarker = function getMarker(markerId) {
-      return this.markers && this.markers.getMarker(markerId);
-    };
-
-    _proto.updateMarker = function updateMarker(marker, render) {
-      return this.markers && this.markers.updateMarker(snakeCaseToCamelCase(marker), render);
-    };
-
-    _proto.removeMarker = function removeMarker(marker, render) {
-      this.markers && this.markers.removeMarker(marker, render);
-    };
-
-    _proto.gotoMarker = function gotoMarker(markerOrId, duration) {
-      this.markers && this.markers.gotoMarker(markerOrId, duration);
-    };
-
-    _proto.hideMarker = function hideMarker(markerId) {
-      this.markers && this.markers.hideMarker(markerId);
-    };
-
-    _proto.showMarker = function showMarker(markerId) {
-      this.markers && this.markers.showMarker(markerId);
-    };
-
-    _proto.clearMarkers = function clearMarkers(render) {
-      this.markers && this.markers.clearMarkers(render);
-    };
-
-    _proto.getCurrentMarker = function getCurrentMarker() {
-      return this.markers && this.markers.getCurrentMarker();
-    } // NAVBAR
-    ;
-
-    _proto.showNavbar = function showNavbar() {
-      this.navbar.show();
-    };
-
-    _proto.hideNavbar = function hideNavbar() {
-      this.navbar.hide();
-    };
-
-    _proto.toggleNavbar = function toggleNavbar() {
-      this.navbar.toggle();
-    };
-
-    _proto.getNavbarButton = function getNavbarButton(id, silent) {
-      return this.navbar.getButton(id, silent);
-    };
-
-    _proto.setCaption = function setCaption(html) {
-      return this.navbar.setCaption(html);
-    } // NOTIFICATION
-    ;
-
-    _proto.showNotification = function showNotification(config) {
-      this.notification.show(config);
-    };
-
-    _proto.hideNotification = function hideNotification() {
-      this.notification.hide();
-    };
-
-    _proto.isNotificationVisible = function isNotificationVisible() {
-      return this.notification.isVisible();
-    } // OVERLAY
-    ;
-
-    _proto.showOverlay = function showOverlay(config) {
-      this.overlay.show(config);
-    };
-
-    _proto.hideOverlay = function hideOverlay() {
-      this.overlay.hide();
-    };
-
-    _proto.isOverlayVisible = function isOverlayVisible() {
-      return this.overlay.isVisible();
-    } // PANEL
-    ;
-
-    _proto.showPanel = function showPanel(config) {
-      this.panel.show(config);
-    };
-
-    _proto.hidePanel = function hidePanel() {
-      this.panel.hide();
-    } // TOOLTIP
-    ;
-
-    _proto.showTooltip = function showTooltip(config) {
-      this.prop.mainTooltip = this.tooltip.create(config);
-    };
-
-    _proto.hideTooltip = function hideTooltip() {
-      if (this.prop.mainTooltip) {
-        this.prop.mainTooltip.hide();
-        this.prop.mainTooltip = null;
-      }
-    };
-
-    _proto.isTooltipVisible = function isTooltipVisible() {
-      return !!this.prop.mainTooltip;
-    };
-
-    return ViewerCompat;
-  }(photoSphereViewer.Viewer);
-
   return ViewerCompat;
@@ -332,0 +19,0 @@

package.json

 {
   "name": "photo-sphere-viewer",
-  "version": "4.3.0-rc.1",
+  "version": "4.3.0",
   "description": "A JavaScript library to display Photo Sphere panoramas",
   "homepage": "https://photo-sphere-viewer.js.org",
   "main": "dist/photo-sphere-viewer.js",
+  "types": "dist/photo-sphere-viewer.d.ts",
   "files": [
     "src/",
-    "dist/"
+    "dist/",
+    "types/"
   ],
@@ -34,50 +36,50 @@ "authors": [
   "dependencies": {
-    "three": "^0.126.0",
-    "uevent": "~2.0.0"
+    "three": "^0.133.1",
+    "uevent": "~2.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/preset-env": "^7.7.4",
-    "@babel/register": "^7.7.4",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/register": "^7.15.3",
     "@csstools/postcss-sass": "https://github.com/sinankeskin/postcss-sass#master",
     "@pixi/jsdoc-template": "^2.5.1",
-    "@rollup/plugin-alias": "^3.0.1",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-inject": "^4.0.1",
-    "@rollup/plugin-replace": "^2.3.1",
-    "@vuepress/plugin-active-header-links": "^1.2.0",
-    "@vuepress/plugin-back-to-top": "^1.2.0",
-    "@vuepress/plugin-google-analytics": "^1.2.0",
-    "autoprefixer": "^10.2.4",
-    "axios": "^0.21.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@vuepress/plugin-active-header-links": "^1.8.2",
+    "@vuepress/plugin-back-to-top": "^1.8.2",
+    "@vuepress/plugin-google-analytics": "^1.8.2",
+    "autoprefixer": "^10.3.3",
+    "axios": "^0.23.0",
     "babel-eslint": "^10.0.3",
     "cpx": "^1.5.0",
-    "date-fns": "^2.9.0",
-    "eslint": "^7.7.0",
-    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-plugin-import": "^2.21.2",
-    "jsdoc": "^3.6.3",
+    "date-fns": "^2.23.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.24.2",
+    "jsdoc": "^3.6.7",
     "live-server": "^1.2.0",
-    "marked": "^2.0.0",
-    "mocha": "^8.0.1",
-    "ngrok": "^3.2.7",
+    "marked": "^3.0.2",
+    "mocha": "^9.1.1",
+    "ngrok": "^4.0.0",
     "nosleep.js": "^0.12.0",
     "npm-run-all": "^4.1.3",
-    "postcss": "^8.2.6",
-    "postcss-banner": "^4.0.0",
-    "promise-polyfill": "^8.1.3",
-    "raw-loader": "^4.0.0",
-    "rollup": "^2.36.2",
+    "postcss": "^8.3.6",
+    "postcss-banner": "^4.0.1",
+    "promise-polyfill": "^8.2.0",
+    "raw-loader": "^4.0.2",
+    "rollup": "^2.56.0",
+    "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-string": "^3.0.0",
-    "stylelint": "^13.0.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.13.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-scss": "^3.20.1",
+    "typescript": "^4.4.2",
     "vue-material": "^1.0.0-beta-11",
-    "vue-slider-component": "^3.2.11",
-    "vue-swatches": "^2.1.0",
-    "vuepress": "^1.4.0",
+    "vue-slider-component": "^3.2.14",
+    "vue-swatches": "^2.1.1",
+    "vuepress": "^1.8.2",
     "vuepress-plugin-element-tabs": "^0.2.8"
@@ -98,2 +100,3 @@ },
     "test:sasslint": "stylelint \"src/**/*.scss\"",
+    "test:types": "cd tests && npm run test",
     "start": "npm-run-all --parallel dev:**",
@@ -103,4 +106,4 @@ "start:doc": "vuepress dev docs",
     "dev:serve": "live-server --watch=dist,example --open=example",
-    "dev:watch": "npm run compile:rollup -- --watch"
+    "dev:watch": "npm run compile:prepare && npm run compile:rollup -- --watch"
   }
 }

src/adapters/AbstractAdapter.js

 import { PSVError } from '../PSVError';
-import { AbstractService } from '../services/AbstractService';
 
@@ -13,14 +12,40 @@ /**
  */
-export class AbstractAdapter extends AbstractService {
+export class AbstractAdapter {
 
   /**
-   * @abstract
+   * @summary Unique identifier of the adapter
+   * @member {string}
+   * @readonly
+   * @static
+   */
+  static id = null;
+
+  /**
    * @summary Indicates if the adapter supports transitions between panoramas
-   * @return {boolean}
+   * @member {boolean}
+   * @readonly
+   * @static
    */
-  supportsTransition() {
-    return false;
+  static supportsTransition = false;
+
+  /**
+   * @param {PSV.Viewer} psv
+   */
+  constructor(psv) {
+    /**
+     * @summary Reference to main controller
+     * @type {PSV.Viewer}
+     * @readonly
+     */
+    this.psv = psv;
   }
 
   /**
+   * @summary Destroys the adapter
+   */
+  destroy() {
+    delete this.psv;
+  }
+
+  /**
    * @abstract
@@ -27,0 +52,0 @@ * @summary Loads the panorama texture(s)

src/adapters/cubemap/index.js

@@ -1,3 +0,3 @@
-import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from 'photo-sphere-viewer';
 import * as THREE from 'three';
+import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from '../..';
 
@@ -16,5 +16,3 @@ /**
 const CUBE_VERTICES = 8;
-
 const CUBE_MAP = [0, 2, 4, 5, 3, 1];
-
 const CUBE_HASHMAP = ['left', 'right', 'top', 'bottom', 'back', 'front'];
@@ -26,10 +24,6 @@
  */
-export default class CubemapAdapter extends AbstractAdapter {
+export class CubemapAdapter extends AbstractAdapter {
 
-  /**
-   * @override
-   */
-  supportsTransition() {
-    return true;
-  }
+  static id = 'cubemap';
+  static supportsTransition = true;
 
@@ -36,0 +30,0 @@ /**

src/adapters/equirectangular-tiles/index.js

@@ -1,3 +0,3 @@
-import { AbstractAdapter, CONSTANTS, PSVError, utils } from 'photo-sphere-viewer';
 import * as THREE from 'three';
+import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from '../..';
 import { Queue } from './Queue';
@@ -28,2 +28,3 @@ import { Task } from './Task';
  * @property {boolean} [showErrorTile=true] - shows a warning sign on tiles that cannot be loaded
+ * @property {boolean} [baseBlur=true] - applies a blur to the low resolution panorama
  */
@@ -40,7 +41,4 @@
 const SPHERE_SEGMENTS = 64;
-
 const NB_VERTICES = 3 * (SPHERE_SEGMENTS * 2 + (SPHERE_SEGMENTS / 2 - 2) * SPHERE_SEGMENTS * 2);
-
 const NB_GROUPS = SPHERE_SEGMENTS * 2 + (SPHERE_SEGMENTS / 2 - 2) * SPHERE_SEGMENTS;
-
 const QUEUE_CONCURENCY = 4;
@@ -61,4 +59,7 @@
  */
-export default class EquirectangularTilesAdapter extends AbstractAdapter {
+export class EquirectangularTilesAdapter extends AbstractAdapter {
 
+  static id = 'equirectangular-tiles';
+  static supportsTransition = false;
+
   /**
@@ -77,2 +78,3 @@ * @param {PSV.Viewer} psv
       showErrorTile: true,
+      baseBlur     : true,
       ...options,
@@ -124,2 +126,5 @@ };
     }
+    if (this.psv.config.requestHeaders && typeof this.psv.config.requestHeaders === 'object') {
+      this.loader.setRequestHeader(this.psv.config.requestHeaders);
+    }
 
@@ -176,9 +181,2 @@ this.psv.on(CONSTANTS.EVENTS.POSITION_UPDATED, this);
    * @override
-   */
-  supportsTransition() {
-    return false;
-  }
-
-  /**
-   * @override
    * @param {PSV.adapters.EquirectangularTilesAdapter.Panorama} panorama
@@ -227,3 +225,3 @@ * @returns {Promise.<PSV.TextureData>}
           return {
-            texture : utils.createTexture(img),
+            texture : this.__createBaseTexture(img),
             panoData: panoData,
@@ -303,2 +301,3 @@ };
     const tilesToLoad = [];
+    const tilePosition = new THREE.Vector3();
 
@@ -309,3 +308,3 @@ for (let col = 0; col <= panorama.cols; col++) {
         const tileTexturePosition = { x: col * this.prop.colSize, y: row * this.prop.rowSize };
-        const tilePosition = this.psv.dataHelper.sphericalCoordsToVector3(this.psv.dataHelper.textureCoordsToSphericalCoords(tileTexturePosition));
+        this.psv.dataHelper.sphericalCoordsToVector3(this.psv.dataHelper.textureCoordsToSphericalCoords(tileTexturePosition), tilePosition);
 
@@ -412,2 +411,6 @@ if (tilePosition.dot(this.psv.prop.direction) > 0) {
 
+    if (this.psv.config.requestHeaders && typeof this.psv.config.requestHeaders === 'function') {
+      this.loader.setRequestHeader(this.psv.config.requestHeaders(url));
+    }
+
     return new Promise((resolve, reject) => this.loader.load(url, resolve, undefined, reject))
@@ -528,2 +531,32 @@ .then((image) => {
 
+  /**
+   * @summary Create the texture for the base image
+   * @param {HTMLImageElement} img
+   * @return {external:THREE.Texture}
+   * @private
+   */
+  __createBaseTexture(img) {
+    if (img.width !== img.height * 2) {
+      utils.logWarn('Invalid base image, the width should be twice the height');
+    }
+
+    if (this.config.baseBlur || img.width > SYSTEM.maxTextureWidth) {
+      const ratio = Math.min(1, SYSTEM.getMaxCanvasWidth() / img.width);
+
+      const buffer = document.createElement('canvas');
+      buffer.width = img.width * ratio;
+      buffer.height = buffer.width / 2;
+
+      const ctx = buffer.getContext('2d');
+      if (this.config.baseBlur) {
+        ctx.filter = 'blur(1px)';
+      }
+      ctx.drawImage(img, 0, 0, buffer.width, buffer.height);
+
+      return utils.createTexture(buffer);
+    }
+
+    return utils.createTexture(img);
+  }
+
 }
@@ -537,17 +570,17 @@
  */
-function getSegmentSize() {
-  const p1 = this.psv.prop.direction.clone();
-  const p2 = this.psv.prop.direction.clone();
-
-  const angle = Math.PI * 2 / SPHERE_SEGMENTS / 2;
-  const dst = Math.atan(angle) * CONSTANTS.SPHERE_RADIUS;
-  const horizontalAxis = new THREE.Vector3(0, 1, 0).cross(this.psv.prop.direction).normalize();
-
-  p1.add(horizontalAxis.clone().multiplyScalar(dst));
-  p2.add(horizontalAxis.clone().multiplyScalar(-dst));
-
-  const p1a = this.psv.dataHelper.vector3ToViewerCoords(p1);
-  const p2a = this.psv.dataHelper.vector3ToViewerCoords(p2);
-
-  const segmentSize = p2a.x - p1a.x;
-}
+// function getSegmentSize() {
+//   const p1 = this.psv.prop.direction.clone();
+//   const p2 = this.psv.prop.direction.clone();
+//
+//   const angle = Math.PI * 2 / SPHERE_SEGMENTS / 2;
+//   const dst = Math.atan(angle) * CONSTANTS.SPHERE_RADIUS;
+//   const horizontalAxis = new THREE.Vector3(0, 1, 0).cross(this.psv.prop.direction).normalize();
+//
+//   p1.add(horizontalAxis.clone().multiplyScalar(dst));
+//   p2.add(horizontalAxis.clone().multiplyScalar(-dst));
+//
+//   const p1a = this.psv.dataHelper.vector3ToViewerCoords(p1);
+//   const p2a = this.psv.dataHelper.vector3ToViewerCoords(p2);
+//
+//   const segmentSize = p2a.x - p1a.x;
+// }

src/adapters/equirectangular-tiles/Queue.js

@@ -6,3 +6,3 @@ import { Task } from './Task';
  * @memberOf PSV.adapters.EquirectangularTilesAdapter
- * @private
+ * @package
  */
@@ -9,0 +9,0 @@ export class Queue {

src/adapters/equirectangular-tiles/Task.js

 /**
  * @summary Loading task
  * @memberOf PSV.adapters.EquirectangularTilesAdapter
- * @private
+ * @package
  */
@@ -6,0 +6,0 @@ export class Task {

src/adapters/equirectangular/index.js

@@ -14,10 +14,6 @@ import * as THREE from 'three';
  */
-export default class EquirectangularAdapter extends AbstractAdapter {
+export class EquirectangularAdapter extends AbstractAdapter {
 
-  /**
-   * @override
-   */
-  supportsTransition() {
-    return true;
-  }
+  static id = 'equirectangular';
+  static supportsTransition = true;
 
@@ -32,2 +28,5 @@ /**
     if (typeof panorama !== 'string') {
+      if (Array.isArray(panorama) || typeof panorama === 'object' && !!panorama.left) {
+        logWarn('Cubemap support now requires an additional adapter, see https://photo-sphere-viewer.js.org/guide/adapters');
+      }
       return Promise.reject(new PSVError('Invalid panorama url, are you using the right adapter?'));
@@ -45,3 +44,2 @@ }
         if (typeof newPanoData === 'function') {
-          // eslint-disable-next-line no-param-reassign
           newPanoData = newPanoData(img);
@@ -48,0 +46,0 @@ }

src/buttons/AbstractButton.js

 import { AbstractComponent } from '../components/AbstractComponent';
+import { KEY_CODES } from '../data/constants';
 import { PSVError } from '../PSVError';
-import { isPlainObject, toggleClass } from '../utils';
+import { getEventKey, isPlainObject, toggleClass } from '../utils';
 
@@ -45,4 +46,5 @@ /**
    * @param {boolean} [collapsable=false] - `true` if the button can be moved to menu when the navbar is too small
+   * @param {boolean} [tabbable=true] - `true` if the button is accessible with Tab key
    */
-  constructor(navbar, className = '', collapsable = false) {
+  constructor(navbar, className = '', collapsable = false, tabbable = true) {
     super(navbar, 'psv-button ' + className);
@@ -78,2 +80,6 @@
 
+    if (tabbable) {
+      this.container.tabIndex = 0;
+    }
+
     this.container.addEventListener('click', (e) => {
@@ -85,2 +91,9 @@ if (this.prop.enabled) {
     });
+
+    this.container.addEventListener('keydown', (e) => {
+      if (getEventKey(e) === KEY_CODES.Enter && this.prop.enabled) {
+        this.onClick();
+        e.stopPropagation();
+      }
+    });
   }
@@ -87,0 +100,0 @@

src/buttons/AbstractZoomButton.js

@@ -1,3 +0,5 @@
-import { Animation } from '../Animation';
+import { KEY_CODES } from '../data/constants';
 import { SYSTEM } from '../data/system';
+import { getEventKey } from '../utils';
+import { PressHandler } from '../utils/PressHandler';
 import { AbstractButton } from './AbstractButton';
@@ -21,16 +23,14 @@
      * @override
-     * @property {number} value
-     * @property {boolean} buttondown
-     * @property {*} longPressTimeout
-     * @property {PSV.Animation} longPressAnimation
+     * @property {boolean} value
+     * @property {PressHandler} handler
      */
     this.prop = {
       ...this.prop,
-      value             : value,
-      buttondown        : false,
-      longPressTimeout  : null,
-      longPressAnimation: null,
+      value  : value,
+      handler: new PressHandler(),
     };
 
     this.container.addEventListener('mousedown', this);
+    this.container.addEventListener('keydown', this);
+    this.container.addEventListener('keyup', this);
     this.psv.container.addEventListener('mouseup', this);
@@ -64,2 +64,4 @@ this.psv.container.addEventListener('touchend', this);
       case 'touchend':  this.__onMouseUp(); break;
+      case 'keydown':   getEventKey(e) === KEY_CODES.Enter && this.__onMouseDown(); break;
+      case 'keyup':     getEventKey(e) === KEY_CODES.Enter && this.__onMouseUp(); break;
       // @formatter:on
@@ -85,4 +87,2 @@ }
   /**
-   * @summary Handles click events
-   * @description Zooms in and register long press timer
    * @private
@@ -95,54 +95,17 @@ */
 
-    this.prop.buttondown = true;
-    this.prop.longPressTimeout = setTimeout(() => this.__startLongPressInterval(), 100);
+    this.psv.dynamics.zoom.roll(this.prop.value);
+    this.prop.handler.down();
   }
 
   /**
-   * @summary Continues zooming as long as the user presses the button
    * @private
    */
-  __startLongPressInterval() {
-    if (!this.prop.buttondown) {
-      return;
-    }
-
-    const end = this.prop.value < 0 ? 0 : 100;
-
-    this.prop.longPressAnimation = new Animation({
-      properties: {
-        zoom: { start: this.psv.prop.zoomLvl, end: end },
-      },
-      duration  : 1500 * Math.abs(this.psv.prop.zoomLvl - end) / 100,
-      easing    : 'linear',
-      onTick    : (properties) => {
-        this.psv.zoom(properties.zoom);
-      },
-    })
-      .catch(() => {}); // ignore cancellation
-  }
-
-  /**
-   * @summary Handles mouse up events
-   * @private
-   */
   __onMouseUp() {
-    if (!this.prop.enabled || !this.prop.buttondown) {
+    if (!this.prop.enabled) {
       return;
     }
 
-    if (this.prop.longPressAnimation) {
-      this.prop.longPressAnimation.cancel();
-      this.prop.longPressAnimation = null;
-    }
-    else {
-      this.psv.zoom(this.psv.prop.zoomLvl + this.prop.value * this.psv.config.zoomButtonIncrement);
-    }
-
-    if (this.prop.longPressTimeout) {
-      clearTimeout(this.prop.longPressTimeout);
-    }
-
-    this.prop.buttondown = false;
+    this.prop.handler.up(() => this.psv.dynamics.zoom.stop());
   }
 
 }

src/buttons/CustomButton.js

@@ -44,3 +44,3 @@ import { addClasses } from '../utils';
 
-    this.width = this.container.offsetWidth;
+    this.prop.width = this.container.offsetWidth;
 
@@ -47,0 +47,0 @@ if (this.config.enabled === false) {

src/buttons/MenuButton.js

@@ -35,3 +35,3 @@ import { EVENTS, IDS } from '../data/constants';
     ${buttons.map(button => `
-    <li data-${dataKey}="${button.prop.id}" class="psv-panel-menu-item">
+    <li data-${dataKey}="${button.prop.id}" class="psv-panel-menu-item" tabindex="0">
       <span class="psv-panel-menu-item-icon">${button.container.innerHTML}</span>
@@ -38,0 +38,0 @@ <span class="psv-panel-menu-item-label">${button.container.title}</span>

src/buttons/ZoomInButton.js

@@ -18,5 +18,5 @@ import { AbstractZoomButton } from './AbstractZoomButton';
   constructor(navbar) {
-    super(navbar, 1);
+    super(navbar, false);
   }
 
 }

src/buttons/ZoomOutButton.js

@@ -18,5 +18,5 @@ import { AbstractZoomButton } from './AbstractZoomButton';
   constructor(navbar) {
-    super(navbar, -1);
+    super(navbar, true);
   }
 
 }

src/buttons/ZoomRangeButton.js

@@ -19,3 +19,3 @@ import { EVENTS } from '../data/constants';
   constructor(navbar) {
-    super(navbar, 'psv-zoom-range');
+    super(navbar, 'psv-zoom-range', false, false);
 
@@ -63,3 +63,3 @@ /**
     if (this.psv.prop.ready) {
-      this.__moveZoomValue(this.psv.prop.zoomLvl);
+      this.__moveZoomValue(this.psv.getZoomLevel());
     }
@@ -108,3 +108,3 @@ else {
       case EVENTS.ZOOM_UPDATED: this.__moveZoomValue(e.args[0]); break;
-      case EVENTS.READY:        this.__moveZoomValue(this.psv.prop.zoomLvl); break;
+      case EVENTS.READY:        this.__moveZoomValue(this.psv.getZoomLevel()); break;
       // @formatter:on
@@ -111,0 +111,0 @@ }

src/components/Navbar.js

@@ -6,2 +6,6 @@ import { AutorotateButton } from '../buttons/AutorotateButton';
 import { MenuButton } from '../buttons/MenuButton';
+import { MoveDownButton } from '../buttons/MoveDownButton';
+import { MoveLeftButton } from '../buttons/MoveLeftButton';
+import { MoveRightButton } from '../buttons/MoveRightButton';
+import { MoveUpButton } from '../buttons/MoveUpButton';
 import { ZoomInButton } from '../buttons/ZoomInButton';
@@ -43,2 +47,6 @@ import { ZoomOutButton } from '../buttons/ZoomOutButton';
   FullscreenButton,
+  MoveRightButton,
+  MoveLeftButton,
+  MoveUpButton,
+  MoveDownButton,
 ].forEach(registerButton);
@@ -98,2 +106,8 @@
       }
+      else if (button === 'move') {
+        new MoveLeftButton(this);
+        new MoveRightButton(this);
+        new MoveUpButton(this);
+        new MoveDownButton(this);
+      }
       else {
@@ -100,0 +114,0 @@ throw new PSVError('Unknown button ' + button);

src/components/Notification.js

@@ -68,3 +68,3 @@ import { EVENTS } from '../data/constants';
     if (typeof config === 'string') {
-      config = { content: config }; // eslint-disable-line no-param-reassign
+      config = { content: config };
     }
@@ -71,0 +71,0 @@

src/components/Overlay.js

@@ -1,2 +0,3 @@
-import { EVENTS } from '../data/constants';
+import { EVENTS, KEY_CODES } from '../data/constants';
+import { getEventKey } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
@@ -59,9 +60,6 @@ import { PSVError } from '../PSVError';
 
-    this.container.addEventListener('mouseup', (e) => {
-      e.stopPropagation();
-      if (this.prop.dissmisable) {
-        this.hide();
-      }
-    }, true);
+    this.container.addEventListener('mouseup', this);
 
+    document.addEventListener('keydown', this);
+
     super.hide();
@@ -74,2 +72,4 @@ }
   destroy() {
+    document.removeEventListener('keydown', this);
+
     delete this.image;
@@ -83,2 +83,18 @@ delete this.text;
   /**
+   * @summary Handles events
+   * @param {Event} e
+   * @private
+   */
+  handleEvent(e) {
+    /* eslint-disable */
+    switch (e.type) {
+      // @formatter:off
+      case 'mouseup':  this.prop.dissmisable && this.hide(); break;
+      case 'keydown':  getEventKey(e) === KEY_CODES.Escape && this.prop.dissmisable && this.hide(); break;
+      // @formatter:on
+    }
+    /* eslint-enable */
+  }
+
+  /**
    * @override
@@ -110,3 +126,3 @@ * @param {string} [id]
     if (typeof config === 'string') {
-      config = { text: config }; // eslint-disable-line no-param-reassign
+      config = { text: config };
     }
@@ -113,0 +129,0 @@

src/components/Panel.js

@@ -1,5 +0,5 @@
-import { EVENTS } from '../data/constants';
+import { EVENTS, KEY_CODES } from '../data/constants';
 import { SYSTEM } from '../data/system';
 import { PSVError } from '../PSVError';
-import { toggleClass } from '../utils';
+import { getEventKey, toggleClass } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
@@ -35,2 +35,3 @@
      * @property {function} clickHandler
+     * @property {function} keyHandler
      */
@@ -45,2 +46,3 @@ this.prop = {
       clickHandler: null,
+      keyHandler  : null,
       width       : {},
@@ -67,3 +69,3 @@ };
 
-    // Stop wheel event bubling from panel
+    // Stop wheel event bubbling from panel
     this.container.addEventListener(SYSTEM.mouseWheelEvent, e => e.stopPropagation());
@@ -80,2 +82,4 @@
     this.psv.container.addEventListener('touchmove', this);
+
+    document.addEventListener('keydown', this);
   }
@@ -92,2 +96,4 @@
 
+    document.removeEventListener('keydown', this);
+
     delete this.prop;
@@ -114,2 +120,3 @@ delete this.content;
       case 'touchend':   this.__onMouseUp(e);    break;
+      case 'keydown':    getEventKey(e) === KEY_CODES.Escape && this.hide(); break;
       // @formatter:on
@@ -142,3 +149,3 @@ }
    * @param {string} [config.width] - initial width, if not specified the default width will be used
-   * @param {Function} [config.clickHandler] - called when the user clicks inside the panel
+   * @param {Function} [config.clickHandler] - called when the user clicks inside the panel or presses the Enter key while an element focused
    * @fires PSV.open-panel
@@ -148,3 +155,3 @@ */
     if (typeof config === 'string') {
-      config = { content: config }; // eslint-disable-line no-param-reassign
+      config = { content: config };
     }
@@ -157,3 +164,5 @@
       this.content.removeEventListener('click', this.prop.clickHandler);
+      this.content.removeEventListener('keydown', this.prop.keyHandler);
       this.prop.clickHandler = null;
+      this.prop.keyHandler = null;
     }
@@ -179,3 +188,14 @@
       this.prop.clickHandler = config.clickHandler;
-      this.content.addEventListener('click', config.clickHandler);
+      this.prop.keyHandler = (e) => {
+        if (getEventKey(e) === KEY_CODES.Enter) {
+          config.clickHandler(e);
+        }
+      };
+      this.content.addEventListener('click', this.prop.clickHandler);
+      this.content.addEventListener('keydown', this.prop.keyHandler);
+
+      // focus the first element if possible, after animation ends
+      setTimeout(() => {
+        this.content.querySelector('a,button,[tabindex]')?.focus();
+      }, 300);
     }
@@ -182,0 +202,0 @@

src/data/config.js

@@ -0,5 +1,7 @@
+import { AbstractAdapter } from '../adapters/AbstractAdapter';
+import { EquirectangularAdapter } from '../adapters/equirectangular';
+import { AbstractPlugin } from '../plugins/AbstractPlugin';
 import { PSVError } from '../PSVError';
-import EquirectangularAdapter from '../adapters/equirectangular';
-import { bound, clone, deepmerge, each, logWarn, parseAngle, parseSpeed } from '../utils';
-import { ACTIONS } from './constants';
+import { bound, clone, deepmerge, each, logWarn, parseAngle, parseSpeed, pluginInterop } from '../utils';
+import { ACTIONS, KEY_CODES } from './constants';
 
@@ -28,3 +30,3 @@ /**
   moveSpeed          : 1,
-  zoomButtonIncrement: 2,
+  zoomSpeed          : 1,
   autorotateDelay    : null,
@@ -35,3 +37,2 @@ autorotateSpeed    : '2rpm',
   mousewheel         : true,
-  mousewheelSpeed    : 1,
   mousemove          : true,
@@ -43,2 +44,3 @@ captureCursor      : false,
   panoData           : null,
+  requestHeaders     : null,
   canvasBackground   : '#000',
@@ -48,5 +50,4 @@ withCredentials    : false,
     'autorotate',
-    'zoomOut',
-    'zoomRange',
-    'zoomIn',
+    'zoom',
+    'move',
     'download',
@@ -61,2 +62,3 @@ 'caption',
     zoomIn    : 'Zoom in',
+    move      : 'Move',
     download  : 'Download',
@@ -70,11 +72,11 @@ fullscreen: 'Fullscreen',
   keyboard           : {
-    'ArrowUp'   : ACTIONS.ROTATE_LAT_UP,
-    'ArrowDown' : ACTIONS.ROTATE_LAT_DOWN,
-    'ArrowRight': ACTIONS.ROTATE_LONG_RIGHT,
-    'ArrowLeft' : ACTIONS.ROTATE_LONG_LEFT,
-    'PageUp'    : ACTIONS.ZOOM_IN,
-    'PageDown'  : ACTIONS.ZOOM_OUT,
-    '+'         : ACTIONS.ZOOM_IN,
-    '-'         : ACTIONS.ZOOM_OUT,
-    ' '         : ACTIONS.TOGGLE_AUTOROTATE,
+    [KEY_CODES.ArrowUp]   : ACTIONS.ROTATE_LAT_UP,
+    [KEY_CODES.ArrowDown] : ACTIONS.ROTATE_LAT_DOWN,
+    [KEY_CODES.ArrowRight]: ACTIONS.ROTATE_LONG_RIGHT,
+    [KEY_CODES.ArrowLeft] : ACTIONS.ROTATE_LONG_LEFT,
+    [KEY_CODES.PageUp]    : ACTIONS.ZOOM_IN,
+    [KEY_CODES.PageDown]  : ACTIONS.ZOOM_OUT,
+    [KEY_CODES.Plus]      : ACTIONS.ZOOM_IN,
+    [KEY_CODES.Minus]     : ACTIONS.ZOOM_OUT,
+    [KEY_CODES.Space]     : ACTIONS.TOGGLE_AUTOROTATE,
   },
@@ -97,2 +99,12 @@ plugins            : [],
 /**
+ * @summary List of deprecated options and their warning messages
+ * @private
+ */
+export const DEPRECATED_OPTIONS = {
+  zoomButtonIncrement    : 'zoomButtonIncrement is deprecated, use zoomSpeed',
+  mousewheelSpeed        : 'mousewheelSpeed is deprecated, use zoomSpeed',
+  sphereCorrectionReorder: 'sphereCorrectionReorder is deprecated',
+};
+
+/**
  * @summary Parsers/validators for each option
@@ -113,6 +125,6 @@ * @private
     else if (Array.isArray(adapter)) {
-      return adapter;
+      return [pluginInterop(adapter[0], AbstractAdapter), adapter[1]];
     }
     else {
-      return [adapter];
+      return [pluginInterop(adapter, AbstractAdapter)];
     }
@@ -132,3 +144,2 @@ },
       logWarn('maxFov cannot be lower than minFov');
-      // eslint-disable-next-line no-param-reassign
       minFov = config.maxFov;
@@ -142,3 +153,2 @@ }
     if (maxFov < config.minFov) {
-      // eslint-disable-next-line no-param-reassign
       maxFov = config.minFov;
@@ -193,6 +203,6 @@ }
         if (Array.isArray(plugin)) {
-          return plugin;
+          return [pluginInterop(plugin[0], AbstractPlugin), plugin[1]];
         }
         else {
-          return [plugin];
+          return [pluginInterop(plugin, AbstractPlugin)];
         }
@@ -218,2 +228,7 @@ })
   each(tempConfig, (value, key) => {
+    if (DEPRECATED_OPTIONS[key]) {
+      logWarn(DEPRECATED_OPTIONS[key]);
+      return;
+    }
+
     if (!Object.prototype.hasOwnProperty.call(DEFAULTS, key)) {
@@ -220,0 +235,0 @@ throw new PSVError(`Unknown option ${key}`);

src/data/constants.js

@@ -104,2 +104,3 @@ /**
    * @param {number} timestamp - time provided by requestAnimationFrame
+   * @param {number} elapsed - time elapsed from the previous frame
    */
@@ -324,1 +325,23 @@ BEFORE_RENDER     : 'before-render',
 /* eslint-enable */
+
+/**
+ * @summary Subset of key codes
+ * @memberOf PSV.constants
+ * @type {Object<string, string>}
+ * @constant
+ */
+export const KEY_CODES = {
+  Enter     : 'Enter',
+  Control   : 'Control',
+  Escape    : 'Escape',
+  Space     : ' ',
+  PageUp    : 'PageUp',
+  PageDown  : 'PageDown',
+  ArrowLeft : 'ArrowLeft',
+  ArrowUp   : 'ArrowUp',
+  ArrowRight: 'ArrowRight',
+  ArrowDown : 'ArrowDown',
+  Delete    : 'Delete',
+  Plus      : '+',
+  Minus     : '-',
+};

src/index.js

@@ -109,6 +109,7 @@ import { Animation } from './Animation';
 /**
- * @typedef {PSV.AnimateOptions} PSV.PanoramaOptions
+ * @typedef {PSV.ExtendedPosition} PSV.PanoramaOptions
  * @summary Object defining panorama and animation options
  * @property {boolean|number} [transition=1500] - duration of the transition between all and new panorama
  * @property {boolean} [showLoader=true] - show the loader
+ * @property {number} [zoom] - new zoom level between 0 and 100
  * @property {PSV.SphereCorrection} [sphereCorrection] - new sphere correction to apply to the panorama
@@ -115,0 +116,0 @@ * @property {PSV.PanoData | PSV.PanoDataProvider} [panoData] - new panorama data used for this panorama

src/plugins/autorotate-keypoints/index.js

@@ -1,2 +0,2 @@
-import { AbstractPlugin, CONSTANTS, PSVError, utils } from 'photo-sphere-viewer';
+import { AbstractPlugin, CONSTANTS, PSVError, utils } from '../..';
 
@@ -34,3 +34,3 @@ /**
  */
-export default class AutorotateKeypointsPlugin extends AbstractPlugin {
+export class AutorotateKeypointsPlugin extends AbstractPlugin {
 
@@ -82,2 +82,3 @@ static id = 'autorotate-keypoints';
     this.psv.on(CONSTANTS.EVENTS.AUTOROTATE, this);
+    this.psv.on(CONSTANTS.EVENTS.BEFORE_RENDER, this);
   }
@@ -87,2 +88,3 @@
     this.psv.off(CONSTANTS.EVENTS.AUTOROTATE, this);
+    this.psv.off(CONSTANTS.EVENTS.BEFORE_RENDER, this);
 
@@ -99,2 +101,5 @@ delete this.keypoints;
     }
+    else if (e.type === CONSTANTS.EVENTS.BEFORE_RENDER) {
+      this.__beforeRender(e.args[0]);
+    }
   }
@@ -116,7 +121,5 @@
         if (typeof pt === 'string') {
-          // eslint-disable-next-line no-param-reassign
           pt = { markerId: pt };
         }
         else if (utils.isExtendedPosition(pt)) {
-          // eslint-disable-next-line no-param-reassign
           pt = { position: pt };
@@ -159,2 +162,5 @@ }
 
+    // cancel core rotation
+    this.psv.dynamics.position.stop();
+
     this.state = {
@@ -173,4 +179,5 @@ idx           : -1,
     if (this.config.startFromClosest) {
+      const currentPosition = serializePt(this.psv.getPosition());
       const index = this.__findMinIndex(this.keypoints, (keypoint) => {
-        return utils.greatArcDistance(keypoint.position, serializePt(this.psv.prop.position));
+        return utils.greatArcDistance(keypoint.position, currentPosition);
       });
@@ -180,7 +187,12 @@
     }
+  }
 
-    const autorotateCb = (e, timestamp) => {
+  /**
+   * @private
+   */
+  __beforeRender(timestamp) {
+    if (this.psv.isAutorotateEnabled()) {
       // initialisation
       if (!this.state.startTime) {
-        this.state.endPt = serializePt(this.psv.prop.position);
+        this.state.endPt = serializePt(this.psv.getPosition());
         this.__nextStep();
@@ -193,7 +205,3 @@
       this.__nextFrame(timestamp);
-    };
-
-    this.psv.off(CONSTANTS.EVENTS.BEFORE_RENDER, this.psv.prop.autorotateCb);
-    this.psv.prop.autorotateCb = autorotateCb;
-    this.psv.on(CONSTANTS.EVENTS.BEFORE_RENDER, this.psv.prop.autorotateCb);
+    }
   }
@@ -261,5 +269,6 @@
     if (this.state.idx === -1) {
+      const currentPosition = serializePt(this.psv.getPosition());
       workPoints.push(
-        serializePt(this.psv.prop.position),
-        serializePt(this.psv.prop.position),
+        currentPosition,
+        currentPosition,
         this.keypoints[0].position,
@@ -266,0 +275,0 @@ this.keypoints[1].position

src/plugins/gyroscope/GyroscopeButton.js

@@ -1,4 +0,4 @@
-import { AbstractButton } from 'photo-sphere-viewer';
+import { AbstractButton } from '../..';
 import compass from './compass.svg';
-import GyroscopePlugin from './index';
+import { GyroscopePlugin } from './index';
 
@@ -5,0 +5,0 @@ /**

src/plugins/gyroscope/index.js

@@ -1,4 +0,4 @@
-import { AbstractPlugin, CONSTANTS, DEFAULTS, registerButton, utils } from 'photo-sphere-viewer';
 import * as THREE from 'three';
 import { DeviceOrientationControls } from 'three/examples/jsm/controls/DeviceOrientationControls';
+import { AbstractPlugin, CONSTANTS, DEFAULTS, registerButton, utils } from '../..';
 import { GyroscopeButton } from './GyroscopeButton';
@@ -19,2 +19,3 @@
 
+const direction = new THREE.Vector3();
 
@@ -26,3 +27,3 @@ /**
  */
-export default class GyroscopePlugin extends AbstractPlugin {
+export class GyroscopePlugin extends AbstractPlugin {
 
@@ -38,2 +39,8 @@ static id = 'gyroscope';
   static EVENTS = {
+    /**
+     * @event gyroscope-updated
+     * @memberof PSV.plugins.GyroscopePlugin
+     * @summary Triggered when the gyroscope mode is enabled/disabled
+     * @param {boolean} enabled
+     */
     GYROSCOPE_UPDATED: 'gyroscope-updated',
@@ -54,3 +61,3 @@ };
      * @property {number} alphaOffset - current alpha offset for gyroscope controls
-     * @property {Function} orientationCb - update callback of the device orientation
+     * @property {boolean} enabled
      * @property {boolean} config_moveInertia - original config "moveInertia"
@@ -61,3 +68,3 @@ */
       alphaOffset       : 0,
-      orientationCb     : null,
+      enabled           : false,
       config_moveInertia: true,
@@ -84,2 +91,3 @@ };
     this.psv.on(CONSTANTS.EVENTS.BEFORE_ROTATE, this);
+    this.psv.on(CONSTANTS.EVENTS.BEFORE_RENDER, this);
   }
@@ -93,2 +101,3 @@
     this.psv.off(CONSTANTS.EVENTS.BEFORE_ROTATE, this);
+    this.psv.off(CONSTANTS.EVENTS.BEFORE_RENDER, this);
 
@@ -111,4 +120,7 @@ this.stop();
         break;
+      case CONSTANTS.EVENTS.BEFORE_RENDER:
+        this.__onBeforeRender();
+        break;
       case CONSTANTS.EVENTS.BEFORE_ROTATE:
-        this.__onRotate(e);
+        this.__onBeforeRotate(e);
         break;
@@ -125,3 +137,3 @@ default:
   isEnabled() {
-    return !!this.prop.orientationCb;
+    return this.prop.enabled;
   }
@@ -162,10 +174,18 @@
 
-        this.__configure();
+        // enable gyro controls
+        if (!this.controls) {
+          this.controls = new DeviceOrientationControls(new THREE.Object3D());
+        }
+        else {
+          this.controls.connect();
+        }
 
-        /**
-         * @event gyroscope-updated
-         * @memberof PSV.plugins.GyroscopePlugin
-         * @summary Triggered when the gyroscope mode is enabled/disabled
-         * @param {boolean} enabled
-         */
+        // force reset
+        this.controls.deviceOrientation = null;
+        this.controls.screenOrientation = 0;
+        this.controls.alphaOffset = 0;
+
+        this.prop.alphaOffset = this.config.absolutePosition ? 0 : null;
+        this.prop.enabled = true;
+
         this.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, true);
@@ -183,5 +203,3 @@ });
 
-      this.psv.off(CONSTANTS.EVENTS.BEFORE_RENDER, this.prop.orientationCb);
-      this.prop.orientationCb = null;
-
+      this.prop.enabled = false;
       this.psv.config.moveInertia = this.prop.config_moveInertia;
@@ -206,50 +224,34 @@
   /**
-   * @summary Attaches the {@link external:THREE.DeviceOrientationControls} to the camera
+   * @summary Handles gyro movements
    * @private
    */
-  __configure() {
-    if (!this.controls) {
-      this.controls = new DeviceOrientationControls(this.psv.renderer.camera);
+  __onBeforeRender() {
+    if (!this.isEnabled()) {
+      return;
     }
-    else {
-      this.controls.connect();
+
+    if (!this.controls.deviceOrientation) {
+      return;
     }
 
-    // force reset
-    this.controls.deviceOrientation = null;
-    this.controls.screenOrientation = 0;
-    this.controls.alphaOffset = 0;
-    this.prop.alphaOffset = this.config.absolutePosition ? 0 : null;
+    // on first run compute the offset depending on the current viewer position and device orientation
+    if (this.prop.alphaOffset === null) {
+      this.controls.update();
+      this.controls.object.getWorldDirection(direction);
 
-    this.prop.orientationCb = () => {
-      if (!this.controls.deviceOrientation) {
-        return;
-      }
+      const sphericalCoords = this.psv.dataHelper.vector3ToSphericalCoords(direction);
+      this.prop.alphaOffset = sphericalCoords.longitude - this.psv.getPosition().longitude;
+    }
+    else {
+      this.controls.alphaOffset = this.prop.alphaOffset;
+      this.controls.update();
+      this.controls.object.getWorldDirection(direction);
 
-      // on first run compute the offset depending on the current viewer position and device orientation
-      if (this.prop.alphaOffset === null) {
-        this.controls.update();
-
-        const direction = new THREE.Vector3();
-        this.psv.renderer.camera.getWorldDirection(direction);
-
-        const sphericalCoords = this.psv.dataHelper.vector3ToSphericalCoords(direction);
-        this.prop.alphaOffset = sphericalCoords.longitude - this.psv.prop.position.longitude;
-      }
-      else {
-        this.controls.alphaOffset = this.prop.alphaOffset;
-        this.controls.update();
-
-        this.psv.renderer.camera.getWorldDirection(this.psv.prop.direction);
-        this.psv.prop.direction.multiplyScalar(CONSTANTS.SPHERE_RADIUS);
-
-        const sphericalCoords = this.psv.dataHelper.vector3ToSphericalCoords(this.psv.prop.direction);
-        this.psv.prop.position.longitude = sphericalCoords.longitude;
-        this.psv.prop.position.latitude = sphericalCoords.latitude;
-
-        this.psv.needsUpdate();
-      }
-    };
-
-    this.psv.on(CONSTANTS.EVENTS.BEFORE_RENDER, this.prop.orientationCb);
+      const sphericalCoords = this.psv.dataHelper.vector3ToSphericalCoords(direction);
+      // TODO use dynamic goto for smooth movement
+      this.psv.dynamics.position.setValue({
+        longitude: sphericalCoords.longitude,
+        latitude : -sphericalCoords.latitude,
+      });
+    }
   }
@@ -262,3 +264,3 @@
    */
-  __onRotate(e) {
+  __onBeforeRotate(e) {
     if (this.isEnabled()) {
@@ -268,3 +270,3 @@ e.preventDefault();
       if (this.config.touchmove) {
-        this.prop.alphaOffset -= e.args[0].longitude - this.psv.prop.position.longitude;
+        this.prop.alphaOffset -= e.args[0].longitude - this.psv.getPosition().longitude;
       }
@@ -271,0 +273,0 @@ }

src/plugins/markers/index.js

@@ -1,3 +0,3 @@
-import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, registerButton, utils } from 'photo-sphere-viewer';
 import * as THREE from 'three';
+import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, registerButton, utils } from '../..';
 import { Marker } from './Marker';
@@ -36,3 +36,3 @@ import { MarkersButton } from './MarkersButton';
  */
-export default class MarkersPlugin extends AbstractPlugin {
+export class MarkersPlugin extends AbstractPlugin {
 
@@ -47,10 +47,65 @@ static id = 'markers';
   static EVENTS = {
+    /**
+     * @event goto-marker-done
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the animation to a marker is done
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     GOTO_MARKER_DONE   : 'goto-marker-done',
+    /**
+     * @event leave-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the user puts the cursor away from a marker
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     LEAVE_MARKER       : 'leave-marker',
+    /**
+     * @event over-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the user puts the cursor hover a marker
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     OVER_MARKER        : 'over-marker',
+    /**
+     * @event filter:render-markers-list
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Used to alter the list of markers displayed on the side-panel
+     * @param {PSV.plugins.MarkersPlugin.Marker[]} markers
+     * @returns {PSV.plugins.MarkersPlugin.Marker[]}
+     */
     RENDER_MARKERS_LIST: 'render-markers-list',
+    /**
+     * @event select-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the user clicks on a marker. The marker can be retrieved from outside the event handler
+     * with {@link PSV.plugins.MarkersPlugin.getCurrentMarker}
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     * @param {PSV.plugins.MarkersPlugin.SelectMarkerData} data
+     */
     SELECT_MARKER      : 'select-marker',
+    /**
+     * @event select-marker-list
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when a marker is selected from the side panel
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     SELECT_MARKER_LIST : 'select-marker-list',
+    /**
+     * @event unselect-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when a marker was selected and the user clicks elsewhere
+     * @param {PSV.plugins.MarkersPlugin.Marker} marker
+     */
     UNSELECT_MARKER    : 'unselect-marker',
+    /**
+     * @event hide-markers
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the markers are hidden
+     */
     HIDE_MARKERS       : 'hide-markers',
+    /**
+     * @event show-markers
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the markers are shown
+     */
     SHOW_MARKERS       : 'show-markers',
@@ -99,3 +154,3 @@ };
     ${markers.map(marker => `
-    <li data-${dataKey}="${marker.config.id}" class="psv-panel-menu-item">
+    <li data-${dataKey}="${marker.config.id}" class="psv-panel-menu-item" tabindex="0">
       ${marker.type === 'image' ? `<span class="psv-panel-menu-item-icon" ><img src="${marker.config.image}"/></span>` : ''}
@@ -238,7 +293,2 @@ <span class="psv-panel-menu-item-label">${marker.getListContent()}</span>
 
-    /**
-     * @event show-markers
-     * @memberof PSV.plugins.MarkersPlugin
-     * @summary Triggered when the markers are shown
-     */
     this.trigger(MarkersPlugin.EVENTS.SHOW_MARKERS);
@@ -256,7 +306,2 @@ }
 
-    /**
-     * @event hide-markers
-     * @memberof PSV.plugins.MarkersPlugin
-     * @summary Triggered when the markers are hidden
-     */
     this.trigger(MarkersPlugin.EVENTS.HIDE_MARKERS);
@@ -449,8 +494,2 @@ }
       .then(() => {
-        /**
-         * @event goto-marker-done
-         * @memberof PSV.plugins.MarkersPlugin
-         * @summary Triggered when the animation to a marker is done
-         * @param {PSV.plugins.MarkersPlugin.Marker} marker
-         */
         this.trigger(MarkersPlugin.EVENTS.GOTO_MARKER_DONE, marker);
@@ -529,9 +568,2 @@ });
 
-    /**
-     * @event filter:render-markers-list
-     * @memberof PSV.plugins.MarkersPlugin
-     * @summary Used to alter the list of markers displayed on the side-panel
-     * @param {PSV.plugins.MarkersPlugin.Marker[]} markers
-     * @returns {PSV.plugins.MarkersPlugin.Marker[]}
-     */
     markers = this.change(MarkersPlugin.EVENTS.RENDER_MARKERS_LIST, markers);
@@ -554,8 +586,2 @@
 
-          /**
-           * @event select-marker-list
-           * @memberof PSV.plugins.MarkersPlugin
-           * @summary Triggered when a marker is selected from the side panel
-           * @param {PSV.plugins.MarkersPlugin.Marker} marker
-           */
           this.trigger(MarkersPlugin.EVENTS.SELECT_MARKER_LIST, marker);
@@ -705,3 +731,3 @@
     if (marker.isPoly()) {
-      return this.psv.dataHelper.vector3ToViewerCoords(this.psv.dataHelper.sphericalCoordsToVector3(marker.props.position));
+      return this.psv.dataHelper.sphericalCoordsToViewerCoords(marker.props.position);
     }
@@ -828,8 +854,2 @@ else {
 
-      /**
-       * @event over-marker
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Triggered when the user puts the cursor hover a marker
-       * @param {PSV.plugins.MarkersPlugin.Marker} marker
-       */
       this.trigger(MarkersPlugin.EVENTS.OVER_MARKER, marker);
@@ -854,8 +874,2 @@
     if (marker && !(marker.isPoly() && this.__targetOnTooltip(e.relatedTarget, marker.tooltip))) {
-      /**
-       * @event leave-marker
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Triggered when the user puts the cursor away from a marker
-       * @param {PSV.plugins.MarkersPlugin.Marker} marker
-       */
       this.trigger(MarkersPlugin.EVENTS.LEAVE_MARKER, marker);
@@ -941,10 +955,2 @@
 
-      /**
-       * @event select-marker
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Triggered when the user clicks on a marker. The marker can be retrieved from outside the event handler
-       * with {@link PSV.plugins.MarkersPlugin.getCurrentMarker}
-       * @param {PSV.plugins.MarkersPlugin.Marker} marker
-       * @param {PSV.plugins.MarkersPlugin.SelectMarkerData} data
-       */
       this.trigger(MarkersPlugin.EVENTS.SELECT_MARKER, marker, {
@@ -969,8 +975,2 @@ dblclick  : dblclick,
     else if (this.prop.currentMarker) {
-      /**
-       * @event unselect-marker
-       * @memberof PSV.plugins.MarkersPlugin
-       * @summary Triggered when a marker was selected and the user clicks elsewhere
-       * @param {PSV.plugins.MarkersPlugin.Marker} marker
-       */
       this.trigger(MarkersPlugin.EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
@@ -977,0 +977,0 @@

src/plugins/markers/Marker.js

@@ -1,3 +0,3 @@
-import { CONSTANTS, PSVError, utils } from 'photo-sphere-viewer';
-import MarkersPlugin from './index';
+import { CONSTANTS, PSVError, utils } from '../..';
+import { MarkersPlugin } from './index';
 import { getPolygonCenter, getPolylineCenter } from './utils';
@@ -4,0 +4,0 @@

src/plugins/markers/MarkersButton.js

@@ -1,3 +0,3 @@
-import { AbstractButton } from 'photo-sphere-viewer';
-import MarkersPlugin from './index';
+import { AbstractButton } from '../..';
+import { MarkersPlugin } from './index';
 import pin from './pin.svg';
@@ -4,0 +4,0 @@

src/plugins/markers/MarkersListButton.js

@@ -1,3 +0,3 @@
-import { AbstractButton, CONSTANTS } from 'photo-sphere-viewer';
-import MarkersPlugin from './index';
+import { AbstractButton, CONSTANTS } from '../..';
+import { MarkersPlugin } from './index';
 import pinList from './pin-list.svg';
@@ -4,0 +4,0 @@

src/plugins/markers/utils.js

@@ -1,2 +0,2 @@
-import { CONSTANTS, utils } from 'photo-sphere-viewer';
+import { CONSTANTS, utils } from '../..';
 
@@ -3,0 +3,0 @@ /**

src/plugins/resolution/index.js

@@ -1,3 +0,3 @@
-import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError } from 'photo-sphere-viewer';
-import SettingsPlugin from 'photo-sphere-viewer/dist/plugins/settings';
+import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError } from '../..';
+import { SettingsPlugin } from '../settings';
 import { deepEqual } from './utils';
@@ -26,3 +26,3 @@
  */
-export default class ResolutionPlugin extends AbstractPlugin {
+export class ResolutionPlugin extends AbstractPlugin {
 
@@ -29,0 +29,0 @@ static id = 'resolution';

src/plugins/settings/index.js

@@ -1,2 +0,2 @@
-import { AbstractPlugin, DEFAULTS, PSVError, registerButton, utils } from 'photo-sphere-viewer';
+import { AbstractPlugin, DEFAULTS, PSVError, registerButton, utils } from '../..';
 import check from './check.svg';
@@ -53,3 +53,3 @@ import chevron from './chevron.svg';
  */
-export default class SettingsPlugin extends AbstractPlugin {
+export class SettingsPlugin extends AbstractPlugin {
 
@@ -56,0 +56,0 @@ static id = 'settings';

src/plugins/settings/SettingsButton.js

@@ -1,3 +0,3 @@
-import { AbstractButton, CONSTANTS } from 'photo-sphere-viewer';
-import SettingsPlugin from './index';
+import { AbstractButton, CONSTANTS } from '../..';
+import { SettingsPlugin } from './index';
 import icon from './settings.svg';
@@ -4,0 +4,0 @@

src/plugins/stereo/index.js

@@ -1,4 +0,4 @@
-import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, registerButton, utils } from 'photo-sphere-viewer';
-import GyroscopePlugin from 'photo-sphere-viewer/dist/plugins/gyroscope';
 import { StereoEffect } from 'three/examples/jsm/effects/StereoEffect';
+import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, registerButton, utils } from '../..';
+import { GyroscopePlugin } from '../gyroscope';
 import mobileRotateIcon from './mobile-rotate.svg';
@@ -29,3 +29,3 @@ import { StereoButton } from './StereoButton';
  */
-export default class StereoPlugin extends AbstractPlugin {
+export class StereoPlugin extends AbstractPlugin {
 
@@ -48,2 +48,8 @@ static id = 'stereo';
   static EVENTS = {
+    /**
+     * @event stereo-updated
+     * @memberof PSV.plugins.StereoPlugin
+     * @summary Triggered when the stereo view is enabled/disabled
+     * @param {boolean} enabled
+     */
     STEREO_UPDATED: 'stereo-updated',
@@ -163,8 +169,2 @@ };
 
-      /**
-       * @event stereo-updated
-       * @memberof PSV.plugins.StereoPlugin
-       * @summary Triggered when the stereo view is enabled/disabled
-       * @param {boolean} enabled
-       */
       this.trigger(StereoPlugin.EVENTS.STEREO_UPDATED, true);
@@ -171,0 +171,0 @@

src/plugins/stereo/StereoButton.js

@@ -1,3 +0,3 @@
-import { AbstractButton } from 'photo-sphere-viewer';
-import StereoPlugin from './index';
+import { AbstractButton } from '../..';
+import { StereoPlugin } from './index';
 import stereo from './stereo.svg';
@@ -4,0 +4,0 @@

src/plugins/visible-range/index.js

@@ -1,3 +0,3 @@
-import { AbstractPlugin, utils, CONSTANTS, Animation } from 'photo-sphere-viewer';
 import * as THREE from 'three';
+import { AbstractPlugin, Animation, CONSTANTS, utils } from '../..';
 
@@ -16,3 +16,3 @@ /**
  */
-export default class VisibleRangePlugin extends AbstractPlugin {
+export class VisibleRangePlugin extends AbstractPlugin {
 
@@ -35,3 +35,3 @@ static id = 'visible-range';
       longitudeRange: null,
-      usePanoData: false,
+      usePanoData   : false,
     };
@@ -46,2 +46,3 @@
     this.psv.on(CONSTANTS.EVENTS.PANORAMA_LOADED, this);
+    this.psv.on(CONSTANTS.EVENTS.ZOOM_UPDATED, this);
     this.psv.on(CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, this);
@@ -56,2 +57,3 @@ this.psv.on(CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION, this);
     this.psv.off(CONSTANTS.EVENTS.PANORAMA_LOADED, this);
+    this.psv.off(CONSTANTS.EVENTS.ZOOM_UPDATED, this);
     this.psv.off(CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, this);
@@ -87,2 +89,9 @@ this.psv.off(CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION, this);
     }
+    else if (e.type === CONSTANTS.EVENTS.ZOOM_UPDATED) {
+      const currentPosition = this.psv.getPosition();
+      const { rangedPosition } = this.applyRanges(currentPosition);
+      if (currentPosition.longitude !== rangedPosition.longitude || currentPosition.latitude !== rangedPosition.latitude) {
+        this.psv.rotate(rangedPosition);
+      }
+    }
   }
@@ -98,3 +107,2 @@
       utils.logWarn('latitude range must have exactly two elements');
-      // eslint-disable-next-line no-param-reassign
       range = null;
@@ -105,3 +113,2 @@ }
       utils.logWarn('latitude range values must be ordered');
-      // eslint-disable-next-line no-param-reassign
       range = [range[1], range[0]];
@@ -130,3 +137,2 @@ }
       utils.logWarn('longitude range must have exactly two elements');
-      // eslint-disable-next-line no-param-reassign
       range = null;
@@ -133,0 +139,0 @@ }

src/services/DataHelper.js

@@ -7,2 +7,5 @@ import * as THREE from 'three';
 
+const vector2 = new THREE.Vector2();
+const vector3 = new THREE.Vector3();
+
 /**
@@ -111,10 +114,13 @@ * @summary Collections of data converters for the current viewer
    * @param {PSV.Position} position
+   * @param {external:THREE.Vector3} [vector]
    * @returns {external:THREE.Vector3}
    */
-  sphericalCoordsToVector3(position) {
-    return new THREE.Vector3(
-      SPHERE_RADIUS * -Math.cos(position.latitude) * Math.sin(position.longitude),
-      SPHERE_RADIUS * Math.sin(position.latitude),
-      SPHERE_RADIUS * Math.cos(position.latitude) * Math.cos(position.longitude)
-    );
+  sphericalCoordsToVector3(position, vector) {
+    if (!vector) {
+      vector = new THREE.Vector3();
+    }
+    vector.x = SPHERE_RADIUS * -Math.cos(position.latitude) * Math.sin(position.longitude);
+    vector.y = SPHERE_RADIUS * Math.sin(position.latitude);
+    vector.z = SPHERE_RADIUS * Math.cos(position.latitude) * Math.cos(position.longitude);
+    return vector;
   }
@@ -143,8 +149,6 @@
   viewerCoordsToVector3(viewerPoint) {
-    const screen = new THREE.Vector2(
-      2 * viewerPoint.x / this.prop.size.width - 1,
-      -2 * viewerPoint.y / this.prop.size.height + 1
-    );
+    vector2.x = 2 * viewerPoint.x / this.prop.size.width - 1;
+    vector2.y = -2 * viewerPoint.y / this.prop.size.height + 1;
 
-    this.psv.renderer.raycaster.setFromCamera(screen, this.psv.renderer.camera);
+    this.psv.renderer.raycaster.setFromCamera(vector2, this.psv.renderer.camera);
 
@@ -177,2 +181,11 @@ const intersects = this.psv.renderer.raycaster.intersectObjects(this.psv.renderer.scene.children, true);
   /**
+   * @summary Converts spherical radians coordinates to position on the viewer
+   * @param {PSV.Position} position
+   * @returns {PSV.Point}
+   */
+  sphericalCoordsToViewerCoords(position) {
+    return this.vector3ToViewerCoords(this.sphericalCoordsToVector3(position, vector3));
+  }
+
+  /**
    * @summary Converts x/y to latitude/longitude if present and ensure boundaries
@@ -179,0 +192,0 @@ * @param {PSV.ExtendedPosition} position

src/services/EventsHandler.js

@@ -0,1 +1,2 @@
+import * as THREE from 'three';
 import { Animation } from '../Animation';
@@ -9,5 +10,6 @@ import {
   INERTIA_WINDOW,
+  KEY_CODES,
   LONGTOUCH_DELAY,
-  TWOFINGERSOVERLAY_DELAY,
-  MOVE_THRESHOLD
+  MOVE_THRESHOLD,
+  TWOFINGERSOVERLAY_DELAY
 } from '../data/constants';
@@ -18,2 +20,3 @@ import { SYSTEM } from '../data/system';
 import { clone, distance, getClosest, getEventKey, isFullscreenEnabled, normalizeWheel, throttle } from '../utils';
+import { PressHandler } from '../utils/PressHandler';
 import { AbstractService } from './AbstractService';
@@ -45,2 +48,3 @@
      * @property {number} pinchDist - distance between fingers when zooming
+     * @property {PressHandler} keyHandler
      * @property {boolean} ctrlKeyDown - when the Ctrl key is pressed
@@ -63,2 +67,3 @@ * @property {PSV.ClickData} dblclickData - temporary storage of click data between two clicks
       pinchDist        : 0,
+      keyHandler       : new PressHandler(),
       ctrlKeyDown      : false,
@@ -195,3 +200,3 @@ dblclickData     : null,
     if (this.config.mousewheelCtrlKey) {
-      this.state.ctrlKeyDown = key === 'Control';
+      this.state.ctrlKeyDown = key === KEY_CODES.Control;
 
@@ -208,29 +213,21 @@ if (this.state.ctrlKeyDown) {
 
-    let dLong = 0;
-    let dLat = 0;
-    let dZoom = 0;
-
-    /* eslint-disable */
-    switch (this.config.keyboard[key]) {
-      // @formatter:off
-      case ACTIONS.ROTATE_LAT_UP    : dLat = 0.01;   break;
-      case ACTIONS.ROTATE_LAT_DOWN  : dLat = -0.01;  break;
-      case ACTIONS.ROTATE_LONG_RIGHT: dLong = 0.01;  break;
-      case ACTIONS.ROTATE_LONG_LEFT : dLong = -0.01; break;
-      case ACTIONS.ZOOM_IN          : dZoom = 1;     break;
-      case ACTIONS.ZOOM_OUT         : dZoom = -1;    break;
-      case ACTIONS.TOGGLE_AUTOROTATE: this.psv.toggleAutorotate(); break;
-      // @formatter:on
+    if (this.config.keyboard[key] === ACTIONS.TOGGLE_AUTOROTATE) {
+      this.psv.toggleAutorotate();
     }
-    /* eslint-enable */
+    else if (this.config.keyboard[key] && !this.state.keyHandler.time) {
+      /* eslint-disable */
+      switch (this.config.keyboard[key]) {
+        // @formatter:off
+        case ACTIONS.ROTATE_LAT_UP: this.psv.dynamics.position.roll({latitude: false}); break;
+        case ACTIONS.ROTATE_LAT_DOWN: this.psv.dynamics.position.roll({latitude: true});  break;
+        case ACTIONS.ROTATE_LONG_RIGHT: this.psv.dynamics.position.roll({longitude: false}); break;
+        case ACTIONS.ROTATE_LONG_LEFT: this.psv.dynamics.position.roll({longitude: true}); break;
+        case ACTIONS.ZOOM_IN: this.psv.dynamics.zoom.roll(false); break;
+        case ACTIONS.ZOOM_OUT: this.psv.dynamics.zoom.roll(true); break;
+        // @formatter:on
+      }
+      /* eslint-enable */
 
-    if (dZoom !== 0) {
-      this.psv.zoom(this.prop.zoomLvl + dZoom * this.config.zoomButtonIncrement);
+      this.state.keyHandler.down();
     }
-    else if (dLat !== 0 || dLong !== 0) {
-      this.psv.rotate({
-        longitude: this.prop.position.longitude + dLong * this.prop.moveSpeed * this.prop.hFov,
-        latitude : this.prop.position.latitude + dLat * this.prop.moveSpeed * this.prop.vFov,
-      });
-    }
   }
@@ -244,2 +241,11 @@
     this.state.ctrlKeyDown = false;
+
+    if (!this.state.keyboardEnabled) {
+      return;
+    }
+
+    this.state.keyHandler.up(() => {
+      this.psv.dynamics.position.stop();
+      this.psv.dynamics.zoom.stop();
+    });
   }
@@ -388,5 +394,5 @@
             this.psv.overlay.show({
-              id: IDS.TWO_FINGERS,
+              id   : IDS.TWO_FINGERS,
               image: gestureIcon,
-              text: this.config.lang.twoFingers,
+              text : this.config.lang.twoFingers,
             });
@@ -444,5 +450,5 @@ }, TWOFINGERSOVERLAY_DELAY);
       this.psv.overlay.show({
-        id: IDS.CTRL_ZOOM,
+        id   : IDS.CTRL_ZOOM,
         image: mousewheelIcon,
-        text: this.config.lang.ctrlZoom,
+        text : this.config.lang.ctrlZoom,
       });
@@ -459,6 +465,5 @@
 
-    const delta = normalizeWheel(evt).spinY * 5;
-
+    const delta = normalizeWheel(evt).spinY * 5 * this.config.zoomSpeed;
     if (delta !== 0) {
-      this.psv.zoom(this.prop.zoomLvl - delta * this.config.mousewheelSpeed);
+      this.psv.dynamics.zoom.step(-delta, 5);
     }
@@ -675,9 +680,10 @@ }
       const rotation = {
-        longitude: (x - this.state.mouseX) / this.prop.size.width * this.prop.moveSpeed * this.prop.hFov * SYSTEM.pixelRatio,
-        latitude : (y - this.state.mouseY) / this.prop.size.height * this.prop.moveSpeed * this.prop.vFov * SYSTEM.pixelRatio,
+        longitude: (x - this.state.mouseX) / this.prop.size.width * this.config.moveSpeed * THREE.Math.degToRad(this.prop.hFov),
+        latitude : (y - this.state.mouseY) / this.prop.size.height * this.config.moveSpeed * THREE.Math.degToRad(this.prop.vFov),
       };
 
+      const currentPosition = this.psv.getPosition();
       this.psv.rotate({
-        longitude: this.prop.position.longitude - rotation.longitude,
-        latitude : this.prop.position.latitude + rotation.latitude,
+        longitude: currentPosition.longitude - rotation.longitude,
+        latitude : currentPosition.latitude + rotation.latitude,
       });
@@ -702,6 +708,6 @@
       const containerRect = this.psv.container.getBoundingClientRect();
-      this.psv.rotate({
+      this.psv.dynamics.position.goto({
         longitude: ((evt.clientX - containerRect.left) / containerRect.width - 0.5) * Math.PI * 2,
         latitude : -((evt.clientY - containerRect.top) / containerRect.height - 0.5) * Math.PI,
-      });
+      }, 10);
     }
@@ -721,5 +727,5 @@ }
       const p = distance(p1, p2);
-      const delta = 80 * (p - this.state.pinchDist) / this.prop.size.width;
+      const delta = 80 * (p - this.state.pinchDist) / this.prop.size.width * this.config.zoomSpeed;
 
-      this.psv.zoom(this.prop.zoomLvl + delta);
+      this.psv.zoom(this.psv.getZoomLevel() + delta);
 
@@ -726,0 +732,0 @@ this.__move({

src/services/Renderer.js

@@ -5,3 +5,3 @@ import * as THREE from 'three';
 import { SYSTEM } from '../data/system';
-import { isExtendedPosition, isNil, logWarn } from '../utils';
+import { each, isExtendedPosition, isNil } from '../utils';
 import { AbstractService } from './AbstractService';
@@ -57,2 +57,9 @@
     /**
+     * @member {external:THREE.Group}
+     * @readonly
+     * @private
+     */
+    this.meshContainer = null;
+
+    /**
      * @member {external:THREE.Raycaster}
@@ -65,2 +72,8 @@ * @readonly
     /**
+     * @member {number}
+     * @private
+     */
+    this.timestamp = null;
+
+    /**
      * @member {HTMLElement}
@@ -111,2 +124,3 @@ * @readonly
     delete this.mesh;
+    delete this.meshContainer;
     delete this.raycaster;
@@ -138,4 +152,8 @@
   __renderLoop(timestamp) {
-    this.psv.trigger(EVENTS.BEFORE_RENDER, timestamp);
+    const elapsed = this.timestamp !== null ? timestamp - this.timestamp : 0;
+    this.timestamp = timestamp;
 
+    this.psv.trigger(EVENTS.BEFORE_RENDER, timestamp, elapsed);
+    each(this.psv.dynamics, d => d.update(elapsed));
+
     if (this.prop.needsUpdate) {
@@ -156,3 +174,2 @@ this.render();
   render() {
-    this.prop.direction = this.psv.dataHelper.sphericalCoordsToVector3(this.prop.position);
     this.camera.position.set(0, 0, 0);
@@ -205,9 +222,8 @@ this.camera.lookAt(this.prop.direction);
   /**
-   * @summary Apply a SphereCorrection to a Mesh
+   * @summary Apply a panorama data pose to a Mesh
    * @param {PSV.PanoData} [panoData]
-   * @param {PSV.SphereCorrection} [sphereCorrection]
    * @param {external:THREE.Mesh} [mesh=this.mesh]
    * @package
    */
-  setSphereCorrection(panoData, sphereCorrection, mesh = this.mesh) {
+  setPanoramaPose(panoData, mesh = this.mesh) {
     if (!isNil(panoData?.poseHeading) || !isNil(panoData?.posePitch) || !isNil(panoData?.poseRoll)) {
@@ -222,8 +238,16 @@ // By Google documentation the angles are applied on the camera in order : heading, pitch, roll
       );
+    }
+    else {
+      mesh.rotation.set(0, 0, 0);
+    }
+  }
 
-      if (sphereCorrection) {
-        logWarn('sphereCorrection was ignored because panoData already contains pose angles.');
-      }
-    }
-    else if (sphereCorrection) {
+  /**
+   * @summary Apply a SphereCorrection to a Mesh
+   * @param {PSV.SphereCorrection} [sphereCorrection]
+   * @param {external:THREE.Mesh} [mesh=this.meshContainer]
+   * @package
+   */
+  setSphereCorrection(sphereCorrection, mesh = this.meshContainer) {
+    if (sphereCorrection) {
       const cleanCorrection = this.psv.dataHelper.cleanSphereCorrection(sphereCorrection);
@@ -234,3 +258,4 @@
         cleanCorrection.pan,
-        cleanCorrection.roll
+        cleanCorrection.roll,
+        'ZXY'
       );
@@ -262,3 +287,5 @@ }
 
-    this.scene.add(this.mesh);
+    this.meshContainer = new THREE.Group();
+    this.meshContainer.add(this.mesh);
+    this.scene.add(this.meshContainer);
 
@@ -281,6 +308,9 @@ // create canvas container
 
+    const group = new THREE.Group();
+
     const mesh = this.psv.adapter.createMesh(0.5);
     this.psv.adapter.setTexture(mesh, textureData);
     this.psv.adapter.setTextureOpacity(mesh, 0);
-    this.setSphereCorrection(textureData.panoData, options.sphereCorrection, mesh);
+    this.setPanoramaPose(options.panoData, mesh);
+    this.setSphereCorrection(options.sphereCorrection, group);
 
@@ -290,13 +320,15 @@ // rotate the new sphere to make the target position face the camera
       const cleanPosition = this.psv.dataHelper.cleanPosition(options);
+      const currentPosition = this.psv.getPosition();
 
       // Longitude rotation along the vertical axis
       const verticalAxis = new THREE.Vector3(0, 1, 0);
-      mesh.rotateOnWorldAxis(verticalAxis, cleanPosition.longitude - this.psv.prop.position.longitude);
+      group.rotateOnWorldAxis(verticalAxis, cleanPosition.longitude - currentPosition.longitude);
 
       // Latitude rotation along the camera horizontal axis
-      const horizontalAxis = new THREE.Vector3(0, 1, 0).cross(this.prop.direction).normalize();
-      mesh.rotateOnWorldAxis(horizontalAxis, cleanPosition.latitude - this.psv.prop.position.latitude);
+      const horizontalAxis = new THREE.Vector3(0, 1, 0).cross(this.camera.getWorldDirection(new THREE.Vector3())).normalize();
+      group.rotateOnWorldAxis(horizontalAxis, cleanPosition.latitude - currentPosition.latitude);
     }
 
-    this.scene.add(mesh);
+    group.add(mesh);
+    this.scene.add(group);
     this.psv.needsUpdate();
@@ -307,3 +339,3 @@
         opacity: { start: 0.0, end: 1.0 },
-        zoom   : zoomProvided ? { start: this.prop.zoomLvl, end: options.zoom } : undefined,
+        zoom   : zoomProvided ? { start: this.psv.getZoomLevel(), end: options.zoom } : undefined,
       },
@@ -325,5 +357,6 @@ duration  : options.transition,
         this.setTexture(textureData);
-        this.setSphereCorrection(textureData.panoData, options.sphereCorrection);
+        this.setPanoramaPose(options.panoData);
+        this.setSphereCorrection(options.sphereCorrection);
 
-        this.scene.remove(mesh);
+        this.scene.remove(group);
         mesh.geometry.dispose();
@@ -330,0 +363,0 @@ mesh.geometry = null;

src/services/TextureLoader.js

@@ -30,8 +30,9 @@ import * as THREE from 'three';
     this.loader = new THREE.FileLoader();
-
+    this.loader.setResponseType('blob');
     if (this.config.withCredentials) {
       this.loader.setWithCredentials(true);
     }
-
-    this.loader.setResponseType('blob');
+    if (this.config.requestHeaders && typeof this.config.requestHeaders === 'object') {
+      this.loader.setRequestHeader(this.config.requestHeaders);
+    }
   }
@@ -74,2 +75,6 @@
   loadFile(url, onProgress) {
+    if (this.config.requestHeaders && typeof this.config.requestHeaders === 'function') {
+      this.loader.setRequestHeader(this.config.requestHeaders(url));
+    }
+
     return new Promise((resolve, reject) => {
@@ -76,0 +81,0 @@ let progress = 0;

src/utils/index.js

@@ -5,5 +5,5 @@ /**
 
-export * from './browser.js';
-export * from './math.js';
-export * from './misc.js';
-export * from './psv.js';
+export * from './browser';
+export * from './math';
+export * from './misc';
+export * from './psv';

src/utils/math.js

@@ -86,3 +86,3 @@ /**
 /**
- * Returns the distance between two points on a sphere of radius one
+ * @summary Returns the distance between two points on a sphere of radius one
  * @memberOf PSV.utils
@@ -89,0 +89,0 @@ * @param {number[]} p1

src/utils/misc.js

 /**
- * @summary Transforms a string to dash-case{@link https://github.com/shahata/dasherize}
+ * @summary Transforms a string to dash-case {@link https://github.com/shahata/dasherize}
  * @memberOf PSV.utils
@@ -4,0 +4,0 @@ * @param {string} str

src/utils/psv.js

@@ -6,2 +6,19 @@ import * as THREE from 'three';
 /**
+ * @summary Returns the plugin constructor from the imported object
+ * For retrocompatibility with previous default exports
+ * @memberOf PSV.utils
+ * @package
+ */
+export function pluginInterop(plugin, target) {
+  if (plugin) {
+    for (const [, p] of [['_', plugin], ...Object.entries(plugin)]) {
+      if (p.prototype instanceof target) {
+        return p;
+      }
+    }
+  }
+  return null;
+}
+
+/**
  * @summary Displays a warning in the console
@@ -70,3 +87,3 @@ * @memberOf PSV.utils
  * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-position}
- * @param {string|object} value
+ * @param {string|PSV.Point} value
  * @returns {PSV.Point}
@@ -73,0 +90,0 @@ */

src/Viewer.js

@@ -9,6 +9,7 @@ import * as THREE from 'three';
 import { Panel } from './components/Panel';
-import { CONFIG_PARSERS, DEFAULTS, getConfig, READONLY_OPTIONS } from './data/config';
-import { CHANGE_EVENTS, EVENTS, IDS, VIEWER_DATA } from './data/constants';
+import { CONFIG_PARSERS, DEFAULTS, DEPRECATED_OPTIONS, getConfig, READONLY_OPTIONS } from './data/config';
+import { CHANGE_EVENTS, EVENTS, IDS, SPHERE_RADIUS, VIEWER_DATA } from './data/constants';
 import { SYSTEM } from './data/system';
 import errorIcon from './icons/error.svg';
+import { AbstractPlugin } from './plugins/AbstractPlugin';
 import { PSVError } from './PSVError';
@@ -21,3 +22,2 @@ import { DataHelper } from './services/DataHelper';
 import {
-  bound,
   each,
@@ -29,2 +29,4 @@ exitFullscreen,
   isFullscreenEnabled,
+  logWarn,
+  pluginInterop,
   requestFullscreen,
@@ -34,2 +36,4 @@ throttle,
 } from './utils';
+import { Dynamic } from './utils/Dynamic';
+import { MultiDynamic } from './utils/MultiDynamic';
 
@@ -70,10 +74,7 @@ THREE.Cache.enabled = true;
      * @property {boolean} needsUpdate - if the view needs to be renderer
-     * @property {PSV.Position} position - current direction of the camera
      * @property {external:THREE.Vector3} direction - direction of the camera
-     * @property {number} zoomLvl - current zoom level
      * @property {number} vFov - vertical FOV
      * @property {number} hFov - horizontal FOV
      * @property {number} aspect - viewer aspect ratio
-     * @property {number} moveSpeed - move speed (computed with pixel ratio and configuration moveSpeed)
-     * @property {Function} autorotateCb - update callback of the automatic rotation
+     * @property {boolean} autorotateEnabled - automatic rotation is enabled
      * @property {PSV.Animation} animationPromise - promise of the current animation (either go to position or image transition)
@@ -86,25 +87,19 @@ * @property {Promise} loadingPromise - promise of the setPanorama method
     this.prop = {
-      ready           : false,
-      uiRefresh       : false,
-      needsUpdate     : false,
-      fullscreen      : false,
-      position        : {
-        longitude: 0,
-        latitude : 0,
-      },
-      direction       : null,
-      zoomLvl         : null,
-      vFov            : null,
-      hFov            : null,
-      aspect          : null,
-      moveSpeed       : 0.1,
-      autorotateCb    : null,
-      animationPromise: null,
-      loadingPromise  : null,
-      startTimeout    : null,
-      size            : {
+      ready            : false,
+      uiRefresh        : false,
+      needsUpdate      : false,
+      fullscreen       : false,
+      direction        : new THREE.Vector3(0, 0, SPHERE_RADIUS),
+      vFov             : null,
+      hFov             : null,
+      aspect           : null,
+      autorotateEnabled: false,
+      animationPromise : null,
+      loadingPromise   : null,
+      startTimeout     : null,
+      size             : {
         width : 0,
         height: 0,
       },
-      panoData        : {
+      panoData         : {
         fullWidth    : 0,
@@ -231,2 +226,27 @@ fullHeight   : 0,
 
+    /**
+     * @member {Record<string, PSV.Dynamic>}
+     * @package
+     */
+    this.dynamics = {
+      zoom: new Dynamic((value) => {
+        this.prop.vFov = this.dataHelper.zoomLevelToFov(value);
+        this.prop.hFov = this.dataHelper.vFovToHFov(this.prop.vFov);
+
+        this.needsUpdate();
+        this.trigger(EVENTS.ZOOM_UPDATED, value);
+      }, 0, 100),
+
+      position: new MultiDynamic({
+        longitude: new Dynamic(null),
+        latitude : new Dynamic(null, -Math.PI / 2, Math.PI / 2),
+      }, (position) => {
+        this.dataHelper.sphericalCoordsToVector3(position, this.prop.direction);
+        this.needsUpdate();
+        this.trigger(EVENTS.POSITION_UPDATED, position);
+      }),
+    };
+
+    this.__updateSpeeds();
+
     this.eventsHandler.init();
@@ -239,5 +259,2 @@
 
-    // actual move speed depends on pixel-ratio
-    this.prop.moveSpeed = THREE.Math.degToRad(this.config.moveSpeed / SYSTEM.pixelRatio);
-
     // init plugins
@@ -355,3 +372,9 @@ this.config.plugins.forEach(([plugin, opts]) => {
   getPlugin(pluginId) {
-    return pluginId ? this.plugins[typeof pluginId === 'function' ? pluginId.id : pluginId] : null;
+    if (typeof pluginId === 'string') {
+      return this.plugins[pluginId];
+    }
+    else {
+      const pluginCtor = pluginInterop(pluginId, AbstractPlugin);
+      return pluginCtor ? this.plugins[pluginCtor.id] : undefined;
+    }
   }
@@ -364,6 +387,3 @@
   getPosition() {
-    return {
-      longitude: this.prop.position.longitude,
-      latitude : this.prop.position.latitude,
-    };
+    return this.dynamics.position.current;
   }
@@ -376,3 +396,3 @@
   getZoomLevel() {
-    return this.prop.zoomLvl;
+    return this.dynamics.zoom.current;
   }
@@ -396,3 +416,3 @@
   isAutorotateEnabled() {
-    return !!this.prop.autorotateCb;
+    return this.prop.autorotateEnabled;
   }
@@ -474,4 +494,2 @@
       }
-
-      this.prop.direction = this.dataHelper.sphericalCoordsToVector3(options);
     }
@@ -519,3 +537,3 @@
 
-    if (!options.transition || !this.prop.ready || !this.adapter.supportsTransition()) {
+    if (!options.transition || !this.prop.ready || !this.adapter.constructor.supportsTransition) {
       if (options.showLoader || !this.prop.ready) {
@@ -528,3 +546,4 @@ this.loader.show();
           this.renderer.setTexture(textureData);
-          this.renderer.setSphereCorrection(textureData.panoData, options.sphereCorrection);
+          this.renderer.setPanoramaPose(textureData.panoData);
+          this.renderer.setSphereCorrection(options.sphereCorrection);
 
@@ -564,2 +583,7 @@ if (zoomProvided) {
     each(options, (value, key) => {
+      if (DEPRECATED_OPTIONS[key]) {
+        logWarn(DEPRECATED_OPTIONS[key]);
+        return;
+      }
+
       if (!Object.prototype.hasOwnProperty.call(DEFAULTS, key)) {
@@ -590,3 +614,3 @@ throw new PSVError(`Unknown option ${key}`);
         case 'sphereCorrection':
-          this.renderer.setSphereCorrection(this.prop.panoData, value);
+          this.renderer.setSphereCorrection(value);
           break;
@@ -600,3 +624,4 @@
         case 'moveSpeed':
-          this.prop.moveSpeed = THREE.Math.degToRad(value / SYSTEM.pixelRatio);
+        case 'zoomSpeed':
+          this.__updateSpeeds();
           break;
@@ -606,3 +631,3 @@
         case 'maxFov':
-          this.prop.zoomLvl = this.dataHelper.fovToZoomLevel(this.prop.vFov);
+          this.dynamics.zoom.setValue(this.dataHelper.fovToZoomLevel(this.prop.vFov));
           this.trigger(EVENTS.ZOOM_UPDATED, this.getZoomLevel());
@@ -643,19 +668,12 @@ break;
 
-    this.prop.autorotateCb = (() => {
-      let last;
-      let elapsed;
+    this.dynamics.position.roll({
+      longitude: this.config.autorotateSpeed < 0,
+    }, Math.abs(this.config.autorotateSpeed / this.config.moveSpeed));
 
-      return (e, timestamp) => {
-        elapsed = last === undefined ? 0 : timestamp - last;
-        last = timestamp;
+    this.dynamics.position.goto({
+      latitude: this.config.autorotateLat,
+    }, Math.abs(this.config.autorotateSpeed / this.config.moveSpeed));
 
-        this.rotate({
-          longitude: this.prop.position.longitude + this.config.autorotateSpeed * elapsed / 1000,
-          latitude : this.prop.position.latitude - (this.prop.position.latitude - this.config.autorotateLat) / 200,
-        });
-      };
-    })();
+    this.prop.autorotateEnabled = true;
 
-    this.on(EVENTS.BEFORE_RENDER, this.prop.autorotateCb);
-
     this.trigger(EVENTS.AUTOROTATE, true);
@@ -675,5 +693,6 @@ }
     if (this.isAutorotateEnabled()) {
-      this.off(EVENTS.BEFORE_RENDER, this.prop.autorotateCb);
-      this.prop.autorotateCb = null;
+      this.dynamics.position.stop();
 
+      this.prop.autorotateEnabled = false;
+
       this.trigger(EVENTS.AUTOROTATE, false);
@@ -729,11 +748,3 @@ }
     const cleanPosition = this.change(CHANGE_EVENTS.GET_ROTATE_POSITION, this.dataHelper.cleanPosition(position));
-
-    if (this.prop.position.longitude !== cleanPosition.longitude || this.prop.position.latitude !== cleanPosition.latitude) {
-      this.prop.position.longitude = cleanPosition.longitude;
-      this.prop.position.latitude = cleanPosition.latitude;
-
-      this.needsUpdate();
-
-      this.trigger(EVENTS.POSITION_UPDATED, this.getPosition());
-    }
+    this.dynamics.position.setValue(cleanPosition);
   }
@@ -758,10 +769,11 @@
       const cleanPosition = this.change(CHANGE_EVENTS.GET_ANIMATE_POSITION, this.dataHelper.cleanPosition(options));
+      const currentPosition = this.getPosition();
 
       // longitude offset for shortest arc
-      const tOffset = getShortestArc(this.prop.position.longitude, cleanPosition.longitude);
+      const tOffset = getShortestArc(currentPosition.longitude, cleanPosition.longitude);
 
-      animProperties.longitude = { start: this.prop.position.longitude, end: this.prop.position.longitude + tOffset };
-      animProperties.latitude = { start: this.prop.position.latitude, end: cleanPosition.latitude };
+      animProperties.longitude = { start: currentPosition.longitude, end: currentPosition.longitude + tOffset };
+      animProperties.latitude = { start: currentPosition.latitude, end: cleanPosition.latitude };
 
-      duration = this.dataHelper.speedToDuration(options.speed, getAngle(this.prop.position, cleanPosition));
+      duration = this.dataHelper.speedToDuration(options.speed, getAngle(currentPosition, cleanPosition));
     }
@@ -771,5 +783,5 @@
     if (zoomProvided) {
-      const dZoom = Math.abs(options.zoom - this.prop.zoomLvl);
+      const dZoom = Math.abs(options.zoom - this.getZoomLevel());
 
-      animProperties.zoom = { start: this.prop.zoomLvl, end: options.zoom };
+      animProperties.zoom = { start: this.getZoomLevel(), end: options.zoom };
 
@@ -835,29 +847,19 @@ if (!duration) {
   zoom(level) {
-    const newZoomLvl = bound(level, 0, 100);
-
-    if (this.prop.zoomLvl !== newZoomLvl) {
-      this.prop.zoomLvl = newZoomLvl;
-      this.prop.vFov = this.dataHelper.zoomLevelToFov(this.prop.zoomLvl);
-      this.prop.hFov = this.dataHelper.vFovToHFov(this.prop.vFov);
-
-      this.renderer.updateCameraMatrix();
-
-      this.needsUpdate();
-      this.trigger(EVENTS.ZOOM_UPDATED, this.getZoomLevel());
-      this.rotate(this.prop.position);
-    }
+    this.dynamics.zoom.setValue(level);
   }
 
   /**
-   * @summary Increases the zoom level by 1
+   * @summary Increases the zoom level
+   * @param {number} [step=1]
    */
-  zoomIn() {
-    this.zoom(this.prop.zoomLvl + this.config.zoomButtonIncrement);
+  zoomIn(step = 1) {
+    this.dynamics.zoom.step(step);
   }
 
   /**
-   * @summary Decreases the zoom level by 1
+   * @summary Decreases the zoom level
+   * @param {number} [step=1]
    */
-  zoomOut() {
-    this.zoom(this.prop.zoomLvl - this.config.zoomButtonIncrement);
+  zoomOut(step = 1) {
+    this.dynamics.zoom.step(-step);
   }
@@ -943,3 +945,3 @@
    * @summary Stops all current animations
-   * @private
+   * @package
    */
@@ -953,2 +955,11 @@ __stopAll() {
 
+  /**
+   * @summary Recomputes dynamics speeds
+   * @private
+   */
+  __updateSpeeds() {
+    this.dynamics.zoom.setSpeed(this.config.zoomSpeed * 50);
+    this.dynamics.position.setSpeed(THREE.Math.degToRad(this.config.moveSpeed * 50));
+  }
+
 }

src/ViewerCompat.js

@@ -1,304 +0,7 @@
-import * as THREE from 'three';
-import { DEFAULTS, utils, Viewer } from 'photo-sphere-viewer';
-import GyroscopePlugin from 'photo-sphere-viewer/dist/plugins/gyroscope';
-import StereoPlugin from 'photo-sphere-viewer/dist/plugins/stereo';
-import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers';
-import VisibleRangePlugin from 'photo-sphere-viewer/dist/plugins/visible-range';
+export default class ViewerCompat {
 
-/**
- * @private
- */
-function snakeCaseToCamelCase(options) {
-  if (typeof options === 'object') {
-    utils.each(options, (value, key) => {
-      if (typeof key === 'string' && key.indexOf('_') !== -1) {
-        const camelKey = key.replace(/(_\w)/g, matches => matches[1].toUpperCase());
-        options[camelKey] = snakeCaseToCamelCase(value);
-        delete options[key];
-      }
-    });
+  constructor() {
+    throw new Error('PhotoSphereViewer#ViewerCompat has been removed, please migrate to v4 Viewer.');
   }
 
-  return options;
 }
-
-/**
- * @private
- */
-const RENAMED_OPTIONS = {
-  animSpeed       : 'autorotateSpeed',
-  animLat         : 'autorotateLat',
-  usexmpdata      : 'useXmpData',
-  mousemoveHover  : 'captureCursor',
-  zoomSpeed       : 'zoomButtonIncrement',
-  mousewheelFactor: 'mousewheelSpeed',
-};
-
-/**
- * @summary Compatibility wrapper for version 3
- * @memberOf PSV
- * @deprecated
- */
-export default class ViewerCompat extends Viewer {
-
-  /**
-   * @param {PSV.Options} options
-   * @fires PSV.ready
-   * @throws {PSV.PSVError} when the configuration is incorrect
-   */
-  constructor(options) {
-    snakeCaseToCamelCase(options);
-
-    utils.each(RENAMED_OPTIONS, (newName, oldName) => {
-      if (oldName in options) {
-        options[newName] = options[oldName];
-        delete options[oldName];
-      }
-    });
-
-    if ('defaultFov' in options) {
-      const minFov = options.minFov !== undefined ? options.minFov : DEFAULTS.minFov;
-      const maxFov = options.maxFov !== undefined ? options.maxFov : DEFAULTS.maxFov;
-      const defaultFov = utils.bound(options.defaultFov, minFov, maxFov);
-      options.defaultZoomLvl = (defaultFov - minFov) / (maxFov - minFov) * 100;
-      delete options.defaultFov;
-    }
-
-    if (!('timeAnim' in options)) {
-      options.autorotateDelay = 2000;
-    }
-    else if (options.timeAnim === false) {
-      options.autorotateDelay = null;
-    }
-    else if (typeof options.timeAnim === 'number') {
-      options.autorotateDelay = options.timeAnim;
-    }
-    delete options.timeAnim;
-
-    delete options.transition;
-
-    if ('panoramaRoll' in options) {
-      options.sphereCorrection = options.sphereCorrection || {};
-      options.sphereCorrection.roll = options.panoramaRoll;
-      delete options.panoramaRoll;
-    }
-
-    if (typeof options.navbar === 'string') {
-      options.navbar = options.navbar.split(' ');
-    }
-
-    if (Array.isArray(options.navbar)) {
-      const markersIdx = options.navbar.indexOf('markers');
-      if (markersIdx !== -1) {
-        options.navbar.splice(markersIdx, 1, 'markersList');
-      }
-    }
-
-    const clickEventOnMarker = options.clickEventOnMarker;
-    delete options.clickEventOnMarker;
-
-    const markers = options.markers;
-    delete options.markers;
-
-    const longitudeRange = options.longitudeRange;
-    delete options.longitudeRange;
-
-    const latitudeRange = options.latitudeRange;
-    delete options.latitudeRange;
-
-    options.plugins = [];
-    if (GyroscopePlugin) {
-      options.plugins.push(GyroscopePlugin);
-    }
-    if (StereoPlugin) {
-      options.plugins.push(StereoPlugin);
-    }
-    if (MarkersPlugin) {
-      options.plugins.push([MarkersPlugin, { clickEventOnMarker, markers }]);
-    }
-    if (VisibleRangePlugin) {
-      options.plugins.push([VisibleRangePlugin, { longitudeRange, latitudeRange }]);
-    }
-
-    super(options);
-
-    this.gyroscope = this.getPlugin(GyroscopePlugin);
-    this.stereo = this.getPlugin(StereoPlugin);
-    this.markers = this.getPlugin(MarkersPlugin);
-  }
-
-  // GENERAL
-
-  render() {
-    this.renderer.render();
-  }
-
-  setPanorama(panorama, options = {}, transition = false) {
-    snakeCaseToCamelCase(options);
-    options.transition = transition;
-    return super.setPanorama(panorama, options);
-  }
-
-  preloadPanorama(panorama) {
-    return this.textureLoader.preloadPanorama(panorama);
-  }
-
-  clearPanoramaCache(panorama) {
-    if (panorama) {
-      THREE.Cache.remove(panorama);
-    }
-    else {
-      THREE.Cache.clear();
-    }
-  }
-
-  // GYROSCOPE / STEREO
-
-  isGyroscopeEnabled() {
-    return this.gyroscope && this.gyroscope.isEnabled();
-  }
-
-  startGyroscopeControl() {
-    return this.gyroscope && this.gyroscope.start();
-  }
-
-  stopGyroscopeControl() {
-    this.gyroscope && this.gyroscope.stop();
-  }
-
-  toggleGyroscopeControl() {
-    this.gyroscope && this.gyroscope.toggle();
-  }
-
-  isStereoEnabled() {
-    return this.stereo && this.stereo.isEnabled();
-  }
-
-  startStereoView() {
-    return this.stereo && this.stereo.start();
-  }
-
-  stopStereoView() {
-    this.stereo && this.stereo.stop();
-  }
-
-  toggleStereoView() {
-    this.stereo && this.stereo.toggle();
-  }
-
-  // MARKERS
-
-  addMarker(marker, render) {
-    return this.markers && this.markers.addMarker(snakeCaseToCamelCase(marker), render);
-  }
-
-  getMarker(markerId) {
-    return this.markers && this.markers.getMarker(markerId);
-  }
-
-  updateMarker(marker, render) {
-    return this.markers && this.markers.updateMarker(snakeCaseToCamelCase(marker), render);
-  }
-
-  removeMarker(marker, render) {
-    this.markers && this.markers.removeMarker(marker, render);
-  }
-
-  gotoMarker(markerOrId, duration) {
-    this.markers && this.markers.gotoMarker(markerOrId, duration);
-  }
-
-  hideMarker(markerId) {
-    this.markers && this.markers.hideMarker(markerId);
-  }
-
-  showMarker(markerId) {
-    this.markers && this.markers.showMarker(markerId);
-  }
-
-  clearMarkers(render) {
-    this.markers && this.markers.clearMarkers(render);
-  }
-
-  getCurrentMarker() {
-    return this.markers && this.markers.getCurrentMarker();
-  }
-
-  // NAVBAR
-
-  showNavbar() {
-    this.navbar.show();
-  }
-
-  hideNavbar() {
-    this.navbar.hide();
-  }
-
-  toggleNavbar() {
-    this.navbar.toggle();
-  }
-
-  getNavbarButton(id, silent) {
-    return this.navbar.getButton(id, silent);
-  }
-
-  setCaption(html) {
-    return this.navbar.setCaption(html);
-  }
-
-  // NOTIFICATION
-
-  showNotification(config) {
-    this.notification.show(config);
-  }
-
-  hideNotification() {
-    this.notification.hide();
-  }
-
-  isNotificationVisible() {
-    return this.notification.isVisible();
-  }
-
-  // OVERLAY
-
-  showOverlay(config) {
-    this.overlay.show(config);
-  }
-
-  hideOverlay() {
-    this.overlay.hide();
-  }
-
-  isOverlayVisible() {
-    return this.overlay.isVisible();
-  }
-
-  // PANEL
-
-  showPanel(config) {
-    this.panel.show(config);
-  }
-
-  hidePanel() {
-    this.panel.hide();
-  }
-
-  // TOOLTIP
-
-  showTooltip(config) {
-    this.prop.mainTooltip = this.tooltip.create(config);
-  }
-
-  hideTooltip() {
-    if (this.prop.mainTooltip) {
-      this.prop.mainTooltip.hide();
-      this.prop.mainTooltip = null;
-    }
-  }
-
-  isTooltipVisible() {
-    return !!this.prop.mainTooltip;
-  }
-
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1609701

increased by10.74%

Number of downloads

3931

increased by83.09%

Number of package files

185

increased by44.53%

Lines of code

27658

increased by19.48%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Addedthree@0.133.1(transitive)

• - Removedthree@0.126.1(transitive)

• Updatedthree@^0.133.1

• Updateduevent@~2.0.1