photo-sphere-viewer - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

dist/adapters/cubemap.d.ts

@@ -1,13 +0,19 @@
-import { AbstractAdapter, TextureData } from 'photo-sphere-viewer';
+import { AbstractAdapter } from 'photo-sphere-viewer';
 
 /**
+ * @summary Cubemap defined as an array of images
+ * @description images order is : left, front, right, back, top, bottom
+ */
+type CubemapArray = string[6];
+
+/**
  * @summary Object defining a cubemap
  */
-type Cubemap = string[6] | {
-  top: string;
-  right: string;
-  bottom: string;
+type Cubemap = {
   left: string;
   front: string;
+  right: string;
   back: string;
+  top: string;
+  bottom: string;
 };
@@ -18,8 +24,6 @@
  */
-declare class CubemapAdapter extends AbstractAdapter {
+declare class CubemapAdapter extends AbstractAdapter<CubemapArray | Cubemap> {
 
-  loadTexture(panorama: Cubemap): Promise<TextureData>;
-
 }
 
-export { Cubemap, CubemapAdapter };
+export { Cubemap, CubemapAdapter, CubemapArray };

dist/adapters/cubemap.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -32,8 +32,8 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
    * @summary Object defining a cubemap
-   * @property {string} top
-   * @property {string} right
-   * @property {string} bottom
    * @property {string} left
    * @property {string} front
+   * @property {string} right
    * @property {string} back
+   * @property {string} top
+   * @property {string} bottom
    */
@@ -40,0 +40,0 @@

dist/adapters/equirectangular-tiles.d.ts

@@ -1,2 +0,2 @@
-import { AbstractAdapter, Viewer, TextureData } from 'photo-sphere-viewer';
+import { AbstractAdapter, Viewer } from 'photo-sphere-viewer';
 
@@ -22,10 +22,8 @@ /**
  */
-declare class EquirectangularTilesAdapter extends AbstractAdapter {
+declare class EquirectangularTilesAdapter extends AbstractAdapter<EquirectangularTilesPanorama> {
 
   constructor(psv: Viewer, options: EquirectangularTilesAdapterOptions);
 
-  loadTexture(panorama: EquirectangularTilesPanorama): Promise<TextureData>;
-
 }
 
 export { EquirectangularTilesAdapter, EquirectangularTilesAdapterOptions, EquirectangularTilesPanorama };

dist/adapters/equirectangular-tiles.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -486,2 +486,7 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
       var panorama = this.psv.config.panorama;
+
+      if (!panorama) {
+        return;
+      }
+
       var tilesToLoad = [];
@@ -620,3 +625,3 @@ var tilePosition = new THREE.Vector3();
       return new Promise(function (resolve, reject) {
-        return _this6.loader.load(url, resolve, undefined, reject);
+        _this6.loader.load(url, resolve, undefined, reject);
       }).then(function (image) {
@@ -623,0 +628,0 @@ if (!task.isCancelled()) {

dist/photo-sphere-viewer.d.ts

@@ -1,5 +0,10 @@
-import { Texture, Mesh, Vector3 } from 'three';
+import { Texture, Mesh, Vector3, Intersection } from 'three';
 import { EventEmitter, Event } from 'uevent';
 
 /**
+ * @summary Radius of the THREE.SphereGeometry, Half-length of the THREE.BoxGeometry
+ */
+declare const SPHERE_RADIUS = 10;
+
+/**
  * @summary Property name added to viewer element
@@ -113,2 +118,3 @@ */
 
+declare const constants_d_SPHERE_RADIUS: typeof SPHERE_RADIUS;
 declare const constants_d_VIEWER_DATA: typeof VIEWER_DATA;
@@ -122,2 +128,3 @@ declare const constants_d_ACTIONS: typeof ACTIONS;
   export {
+    constants_d_SPHERE_RADIUS as SPHERE_RADIUS,
     constants_d_VIEWER_DATA as VIEWER_DATA,
@@ -427,2 +434,10 @@ constants_d_ACTIONS as ACTIONS,
 /**
+ * @summary Parse a CSS-like position into an array of position keywords among top, bottom, left, right and center
+ * @param {string | string[]} value
+ * @param {string} defaultValue
+ * @param {boolean} [allowCenter=true]
+ */
+declare function cleanPosition(value: string | string[], defaultValue: string, allowCenter?): string[];
+
+/**
  * @summary Parses an speed
@@ -481,2 +496,3 @@ * @param speed - The speed, in radians/degrees/revolutions per second/minute
 declare const index_d_parsePosition: typeof parsePosition;
+declare const index_d_cleanPosition: typeof cleanPosition;
 declare const index_d_parseSpeed: typeof parseSpeed;
@@ -519,2 +535,3 @@ declare const index_d_parseAngle: typeof parseAngle;
     index_d_parsePosition as parsePosition,
+    index_d_cleanPosition as cleanPosition,
     index_d_parseSpeed as parseSpeed,
@@ -528,4 +545,5 @@ index_d_parseAngle as parseAngle,
  * @summary Base adapters class
+ * @template T type of the panorama configuration object
  */
-declare abstract class AbstractAdapter {
+declare abstract class AbstractAdapter<T> {
 
@@ -552,3 +570,3 @@ /**
    */
-  loadTexture(panorama: any, newPanoData?: PanoData | PanoDataProvider): Promise<TextureData>;
+  loadTexture(panorama: T, newPanoData?: PanoData | PanoDataProvider): Promise<TextureData>;
 
@@ -573,3 +591,3 @@ /**
 
-type AdapterConstructor<T extends AbstractAdapter> = new (psv: Viewer, options?: any) => T;
+type AdapterConstructor<T extends AbstractAdapter<any>> = new (psv: Viewer, options?: any) => T;
 
@@ -674,3 +692,3 @@ type AnimationOptions = {
 
-  constructor(navbar: Navbar, className?: string, collapsable?: boolean);
+  constructor(navbar: Navbar, className?: string, collapsable?: boolean, tabbable?: boolean);
 
@@ -707,2 +725,7 @@ /**
 
+  /**
+   * Action when the button is clicked
+   */
+  abstract onClick();
+
 }
@@ -713,3 +736,3 @@
  */
-declare function registerButton(button: typeof AbstractButton);
+declare function registerButton(button: typeof AbstractButton): void;
 
@@ -887,3 +910,3 @@ /**
    */
-  sphericalCoordsToVector3(position: Position): Vector3;
+  sphericalCoordsToVector3(position: Position, vector: Vector3): Vector3;
 
@@ -911,2 +934,7 @@ /**
   /**
+   * @summary Returns the first intersection with the cursor and having specific data
+   */
+  getIntersection(viewerPoint: Point, objectDataName: string): Intersection;
+
+  /**
    * @summary Converts x/y to latitude/longitude if present and ensure boundaries
@@ -929,2 +957,17 @@ */
   /**
+   * @summary Cancels current HTTP requests
+   */
+  abortLoading();
+
+  /**
+   * @summary Loads a Blob with FileLoader
+   */
+  loadFile(url: string, onProgress?: (number) => void): Promise<Blob>;
+
+  /**
+   * @summary Loads an Image using FileLoader to have progress events
+   */
+  loadImage(url: string, onProgress?: (number) => void): Promise<HTMLImageElement>;
+
+  /**
    * @summary Preload a panorama file without displaying it
@@ -954,3 +997,3 @@ */
   container: HTMLElement | string;
-  panorama?: string;
+  panorama?: any;
   adapter?: AdapterConstructor<any> | [AdapterConstructor<any>, any];
@@ -967,6 +1010,6 @@ caption?: string;
   defaultLat?: number;
-  sphereCorrection?: { pan?: number, tilt?: number, roll?: number },
+  sphereCorrection?: { pan?: number, tilt?: number, roll?: number };
   moveSpeed?: number;
   zoomSpeed?: number;
-  autorotateDelay?: null,
+  autorotateDelay?: number,
   autorotateSpeed?: string | number;
@@ -985,6 +1028,6 @@ autorotateLat?: number;
   withCredentials?: boolean;
-  navbar?: string | Array<string | NavbarCustomButton>,
-  lang?: Record<string, string>,
-  keyboard?: Record<string, string>,
-  plugins?: Array<PluginConstructor<any> | [PluginConstructor<any>, any]>,
+  navbar?: string | Array<string | NavbarCustomButton>;
+  lang?: Record<string, string>;
+  keyboard?: Record<string, string>;
+  plugins?: Array<PluginConstructor<any> | [PluginConstructor<any>, any]>;
 };
@@ -1025,3 +1068,3 @@
    */
-  prop: ViewerProps;
+  protected readonly prop: ViewerProps;
 
@@ -1074,3 +1117,3 @@ /**
    */
-  getPlugin<T extends AbstractPlugin>(pluginId: string | PluginConstructor<T>): T;
+  getPlugin<T extends AbstractPlugin>(pluginId: string | PluginConstructor<T>): T | undefined;
 
@@ -1219,2 +1262,7 @@ /**
   /**
+   * @summary Triggered when the panorama image has been loaded and the viewer is ready to perform the first render
+   */
+  once(e: 'ready', cb: (e: Event) => void): this;
+
+  /**
    * @summary Triggered when the automatic rotation is enabled/disabled
@@ -1283,9 +1331,3 @@ */
   on(e: 'position-updated', cb: (e: Event, position: Position) => void): this;
-
   /**
-   * @summary Triggered when the panorama image has been loaded and the viewer is ready to perform the first render
-   */
-  once(e: 'ready', cb: (e: Event) => void): this;
-
-  /**
    * @summary Triggered on each viewer render, **this event is triggered very often**
@@ -1347,2 +1389,2 @@ */
 
-export { ACTIONS, AbstractAdapter, AbstractButton, AbstractPlugin, AdapterConstructor, AnimateOptions, Animation, AnimationOptions, CHANGE_EVENTS, constants_d as CONSTANTS, ClickData, CssSize, DEFAULTS, DataHelper, EASINGS, EVENTS, ExtendedPosition, KEY_CODES, Loader, Navbar, NavbarCustomButton, Notification, NotificationOptions, Overlay, OverlayOptions, PSVError, Panel, PanelOptions, PanoData, PanoDataProvider, PanoramaOptions, PluginConstructor, Point, Position, SYSTEM, Size, SphereCorrection, TextureData, TextureLoader, Tooltip, TooltipOptions, TooltipPosition, TooltipRenderer, VIEWER_DATA, Viewer, ViewerOptions, ViewerProps, registerButton, index_d as utils };
+export { AbstractAdapter, AbstractButton, AbstractPlugin, AdapterConstructor, AnimateOptions, Animation, AnimationOptions, constants_d as CONSTANTS, ClickData, CssSize, DEFAULTS, DataHelper, ExtendedPosition, Loader, Navbar, NavbarCustomButton, Notification, NotificationOptions, Overlay, OverlayOptions, PSVError, Panel, PanelOptions, PanoData, PanoDataProvider, PanoramaOptions, PluginConstructor, Point, Position, SYSTEM, Size, SphereCorrection, TextureData, TextureLoader, Tooltip, TooltipOptions, TooltipPosition, TooltipRenderer, Viewer, ViewerOptions, ViewerProps, registerButton, index_d as utils };

dist/plugins/autorotate-keypoints.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -70,14 +70,7 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 
-  /**
-   * @summary Number of steps between each points
-   * @type {number}
-   * @constant
-   * @private
-   */
-
   var NUM_STEPS = 16;
 
-  var serializePt = function serializePt(position) {
+  function serializePt(position) {
     return [position.longitude, position.latitude];
-  };
+  }
   /**
@@ -127,2 +120,7 @@ * @summary Replaces the standard autorotate animation by a smooth transition between multiple points
       /**
+       * @type {PSV.plugins.AutorotateKeypointsPlugin.Keypoints[]} keypoints
+       */
+
+      _this.keypoints = null;
+      /**
        * @type {PSV.plugins.MarkersPlugin}
@@ -144,3 +142,7 @@ * @private
     }
+    /**
+     * @package
+     */
 
+
     var _proto = AutorotateKeypointsPlugin.prototype;
@@ -151,2 +153,3 @@
       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this);
+      delete this.markers;
       delete this.keypoints;
@@ -156,3 +159,7 @@ delete this.state;
       _AbstractPlugin.prototype.destroy.call(this);
-    };
+    }
+    /**
+     * @private
+     */
+    ;
 
@@ -159,0 +166,0 @@ _proto.handleEvent = function handleEvent(e) {

dist/plugins/gyroscope.d.ts

@@ -9,2 +9,6 @@ import { AbstractPlugin, Viewer } from 'photo-sphere-viewer';
 
+declare const EVENTS: {
+  GYROSCOPE_UPDATED: 'gyroscope-updated',
+};
+
 /**
@@ -15,6 +19,2 @@ * @summary Adds gyroscope controls on mobile devices
 
-  static EVENTS: {
-    GYROSCOPE_UPDATED: 'gyroscope-updated',
-  };
-
   constructor(psv: Viewer, options: GyroscopePluginOptions);
@@ -50,2 +50,2 @@
 
-export { GyroscopePlugin, GyroscopePluginOptions };
+export { EVENTS, GyroscopePlugin, GyroscopePluginOptions };

dist/plugins/gyroscope.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -55,111 +55,123 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 
-  const _zee = new THREE.Vector3(0, 0, 1);
+  /**
+   * @summary Available events
+   * @enum {string}
+   * @memberof PSV.plugins.GyroscopePlugin
+   * @constant
+   */
+  var EVENTS = {
+    /**
+     * @event gyroscope-updated
+     * @memberof PSV.plugins.GyroscopePlugin
+     * @summary Triggered when the gyroscope mode is enabled/disabled
+     * @param {boolean} enabled
+     */
+    GYROSCOPE_UPDATED: 'gyroscope-updated'
+  };
 
-  const _euler = new THREE.Euler();
+  var _zee = new THREE.Vector3(0, 0, 1);
 
-  const _q0 = new THREE.Quaternion();
+  var _euler = new THREE.Euler();
 
-  const _q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 around the x-axis
+  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'
-  };
+  /**
+   * Copied from three.js examples before deletion in r134
+   * (deleted because of constructors/OS inconsistencies)
+   * @private
+   */
 
-  class DeviceOrientationControls extends THREE.EventDispatcher {
-    constructor(object) {
-      super();
 
-      if (window.isSecureContext === false) {
-        console.error('THREE.DeviceOrientationControls: DeviceOrientationEvent is only available in secure contexts (https)');
-      }
+  var DeviceOrientationControls = function DeviceOrientationControls(object) {
+    if (window.isSecureContext === false) {
+      console.error('THREE.DeviceOrientationControls: DeviceOrientationEvent is only available in secure contexts (https)');
+    }
 
-      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
+    var scope = this;
+    var EPS = 0.000001;
+    var lastQuaternion = new THREE.Quaternion();
+    this.object = object;
+    this.object.rotation.reorder('YXZ');
+    this.enabled = true;
+    this.deviceOrientation = {};
+    this.screenOrientation = 0;
+    this.alphaOffset = 0; // radians
 
-      const onDeviceOrientationChangeEvent = function (event) {
-        scope.deviceOrientation = event;
-      };
+    var onDeviceOrientationChangeEvent = function onDeviceOrientationChangeEvent(event) {
+      scope.deviceOrientation = event;
+    };
 
-      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''
+    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 setObjectQuaternion = function (quaternion, alpha, beta, gamma, orient) {
-        _euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
+    var setObjectQuaternion = function setObjectQuaternion(quaternion, alpha, beta, gamma, orient) {
+      _euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
 
 
-        quaternion.setFromEuler(_euler); // orient the device
+      quaternion.setFromEuler(_euler); // orient the device
 
-        quaternion.multiply(_q1); // camera looks out the back of the device, not the top
+      quaternion.multiply(_q1); // camera looks out the back of the device, not the top
 
-        quaternion.multiply(_q0.setFromAxisAngle(_zee, -orient)); // adjust for screen orientation
-      };
+      quaternion.multiply(_q0.setFromAxisAngle(_zee, -orient)); // adjust for screen orientation
+    };
 
-      this.connect = function () {
-        onScreenOrientationChangeEvent(); // run once on load
-        // iOS 13+
+    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);
-        }
+      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;
-      };
+      scope.enabled = true;
+    };
 
-      this.disconnect = function () {
-        window.removeEventListener('orientationchange', onScreenOrientationChangeEvent);
-        window.removeEventListener('deviceorientation', onDeviceOrientationChangeEvent);
-        scope.enabled = false;
-      };
+    this.disconnect = function () {
+      window.removeEventListener('orientationchange', onScreenOrientationChangeEvent);
+      window.removeEventListener('deviceorientation', onDeviceOrientationChangeEvent);
+      scope.enabled = false;
+    };
 
-      this.update = function () {
-        if (scope.enabled === false) return;
-        const device = scope.deviceOrientation;
+    this.update = function () {
+      if (scope.enabled === false) return;
+      var device = scope.deviceOrientation;
 
-        if (device) {
-          const alpha = device.alpha ? THREE.MathUtils.degToRad(device.alpha) + scope.alphaOffset : 0; // Z
+      if (device) {
+        var alpha = device.alpha ? THREE.MathUtils.degToRad(device.alpha) + scope.alphaOffset : 0; // Z
 
-          const beta = device.beta ? THREE.MathUtils.degToRad(device.beta) : 0; // X'
+        var beta = device.beta ? THREE.MathUtils.degToRad(device.beta) : 0; // X'
 
-          const gamma = device.gamma ? THREE.MathUtils.degToRad(device.gamma) : 0; // Y''
+        var gamma = device.gamma ? THREE.MathUtils.degToRad(device.gamma) : 0; // Y''
 
-          const orient = scope.screenOrientation ? THREE.MathUtils.degToRad(scope.screenOrientation) : 0; // O
+        var orient = scope.screenOrientation ? THREE.MathUtils.degToRad(scope.screenOrientation) : 0; // O
 
-          setObjectQuaternion(scope.object.quaternion, alpha, beta, gamma, orient);
+        setObjectQuaternion(scope.object.quaternion, alpha, beta, gamma, orient);
 
-          if (8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
-            lastQuaternion.copy(scope.object.quaternion);
-            scope.dispatchEvent(_changeEvent);
-          }
+        if (8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
+          lastQuaternion.copy(scope.object.quaternion);
         }
-      };
+      }
+    };
 
-      this.dispose = function () {
-        scope.disconnect();
-      };
+    this.dispose = function () {
+      scope.disconnect();
+    };
 
-      this.connect();
-    }
+    this.connect();
+  };
 
-  }
-
   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";
@@ -189,6 +201,6 @@
 
-      _this.plugin = _this.psv.getPlugin(GyroscopePlugin.id);
+      _this.plugin = _this.psv.getPlugin('gyroscope');
 
       if (_this.plugin) {
-        _this.plugin.on(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, _assertThisInitialized(_this));
+        _this.plugin.on(EVENTS.GYROSCOPE_UPDATED, _assertThisInitialized(_this));
       }
@@ -207,3 +219,3 @@
       if (this.plugin) {
-        this.plugin.off(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, this);
+        this.plugin.off(EVENTS.GYROSCOPE_UPDATED, this);
       }
@@ -234,3 +246,3 @@
     _proto.handleEvent = function handleEvent(e) {
-      if (e.type === GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED) {
+      if (e.type === EVENTS.GYROSCOPE_UPDATED) {
         this.toggleActive(e.args[0]);
@@ -275,6 +287,3 @@ }
     /**
-     * @summary Available events
-     * @enum {string}
-     * @memberof PSV.plugins.GyroscopePlugin
-     * @constant
+     * @deprecated use the EVENTS constants of the module
      */
@@ -315,3 +324,3 @@
       /**
-       * @member {external:THREE.DeviceOrientationControls}
+       * @member {DeviceOrientationControls}
        * @private
@@ -423,3 +432,3 @@ */
 
-        _this2.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, true);
+        _this2.trigger(EVENTS.GYROSCOPE_UPDATED, true);
       });
@@ -438,3 +447,3 @@ }
         this.psv.config.moveInertia = this.prop.config_moveInertia;
-        this.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, false);
+        this.trigger(EVENTS.GYROSCOPE_UPDATED, false);
       }
@@ -552,12 +561,5 @@ }
   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'
-  };
+  GyroscopePlugin.EVENTS = EVENTS;
 
+  exports.EVENTS = EVENTS;
   exports.GyroscopePlugin = GyroscopePlugin;
@@ -564,0 +566,0 @@

dist/plugins/markers.d.ts

@@ -111,2 +111,15 @@ import { ExtendedPosition, AbstractPlugin, Viewer, Animation } from 'photo-sphere-viewer';
 
+declare const EVENTS: {
+  GOTO_MARKER_DONE: 'goto-marker-done',
+  LEAVE_MARKER: 'leave-marker',
+  OVER_MARKER: 'over-marker',
+  RENDER_MARKERS_LIST: 'render-markers-list',
+  SELECT_MARKER: 'select-marker',
+  SELECT_MARKER_LIST: 'select-marker-list',
+  UNSELECT_MARKER: 'unselect-marker',
+  HIDE_MARKERS: 'hide-markers',
+  SET_MARKERS: 'set-markers',
+  SHOW_MARKERS: 'show-markers',
+};
+
 /**
@@ -117,14 +130,2 @@ * @summary Displays various markers on the viewer
 
-  static EVENTS: {
-    GOTO_MARKER_DONE   : 'goto-marker-done',
-    LEAVE_MARKER       : 'leave-marker',
-    OVER_MARKER        : 'over-marker',
-    RENDER_MARKERS_LIST: 'render-markers-list',
-    SELECT_MARKER      : 'select-marker',
-    SELECT_MARKER_LIST : 'select-marker-list',
-    UNSELECT_MARKER    : 'unselect-marker',
-    HIDE_MARKERS       : 'hide-markers',
-    SHOW_MARKERS       : 'show-markers',
-  };
-
   constructor(psv: Viewer, options: MarkersPluginOptions);
@@ -148,3 +149,3 @@
   /**
-   * @summary Return the total number of markers
+   * @summary Returns the total number of markers
    * @returns {number}
@@ -155,4 +156,8 @@ */
   /**
+   * @summary Returns all the markers
+   */
+  getMarkers(): Marker[];
+
+  /**
    * @summary Adds a new marker to viewer
-   * @returns {PSV.plugins.MarkersPlugin.Marker}
    * @throws {PSVError} when the marker's id is missing or already exists
@@ -287,2 +292,2 @@ */
 
-export { Marker, MarkerProperties, MarkerType, MarkersPlugin, MarkersPluginOptions, SelectMarkerData };
+export { EVENTS, Marker, MarkerProperties, MarkerType, MarkersPlugin, MarkersPluginOptions, SelectMarkerData };

dist/plugins/markers.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -55,3 +55,142 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 
+  var pinList = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"9 9 81 81\"><path fill=\"currentColor\" d=\"M37.5 90S9.9 51.9 9.9 36.6 22.2 9 37.5 9s27.6 12.4 27.6 27.6S37.5 90 37.5 90zm0-66.3c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11zM86.7 55H70c-1.8 0-3.3-1.5-3.3-3.3s1.5-3.3 3.3-3.3h16.7c1.8 0 3.3 1.5 3.3 3.3S88.5 55 86.7 55zm0-25h-15a3.3 3.3 0 0 1-3.3-3.3c0-1.8 1.5-3.3 3.3-3.3h15c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3zM56.5 73h30c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3h-30a3.3 3.3 0 0 1-3.3-3.3 3.2 3.2 0 0 1 3.3-3.3z\"/><!--Created by Rohith M S from the Noun Project--></svg>\n";
+
   /**
+   * @summary Available events
+   * @enum {string}
+   * @memberof PSV.plugins.MarkersPlugin
+   * @constant
+   */
+
+  var 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 set-marker
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the list of markers changes
+     * @param {PSV.plugins.MarkersPlugin.Marker[]} markers
+     */
+    SET_MARKERS: 'set-markers',
+
+    /**
+     * @event show-markers
+     * @memberof PSV.plugins.MarkersPlugin
+     * @summary Triggered when the markers are shown
+     */
+    SHOW_MARKERS: 'show-markers'
+  };
+  /**
+   * @summary Namespace for SVG creation
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var SVG_NS = 'http://www.w3.org/2000/svg';
+  /**
+   * @summary Property name added to marker elements
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var MARKER_DATA = 'psvMarker';
+  /**
+   * @summary Panel identifier for marker content
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var ID_PANEL_MARKER = 'marker';
+  /**
+   * @summary Panel identifier for markers list
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var ID_PANEL_MARKERS_LIST = 'markersList';
+  /**
+   * @summary Markers list template
+   * @param {PSV.Marker[]} markers
+   * @param {string} title
+   * @param {string} dataKey
+   * @returns {string}
+   * @constant
+   * @private
+   */
+
+  var MARKERS_LIST_TEMPLATE = function MARKERS_LIST_TEMPLATE(markers, title, dataKey) {
+    return "\n<div class=\"psv-panel-menu psv-panel-menu--stripped\">\n  <h1 class=\"psv-panel-menu-title\">" + pinList + " " + 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\" 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";
+  };
+
+  /**
    * Returns intermediary point between two points on the sphere
@@ -169,3 +308,3 @@ * {@link http://www.movable-type.co.uk/scripts/latlong.html}
    * @typedef {Object} PSV.plugins.MarkersPlugin.Properties
-   * @summary Marker properties, see {@link http://photo-sphere-viewer.js.org/plugins/plugin-markers.html#markers-options}
+   * @summary Marker properties, see {@link https://photo-sphere-viewer.js.org/plugins/plugin-markers.html#markers-options}
    */
@@ -269,11 +408,11 @@
       } else if (this.isPolygon()) {
-        this.$el = document.createElementNS(MarkersPlugin.SVG_NS, 'polygon');
+        this.$el = document.createElementNS(SVG_NS, 'polygon');
       } else if (this.isPolyline()) {
-        this.$el = document.createElementNS(MarkersPlugin.SVG_NS, 'polyline');
+        this.$el = document.createElementNS(SVG_NS, 'polyline');
       } else {
-        this.$el = document.createElementNS(MarkersPlugin.SVG_NS, this.type);
+        this.$el = document.createElementNS(SVG_NS, this.type);
       }
 
       this.$el.id = "psv-marker-" + this.id;
-      this.$el[MarkersPlugin.MARKER_DATA] = this;
+      this.$el[MARKER_DATA] = this;
       this.update(properties);
@@ -289,3 +428,3 @@ }
     _proto.destroy = function destroy() {
-      delete this.$el[MarkersPlugin.MARKER_DATA];
+      delete this.$el[MARKER_DATA];
       delete this.$el;
@@ -769,8 +908,8 @@ delete this.config;
 
-      _this.plugin = _this.psv.getPlugin(MarkersPlugin.id);
+      _this.plugin = _this.psv.getPlugin('markers');
 
       if (_this.plugin) {
-        _this.plugin.on(MarkersPlugin.EVENTS.SHOW_MARKERS, _assertThisInitialized(_this));
+        _this.plugin.on(EVENTS.SHOW_MARKERS, _assertThisInitialized(_this));
 
-        _this.plugin.on(MarkersPlugin.EVENTS.HIDE_MARKERS, _assertThisInitialized(_this));
+        _this.plugin.on(EVENTS.HIDE_MARKERS, _assertThisInitialized(_this));
 
@@ -791,4 +930,4 @@ _this.toggleActive(true);
       if (this.plugin) {
-        this.plugin.off(MarkersPlugin.EVENTS.SHOW_MARKERS, this);
-        this.plugin.off(MarkersPlugin.EVENTS.HIDE_MARKERS, this);
+        this.plugin.off(EVENTS.SHOW_MARKERS, this);
+        this.plugin.off(EVENTS.HIDE_MARKERS, this);
       }
@@ -817,7 +956,7 @@
         // @formatter:off
-        case MarkersPlugin.EVENTS.SHOW_MARKERS:
+        case EVENTS.SHOW_MARKERS:
           this.toggleActive(true);
           break;
 
-        case MarkersPlugin.EVENTS.HIDE_MARKERS:
+        case EVENTS.HIDE_MARKERS:
           this.toggleActive(false);
@@ -849,4 +988,2 @@ break;
 
-  var icon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"9 9 81 81\"><path fill=\"currentColor\" d=\"M37.5 90S9.9 51.9 9.9 36.6 22.2 9 37.5 9s27.6 12.4 27.6 27.6S37.5 90 37.5 90zm0-66.3c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11zM86.7 55H70c-1.8 0-3.3-1.5-3.3-3.3s1.5-3.3 3.3-3.3h16.7c1.8 0 3.3 1.5 3.3 3.3S88.5 55 86.7 55zm0-25h-15a3.3 3.3 0 0 1-3.3-3.3c0-1.8 1.5-3.3 3.3-3.3h15c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3zM56.5 73h30c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3h-30a3.3 3.3 0 0 1-3.3-3.3 3.2 3.2 0 0 1 3.3-3.3z\"/><!--Created by Rohith M S from the Noun Project--></svg>\n";
-
   /**
@@ -872,3 +1009,3 @@ * @summary Navigation bar markers list button class
 
-      _this.plugin = _this.psv.getPlugin(MarkersPlugin.id);
+      _this.plugin = _this.psv.getPlugin('markers');
 
@@ -918,3 +1055,3 @@ if (_this.plugin) {
         case photoSphereViewer.CONSTANTS.EVENTS.OPEN_PANEL:
-          this.toggleActive(e.args[0] === MarkersPlugin.ID_PANEL_MARKERS_LIST);
+          this.toggleActive(e.args[0] === ID_PANEL_MARKERS_LIST);
           break;
@@ -943,3 +1080,3 @@
   MarkersListButton.id = 'markersList';
-  MarkersListButton.icon = icon;
+  MarkersListButton.icon = pinList;
 
@@ -975,40 +1112,6 @@ /**
     /**
-     * @summary Available events
-     * @enum {string}
-     * @constant
+     * @deprecated use the EVENTS constants of the module
      */
 
     /**
-     * @summary Namespace for SVG creation
-     * @type {string}
-     * @constant
-     */
-
-    /**
-     * @summary Property name added to marker elements
-     * @type {string}
-     * @constant
-     */
-
-    /**
-     * @summary Panel identifier for marker content
-     * @type {string}
-     * @constant
-     */
-
-    /**
-     * @summary Panel identifier for markers list
-     * @type {string}
-     * @constant
-     */
-
-    /**
-     * @summary Markers list template
-     * @param {PSV.Marker[]} markers
-     * @param {string} title
-     * @param {string} dataKey
-     * @returns {string}
-     */
-
-    /**
      * @param {PSV.Viewer} psv
@@ -1063,3 +1166,3 @@ * @param {PSV.plugins.MarkersPlugin.Options} [options]
 
-      _this.svgContainer = document.createElementNS(MarkersPlugin.SVG_NS, 'svg');
+      _this.svgContainer = document.createElementNS(SVG_NS, 'svg');
 
@@ -1183,3 +1286,3 @@ _this.svgContainer.setAttribute('class', 'psv-markers-svg-container');
       this.renderMarkers();
-      this.trigger(MarkersPlugin.EVENTS.SHOW_MARKERS);
+      this.trigger(EVENTS.SHOW_MARKERS);
     }
@@ -1195,3 +1298,3 @@ /**
       this.renderMarkers();
-      this.trigger(MarkersPlugin.EVENTS.HIDE_MARKERS);
+      this.trigger(EVENTS.HIDE_MARKERS);
     }
@@ -1226,3 +1329,3 @@ /**
     /**
-     * @summary Return the total number of markers
+     * @summary Returns the total number of markers
      * @returns {number}
@@ -1236,2 +1339,11 @@ */
     /**
+     * @summary Returns all the markers
+     * @return {PSV.plugins.MarkersPlugin.Marker[]}
+     */
+    ;
+
+    _proto.getMarkers = function getMarkers() {
+      return Object.values(this.markers);
+    }
+    /**
      * @summary Adds a new marker to viewer
@@ -1268,2 +1380,4 @@ * @param {PSV.plugins.MarkersPlugin.Properties} properties
         this.__refreshUi();
+
+        this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
       }
@@ -1320,2 +1434,4 @@
         this.__refreshUi();
+
+        this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
       }
@@ -1359,2 +1475,4 @@
         this.__refreshUi();
+
+        this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
       }
@@ -1385,2 +1503,4 @@ }
         this.__refreshUi();
+
+        this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
       }
@@ -1409,2 +1529,4 @@ }
         this.__refreshUi();
+
+        this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
       }
@@ -1428,3 +1550,3 @@ }
       })).then(function () {
-        _this4.trigger(MarkersPlugin.EVENTS.GOTO_MARKER_DONE, marker);
+        _this4.trigger(EVENTS.GOTO_MARKER_DONE, marker);
       });
@@ -1475,7 +1597,7 @@ }
         this.psv.panel.show({
-          id: MarkersPlugin.ID_PANEL_MARKER,
+          id: ID_PANEL_MARKER,
           content: marker.config.content
         });
       } else {
-        this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKER);
+        this.psv.panel.hide(ID_PANEL_MARKER);
       }
@@ -1489,3 +1611,3 @@ }
     _proto.toggleMarkersList = function toggleMarkersList() {
-      if (this.psv.panel.prop.contentId === MarkersPlugin.ID_PANEL_MARKERS_LIST) {
+      if (this.psv.panel.prop.contentId === ID_PANEL_MARKERS_LIST) {
         this.hideMarkersList();
@@ -1511,10 +1633,10 @@ } else {
       });
-      markers = this.change(MarkersPlugin.EVENTS.RENDER_MARKERS_LIST, markers);
+      markers = this.change(EVENTS.RENDER_MARKERS_LIST, markers);
       this.psv.panel.show({
-        id: MarkersPlugin.ID_PANEL_MARKERS_LIST,
-        content: MarkersPlugin.MARKERS_LIST_TEMPLATE(markers, this.psv.config.lang.markers, photoSphereViewer.utils.dasherize(MarkersPlugin.MARKER_DATA)),
+        id: ID_PANEL_MARKERS_LIST,
+        content: MARKERS_LIST_TEMPLATE(markers, this.psv.config.lang.markers, photoSphereViewer.utils.dasherize(MARKER_DATA)),
         noMargin: true,
         clickHandler: function clickHandler(e) {
           var li = e.target ? photoSphereViewer.utils.getClosest(e.target, 'li') : undefined;
-          var markerId = li ? li.dataset[MarkersPlugin.MARKER_DATA] : undefined;
+          var markerId = li ? li.dataset[MARKER_DATA] : undefined;
 
@@ -1524,3 +1646,3 @@ if (markerId) {
 
-            _this5.trigger(MarkersPlugin.EVENTS.SELECT_MARKER_LIST, marker);
+            _this5.trigger(EVENTS.SELECT_MARKER_LIST, marker);
 
@@ -1540,3 +1662,3 @@ _this5.gotoMarker(marker, 1000);
     _proto.hideMarkersList = function hideMarkersList() {
-      this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKERS_LIST);
+      this.psv.panel.hide(ID_PANEL_MARKERS_LIST);
     }
@@ -1576,3 +1698,3 @@ /**
 
-          var _position = _this6.__getMarkerPosition(marker, scale);
+          var _position = _this6.__getMarkerPosition(marker);
 
@@ -1583,19 +1705,10 @@ isVisible = _this6.__isMarkerVisible(marker, _position);
             marker.props.position2D = _position;
+            var transform;
 
             if (marker.isSvg()) {
-              var transform = "translate(" + _position.x + ", " + _position.y + ")";
-
-              if (scale !== 1) {
-                transform += " scale(" + scale + ", " + scale + ")";
-              }
-
+              transform = "translate(" + _position.x + ", " + _position.y + ") scale(" + scale + ", " + scale + ")";
               marker.$el.setAttributeNS(null, 'transform', transform);
             } else {
-              var _transform = "translate3D(" + _position.x + "px, " + _position.y + "px, 0px)";
-
-              if (scale !== 1) {
-                _transform += " scale(" + scale + ", " + scale + ")";
-              }
-
-              marker.$el.style.transform = _transform;
+              transform = "translate3D(" + _position.x + "px, " + _position.y + "px, 0px) scale(" + scale + ", " + scale + ")";
+              marker.$el.style.transform = transform;
             }
@@ -1668,3 +1781,2 @@ }
      * @param {PSV.plugins.MarkersPlugin.Marker} marker
-     * @param {number} [scale=1]
      * @returns {PSV.Point}
@@ -1675,7 +1787,3 @@ * @private
 
-    _proto.__getMarkerPosition = function __getMarkerPosition(marker, scale) {
-      if (scale === void 0) {
-        scale = 1;
-      }
-
+    _proto.__getMarkerPosition = function __getMarkerPosition(marker) {
       if (marker.isPoly()) {
@@ -1685,4 +1793,4 @@ return this.psv.dataHelper.sphericalCoordsToViewerCoords(marker.props.position);
         var position = this.psv.dataHelper.vector3ToViewerCoords(marker.props.positions3D[0]);
-        position.x -= marker.props.width * marker.props.anchor.x * scale;
-        position.y -= marker.props.height * marker.props.anchor.y * scale;
+        position.x -= marker.props.width * marker.props.anchor.x;
+        position.y -= marker.props.height * marker.props.anchor.y;
         return position;
@@ -1779,3 +1887,3 @@ }
       var target2 = closest ? photoSphereViewer.utils.getClosest(target, '.psv-marker') : target;
-      return target2 ? target2[MarkersPlugin.MARKER_DATA] : undefined;
+      return target2 ? target2[MARKER_DATA] : undefined;
     }
@@ -1807,3 +1915,3 @@ /**
         this.prop.hoveringMarker = marker;
-        this.trigger(MarkersPlugin.EVENTS.OVER_MARKER, marker);
+        this.trigger(EVENTS.OVER_MARKER, marker);
 
@@ -1828,3 +1936,3 @@ if (!this.prop.showAllTooltips) {
       if (marker && !(marker.isPoly() && this.__targetOnTooltip(e.relatedTarget, marker.tooltip))) {
-        this.trigger(MarkersPlugin.EVENTS.LEAVE_MARKER, marker);
+        this.trigger(EVENTS.LEAVE_MARKER, marker);
         this.prop.hoveringMarker = null;
@@ -1862,3 +1970,3 @@
         if (!this.prop.hoveringMarker) {
-          this.trigger(MarkersPlugin.EVENTS.OVER_MARKER, marker);
+          this.trigger(EVENTS.OVER_MARKER, marker);
           this.prop.hoveringMarker = marker;
@@ -1871,3 +1979,3 @@ }
       } else if ((_this$prop$hoveringMa = this.prop.hoveringMarker) != null && _this$prop$hoveringMa.isPoly()) {
-        this.trigger(MarkersPlugin.EVENTS.LEAVE_MARKER, this.prop.hoveringMarker);
+        this.trigger(EVENTS.LEAVE_MARKER, this.prop.hoveringMarker);
 
@@ -1912,3 +2020,3 @@ if (!this.prop.showAllTooltips) {
         this.prop.currentMarker = marker;
-        this.trigger(MarkersPlugin.EVENTS.SELECT_MARKER, marker, {
+        this.trigger(EVENTS.SELECT_MARKER, marker, {
           dblclick: dblclick,
@@ -1930,4 +2038,4 @@ rightclick: data.rightclick
       } else if (this.prop.currentMarker) {
-        this.trigger(MarkersPlugin.EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
-        this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKER);
+        this.trigger(EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
+        this.psv.panel.hide(ID_PANEL_MARKER);
         this.prop.currentMarker = null;
@@ -1953,5 +2061,5 @@ }
 
-        if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKERS_LIST)) {
+        if (this.psv.panel.isVisible(ID_PANEL_MARKERS_LIST)) {
           this.psv.panel.hide();
-        } else if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKER)) {
+        } else if (this.psv.panel.isVisible(ID_PANEL_MARKER)) {
           this.psv.panel.hide();
@@ -1963,5 +2071,5 @@ }
 
-        if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKERS_LIST)) {
+        if (this.psv.panel.isVisible(ID_PANEL_MARKERS_LIST)) {
           this.showMarkersList();
-        } else if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKER)) {
+        } else if (this.psv.panel.isVisible(ID_PANEL_MARKER)) {
           this.prop.currentMarker ? this.showMarkerPanel(this.prop.currentMarker) : this.psv.panel.hide();
@@ -1975,87 +2083,5 @@ }
   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',
+  MarkersPlugin.EVENTS = EVENTS;
 
-    /**
-     * @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'
-  };
-  MarkersPlugin.SVG_NS = 'http://www.w3.org/2000/svg';
-  MarkersPlugin.MARKER_DATA = 'psvMarker';
-  MarkersPlugin.ID_PANEL_MARKER = 'marker';
-  MarkersPlugin.ID_PANEL_MARKERS_LIST = 'markersList';
-
-  MarkersPlugin.MARKERS_LIST_TEMPLATE = function (markers, title, dataKey) {
-    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\" 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";
-  };
-
+  exports.EVENTS = EVENTS;
   exports.MarkersPlugin = MarkersPlugin;
@@ -2062,0 +2088,0 @@

dist/plugins/resolution.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.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' ? 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';
+  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.ResolutionPlugin = {}), global.PhotoSphereViewer));
+}(this, (function (exports, photoSphereViewer) { 'use strict';
 
@@ -39,2 +39,18 @@ function _inheritsLoose(subClass, superClass) {
   /**
+   * @summary Available events
+   * @enum {string}
+   * @memberof PSV.plugins.ResolutionPlugin
+   * @constant
+   */
+  var EVENTS = {
+    /**
+     * @event resolution-changed
+     * @memberof PSV.plugins.ResolutionPlugin
+     * @summary Triggered when the resolution is changed
+     * @param {string} resolutionId
+     */
+    RESOLUTION_CHANGED: 'resolution-changed'
+  };
+
+  /**
    * @summary Returns deep equality between objects
@@ -73,3 +89,2 @@ * {@link https://gist.github.com/egardner/efd34f270cc33db67c0246e837689cb9}
 
-  photoSphereViewer.DEFAULTS.lang.resolution = 'Quality';
   /**
@@ -87,2 +102,3 @@ * @typedef {Object} PSV.plugins.ResolutionPlugin.Resolution
 
+  photoSphereViewer.DEFAULTS.lang.resolution = 'Quality';
   /**
@@ -98,6 +114,3 @@ * @summary Adds a setting to choose between multiple resolutions of the panorama.
     /**
-     * @summary Available events
-     * @enum {string}
-     * @memberof PSV.plugins.ResolutionPlugin
-     * @constant
+     * @deprecated use the EVENTS constants of the module
      */
@@ -119,3 +132,3 @@
 
-      _this.settings = settings.SettingsPlugin ? psv.getPlugin(settings.SettingsPlugin) : null;
+      _this.settings = psv.getPlugin('settings');
 
@@ -181,3 +194,3 @@ if (!_this.settings) {
       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.PANORAMA_LOADED, this);
-      this.settings.removeSetting(settings.SettingsPlugin.id);
+      this.settings.removeSetting(ResolutionPlugin.id);
 
@@ -259,3 +272,3 @@ _AbstractPlugin.prototype.destroy.call(this);
         this.prop.resolution = resolution == null ? void 0 : resolution.id;
-        this.trigger(ResolutionPlugin.EVENTS.RESOLUTION_CHANGED, this.prop.resolution);
+        this.trigger(EVENTS.RESOLUTION_CHANGED, this.prop.resolution);
       }
@@ -282,12 +295,5 @@ }
   ResolutionPlugin.id = 'resolution';
-  ResolutionPlugin.EVENTS = {
-    /**
-     * @event resolution-changed
-     * @memberof PSV.plugins.ResolutionPlugin
-     * @summary Triggered when the resolution is changed
-     * @param {string} resolutionId
-     */
-    RESOLUTION_CHANGED: 'resolution-changed'
-  };
+  ResolutionPlugin.EVENTS = EVENTS;
 
+  exports.EVENTS = EVENTS;
   exports.ResolutionPlugin = ResolutionPlugin;
@@ -294,0 +300,0 @@

dist/plugins/settings.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -43,3 +43,70 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
 
+  var switchOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 100\" width=\"2.4em\" height=\"1.2em\"><path fill=\"currentColor\" transform=\"scale(1.88) translate(0, -25)\" d=\"M72 73.2H44A26.4 26.4 0 0044 30h28a21.6 21.6 0 010 43.2M7.2 51.6a21.6 21.6 0 1143.2 0 21.6 21.6 0 01-43.2 0M72 25.2H28.8a26.4 26.4 0 000 52.8H72a26.4 26.4 0 000-52.8\"/><!-- Created by Nikita from the Noun Project --></svg>\n";
+
+  var switchOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 100\" width=\"2.4em\" height=\"1.2em\"><path fill=\"currentColor\" transform=\"scale(1.88) translate(0, -25)\" d=\"M72 73.2A21.6 21.6 0 1172 30a21.6 21.6 0 010 43.2M2.4 51.6A26.4 26.4 0 0028.8 78H72a26.4 26.4 0 000-52.8H28.8A26.4 26.4 0 002.4 51.6\"/><!-- Created by Nikita from the Noun Project --></svg>\n";
+
   /**
+   * @summary Panel identifier for settings content
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var ID_PANEL = 'settings';
+  /**
+   * @summary Property name added to settings items
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var SETTING_DATA = 'settingId';
+  /**
+   * @summary Setting item template, by type
+   * @constant
+   * @private
+   */
+
+  var SETTINGS_TEMPLATE_ = {
+    options: function options(setting, optionsCurrent) {
+      return "\n      <span class=\"psv-settings-item-label\">" + setting.label + "</span>\n      <span class=\"psv-settings-item-value\">" + optionsCurrent(setting) + "</span>\n      <span class=\"psv-settings-item-icon\">" + chevron + "</span>\n    ";
+    },
+    toggle: function toggle(setting) {
+      return "\n      <span class=\"psv-settings-item-label\">" + setting.label + "</span>\n      <span class=\"psv-settings-item-value\">" + (setting.active() ? switchOn : switchOff) + "</span>\n    ";
+    }
+  };
+  /**
+   * @summary Settings list template
+   * @param {PSV.plugins.SettingsPlugin.Setting[]} settings
+   * @param {string} title
+   * @param {string} dataKey
+   * @param {function} optionsCurrent
+   * @returns {string}
+   * @constant
+   * @private
+   */
+
+  var SETTINGS_TEMPLATE = function SETTINGS_TEMPLATE(settings, title, dataKey, optionsCurrent) {
+    return "\n<div class=\"psv-panel-menu\">\n  <h1 class=\"psv-panel-menu-title\">" + icon + " " + title + "</h1>\n  <ul class=\"psv-panel-menu-list\">\n    " + settings.map(function (s) {
+      return "\n      <li class=\"psv-panel-menu-item\" data-" + dataKey + "=\"" + s.id + "\">\n        " + SETTINGS_TEMPLATE_[s.type](s, optionsCurrent) + "\n      </li>\n    ";
+    }).join('') + "\n  </ul>\n</div>\n";
+  };
+  /**
+   * @summary Settings options template
+   * @param {PSV.plugins.SettingsPlugin.OptionsSetting} setting
+   * @param {string} title
+   * @param {string} dataKey
+   * @param {function} optionActive
+   * @returns {string}
+   * @constant
+   * @private
+   */
+
+  var SETTING_OPTIONS_TEMPLATE = function SETTING_OPTIONS_TEMPLATE(setting, title, dataKey, optionActive) {
+    return "\n<div class=\"psv-panel-menu\">\n  <h1 class=\"psv-panel-menu-title\">" + icon + " " + title + "</h1>\n  <ul class=\"psv-panel-menu-list\">\n    <li class=\"psv-panel-menu-item psv-settings-item--header\" data-" + dataKey + "=\"__back\">\n      <span class=\"psv-settings-item-icon\">" + chevron + "</span>\n      <span class=\"psv-settings-item-label\">" + setting.label + "</span>\n    </li>\n    " + setting.options().map(function (s) {
+      return "\n      <li class=\"psv-panel-menu-item\" data-" + dataKey + "=\"" + s.id + "\">\n        <span class=\"psv-settings-item-icon\">" + (optionActive(s) ? check : '') + "</span>\n        <span class=\"psv-settings-item-value\">" + s.label + "</span>\n      </li>\n    ";
+    }).join('') + "\n  </ul>\n</div>\n";
+  };
+
+  /**
    * @summary Navigation bar settings button class
@@ -66,3 +133,3 @@ * @extends PSV.buttons.AbstractButton
 
-      _this.plugin = _this.psv.getPlugin(SettingsPlugin.id);
+      _this.plugin = _this.psv.getPlugin('settings');
 
@@ -111,3 +178,3 @@ if (_this.plugin) {
         case photoSphereViewer.CONSTANTS.EVENTS.OPEN_PANEL:
-          this.toggleActive(e.args[0] === SettingsPlugin.ID_PANEL);
+          this.toggleActive(e.args[0] === ID_PANEL);
           break;
@@ -138,9 +205,2 @@
 
-  var switchOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 100\" width=\"2.4em\" height=\"1.2em\"><path fill=\"currentColor\" transform=\"scale(1.88) translate(0, -25)\" d=\"M72 73.2H44A26.4 26.4 0 0044 30h28a21.6 21.6 0 010 43.2M7.2 51.6a21.6 21.6 0 1143.2 0 21.6 21.6 0 01-43.2 0M72 25.2H28.8a26.4 26.4 0 000 52.8H72a26.4 26.4 0 000-52.8\"/><!-- Created by Nikita from the Noun Project --></svg>\n";
-
-  var switchOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 100\" width=\"2.4em\" height=\"1.2em\"><path fill=\"currentColor\" transform=\"scale(1.88) translate(0, -25)\" d=\"M72 73.2A21.6 21.6 0 1172 30a21.6 21.6 0 010 43.2M2.4 51.6A26.4 26.4 0 0028.8 78H72a26.4 26.4 0 000-52.8H28.8A26.4 26.4 0 002.4 51.6\"/><!-- Created by Nikita from the Noun Project --></svg>\n";
-
-  photoSphereViewer.DEFAULTS.navbar.splice(photoSphereViewer.DEFAULTS.navbar.indexOf('fullscreen'), 0, SettingsButton.id);
-  photoSphereViewer.DEFAULTS.lang[SettingsButton.id] = 'Settings';
-  photoSphereViewer.registerButton(SettingsButton);
   /**
@@ -177,3 +237,7 @@ * @typedef {Object} PSV.plugins.SettingsPlugin.Setting
    */
+  // add settings button
 
+  photoSphereViewer.DEFAULTS.navbar.splice(photoSphereViewer.DEFAULTS.navbar.indexOf('fullscreen'), 0, SettingsButton.id);
+  photoSphereViewer.DEFAULTS.lang[SettingsButton.id] = 'Settings';
+  photoSphereViewer.registerButton(SettingsButton);
   /**
@@ -189,36 +253,2 @@ * @summary Adds a button to access various settings.
     /**
-     * @summary Panel identifier for settings content
-     * @type {string}
-     * @constant
-     */
-
-    /**
-     * @summary Property name added to settings items
-     * @type {string}
-     * @constant
-     */
-
-    /**
-     * @summary Settings list template
-     * @param {PSV.plugins.SettingsPlugin.Setting[]} settings
-     * @param {string} title
-     * @param {string} dataKey
-     * @param {function} optionsCurrent
-     * @returns {string}
-     */
-
-    /**
-     * @summary Setting item template, by type
-     */
-
-    /**
-     * @summary Settings options template
-     * @param {PSV.plugins.SettingsPlugin.OptionsSetting} setting
-     * @param {string} title
-     * @param {string} dataKey
-     * @param {function} optionActive
-     * @returns {string}
-     */
-
-    /**
      * @param {PSV.Viewer} psv
@@ -263,3 +293,3 @@ */
 
-      if (!SettingsPlugin.SETTINGS_TEMPLATE_[setting.type]) {
+      if (!SETTINGS_TEMPLATE_[setting.type]) {
         throw new photoSphereViewer.PSVError('Unsupported setting type');
@@ -270,3 +300,3 @@ }
 
-      if (this.psv.panel.prop.contentId === SettingsPlugin.ID_PANEL) {
+      if (this.psv.panel.prop.contentId === ID_PANEL) {
         this.showSettings();
@@ -296,3 +326,3 @@ }
 
-        if (this.psv.panel.prop.contentId === SettingsPlugin.ID_PANEL) {
+        if (this.psv.panel.prop.contentId === ID_PANEL) {
           this.showSettings();
@@ -308,3 +338,3 @@ }
     _proto.toggleSettings = function toggleSettings() {
-      if (this.psv.panel.prop.contentId === SettingsPlugin.ID_PANEL) {
+      if (this.psv.panel.prop.contentId === ID_PANEL) {
         this.hideSettings();
@@ -321,3 +351,3 @@ } else {
     _proto.hideSettings = function hideSettings() {
-      this.psv.panel.hide(SettingsPlugin.ID_PANEL);
+      this.psv.panel.hide(ID_PANEL);
     }
@@ -333,4 +363,4 @@ /**
       this.psv.panel.show({
-        id: SettingsPlugin.ID_PANEL,
-        content: SettingsPlugin.SETTINGS_TEMPLATE(this.settings, this.psv.config.lang[SettingsButton.id], photoSphereViewer.utils.dasherize(SettingsPlugin.SETTING_DATA), function (setting) {
+        id: ID_PANEL,
+        content: SETTINGS_TEMPLATE(this.settings, this.psv.config.lang[SettingsButton.id], photoSphereViewer.utils.dasherize(SETTING_DATA), function (setting) {
           // retrocompatibility with "current" returning a label
@@ -346,3 +376,3 @@ var current = setting.current();
           var li = e.target ? photoSphereViewer.utils.getClosest(e.target, 'li') : undefined;
-          var settingId = li ? li.dataset[SettingsPlugin.SETTING_DATA] : undefined;
+          var settingId = li ? li.dataset[SETTING_DATA] : undefined;
 
@@ -384,4 +414,4 @@ var setting = _this2.settings.find(function (s) {
       this.psv.panel.show({
-        id: SettingsPlugin.ID_PANEL,
-        content: SettingsPlugin.SETTING_OPTIONS_TEMPLATE(setting, this.psv.config.lang[SettingsButton.id], photoSphereViewer.utils.dasherize(SettingsPlugin.SETTING_DATA), function (option) {
+        id: ID_PANEL,
+        content: SETTING_OPTIONS_TEMPLATE(setting, this.psv.config.lang[SettingsButton.id], photoSphereViewer.utils.dasherize(SETTING_DATA), function (option) {
           // retrocompatibility with options having an "active" flag
@@ -393,3 +423,3 @@ return 'active' in option ? option.active : option.id === current;
           var li = e.target ? photoSphereViewer.utils.getClosest(e.target, 'li') : undefined;
-          var optionId = li ? li.dataset[SettingsPlugin.SETTING_DATA] : undefined;
+          var optionId = li ? li.dataset[SETTING_DATA] : undefined;
 
@@ -410,26 +440,3 @@ if (optionId === '__back') {
   SettingsPlugin.id = 'settings';
-  SettingsPlugin.ID_PANEL = 'settings';
-  SettingsPlugin.SETTING_DATA = 'settingId';
 
-  SettingsPlugin.SETTINGS_TEMPLATE = function (settings, title, dataKey, optionsCurrent) {
-    return "\n<div class=\"psv-panel-menu\">\n  <h1 class=\"psv-panel-menu-title\">" + icon + " " + title + "</h1>\n  <ul class=\"psv-panel-menu-list\">\n    " + settings.map(function (s) {
-      return "\n      <li class=\"psv-panel-menu-item\" data-" + dataKey + "=\"" + s.id + "\">\n        " + SettingsPlugin.SETTINGS_TEMPLATE_[s.type](s, optionsCurrent) + "\n      </li>\n    ";
-    }).join('') + "\n  </ul>\n</div>\n";
-  };
-
-  SettingsPlugin.SETTINGS_TEMPLATE_ = {
-    options: function options(setting, optionsCurrent) {
-      return "\n      <span class=\"psv-settings-item-label\">" + setting.label + "</span> \n      <span class=\"psv-settings-item-value\">" + optionsCurrent(setting) + "</span> \n      <span class=\"psv-settings-item-icon\">" + chevron + "</span>\n    ";
-    },
-    toggle: function toggle(setting) {
-      return "\n      <span class=\"psv-settings-item-label\">" + setting.label + "</span>\n      <span class=\"psv-settings-item-value\">" + (setting.active() ? switchOn : switchOff) + "</span>\n    ";
-    }
-  };
-
-  SettingsPlugin.SETTING_OPTIONS_TEMPLATE = function (setting, title, dataKey, optionActive) {
-    return "\n<div class=\"psv-panel-menu\">\n  <h1 class=\"psv-panel-menu-title\">" + icon + " " + title + "</h1>\n  <ul class=\"psv-panel-menu-list\">\n    <li class=\"psv-panel-menu-item psv-settings-item--header\" data-" + dataKey + "=\"__back\">\n      <span class=\"psv-settings-item-icon\">" + chevron + "</span>\n      <span class=\"psv-settings-item-label\">" + setting.label + "</span>\n    </li>\n    " + setting.options().map(function (s) {
-      return "\n      <li class=\"psv-panel-menu-item\" data-" + dataKey + "=\"" + s.id + "\">\n        <span class=\"psv-settings-item-icon\">" + (optionActive(s) ? check : '') + "</span>\n        <span class=\"psv-settings-item-value\">" + s.label + "</span>\n      </li>\n    ";
-    }).join('') + "\n  </ul>\n";
-  };
-
   exports.SettingsPlugin = SettingsPlugin;
@@ -436,0 +443,0 @@

dist/plugins/stereo.d.ts

 import { AbstractPlugin, Viewer } from 'photo-sphere-viewer';
 import { Event } from 'uevent';
 
+declare const EVENTS: {
+  STEREO_UPDATED: 'stereo-updated',
+};
+
 /**
@@ -9,6 +13,2 @@ * @summary Adds stereo view on mobile devices
 
-  static EVENTS: {
-    STEREO_UPDATED: 'stereo-updated',
-  };
-
   constructor(psv: Viewer);
@@ -44,2 +44,2 @@
 
-export { StereoPlugin };
+export { EVENTS, StereoPlugin };

dist/plugins/stereo.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.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' ? 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';
+  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.StereoPlugin = {}), global.THREE, global.PhotoSphereViewer));
+}(this, (function (exports, three, photoSphereViewer) { 'use strict';
 
@@ -74,2 +74,25 @@ function _inheritsLoose(subClass, superClass) {
 
+  /**
+   * @summary Available events
+   * @enum {string}
+   * @memberof PSV.plugins.StereoPlugin
+   * @constant
+   */
+  var EVENTS = {
+    /**
+     * @event stereo-updated
+     * @memberof PSV.plugins.StereoPlugin
+     * @summary Triggered when the stereo view is enabled/disabled
+     * @param {boolean} enabled
+     */
+    STEREO_UPDATED: 'stereo-updated'
+  };
+  /**
+   * @type {string}
+   * @constant
+   * @private
+   */
+
+  var ID_OVERLAY_PLEASE_ROTATE = 'pleaseRotate';
+
   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";
@@ -101,6 +124,6 @@
 
-      _this.plugin = _this.psv.getPlugin(StereoPlugin.id);
+      _this.plugin = _this.psv.getPlugin('stereo');
 
       if (_this.plugin) {
-        _this.plugin.on(StereoPlugin.EVENTS.STEREO_UPDATED, _assertThisInitialized(_this));
+        _this.plugin.on(EVENTS.STEREO_UPDATED, _assertThisInitialized(_this));
       }
@@ -119,3 +142,3 @@
       if (this.plugin) {
-        this.plugin.off(StereoPlugin.EVENTS.STEREO_UPDATED, this);
+        this.plugin.off(EVENTS.STEREO_UPDATED, this);
       }
@@ -146,3 +169,3 @@
     _proto.handleEvent = function handleEvent(e) {
-      if (e.type === StereoPlugin.EVENTS.STEREO_UPDATED) {
+      if (e.type === EVENTS.STEREO_UPDATED) {
         this.toggleActive(e.args[0]);
@@ -188,15 +211,6 @@ }
     /**
-     * @summary Identifier of the overlay "please rotate your screen"
-     * @type {string}
-     * @constant
+     * @deprecated use the EVENTS constants of the module
      */
 
     /**
-     * @summary Available events
-     * @enum {string}
-     * @memberof PSV.plugins.StereoPlugin
-     * @constant
-     */
-
-    /**
      * @param {PSV.Viewer} psv
@@ -214,3 +228,3 @@ */
 
-      _this.gyroscope = gyroscope.GyroscopePlugin ? psv.getPlugin(gyroscope.GyroscopePlugin) : null;
+      _this.gyroscope = psv.getPlugin('gyroscope');
 
@@ -328,3 +342,3 @@ if (!_this.gyroscope) {
 
-        _this2.trigger(StereoPlugin.EVENTS.STEREO_UPDATED, true);
+        _this2.trigger(EVENTS.STEREO_UPDATED, true);
 
@@ -367,3 +381,3 @@ _this2.psv.notification.show({
         this.gyroscope.stop();
-        this.trigger(StereoPlugin.EVENTS.STEREO_UPDATED, false);
+        this.trigger(EVENTS.STEREO_UPDATED, false);
       }
@@ -437,3 +451,3 @@ }
           _this4.psv.overlay.show({
-            id: StereoPlugin.ID_OVERLAY_PLEASE_ROTATE,
+            id: ID_OVERLAY_PLEASE_ROTATE,
             image: mobileRotateIcon,
@@ -474,3 +488,3 @@ text: _this4.psv.config.lang.pleaseRotate[0],
       } else {
-        this.psv.overlay.hide(StereoPlugin.ID_OVERLAY_PLEASE_ROTATE);
+        this.psv.overlay.hide(ID_OVERLAY_PLEASE_ROTATE);
       }
@@ -482,13 +496,5 @@ };
   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'
-  };
+  StereoPlugin.EVENTS = EVENTS;
 
+  exports.EVENTS = EVENTS;
   exports.StereoPlugin = StereoPlugin;
@@ -495,0 +501,0 @@

dist/plugins/visible-range.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -41,3 +41,3 @@ * @copyright 2015-2021 Damien "Mistic" Sorel
    * @property {double[]|string[]} [longitudeRange] - longitude range as two angles
-   * @property {boolean} [usePanoData] - use panoData as visible range, you can also manually call `setRangesFromPanoData`
+   * @property {boolean} [usePanoData=false] - use panoData as visible range, you can also manually call `setRangesFromPanoData`
    */
@@ -44,0 +44,0 @@

dist/viewer-compat.js

 /*!
-* Photo Sphere Viewer 4.3.0
+* Photo Sphere Viewer 4.4.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -4,0 +4,0 @@ * @copyright 2015-2021 Damien "Mistic" Sorel

package.json

 {
   "name": "photo-sphere-viewer",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "A JavaScript library to display Photo Sphere panoramas",
@@ -36,3 +36,3 @@ "homepage": "https://photo-sphere-viewer.js.org",
   "dependencies": {
-    "three": "^0.133.1",
+    "three": "^0.134.0",
     "uevent": "~2.0.1"
@@ -42,2 +42,3 @@ },
     "@babel/core": "^7.15.0",
+    "@babel/eslint-parser": "^7.16.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
@@ -50,2 +51,3 @@ "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -56,14 +58,12 @@ "@vuepress/plugin-active-header-links": "^1.8.2",
     "autoprefixer": "^10.3.3",
-    "axios": "^0.23.0",
-    "babel-eslint": "^10.0.3",
+    "axios": "^0.24.0",
     "cpx": "^1.5.0",
     "date-fns": "^2.23.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.25.2",
     "jsdoc": "^3.6.7",
     "live-server": "^1.2.0",
-    "marked": "^3.0.2",
+    "marked": "^4.0.0",
     "mocha": "^9.1.1",
-    "ngrok": "^4.0.0",
     "nosleep.js": "^0.12.0",
@@ -73,3 +73,2 @@ "npm-run-all": "^4.1.3",
     "postcss-banner": "^4.0.1",
-    "promise-polyfill": "^8.2.0",
     "raw-loader": "^4.0.2",
@@ -102,3 +101,3 @@ "rollup": "^2.56.0",
     "test:mocha": "mocha --require @babel/register --recursive \"src/**/*.spec.js\"",
-    "test:eslint": "eslint src --ignore-path .gitignore --ignore-pattern \"*.spec.js\"",
+    "test:eslint": "eslint src --ignore-path .gitignore",
     "test:sasslint": "stylelint \"src/**/*.scss\"",
@@ -108,3 +107,2 @@ "test:types": "cd tests && npm run test",
     "start:doc": "vuepress dev docs",
-    "start:remote": "ngrok http 8080",
     "dev:serve": "live-server --watch=dist,example --open=example",
@@ -111,0 +109,0 @@ "dev:watch": "npm run compile:prepare && npm run compile:rollup -- --watch"

src/adapters/cubemap/index.js

 import * as THREE from 'three';
 import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from '../..';
 
+
 /**
  * @typedef {Object} PSV.adapters.CubemapAdapter.Cubemap
  * @summary Object defining a cubemap
- * @property {string} top
- * @property {string} right
- * @property {string} bottom
  * @property {string} left
  * @property {string} front
+ * @property {string} right
  * @property {string} back
+ * @property {string} top
+ * @property {string} bottom
  */
 
+
 const CUBE_VERTICES = 8;
@@ -19,2 +21,3 @@ const CUBE_MAP = [0, 2, 4, 5, 3, 1];
 
+
 /**
@@ -21,0 +24,0 @@ * @summary Adapter for cubemaps

src/adapters/equirectangular-tiles/index.js

@@ -6,2 +6,3 @@ import * as THREE from 'three';
 
+
 /**
@@ -40,2 +41,3 @@ * @callback TileUrl
 
+
 const SPHERE_SEGMENTS = 64;
@@ -295,2 +297,6 @@ const NB_VERTICES = 3 * (SPHERE_SEGMENTS * 2 + (SPHERE_SEGMENTS / 2 - 2) * SPHERE_SEGMENTS * 2);
 
+    if (!panorama) {
+      return;
+    }
+
     const tilesToLoad = [];
@@ -409,3 +415,5 @@ const tilePosition = new THREE.Vector3();
 
-    return new Promise((resolve, reject) => this.loader.load(url, resolve, undefined, reject))
+    return new Promise((resolve, reject) => {
+      this.loader.load(url, resolve, undefined, reject);
+    })
       .then((image) => {
@@ -412,0 +420,0 @@ if (!task.isCancelled()) {

src/adapters/equirectangular/index.js

@@ -8,4 +8,6 @@ import * as THREE from 'three';
 
+
 const SPHERE_SEGMENTS = 64;
 
+
 /**
@@ -12,0 +14,0 @@ * @summary Adapter for equirectangular panoramas

src/buttons/AbstractButton.js

@@ -46,3 +46,3 @@ import { AbstractComponent } from '../components/AbstractComponent';
    * @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
+   * @param {boolean} [tabbable=true] - `true` if the button is accessible with the keyboard
    */
@@ -49,0 +49,0 @@ constructor(navbar, className = '', collapsable = false, tabbable = true) {

src/buttons/CustomButton.js

@@ -16,3 +16,3 @@ import { addClasses } from '../utils';
   constructor(navbar, config) {
-    super(navbar, 'psv-custom-button', config.collapsable !== false);
+    super(navbar, 'psv-custom-button', config.collapsable !== false, config.tabbable !== false);
 
@@ -19,0 +19,0 @@ /**

src/components/AbstractComponent.js

@@ -120,3 +120,3 @@ /**
   /**
-   * @summary Check if the component is visible
+   * @summary Checks if the component is visible
    * @returns {boolean}
@@ -123,0 +123,0 @@ */

src/components/Loader.js

@@ -6,3 +6,3 @@ import { SYSTEM } from '../data/system';
 /**
- * @summary Loader class
+ * @summary Loader component
  * @extends PSV.components.AbstractComponent
@@ -9,0 +9,0 @@ * @memberof PSV.components

src/components/Navbar.js

@@ -53,3 +53,3 @@ import { AutorotateButton } from '../buttons/AutorotateButton';
 /**
- * @summary Navigation bar class
+ * @summary Navigation bar component
  * @extends PSV.components.AbstractComponent
@@ -84,2 +84,3 @@ * @memberof PSV.components
    * @param {string|Array<string|PSV.NavbarCustomButton>} buttons
+   * @throws {PSV.PSVError} when a button is unknown
    */
@@ -130,2 +131,3 @@ setButtons(buttons) {
    * @param {string} html
+   * @throws {PSV.PSVError} when the caption element is not present
    */
@@ -132,0 +134,0 @@ setCaption(html) {

src/components/Notification.js

@@ -5,3 +5,3 @@ import { EVENTS } from '../data/constants';
 /**
- * @summary Notification class
+ * @summary Notification component
  * @extends PSV.components.AbstractComponent
@@ -8,0 +8,0 @@ * @memberof PSV.components

src/components/Overlay.js

@@ -7,3 +7,3 @@ import { EVENTS, KEY_CODES } from '../data/constants';
 /**
- * @summary Overlay class
+ * @summary Overlay component
  * @extends PSV.components.AbstractComponent
@@ -107,2 +107,4 @@ * @memberof PSV.components
    * @override
+   * @summary This method is not supported
+   * @throws {PSV.PSVError} always
    */
@@ -109,0 +111,0 @@ toggle() {

src/components/Panel.js

@@ -16,3 +16,3 @@ import { EVENTS, KEY_CODES } from '../data/constants';
 /**
- * @summary Panel class
+ * @summary Panel component
  * @extends PSV.components.AbstractComponent
@@ -132,2 +132,4 @@ * @memberof PSV.components
    * @override
+   * @summary This method is not supported
+   * @throws {PSV.PSVError} always
    */
@@ -144,3 +146,3 @@ toggle() {
    * @param {boolean} [config.noMargin=false] - remove the default margins
-   * @param {string} [config.width] - initial width, if not specified the default width will be used
+   * @param {string} [config.width] - initial width
    * @param {Function} [config.clickHandler] - called when the user clicks inside the panel or presses the Enter key while an element focused
@@ -147,0 +149,0 @@ * @fires PSV.open-panel

src/components/Tooltip.js

 import { EVENTS } from '../data/constants';
 import { PSVError } from '../PSVError';
-import { addClasses, parsePosition } from '../utils';
+import { addClasses, cleanPosition } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
 
-const LEFT_MAP = { 0: 'left', 0.5: 'center', 1: 'right' };
-const TOP_MAP = { 0: 'top', 0.5: 'center', 1: 'bottom' };
 const STATE = { NONE: 0, SHOWING: 1, HIDING: 2, READY: 3 };
@@ -31,3 +29,4 @@
 /**
- * @summary Tooltip class
+ * @summary Tooltip component
+ * @description Never instanciate tooltips directly use {@link PSV.services.TooltipRenderer} instead
  * @extends PSV.components.AbstractComponent
@@ -118,2 +117,4 @@ * @memberof PSV.components
    * @override
+   * @summary This method is not supported
+   * @throws {PSV.PSVError} always
    */
@@ -173,24 +174,5 @@ toggle() {
 
-    if (!config.position) {
-      config.position = ['top', 'center'];
-    }
-
-    // parse position
-    if (typeof config.position === 'string') {
-      const tempPos = parsePosition(config.position);
-
-      if (!(tempPos.x in LEFT_MAP) || !(tempPos.y in TOP_MAP)) {
-        throw new PSVError(`Unable to parse tooltip position "${config.position}"`);
-      }
-
-      config.position = [TOP_MAP[tempPos.y], LEFT_MAP[tempPos.x]];
-    }
-
-    if (config.position[0] === 'center' && config.position[1] === 'center') {
-      throw new PSVError('Unable to parse tooltip position "center center"');
-    }
-
     // compute size
     const style = {
-      posClass : config.position.slice(),
+      posClass : cleanPosition(config.position, 'top center', false),
       width    : this.prop.width,
@@ -197,0 +179,0 @@ height   : this.prop.height,

src/data/config.js

@@ -18,2 +18,3 @@ import { AbstractAdapter } from '../adapters/AbstractAdapter';
   adapter            : null,
+  plugins            : [],
   caption            : null,
@@ -78,3 +79,2 @@ loadingImg         : null,
   },
-  plugins            : [],
 };
@@ -117,10 +117,14 @@
     if (!adapter) {
-      return [EquirectangularAdapter];
+      adapter = [EquirectangularAdapter];
     }
     else if (Array.isArray(adapter)) {
-      return [pluginInterop(adapter[0], AbstractAdapter), adapter[1]];
+      adapter = [pluginInterop(adapter[0], AbstractAdapter), adapter[1]];
     }
     else {
-      return [pluginInterop(adapter, AbstractAdapter)];
+      adapter = [pluginInterop(adapter, AbstractAdapter)];
     }
+    if (!adapter[0]) {
+      throw new PSVError('Un undefined value with given for adapter.');
+    }
+    return adapter;
   },
@@ -196,9 +200,12 @@ defaultLong    : (defaultLong) => {
         if (Array.isArray(plugin)) {
-          return [pluginInterop(plugin[0], AbstractPlugin), plugin[1]];
+          plugin = [pluginInterop(plugin[0], AbstractPlugin), plugin[1]];
         }
         else {
-          return [pluginInterop(plugin, AbstractPlugin)];
+          plugin = [pluginInterop(plugin, AbstractPlugin)];
         }
-      })
-      .filter(plugin => !!plugin[0]);
+        if (!plugin[0]) {
+          throw new PSVError('Un undefined value was given for plugins.');
+        }
+        return plugin;
+      });
   },
@@ -205,0 +212,0 @@ };

src/data/system.js

@@ -7,3 +7,3 @@ import { PSVError } from '../PSVError';
  * @memberOf PSV
- * @property {boolean} loaded - Indicates if the system has been loaded yet
+ * @property {boolean} loaded - Indicates if the system data has been loaded
  * @property {Function} load - Loads the system if not already loaded
@@ -10,0 +10,0 @@ * @property {number} pixelRatio

src/index.js

@@ -50,3 +50,3 @@ import { Animation } from './Animation';
  * @typedef {Object} PSV.CssSize
- * @summary Object defining a size in CSS (px, % or auto)
+ * @summary Object defining a size in CSS
  * @property {string} [width]
@@ -58,2 +58,3 @@ * @property {string} [height]
  * @typedef {Object} PSV.SphereCorrection
+ * @summary Object defining angular corrections to a sphere
  * @property {number} pan
@@ -72,9 +73,5 @@ * @property {number} tilt
 /**
- * @typedef {PSV.Position} PSV.ExtendedPosition
+ * @typedef {PSV.Position | PSV.Point} PSV.ExtendedPosition
  * @summary Object defining a spherical or texture position
  * @description A position that can be expressed either in spherical coordinates (radians or degrees) or in texture coordinates (pixels)
- * @property {number} [longitude]
- * @property {number} [latitude]
- * @property {number} [x]
- * @property {number} [y]
  */
@@ -85,3 +82,3 @@
  * @summary Object defining animation options
- * @property {number|string} speed - animation speed or duration (in milliseconds)
+ * @property {number|string} speed - animation speed or duration in milliseconds
  * @property {number} [zoom] - new zoom level between 0 and 100
@@ -99,5 +96,5 @@ */
  * @property {number} croppedY
- * @property {number} poseHeading
- * @property {number} posePitch
- * @property {number} poseRoll
+ * @property {number} [poseHeading]
+ * @property {number} [posePitch]
+ * @property {number} [poseRoll]
  */
@@ -117,6 +114,6 @@
  * @property {boolean|number} [transition=1500] - duration of the transition between all and new panorama
- * @property {boolean} [showLoader=true] - show the loader
+ * @property {boolean} [showLoader=true] - show the loader while loading the new panorama
  * @property {number} [zoom] - new zoom level between 0 and 100
  * @property {PSV.SphereCorrection} [sphereCorrection] - new sphere correction to apply to the panorama
- * @property {PSV.PanoData | PSV.PanoDataProvider} [panoData] - new panorama data used for this panorama
+ * @property {PSV.PanoData | PSV.PanoDataProvider} [panoData] - new data used for this panorama
  */
@@ -141,4 +138,4 @@
  * @property {number} latitude - position in spherical coordinates
- * @property {number} [textureX] - position on the texture, undefined for cubemaps
- * @property {number} [textureY] - position on the texture, undefined for cubemaps
+ * @property {number} [textureX] - position on the texture, if applicable
+ * @property {number} [textureY] - position on the texture, if applicable
  * @property {PSV.plugins.MarkersPlugin.Marker} [marker] - clicked marker
@@ -158,2 +155,3 @@ */
  * @property {boolean} [collapsable=true]
+ * @property {boolean} [tabbable=true]
  */
@@ -163,3 +161,3 @@
  * @typedef {Object} PSV.Options
- * @summary Viewer options, see {@link http://photo-sphere-viewer.js.org/guide/config.html}
+ * @summary Viewer options, see {@link https://photo-sphere-viewer.js.org/guide/config.html}
  */
@@ -166,0 +164,0 @@

src/plugins/autorotate-keypoints/index.js

 import { AbstractPlugin, CONSTANTS, PSVError, utils } from '../..';
 
+
 /**
@@ -18,11 +19,8 @@ * @typedef {PSV.ExtendedPosition|string|Object} PSV.plugins.AutorotateKeypointsPlugin.Keypoints
 
-/**
- * @summary Number of steps between each points
- * @type {number}
- * @constant
- * @private
- */
+
 const NUM_STEPS = 16;
 
-const serializePt = position => [position.longitude, position.latitude];
+function serializePt(position) {
+  return [position.longitude, position.latitude];
+}
 
@@ -72,2 +70,7 @@
     /**
+     * @type {PSV.plugins.AutorotateKeypointsPlugin.Keypoints[]} keypoints
+     */
+    this.keypoints = null;
+
+    /**
      * @type {PSV.plugins.MarkersPlugin}
@@ -86,2 +89,5 @@ * @private
 
+  /**
+   * @package
+   */
   destroy() {
@@ -91,2 +97,3 @@ this.psv.off(CONSTANTS.EVENTS.AUTOROTATE, this);
 
+    delete this.markers;
     delete this.keypoints;
@@ -98,2 +105,5 @@ delete this.state;
 
+  /**
+   * @private
+   */
   handleEvent(e) {
@@ -100,0 +110,0 @@ if (e.type === CONSTANTS.EVENTS.AUTOROTATE) {

src/plugins/gyroscope/GyroscopeButton.js

 import { AbstractButton } from '../..';
 import compass from './compass.svg';
-import { GyroscopePlugin } from './index';
+import { EVENTS } from './constants';
 
@@ -26,6 +26,6 @@ /**
      */
-    this.plugin = this.psv.getPlugin(GyroscopePlugin.id);
+    this.plugin = this.psv.getPlugin('gyroscope');
 
     if (this.plugin) {
-      this.plugin.on(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, this);
+      this.plugin.on(EVENTS.GYROSCOPE_UPDATED, this);
     }
@@ -39,3 +39,3 @@ }
     if (this.plugin) {
-      this.plugin.off(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, this);
+      this.plugin.off(EVENTS.GYROSCOPE_UPDATED, this);
     }
@@ -61,3 +61,3 @@
   handleEvent(e) {
-    if (e.type === GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED) {
+    if (e.type === EVENTS.GYROSCOPE_UPDATED) {
       this.toggleActive(e.args[0]);
@@ -64,0 +64,0 @@ }

src/plugins/gyroscope/index.js

 import * as THREE from 'three';
-import { DeviceOrientationControls } from 'three/examples/jsm/controls/DeviceOrientationControls';
 import { AbstractPlugin, CONSTANTS, DEFAULTS, registerButton, utils } from '../..';
+import { EVENTS } from './constants';
+import { DeviceOrientationControls } from './DeviceOrientationControls';
 import { GyroscopeButton } from './GyroscopeButton';
@@ -19,4 +20,9 @@
 
+
+export { EVENTS } from './constants';
+
+
 const direction = new THREE.Vector3();
 
+
 /**
@@ -32,16 +38,5 @@ * @summary Adds gyroscope controls on mobile devices
   /**
-   * @summary Available events
-   * @enum {string}
-   * @memberof PSV.plugins.GyroscopePlugin
-   * @constant
+   * @deprecated use the EVENTS constants of the module
    */
-  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',
-  };
+  static EVENTS = EVENTS;
 
@@ -81,3 +76,3 @@ /**
     /**
-     * @member {external:THREE.DeviceOrientationControls}
+     * @member {DeviceOrientationControls}
      * @private
@@ -184,3 +179,3 @@ */
 
-        this.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, true);
+        this.trigger(EVENTS.GYROSCOPE_UPDATED, true);
       });
@@ -200,3 +195,3 @@ }
 
-      this.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, false);
+      this.trigger(EVENTS.GYROSCOPE_UPDATED, false);
     }
@@ -203,0 +198,0 @@ }

src/plugins/markers/index.js

 import * as THREE from 'three';
 import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, registerButton, utils } from '../..';
+import { EVENTS, ID_PANEL_MARKER, ID_PANEL_MARKERS_LIST, MARKER_DATA, MARKERS_LIST_TEMPLATE, SVG_NS } from './constants';
 import { Marker } from './Marker';
 import { MarkersButton } from './MarkersButton';
 import { MarkersListButton } from './MarkersListButton';
-import icon from './pin-list.svg';
 import './style.scss';
 
+
 /**
@@ -31,2 +32,5 @@ * @typedef {Object} PSV.plugins.MarkersPlugin.Options
 
+export { EVENTS } from './constants';
+
+
 /**
@@ -42,123 +46,7 @@ * @summary Displays various markers on the viewer
   /**
-   * @summary Available events
-   * @enum {string}
-   * @constant
+   * @deprecated use the EVENTS constants of the module
    */
-  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',
-  };
+  static EVENTS = EVENTS;
 
   /**
-   * @summary Namespace for SVG creation
-   * @type {string}
-   * @constant
-   */
-  static SVG_NS = 'http://www.w3.org/2000/svg';
-
-  /**
-   * @summary Property name added to marker elements
-   * @type {string}
-   * @constant
-   */
-  static MARKER_DATA = 'psvMarker';
-
-  /**
-   * @summary Panel identifier for marker content
-   * @type {string}
-   * @constant
-   */
-  static ID_PANEL_MARKER = 'marker';
-
-  /**
-   * @summary Panel identifier for markers list
-   * @type {string}
-   * @constant
-   */
-  static ID_PANEL_MARKERS_LIST = 'markersList';
-
-  /**
-   * @summary Markers list template
-   * @param {PSV.Marker[]} markers
-   * @param {string} title
-   * @param {string} dataKey
-   * @returns {string}
-   */
-  static MARKERS_LIST_TEMPLATE = (markers, title, dataKey) => `
-<div class="psv-panel-menu psv-panel-menu--stripped">
-  <h1 class="psv-panel-menu-title">${icon} ${title}</h1>
-  <ul class="psv-panel-menu-list">
-    ${markers.map(marker => `
-    <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>` : ''}
-      <span class="psv-panel-menu-item-label">${marker.getListContent()}</span>
-    </li>
-    `).join('')}
-  </ul>
-</div>
-`;
-
-  /**
    * @param {PSV.Viewer} psv
@@ -210,3 +98,3 @@ * @param {PSV.plugins.MarkersPlugin.Options} [options]
      */
-    this.svgContainer = document.createElementNS(MarkersPlugin.SVG_NS, 'svg');
+    this.svgContainer = document.createElementNS(SVG_NS, 'svg');
     this.svgContainer.setAttribute('class', 'psv-markers-svg-container');
@@ -293,3 +181,3 @@ this.container.appendChild(this.svgContainer);
 
-    this.trigger(MarkersPlugin.EVENTS.SHOW_MARKERS);
+    this.trigger(EVENTS.SHOW_MARKERS);
   }
@@ -306,3 +194,3 @@
 
-    this.trigger(MarkersPlugin.EVENTS.HIDE_MARKERS);
+    this.trigger(EVENTS.HIDE_MARKERS);
   }
@@ -335,3 +223,3 @@
   /**
-   * @summary Return the total number of markers
+   * @summary Returns the total number of markers
    * @returns {number}
@@ -344,2 +232,10 @@ */
   /**
+   * @summary Returns all the markers
+   * @return {PSV.plugins.MarkersPlugin.Marker[]}
+   */
+  getMarkers() {
+    return Object.values(this.markers);
+  }
+
+  /**
    * @summary Adds a new marker to viewer
@@ -370,2 +266,4 @@ * @param {PSV.plugins.MarkersPlugin.Properties} properties
       this.__refreshUi();
+
+      this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
     }
@@ -415,2 +313,4 @@
       this.__refreshUi();
+
+      this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
     }
@@ -451,2 +351,4 @@
       this.__refreshUi();
+
+      this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
     }
@@ -468,2 +370,4 @@ }
       this.__refreshUi();
+
+      this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
     }
@@ -482,2 +386,4 @@ }
       this.__refreshUi();
+
+      this.trigger(EVENTS.SET_MARKERS, this.getMarkers());
     }
@@ -501,3 +407,3 @@ }
       .then(() => {
-        this.trigger(MarkersPlugin.EVENTS.GOTO_MARKER_DONE, marker);
+        this.trigger(EVENTS.GOTO_MARKER_DONE, marker);
       });
@@ -542,3 +448,3 @@ }
       this.psv.panel.show({
-        id     : MarkersPlugin.ID_PANEL_MARKER,
+        id     : ID_PANEL_MARKER,
         content: marker.config.content,
@@ -548,3 +454,3 @@ });
     else {
-      this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKER);
+      this.psv.panel.hide(ID_PANEL_MARKER);
     }
@@ -557,3 +463,3 @@ }
   toggleMarkersList() {
-    if (this.psv.panel.prop.contentId === MarkersPlugin.ID_PANEL_MARKERS_LIST) {
+    if (this.psv.panel.prop.contentId === ID_PANEL_MARKERS_LIST) {
       this.hideMarkersList();
@@ -578,10 +484,10 @@ }
 
-    markers = this.change(MarkersPlugin.EVENTS.RENDER_MARKERS_LIST, markers);
+    markers = this.change(EVENTS.RENDER_MARKERS_LIST, markers);
 
     this.psv.panel.show({
-      id          : MarkersPlugin.ID_PANEL_MARKERS_LIST,
-      content     : MarkersPlugin.MARKERS_LIST_TEMPLATE(
+      id          : ID_PANEL_MARKERS_LIST,
+      content     : MARKERS_LIST_TEMPLATE(
         markers,
         this.psv.config.lang.markers,
-        utils.dasherize(MarkersPlugin.MARKER_DATA)
+        utils.dasherize(MARKER_DATA)
       ),
@@ -591,3 +497,3 @@ noMargin    : true,
         const li = e.target ? utils.getClosest(e.target, 'li') : undefined;
-        const markerId = li ? li.dataset[MarkersPlugin.MARKER_DATA] : undefined;
+        const markerId = li ? li.dataset[MARKER_DATA] : undefined;
 
@@ -597,3 +503,3 @@ if (markerId) {
 
-          this.trigger(MarkersPlugin.EVENTS.SELECT_MARKER_LIST, marker);
+          this.trigger(EVENTS.SELECT_MARKER_LIST, marker);
 
@@ -611,3 +517,3 @@ this.gotoMarker(marker, 1000);
   hideMarkersList() {
-    this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKERS_LIST);
+    this.psv.panel.hide(ID_PANEL_MARKERS_LIST);
   }
@@ -642,3 +548,3 @@
         const scale = marker.getScale(this.psv.getZoomLevel());
-        const position = this.__getMarkerPosition(marker, scale);
+        const position = this.__getMarkerPosition(marker);
         isVisible = this.__isMarkerVisible(marker, position);
@@ -649,16 +555,9 @@
 
+          let transform;
           if (marker.isSvg()) {
-            let transform = `translate(${position.x}, ${position.y})`;
-            if (scale !== 1) {
-              transform += ` scale(${scale}, ${scale})`;
-            }
-
+            transform = `translate(${position.x}, ${position.y}) scale(${scale}, ${scale})`;
             marker.$el.setAttributeNS(null, 'transform', transform);
           }
           else {
-            let transform = `translate3D(${position.x}px, ${position.y}px, 0px)`;
-            if (scale !== 1) {
-              transform += ` scale(${scale}, ${scale})`;
-            }
-
+            transform = `translate3D(${position.x}px, ${position.y}px, 0px) scale(${scale}, ${scale})`;
             marker.$el.style.transform = transform;
@@ -739,7 +638,6 @@ }
    * @param {PSV.plugins.MarkersPlugin.Marker} marker
-   * @param {number} [scale=1]
    * @returns {PSV.Point}
    * @private
    */
-  __getMarkerPosition(marker, scale = 1) {
+  __getMarkerPosition(marker) {
     if (marker.isPoly()) {
@@ -751,4 +649,4 @@ return this.psv.dataHelper.sphericalCoordsToViewerCoords(marker.props.position);
 
-      position.x -= marker.props.width * marker.props.anchor.x * scale;
-      position.y -= marker.props.height * marker.props.anchor.y * scale;
+      position.x -= marker.props.width * marker.props.anchor.x;
+      position.y -= marker.props.height * marker.props.anchor.y;
 
@@ -843,3 +741,3 @@ return position;
     const target2 = closest ? utils.getClosest(target, '.psv-marker') : target;
-    return target2 ? target2[MarkersPlugin.MARKER_DATA] : undefined;
+    return target2 ? target2[MARKER_DATA] : undefined;
   }
@@ -870,3 +768,3 @@
 
-      this.trigger(MarkersPlugin.EVENTS.OVER_MARKER, marker);
+      this.trigger(EVENTS.OVER_MARKER, marker);
 
@@ -890,3 +788,3 @@ if (!this.prop.showAllTooltips) {
     if (marker && !(marker.isPoly() && this.__targetOnTooltip(e.relatedTarget, marker.tooltip))) {
-      this.trigger(MarkersPlugin.EVENTS.LEAVE_MARKER, marker);
+      this.trigger(EVENTS.LEAVE_MARKER, marker);
 
@@ -922,3 +820,3 @@ this.prop.hoveringMarker = null;
       if (!this.prop.hoveringMarker) {
-        this.trigger(MarkersPlugin.EVENTS.OVER_MARKER, marker);
+        this.trigger(EVENTS.OVER_MARKER, marker);
 
@@ -933,3 +831,3 @@ this.prop.hoveringMarker = marker;
     else if (this.prop.hoveringMarker?.isPoly()) {
-      this.trigger(MarkersPlugin.EVENTS.LEAVE_MARKER, this.prop.hoveringMarker);
+      this.trigger(EVENTS.LEAVE_MARKER, this.prop.hoveringMarker);
 
@@ -973,3 +871,3 @@ if (!this.prop.showAllTooltips) {
 
-      this.trigger(MarkersPlugin.EVENTS.SELECT_MARKER, marker, {
+      this.trigger(EVENTS.SELECT_MARKER, marker, {
         dblclick  : dblclick,
@@ -993,5 +891,5 @@ rightclick: data.rightclick,
     else if (this.prop.currentMarker) {
-      this.trigger(MarkersPlugin.EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
+      this.trigger(EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
 
-      this.psv.panel.hide(MarkersPlugin.ID_PANEL_MARKER);
+      this.psv.panel.hide(ID_PANEL_MARKER);
 
@@ -1015,6 +913,6 @@ this.prop.currentMarker = null;
 
-      if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKERS_LIST)) {
+      if (this.psv.panel.isVisible(ID_PANEL_MARKERS_LIST)) {
         this.psv.panel.hide();
       }
-      else if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKER)) {
+      else if (this.psv.panel.isVisible(ID_PANEL_MARKER)) {
         this.psv.panel.hide();
@@ -1027,6 +925,6 @@ }
 
-      if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKERS_LIST)) {
+      if (this.psv.panel.isVisible(ID_PANEL_MARKERS_LIST)) {
         this.showMarkersList();
       }
-      else if (this.psv.panel.isVisible(MarkersPlugin.ID_PANEL_MARKER)) {
+      else if (this.psv.panel.isVisible(ID_PANEL_MARKER)) {
         this.prop.currentMarker ? this.showMarkerPanel(this.prop.currentMarker) : this.psv.panel.hide();
@@ -1033,0 +931,0 @@ }

src/plugins/markers/Marker.js

 import { CONSTANTS, PSVError, utils } from '../..';
-import { MarkersPlugin } from './index';
+import { MARKER_DATA, SVG_NS } from './constants';
 import { getPolygonCenter, getPolylineCenter } from './utils';
@@ -28,3 +28,3 @@
  * @typedef {Object} PSV.plugins.MarkersPlugin.Properties
- * @summary Marker properties, see {@link http://photo-sphere-viewer.js.org/plugins/plugin-markers.html#markers-options}
+ * @summary Marker properties, see {@link https://photo-sphere-viewer.js.org/plugins/plugin-markers.html#markers-options}
  */
@@ -129,13 +129,13 @@
     else if (this.isPolygon()) {
-      this.$el = document.createElementNS(MarkersPlugin.SVG_NS, 'polygon');
+      this.$el = document.createElementNS(SVG_NS, 'polygon');
     }
     else if (this.isPolyline()) {
-      this.$el = document.createElementNS(MarkersPlugin.SVG_NS, 'polyline');
+      this.$el = document.createElementNS(SVG_NS, 'polyline');
     }
     else {
-      this.$el = document.createElementNS(MarkersPlugin.SVG_NS, this.type);
+      this.$el = document.createElementNS(SVG_NS, this.type);
     }
 
     this.$el.id = `psv-marker-${this.id}`;
-    this.$el[MarkersPlugin.MARKER_DATA] = this;
+    this.$el[MARKER_DATA] = this;
 
@@ -149,3 +149,3 @@ this.update(properties);
   destroy() {
-    delete this.$el[MarkersPlugin.MARKER_DATA];
+    delete this.$el[MARKER_DATA];
     delete this.$el;
@@ -152,0 +152,0 @@ delete this.config;

src/plugins/markers/MarkersButton.js

 import { AbstractButton } from '../..';
-import { MarkersPlugin } from './index';
+import { EVENTS } from './constants';
 import pin from './pin.svg';
@@ -24,7 +24,7 @@
      */
-    this.plugin = this.psv.getPlugin(MarkersPlugin.id);
+    this.plugin = this.psv.getPlugin('markers');
 
     if (this.plugin) {
-      this.plugin.on(MarkersPlugin.EVENTS.SHOW_MARKERS, this);
-      this.plugin.on(MarkersPlugin.EVENTS.HIDE_MARKERS, this);
+      this.plugin.on(EVENTS.SHOW_MARKERS, this);
+      this.plugin.on(EVENTS.HIDE_MARKERS, this);
 
@@ -40,4 +40,4 @@ this.toggleActive(true);
     if (this.plugin) {
-      this.plugin.off(MarkersPlugin.EVENTS.SHOW_MARKERS, this);
-      this.plugin.off(MarkersPlugin.EVENTS.HIDE_MARKERS, this);
+      this.plugin.off(EVENTS.SHOW_MARKERS, this);
+      this.plugin.off(EVENTS.HIDE_MARKERS, this);
     }
@@ -64,4 +64,4 @@
       // @formatter:off
-      case MarkersPlugin.EVENTS.SHOW_MARKERS: this.toggleActive(true); break;
-      case MarkersPlugin.EVENTS.HIDE_MARKERS: this.toggleActive(false); break;
+      case EVENTS.SHOW_MARKERS: this.toggleActive(true); break;
+      case EVENTS.HIDE_MARKERS: this.toggleActive(false); break;
       // @formatter:on
@@ -68,0 +68,0 @@ }

src/plugins/markers/MarkersListButton.js

 import { AbstractButton, CONSTANTS } from '../..';
-import { MarkersPlugin } from './index';
+import { ID_PANEL_MARKERS_LIST } from './constants';
 import pinList from './pin-list.svg';
@@ -24,3 +24,3 @@
      */
-    this.plugin = this.psv.getPlugin(MarkersPlugin.id);
+    this.plugin = this.psv.getPlugin('markers');
 
@@ -61,3 +61,3 @@ if (this.plugin) {
       // @formatter:off
-      case CONSTANTS.EVENTS.OPEN_PANEL:  this.toggleActive(e.args[0] === MarkersPlugin.ID_PANEL_MARKERS_LIST); break;
+      case CONSTANTS.EVENTS.OPEN_PANEL:  this.toggleActive(e.args[0] === ID_PANEL_MARKERS_LIST); break;
       case CONSTANTS.EVENTS.CLOSE_PANEL: this.toggleActive(false); break;
@@ -64,0 +64,0 @@ // @formatter:on

src/plugins/resolution/index.js

 import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError } from '../..';
-import { SettingsPlugin } from '../settings';
+import { EVENTS } from './constants';
 import { deepEqual } from './utils';
 
 
-DEFAULTS.lang.resolution = 'Quality';
-
-
 /**
@@ -21,2 +18,9 @@ * @typedef {Object} PSV.plugins.ResolutionPlugin.Resolution
 
+
+DEFAULTS.lang.resolution = 'Quality';
+
+
+export { EVENTS } from './constants';
+
+
 /**
@@ -32,16 +36,5 @@ * @summary Adds a setting to choose between multiple resolutions of the panorama.
   /**
-   * @summary Available events
-   * @enum {string}
-   * @memberof PSV.plugins.ResolutionPlugin
-   * @constant
+   * @deprecated use the EVENTS constants of the module
    */
-  static EVENTS = {
-    /**
-     * @event resolution-changed
-     * @memberof PSV.plugins.ResolutionPlugin
-     * @summary Triggered when the resolution is changed
-     * @param {string} resolutionId
-     */
-    RESOLUTION_CHANGED: 'resolution-changed',
-  };
+  static EVENTS = EVENTS;
 
@@ -60,3 +53,3 @@ /**
      */
-    this.settings = SettingsPlugin ? psv.getPlugin(SettingsPlugin) : null;
+    this.settings = psv.getPlugin('settings');
 
@@ -111,3 +104,3 @@ if (!this.settings) {
 
-    this.settings.removeSetting(SettingsPlugin.id);
+    this.settings.removeSetting(ResolutionPlugin.id);
 
@@ -174,3 +167,3 @@ super.destroy();
       this.prop.resolution = resolution?.id;
-      this.trigger(ResolutionPlugin.EVENTS.RESOLUTION_CHANGED, this.prop.resolution);
+      this.trigger(EVENTS.RESOLUTION_CHANGED, this.prop.resolution);
     }
@@ -177,0 +170,0 @@ }

src/plugins/settings/index.js

 import { AbstractPlugin, DEFAULTS, PSVError, registerButton, utils } from '../..';
-import check from './check.svg';
-import chevron from './chevron.svg';
-import icon from './settings.svg';
+import { ID_PANEL, SETTING_DATA, SETTING_OPTIONS_TEMPLATE, SETTINGS_TEMPLATE, SETTINGS_TEMPLATE_ } from './constants';
 import { SettingsButton } from './SettingsButton';
 import './style.scss';
-import switchOff from './switch-off.svg';
-import switchOn from './switch-on.svg';
 
 
-// add settings button
-DEFAULTS.navbar.splice(DEFAULTS.navbar.indexOf('fullscreen'), 0, SettingsButton.id);
-DEFAULTS.lang[SettingsButton.id] = 'Settings';
-registerButton(SettingsButton);
-
 /**
@@ -48,2 +39,9 @@ * @typedef {Object} PSV.plugins.SettingsPlugin.Setting
 
+
+// add settings button
+DEFAULTS.navbar.splice(DEFAULTS.navbar.indexOf('fullscreen'), 0, SettingsButton.id);
+DEFAULTS.lang[SettingsButton.id] = 'Settings';
+registerButton(SettingsButton);
+
+
 /**
@@ -59,77 +57,2 @@ * @summary Adds a button to access various settings.
   /**
-   * @summary Panel identifier for settings content
-   * @type {string}
-   * @constant
-   */
-  static ID_PANEL = 'settings';
-
-  /**
-   * @summary Property name added to settings items
-   * @type {string}
-   * @constant
-   */
-  static SETTING_DATA = 'settingId';
-
-  /**
-   * @summary Settings list template
-   * @param {PSV.plugins.SettingsPlugin.Setting[]} settings
-   * @param {string} title
-   * @param {string} dataKey
-   * @param {function} optionsCurrent
-   * @returns {string}
-   */
-  static SETTINGS_TEMPLATE = (settings, title, dataKey, optionsCurrent) => `
-<div class="psv-panel-menu">
-  <h1 class="psv-panel-menu-title">${icon} ${title}</h1>
-  <ul class="psv-panel-menu-list">
-    ${settings.map(s => `
-      <li class="psv-panel-menu-item" data-${dataKey}="${s.id}">
-        ${SettingsPlugin.SETTINGS_TEMPLATE_[s.type](s, optionsCurrent)}
-      </li>
-    `).join('')}
-  </ul>
-</div>
-`;
-
-  /**
-   * @summary Setting item template, by type
-   */
-  static SETTINGS_TEMPLATE_ = {
-    options: (setting, optionsCurrent) => `
-      <span class="psv-settings-item-label">${setting.label}</span> 
-      <span class="psv-settings-item-value">${optionsCurrent(setting)}</span> 
-      <span class="psv-settings-item-icon">${chevron}</span>
-    `,
-    toggle : setting => `
-      <span class="psv-settings-item-label">${setting.label}</span>
-      <span class="psv-settings-item-value">${setting.active() ? switchOn : switchOff}</span>
-    `,
-  };
-
-  /**
-   * @summary Settings options template
-   * @param {PSV.plugins.SettingsPlugin.OptionsSetting} setting
-   * @param {string} title
-   * @param {string} dataKey
-   * @param {function} optionActive
-   * @returns {string}
-   */
-  static SETTING_OPTIONS_TEMPLATE = (setting, title, dataKey, optionActive) => `
-<div class="psv-panel-menu">
-  <h1 class="psv-panel-menu-title">${icon} ${title}</h1>
-  <ul class="psv-panel-menu-list">
-    <li class="psv-panel-menu-item psv-settings-item--header" data-${dataKey}="__back">
-      <span class="psv-settings-item-icon">${chevron}</span>
-      <span class="psv-settings-item-label">${setting.label}</span>
-    </li>
-    ${setting.options().map(s => `
-      <li class="psv-panel-menu-item" data-${dataKey}="${s.id}">
-        <span class="psv-settings-item-icon">${optionActive(s) ? check : ''}</span>
-        <span class="psv-settings-item-value">${s.label}</span>
-      </li>
-    `).join('')}
-  </ul>
-`;
-
-  /**
    * @param {PSV.Viewer} psv
@@ -165,3 +88,3 @@ */
     }
-    if (!SettingsPlugin.SETTINGS_TEMPLATE_[setting.type]) {
+    if (!SETTINGS_TEMPLATE_[setting.type]) {
       throw new PSVError('Unsupported setting type');
@@ -172,3 +95,3 @@ }
 
-    if (this.psv.panel.prop.contentId === SettingsPlugin.ID_PANEL) {
+    if (this.psv.panel.prop.contentId === ID_PANEL) {
       this.showSettings();
@@ -195,3 +118,3 @@ }
 
-      if (this.psv.panel.prop.contentId === SettingsPlugin.ID_PANEL) {
+      if (this.psv.panel.prop.contentId === ID_PANEL) {
         this.showSettings();
@@ -206,3 +129,3 @@ }
   toggleSettings() {
-    if (this.psv.panel.prop.contentId === SettingsPlugin.ID_PANEL) {
+    if (this.psv.panel.prop.contentId === ID_PANEL) {
       this.hideSettings();
@@ -219,3 +142,3 @@ }
   hideSettings() {
-    this.psv.panel.hide(SettingsPlugin.ID_PANEL);
+    this.psv.panel.hide(ID_PANEL);
   }
@@ -228,7 +151,7 @@
     this.psv.panel.show({
-      id          : SettingsPlugin.ID_PANEL,
-      content     : SettingsPlugin.SETTINGS_TEMPLATE(
+      id          : ID_PANEL,
+      content     : SETTINGS_TEMPLATE(
         this.settings,
         this.psv.config.lang[SettingsButton.id],
-        utils.dasherize(SettingsPlugin.SETTING_DATA),
+        utils.dasherize(SETTING_DATA),
         (setting) => { // retrocompatibility with "current" returning a label
@@ -243,3 +166,3 @@ const current = setting.current();
         const li = e.target ? utils.getClosest(e.target, 'li') : undefined;
-        const settingId = li ? li.dataset[SettingsPlugin.SETTING_DATA] : undefined;
+        const settingId = li ? li.dataset[SETTING_DATA] : undefined;
         const setting = this.settings.find(s => s.id === settingId);
@@ -275,7 +198,7 @@
     this.psv.panel.show({
-      id          : SettingsPlugin.ID_PANEL,
-      content     : SettingsPlugin.SETTING_OPTIONS_TEMPLATE(
+      id          : ID_PANEL,
+      content     : SETTING_OPTIONS_TEMPLATE(
         setting,
         this.psv.config.lang[SettingsButton.id],
-        utils.dasherize(SettingsPlugin.SETTING_DATA),
+        utils.dasherize(SETTING_DATA),
         (option) => { // retrocompatibility with options having an "active" flag
@@ -288,3 +211,3 @@ return 'active' in option ? option.active : option.id === current;
         const li = e.target ? utils.getClosest(e.target, 'li') : undefined;
-        const optionId = li ? li.dataset[SettingsPlugin.SETTING_DATA] : undefined;
+        const optionId = li ? li.dataset[SETTING_DATA] : undefined;
 
@@ -291,0 +214,0 @@ if (optionId === '__back') {

src/plugins/settings/SettingsButton.js

 import { AbstractButton, CONSTANTS } from '../..';
-import { SettingsPlugin } from './index';
+import { ID_PANEL } from './constants';
 import icon from './settings.svg';
@@ -26,3 +26,3 @@
      */
-    this.plugin = this.psv.getPlugin(SettingsPlugin.id);
+    this.plugin = this.psv.getPlugin('settings');
 
@@ -63,3 +63,3 @@ if (this.plugin) {
       // @formatter:off
-      case CONSTANTS.EVENTS.OPEN_PANEL:  this.toggleActive(e.args[0] === SettingsPlugin.ID_PANEL); break;
+      case CONSTANTS.EVENTS.OPEN_PANEL:  this.toggleActive(e.args[0] === ID_PANEL); break;
       case CONSTANTS.EVENTS.CLOSE_PANEL: this.toggleActive(false); break;
@@ -66,0 +66,0 @@ // @formatter:on

src/plugins/stereo/index.js

 import { StereoEffect } from 'three/examples/jsm/effects/StereoEffect';
 import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, registerButton, utils } from '../..';
-import { GyroscopePlugin } from '../gyroscope';
+import { EVENTS, ID_OVERLAY_PLEASE_ROTATE } from './constants';
 import mobileRotateIcon from './mobile-rotate.svg';
@@ -24,2 +24,5 @@ import { StereoButton } from './StereoButton';
 
+export { EVENTS } from './constants';
+
+
 /**
@@ -35,25 +38,7 @@ * @summary Adds stereo view on mobile devices
   /**
-   * @summary Identifier of the overlay "please rotate your screen"
-   * @type {string}
-   * @constant
+   * @deprecated use the EVENTS constants of the module
    */
-  static ID_OVERLAY_PLEASE_ROTATE = 'pleaseRotate';
+  static EVENTS = EVENTS;
 
   /**
-   * @summary Available events
-   * @enum {string}
-   * @memberof PSV.plugins.StereoPlugin
-   * @constant
-   */
-  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',
-  };
-
-  /**
    * @param {PSV.Viewer} psv
@@ -69,3 +54,3 @@ */
      */
-    this.gyroscope = GyroscopePlugin ? psv.getPlugin(GyroscopePlugin) : null;
+    this.gyroscope = psv.getPlugin('gyroscope');
 
@@ -170,3 +155,3 @@ if (!this.gyroscope) {
 
-      this.trigger(StereoPlugin.EVENTS.STEREO_UPDATED, true);
+      this.trigger(EVENTS.STEREO_UPDATED, true);
 
@@ -205,3 +190,3 @@ this.psv.notification.show({
 
-      this.trigger(StereoPlugin.EVENTS.STEREO_UPDATED, false);
+      this.trigger(EVENTS.STEREO_UPDATED, false);
     }
@@ -269,3 +254,3 @@ }
         this.psv.overlay.show({
-          id     : StereoPlugin.ID_OVERLAY_PLEASE_ROTATE,
+          id     : ID_OVERLAY_PLEASE_ROTATE,
           image  : mobileRotateIcon,
@@ -301,3 +286,3 @@ text   : this.psv.config.lang.pleaseRotate[0],
     else {
-      this.psv.overlay.hide(StereoPlugin.ID_OVERLAY_PLEASE_ROTATE);
+      this.psv.overlay.hide(ID_OVERLAY_PLEASE_ROTATE);
     }
@@ -304,0 +289,0 @@ }

src/plugins/stereo/StereoButton.js

 import { AbstractButton } from '../..';
-import { StereoPlugin } from './index';
+import { EVENTS } from './constants';
 import stereo from './stereo.svg';
@@ -26,6 +26,6 @@
      */
-    this.plugin = this.psv.getPlugin(StereoPlugin.id);
+    this.plugin = this.psv.getPlugin('stereo');
 
     if (this.plugin) {
-      this.plugin.on(StereoPlugin.EVENTS.STEREO_UPDATED, this);
+      this.plugin.on(EVENTS.STEREO_UPDATED, this);
     }
@@ -39,3 +39,3 @@ }
     if (this.plugin) {
-      this.plugin.off(StereoPlugin.EVENTS.STEREO_UPDATED, this);
+      this.plugin.off(EVENTS.STEREO_UPDATED, this);
     }
@@ -61,3 +61,3 @@
   handleEvent(e) {
-    if (e.type === StereoPlugin.EVENTS.STEREO_UPDATED) {
+    if (e.type === EVENTS.STEREO_UPDATED) {
       this.toggleActive(e.args[0]);
@@ -64,0 +64,0 @@ }

src/plugins/visible-range/index.js

 import * as THREE from 'three';
 import { AbstractPlugin, Animation, CONSTANTS, utils } from '../..';
 
+
 /**
@@ -8,5 +9,6 @@ * @typedef {Object} PSV.plugins.VisibleRangePlugin.Options
  * @property {double[]|string[]} [longitudeRange] - longitude range as two angles
- * @property {boolean} [usePanoData] - use panoData as visible range, you can also manually call `setRangesFromPanoData`
+ * @property {boolean} [usePanoData=false] - use panoData as visible range, you can also manually call `setRangesFromPanoData`
  */
 
+
 /**
@@ -13,0 +15,0 @@ * @summary Locks visible longitude and/or latitude

src/services/DataHelper.js

@@ -74,2 +74,3 @@ import * as THREE from 'three';
    * @returns {PSV.Position}
+   * @throws {PSV.PSVError} when the current adapter does not support texture coordinates
    */
@@ -85,2 +86,4 @@ textureCoordsToSphericalCoords(point) {
 
+    // TODO apply the inverse transformation from sphereCorrection/panoData[pose]
+
     return {
@@ -96,2 +99,3 @@ longitude: relativeX >= Math.PI ? relativeX - Math.PI : relativeX + Math.PI,
    * @returns {PSV.Point}
+   * @throws {PSV.PSVError} when the current adapter does not support texture coordinates
    */
@@ -150,11 +154,6 @@ sphericalCoordsToTextureCoords(position) {
   viewerCoordsToVector3(viewerPoint) {
-    vector2.x = 2 * viewerPoint.x / this.prop.size.width - 1;
-    vector2.y = -2 * viewerPoint.y / this.prop.size.height + 1;
+    const sphereIntersect = this.getIntersection(viewerPoint, 'psvSphere');
 
-    this.psv.renderer.raycaster.setFromCamera(vector2, this.psv.renderer.camera);
-
-    const intersects = this.psv.renderer.raycaster.intersectObjects(this.psv.renderer.scene.children, true);
-
-    if (intersects.length === 1) {
-      return intersects[0].point;
+    if (sphereIntersect) {
+      return sphereIntersect.point;
     }
@@ -191,2 +190,18 @@ else {
   /**
+   * @summary Returns the first intersection with the cursor and having specific data
+   * @param {PSV.Point} viewerPoint
+   * @param {string} objectDataName
+   * @return {external:THREE.Intersection}
+   */
+  getIntersection(viewerPoint, objectDataName) {
+    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(vector2, this.psv.renderer.camera);
+
+    const intersects = this.psv.renderer.raycaster.intersectObjects(this.psv.renderer.scene.children, true);
+    return intersects.find(i => i.object.userData?.[objectDataName]);
+  }
+
+  /**
    * @summary Converts x/y to latitude/longitude if present and ensure boundaries
@@ -197,3 +212,3 @@ * @param {PSV.ExtendedPosition} position
   cleanPosition(position) {
-    if ('x' in position && 'y' in position) {
+    if (position.x !== undefined && position.y !== undefined) {
       return this.textureCoordsToSphericalCoords(position);
@@ -200,0 +215,0 @@ }

src/services/EventsHandler.js

@@ -38,2 +38,3 @@ import * as THREE from 'three';
      * @member {Object}
+     * @property {number} moveThreshold - computed threshold based on device pixel ratio
      * @property {boolean} moving - is the user moving
@@ -56,2 +57,3 @@ * @property {boolean} zooming - is the user zooming
     this.state = {
+      moveThreshold    : MOVE_THRESHOLD * SYSTEM.pixelRatio,
       keyboardEnabled  : false,
@@ -539,3 +541,4 @@ moving           : false,
       // move threshold to trigger a click
-      if (Math.abs(evt.clientX - this.state.startMouseX) < MOVE_THRESHOLD && Math.abs(evt.clientY - this.state.startMouseY) < MOVE_THRESHOLD) {
+      if (Math.abs(evt.clientX - this.state.startMouseX) < this.state.moveThreshold
+        && Math.abs(evt.clientY - this.state.startMouseY) < this.state.moveThreshold) {
         this.__click(evt);
@@ -649,4 +652,4 @@ this.state.moving = false;
       else {
-        if (Math.abs(this.state.dblclickData.clientX - data.clientX) < MOVE_THRESHOLD
-          && Math.abs(this.state.dblclickData.clientY - data.clientY) < MOVE_THRESHOLD) {
+        if (Math.abs(this.state.dblclickData.clientX - data.clientX) < this.state.moveThreshold
+          && Math.abs(this.state.dblclickData.clientY - data.clientY) < this.state.moveThreshold) {
           this.psv.trigger(EVENTS.DOUBLE_CLICK, this.state.dblclickData);
@@ -653,0 +656,0 @@ }

src/services/Renderer.js

@@ -22,8 +22,2 @@ import * as THREE from 'three';
     /**
-     * @member {number}
-     * @private
-     */
-    this.mainReqid = undefined;
-
-    /**
      * @member {external:THREE.WebGLRenderer}
@@ -33,3 +27,5 @@ * @readonly
      */
-    this.renderer = null;
+    this.renderer = new THREE.WebGLRenderer({ alpha: true });
+    this.renderer.setPixelRatio(SYSTEM.pixelRatio);
+    this.renderer.domElement.className = 'psv-canvas';
 
@@ -41,3 +37,3 @@ /**
      */
-    this.scene = null;
+    this.scene = new THREE.Scene();
 
@@ -49,3 +45,3 @@ /**
      */
-    this.camera = null;
+    this.camera = new THREE.PerspectiveCamera(50, 16 / 9, 1, 2 * SPHERE_RADIUS);
 
@@ -57,3 +53,4 @@ /**
      */
-    this.mesh = null;
+    this.mesh = this.psv.adapter.createMesh();
+    this.mesh.userData = { psvSphere: true };
 
@@ -65,3 +62,5 @@ /**
      */
-    this.meshContainer = null;
+    this.meshContainer = new THREE.Group();
+    this.meshContainer.add(this.mesh);
+    this.scene.add(this.meshContainer);
 
@@ -73,3 +72,3 @@ /**
      */
-    this.raycaster = null;
+    this.raycaster = new THREE.Raycaster();
 
@@ -83,2 +82,8 @@ /**
     /**
+     * @member {boolean}
+     * @private
+     */
+    this.ready = false;
+
+    /**
      * @member {HTMLElement}
@@ -92,9 +97,8 @@ * @readonly
     this.canvasContainer.style.cursor = this.psv.config.mousemove ? 'move' : 'default';
+    this.canvasContainer.appendChild(this.renderer.domElement);
     this.psv.container.appendChild(this.canvasContainer);
 
-    psv.on(EVENTS.SIZE_UPDATED, (e, size) => {
-      if (this.renderer) {
-        this.renderer.setSize(size.width, size.height);
-      }
-    });
+    psv.on(EVENTS.SIZE_UPDATED, this);
+    psv.on(EVENTS.ZOOM_UPDATED, this);
+    psv.on(EVENTS.POSITION_UPDATED, this);
 
@@ -113,10 +117,6 @@ psv.on(EVENTS.CONFIG_CHANGED, () => {
     // cancel render loop
-    if (this.mainReqid) {
-      window.cancelAnimationFrame(this.mainReqid);
-    }
+    this.renderer.setAnimationLoop(null);
 
     // destroy ThreeJS view
-    if (this.scene) {
-      this.__cleanTHREEScene(this.scene);
-    }
+    this.__cleanTHREEScene(this.scene);
 
@@ -138,2 +138,19 @@ // remove container
   /**
+   * @summary Handles events
+   * @param {Event} evt
+   * @private
+   */
+  handleEvent(evt) {
+    /* eslint-disable */
+    switch (evt.type) {
+      // @formatter:off
+      case EVENTS.SIZE_UPDATED:     this.__onSizeUpdated(); break;
+      case EVENTS.ZOOM_UPDATED:     this.__onZoomUpdated(); break;
+      case EVENTS.POSITION_UPDATED: this.__onPositionUpdated(); break;
+      // @formatter:on
+    }
+    /* eslint-enable */
+  }
+
+  /**
    * @summary Hides the viewer
@@ -153,6 +170,40 @@ */
   /**
+   * @summary Updates the size of the renderer and the aspect of the camera
+   * @private
+   */
+  __onSizeUpdated() {
+    this.renderer.setSize(this.prop.size.width, this.prop.size.height);
+    this.camera.aspect = this.prop.aspect;
+    this.camera.updateProjectionMatrix();
+    this.prop.needsUpdate = true;
+  }
+
+  /**
+   * @summary Updates the fov of the camera
+   * @private
+   */
+  __onZoomUpdated() {
+    this.camera.fov = this.prop.vFov;
+    this.camera.updateProjectionMatrix();
+    this.prop.needsUpdate = true;
+  }
+
+  /**
+   * @summary Updates the position of the camera
+   * @private
+   */
+  __onPositionUpdated() {
+    this.camera.position.set(0, 0, 0);
+    this.camera.lookAt(this.prop.direction);
+    if (this.config.fisheye) {
+      this.camera.position.copy(this.prop.direction).multiplyScalar(this.config.fisheye / 2).negate();
+    }
+    this.prop.needsUpdate = true;
+  }
+
+  /**
    * @summary Main event loop, calls {@link render} if `prop.needsUpdate` is true
    * @param {number} timestamp
    * @fires PSV.before-render
-   * @package
+   * @private
    */
@@ -170,4 +221,2 @@ __renderLoop(timestamp) {
     }
-
-    this.mainReqid = window.requestAnimationFrame(t => this.__renderLoop(t));
   }
@@ -182,13 +231,3 @@
   render() {
-    this.camera.position.set(0, 0, 0);
-    this.camera.lookAt(this.prop.direction);
-
-    if (this.config.fisheye) {
-      this.camera.position.copy(this.prop.direction).multiplyScalar(this.config.fisheye / 2).negate();
-    }
-
-    this.updateCameraMatrix();
-
     this.renderer.render(this.scene, this.camera);
-
     this.psv.trigger(EVENTS.RENDER);
@@ -198,14 +237,2 @@ }
   /**
-   * @summary Updates the camera matrix
-   * @package
-   */
-  updateCameraMatrix() {
-    if (this.camera) {
-      this.camera.aspect = this.prop.aspect;
-      this.camera.fov = this.prop.vFov;
-      this.camera.updateProjectionMatrix();
-    }
-  }
-
-  /**
    * @summary Applies the texture to the scene, creates the scene if needed
@@ -217,6 +244,2 @@ * @param {PSV.TextureData} textureData
   setTexture(textureData) {
-    if (!this.scene) {
-      this.__createScene();
-    }
-
     this.prop.panoData = textureData.panoData;
@@ -226,2 +249,7 @@
 
+    if (!this.ready) {
+      this.renderer.setAnimationLoop(t => this.__renderLoop(t));
+      this.ready = true;
+    }
+
     this.psv.needsUpdate();
@@ -277,30 +305,2 @@
   /**
-   * @summary Creates the 3D scene and GUI components
-   * @private
-   */
-  __createScene() {
-    this.raycaster = new THREE.Raycaster();
-
-    this.renderer = new THREE.WebGLRenderer({ alpha: true });
-    this.renderer.setSize(this.prop.size.width, this.prop.size.height);
-    this.renderer.setPixelRatio(SYSTEM.pixelRatio);
-
-    this.camera = new THREE.PerspectiveCamera(this.prop.vFov, this.prop.size.width / this.prop.size.height, 1, 2 * SPHERE_RADIUS);
-    this.camera.position.set(0, 0, 0);
-
-    this.scene = new THREE.Scene();
-    this.scene.add(this.camera);
-
-    this.mesh = this.psv.adapter.createMesh();
-
-    this.meshContainer = new THREE.Group();
-    this.meshContainer.add(this.mesh);
-    this.scene.add(this.meshContainer);
-
-    // create canvas container
-    this.renderer.domElement.className = 'psv-canvas';
-    this.canvasContainer.appendChild(this.renderer.domElement);
-  }
-
-  /**
    * @summary Performs transition between the current and a new texture
@@ -307,0 +307,0 @@ * @param {PSV.TextureData} textureData

src/services/TextureLoader.js

@@ -54,2 +54,3 @@ import * as THREE from 'three';
    * @package
+   * @deprecated
    */
@@ -56,0 +57,0 @@ loadTexture(panorama, newPanoData) {

src/utils/browser.js

@@ -109,2 +109,23 @@ /**
 /**
+ * @summary Gets the position of an element in the viewer without reflow
+ * @description Will gives the same result as getBoundingClientRect() as soon as there are no CSS transforms
+ * @memberOf PSV.utils
+ * @param {HTMLElement} el
+ * @return {{left: number, top: number}}
+ */
+export function getPosition(el) {
+  let left = 0;
+  let top = 0;
+  let test = el;
+
+  while (test) {
+    left += (test.offsetLeft - test.scrollLeft + test.clientLeft);
+    top += (test.offsetTop - test.scrollTop + test.clientTop);
+    test = test.offsetParent;
+  }
+
+  return { left, top };
+}
+
+/**
  * @summary Map between keyboard events `keyCode|which` and `key`
@@ -111,0 +132,0 @@ * @memberOf PSV.utils

src/utils/Dynamic.js

@@ -15,7 +15,8 @@ import { bound } from './index';
   /**
-   * @param {Function} fn Callback function
+   * @param {Function} [fn] Callback function
+   * @param {number} [defaultValue] Default position
    * @param {number} [min] Minimum position
    * @param {number} [max] Maximum position
    */
-  constructor(fn, min = -Infinity, max = Infinity) {
+  constructor(fn, defaultValue = 0, min = -Infinity, max = Infinity) {
     /**
@@ -62,3 +63,3 @@ * @type {Function}
      */
-    this.current = 0;
+    this.current = defaultValue;
 
@@ -76,2 +77,6 @@ /**
     this.max = max;
+
+    if (this.fn) {
+      this.fn(defaultValue);
+    }
   }
@@ -78,0 +83,0 @@

src/utils/DynamicXD.js

@@ -7,3 +7,3 @@ import { bound } from './math';
  * @memberOf PSV
- * @package
+ * @private
  */
@@ -10,0 +10,0 @@ export class DynamicXD {

src/utils/math.js

@@ -87,2 +87,3 @@ /**
  * @summary Returns the distance between two points on a sphere of radius one
+ * {@link http://www.movable-type.co.uk/scripts/latlong.html}
  * @memberOf PSV.utils
@@ -89,0 +90,0 @@ * @param {number[]} p1

src/utils/MultiDynamic.js

@@ -24,3 +24,3 @@ import { each } from './index';
    * @param {Record<string, PSV.Dynamic>} dynamics
-   * @param {Function} fn Callback function
+   * @param {Function} [fn] Callback function
    */
@@ -41,2 +41,6 @@ constructor(dynamics, fn) {
     this.dynamics = dynamics;
+
+    if (this.fn) {
+      this.fn(this.current);
+    }
   }
@@ -43,0 +47,0 @@

src/utils/psv.js

@@ -131,2 +131,43 @@ import * as THREE from 'three';
 /**
+ * @readonly
+ * @private
+ */
+const LEFT_MAP = { 0: 'left', 0.5: 'center', 1: 'right' };
+/**
+ * @readonly
+ * @private
+ */
+const TOP_MAP = { 0: 'top', 0.5: 'center', 1: 'bottom' };
+
+/**
+ * @summary Parse a CSS-like position into an array of position keywords among top, bottom, left, right and center
+ * @memberOf PSV.utils
+ * @param {string | string[]} value
+ * @param {string} defaultValue
+ * @param {boolean} [allowCenter=true]
+ * @return {string[]}
+ */
+export function cleanPosition(value, defaultValue, allowCenter = true) {
+  if (!value) {
+    return defaultValue.split(' ');
+  }
+
+  if (typeof value === 'string') {
+    const tempPos = parsePosition(value);
+
+    if (!(tempPos.x in LEFT_MAP) || !(tempPos.y in TOP_MAP)) {
+      throw new PSVError(`Unable to parse position "${value}"`);
+    }
+
+    value = [TOP_MAP[tempPos.y], LEFT_MAP[tempPos.x]];
+  }
+
+  if (!allowCenter && value[0] === 'center' && value[1] === 'center') {
+    throw new PSVError('Unable to parse position "center center"');
+  }
+
+  return value;
+}
+
+/**
  * @summary Parses an speed
@@ -133,0 +174,0 @@ * @memberOf PSV.utils

src/Viewer.js

@@ -69,3 +69,5 @@ import * as THREE from 'three';
      * @property {boolean} ready - when all components are loaded
+     * @property {boolean} uiRefresh - if the UI needs to be renderer
      * @property {boolean} needsUpdate - if the view needs to be renderer
+     * @property {boolean} fullscreen - if the viewer is currently fullscreen
      * @property {external:THREE.Vector3} direction - direction of the camera
@@ -76,7 +78,7 @@ * @property {number} vFov - vertical FOV
      * @property {boolean} autorotateEnabled - automatic rotation is enabled
-     * @property {PSV.Animation} animationPromise - promise of the current animation (either go to position or image transition)
+     * @property {PSV.Animation} animationPromise - promise of the current animation
      * @property {Promise} loadingPromise - promise of the setPanorama method
      * @property startTimeout - timeout id of the automatic rotation delay
      * @property {PSV.Size} size - size of the container
-     * @property {PSV.PanoData} panoData - panorama metadata
+     * @property {PSV.PanoData} panoData - panorama metadata, if supported
      */
@@ -159,3 +161,2 @@ this.prop = {
     /**
-     * @summary Main render controller
      * @type {PSV.services.Renderer}
@@ -167,3 +168,2 @@ * @readonly
     /**
-     * @summary Textures loader
      * @type {PSV.services.TextureLoader}
@@ -175,3 +175,2 @@ * @readonly
     /**
-     * @summary Main event handler
      * @type {PSV.services.EventsHandler}
@@ -183,3 +182,2 @@ * @readonly
     /**
-     * @summary Utilities to help converting data
      * @type {PSV.services.DataHelper}
@@ -234,13 +232,10 @@ * @readonly
         this.prop.hFov = this.dataHelper.vFovToHFov(this.prop.vFov);
-
-        this.needsUpdate();
         this.trigger(EVENTS.ZOOM_UPDATED, value);
-      }, 0, 100),
+      }, this.config.defaultZoomLvl, 0, 100),
 
       position: new MultiDynamic({
-        longitude: new Dynamic(null),
-        latitude : new Dynamic(null, -Math.PI / 2, Math.PI / 2),
+        longitude: new Dynamic(null, this.config.defaultLong),
+        latitude : new Dynamic(null, this.config.defaultLat, -Math.PI / 2, Math.PI / 2),
       }, (position) => {
         this.dataHelper.sphericalCoordsToVector3(position, this.prop.direction);
-        this.needsUpdate();
         this.trigger(EVENTS.POSITION_UPDATED, position);
@@ -401,6 +396,3 @@ }),
   getSize() {
-    return {
-      width : this.prop.size.width,
-      height: this.prop.size.height,
-    };
+    return { ...this.prop.size };
   }
@@ -434,6 +426,2 @@
     this.prop.needsUpdate = true;
-
-    if (!this.renderer.mainReqid && this.renderer.renderer) {
-      this.renderer.__renderLoop(+new Date());
-    }
   }
@@ -452,5 +440,2 @@
 
-      this.renderer.updateCameraMatrix();
-
-      this.needsUpdate();
       this.trigger(EVENTS.SIZE_UPDATED, this.getSize());
@@ -477,11 +462,2 @@ this.__resizeRefresh();
     if (!this.prop.ready) {
-      if (!('longitude' in options)) {
-        options.longitude = this.config.defaultLong;
-      }
-      if (!('latitude' in options)) {
-        options.latitude = this.config.defaultLat;
-      }
-      if (!('zoom' in options)) {
-        options.zoom = this.config.defaultZoomLvl;
-      }
       if (!('sphereCorrection' in options)) {
@@ -576,2 +552,3 @@ options.sphereCorrection = this.config.sphereCorrection;
    * @fires PSV.config-changed
+   * @throws {PSV.PSVError} when the configuration is incorrect
    */
@@ -649,2 +626,3 @@ setOptions(options) {
    * @fires PSV.config-changed
+   * @throws {PSV.PSVError} when the configuration is incorrect
    */
@@ -708,3 +686,3 @@ setOption(option, value) {
   /**
-   * @summary Displays an error message
+   * @summary Displays an error message over the viewer
    * @param {string} message
@@ -711,0 +689,0 @@ */

types/adapters/AbstractAdapter.d.ts

@@ -7,4 +7,5 @@ import { Mesh } from 'three';
  * @summary Base adapters class
+ * @template T type of the panorama configuration object
  */
-export abstract class AbstractAdapter {
+export abstract class AbstractAdapter<T> {
 
@@ -31,3 +32,3 @@ /**
    */
-  loadTexture(panorama: any, newPanoData?: PanoData | PanoDataProvider): Promise<TextureData>;
+  loadTexture(panorama: T, newPanoData?: PanoData | PanoDataProvider): Promise<TextureData>;
 
@@ -52,2 +53,2 @@ /**
 
-export type AdapterConstructor<T extends AbstractAdapter> = new (psv: Viewer, options?: any) => T;
+export type AdapterConstructor<T extends AbstractAdapter<any>> = new (psv: Viewer, options?: any) => T;

types/adapters/cubemap/index.d.ts

@@ -1,13 +0,19 @@
-import { AbstractAdapter, TextureData } from '../..';
+import { AbstractAdapter } from '../..';
 
 /**
+ * @summary Cubemap defined as an array of images
+ * @description images order is : left, front, right, back, top, bottom
+ */
+export type CubemapArray = string[6];
+
+/**
  * @summary Object defining a cubemap
  */
-export type Cubemap = string[6] | {
-  top: string;
-  right: string;
-  bottom: string;
+export type Cubemap = {
   left: string;
   front: string;
+  right: string;
   back: string;
+  top: string;
+  bottom: string;
 };
@@ -18,6 +24,4 @@
  */
-export class CubemapAdapter extends AbstractAdapter {
+export class CubemapAdapter extends AbstractAdapter<CubemapArray | Cubemap> {
 
-  loadTexture(panorama: Cubemap): Promise<TextureData>;
-
 }

types/adapters/equirectangular-tiles/index.d.ts

@@ -1,2 +0,2 @@
-import { AbstractAdapter, TextureData, Viewer } from '../..';
+import { AbstractAdapter, Viewer } from '../..';
 
@@ -22,8 +22,6 @@ /**
  */
-export class EquirectangularTilesAdapter extends AbstractAdapter {
+export class EquirectangularTilesAdapter extends AbstractAdapter<EquirectangularTilesPanorama> {
 
   constructor(psv: Viewer, options: EquirectangularTilesAdapterOptions);
 
-  loadTexture(panorama: EquirectangularTilesPanorama): Promise<TextureData>;
-
 }

types/adapters/equirectangular/index.d.ts

@@ -1,2 +0,2 @@
-import { AbstractAdapter, PanoData, PanoDataProvider, TextureData } from '../..';
+import { AbstractAdapter } from '../..';
 
@@ -6,6 +6,4 @@ /**
  */
-export class EquirectangularAdapter extends AbstractAdapter {
+export class EquirectangularAdapter extends AbstractAdapter<string> {
 
-  loadTexture(panorama: string, newPanoData?: PanoData | PanoDataProvider): Promise<TextureData>;
-
 }

types/buttons/AbstractButton.d.ts

@@ -24,3 +24,3 @@ import { AbstractComponent } from '../components/AbstractComponent';
 
-  constructor(navbar: Navbar, className?: string, collapsable?: boolean);
+  constructor(navbar: Navbar, className?: string, collapsable?: boolean, tabbable?: boolean);
 
@@ -57,2 +57,7 @@ /**
 
+  /**
+   * Action when the button is clicked
+   */
+  abstract onClick();
+
 }

types/components/Navbar.d.ts

@@ -8,3 +8,3 @@ import { AbstractButton } from '../buttons/AbstractButton';
  */
-export function registerButton(button: typeof AbstractButton);
+export function registerButton(button: typeof AbstractButton): void;
 
@@ -11,0 +11,0 @@ /**

types/data/constants.d.ts

 /**
+ * @summary Radius of the THREE.SphereGeometry, Half-length of the THREE.BoxGeometry
+ */
+export const SPHERE_RADIUS = 10;
+
+/**
  * @summary Property name added to viewer element
@@ -3,0 +8,0 @@ */

types/index.d.ts

@@ -1,6 +0,5 @@
-import * as CONSTANTS from './/data/constants';
+import * as CONSTANTS from './data/constants';
 import * as utils from './utils';
 
 export * from './models';
-export * from './data/constants';
 export * from './data/config';
@@ -7,0 +6,0 @@ export * from './data/system';

types/plugins/gyroscope/index.d.ts

@@ -1,2 +0,2 @@
-import { AbstractPlugin, Viewer, PSVError } from '../..';
+import { AbstractPlugin, Viewer } from '../..';
 import { Event } from 'uevent';
@@ -9,2 +9,6 @@
 
+export const EVENTS: {
+  GYROSCOPE_UPDATED: 'gyroscope-updated',
+};
+
 /**
@@ -15,6 +19,2 @@ * @summary Adds gyroscope controls on mobile devices
 
-  static EVENTS: {
-    GYROSCOPE_UPDATED: 'gyroscope-updated',
-  };
-
   constructor(psv: Viewer, options: GyroscopePluginOptions);
@@ -21,0 +21,0 @@

types/plugins/markers/index.d.ts

@@ -1,2 +0,2 @@
-import { AbstractPlugin, Animation, ExtendedPosition, PSVError, Viewer } from '../..';
+import { AbstractPlugin, Animation, ExtendedPosition, Viewer } from '../..';
 import { Event } from 'uevent';
@@ -111,2 +111,15 @@
 
+export const EVENTS: {
+  GOTO_MARKER_DONE: 'goto-marker-done',
+  LEAVE_MARKER: 'leave-marker',
+  OVER_MARKER: 'over-marker',
+  RENDER_MARKERS_LIST: 'render-markers-list',
+  SELECT_MARKER: 'select-marker',
+  SELECT_MARKER_LIST: 'select-marker-list',
+  UNSELECT_MARKER: 'unselect-marker',
+  HIDE_MARKERS: 'hide-markers',
+  SET_MARKERS: 'set-markers',
+  SHOW_MARKERS: 'show-markers',
+};
+
 /**
@@ -117,14 +130,2 @@ * @summary Displays various markers on the viewer
 
-  static EVENTS: {
-    GOTO_MARKER_DONE   : 'goto-marker-done',
-    LEAVE_MARKER       : 'leave-marker',
-    OVER_MARKER        : 'over-marker',
-    RENDER_MARKERS_LIST: 'render-markers-list',
-    SELECT_MARKER      : 'select-marker',
-    SELECT_MARKER_LIST : 'select-marker-list',
-    UNSELECT_MARKER    : 'unselect-marker',
-    HIDE_MARKERS       : 'hide-markers',
-    SHOW_MARKERS       : 'show-markers',
-  };
-
   constructor(psv: Viewer, options: MarkersPluginOptions);
@@ -148,3 +149,3 @@
   /**
-   * @summary Return the total number of markers
+   * @summary Returns the total number of markers
    * @returns {number}
@@ -155,4 +156,8 @@ */
   /**
+   * @summary Returns all the markers
+   */
+  getMarkers(): Marker[];
+
+  /**
    * @summary Adds a new marker to viewer
-   * @returns {PSV.plugins.MarkersPlugin.Marker}
    * @throws {PSVError} when the marker's id is missing or already exists
@@ -159,0 +164,0 @@ */

types/plugins/stereo/index.d.ts

@@ -1,4 +0,8 @@
-import { AbstractPlugin, Viewer, PSVError } from '../..';
+import { AbstractPlugin, Viewer } from '../..';
 import { Event } from 'uevent';
 
+export const EVENTS: {
+  STEREO_UPDATED: 'stereo-updated',
+};
+
 /**
@@ -9,6 +13,2 @@ * @summary Adds stereo view on mobile devices
 
-  static EVENTS: {
-    STEREO_UPDATED: 'stereo-updated',
-  };
-
   constructor(psv: Viewer);
@@ -15,0 +15,0 @@

types/services/DataHelper.d.ts

@@ -1,2 +0,2 @@
-import { Vector3 } from 'three';
+import { Vector3, Intersection } from 'three';
 import { ExtendedPosition, Point, Position, SphereCorrection } from '../models';
@@ -42,3 +42,3 @@
    */
-  sphericalCoordsToVector3(position: Position): Vector3;
+  sphericalCoordsToVector3(position: Position, vector: Vector3): Vector3;
 
@@ -66,2 +66,7 @@ /**
   /**
+   * @summary Returns the first intersection with the cursor and having specific data
+   */
+  getIntersection(viewerPoint: Point, objectDataName: string): Intersection;
+
+  /**
    * @summary Converts x/y to latitude/longitude if present and ensure boundaries
@@ -68,0 +73,0 @@ */

types/services/TextureLoader.d.ts

@@ -7,2 +7,17 @@ /**
   /**
+   * @summary Cancels current HTTP requests
+   */
+  abortLoading();
+
+  /**
+   * @summary Loads a Blob with FileLoader
+   */
+  loadFile(url: string, onProgress?: (number) => void): Promise<Blob>;
+
+  /**
+   * @summary Loads an Image using FileLoader to have progress events
+   */
+  loadImage(url: string, onProgress?: (number) => void): Promise<HTMLImageElement>;
+
+  /**
    * @summary Preload a panorama file without displaying it
@@ -9,0 +24,0 @@ */

types/utils/index.d.ts

@@ -1,4 +0,4 @@
-export * from './browser.d.js';
-export * from './math.d.js';
-export * from './misc.d.js';
-export * from './psv.d.js';
+export * from './browser';
+export * from './math';
+export * from './misc';
+export * from './psv';

types/utils/psv.d.ts

@@ -27,2 +27,10 @@ import { Texture } from 'three';
 /**
+ * @summary Parse a CSS-like position into an array of position keywords among top, bottom, left, right and center
+ * @param {string | string[]} value
+ * @param {string} defaultValue
+ * @param {boolean} [allowCenter=true]
+ */
+export function cleanPosition(value: string | string[], defaultValue: string, allowCenter?): string[];
+
+/**
  * @summary Parses an speed
@@ -29,0 +37,0 @@ * @param speed - The speed, in radians/degrees/revolutions per second/minute

types/Viewer.d.ts

@@ -33,3 +33,3 @@ import { Vector3 } from 'three';
   container: HTMLElement | string;
-  panorama?: string;
+  panorama?: any;
   adapter?: AdapterConstructor<any> | [AdapterConstructor<any>, any];
@@ -46,6 +46,6 @@ caption?: string;
   defaultLat?: number;
-  sphereCorrection?: { pan?: number, tilt?: number, roll?: number },
+  sphereCorrection?: { pan?: number, tilt?: number, roll?: number };
   moveSpeed?: number;
   zoomSpeed?: number;
-  autorotateDelay?: null,
+  autorotateDelay?: number,
   autorotateSpeed?: string | number;
@@ -64,6 +64,6 @@ autorotateLat?: number;
   withCredentials?: boolean;
-  navbar?: string | Array<string | NavbarCustomButton>,
-  lang?: Record<string, string>,
-  keyboard?: Record<string, string>,
-  plugins?: Array<PluginConstructor<any> | [PluginConstructor<any>, any]>,
+  navbar?: string | Array<string | NavbarCustomButton>;
+  lang?: Record<string, string>;
+  keyboard?: Record<string, string>;
+  plugins?: Array<PluginConstructor<any> | [PluginConstructor<any>, any]>;
 };
@@ -104,3 +104,3 @@
    */
-  prop: ViewerProps;
+  protected readonly prop: ViewerProps;
 
@@ -153,3 +153,3 @@ /**
    */
-  getPlugin<T extends AbstractPlugin>(pluginId: string | PluginConstructor<T>): T;
+  getPlugin<T extends AbstractPlugin>(pluginId: string | PluginConstructor<T>): T | undefined;
 
@@ -298,2 +298,7 @@ /**
   /**
+   * @summary Triggered when the panorama image has been loaded and the viewer is ready to perform the first render
+   */
+  once(e: 'ready', cb: (e: Event) => void): this;
+
+  /**
    * @summary Triggered when the automatic rotation is enabled/disabled
@@ -362,9 +367,3 @@ */
   on(e: 'position-updated', cb: (e: Event, position: Position) => void): this;
-
   /**
-   * @summary Triggered when the panorama image has been loaded and the viewer is ready to perform the first render
-   */
-  once(e: 'ready', cb: (e: Event) => void): this;
-
-  /**
    * @summary Triggered on each viewer render, **this event is triggered very often**
@@ -371,0 +370,0 @@ */

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

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

Improved metrics

Total package byte prevSize

1801999

increased by11.95%

Dev dependency count

44

decreased by-2.22%

Number of package files

216

increased by16.76%

Lines of code

30791

increased by11.33%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedthree@0.134.0(transitive)

• - Removedthree@0.133.1(transitive)

• Updatedthree@^0.134.0