photo-sphere-viewer - npm Package Compare versions

Comparing version 4.6.5 to 4.7.0

dist/adapters/cubemap-tiles.js

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

dist/adapters/cubemap-video.js

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

dist/adapters/cubemap.js

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

dist/adapters/equirectangular-tiles.js

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

dist/adapters/equirectangular-video.js

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

dist/photo-sphere-viewer.d.ts

@@ -279,2 +279,3 @@ import { Texture, Vector3, Euler, Intersection, Mesh } from 'three';
 type TextureData = {
+  panorama: any;
   texture: Texture | Texture[] | Record<string, Texture>;
@@ -281,0 +282,0 @@ panoData?: PanoData;

dist/plugins/autorotate-keypoints.js

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

dist/plugins/compass.js

 /*!
-* Photo Sphere Viewer 4.6.5
+* Photo Sphere Viewer 4.7.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -128,3 +128,3 @@ * @copyright 2015-2022 Damien "Mistic" Sorel
       _this.container = document.createElement('div');
-      photoSphereViewer.utils.addClasses(_this.container, "psv-compass psv-compass--" + _this.config.position.join('-'));
+      _this.container.className = "psv-compass psv-compass--" + _this.config.position.join('-');
       _this.container.innerHTML = _this.config.backgroundSvg;
@@ -131,0 +131,0 @@ _this.container.style.width = _this.config.size;

dist/plugins/gyroscope.js

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

dist/plugins/markers.d.ts

@@ -46,3 +46,3 @@ import { ExtendedPosition, AbstractPlugin, Viewer, Animation } from 'photo-sphere-viewer';
   visible?: boolean;
-  tooltip?: string | { content: string, position?: string };
+  tooltip?: string | { content: string, position?: string, className?: string, trigger?: 'hover' | 'click' };
   content?: string;
@@ -122,2 +122,3 @@ hideList?: boolean;
 declare const EVENTS: {
+  MARKER_VISIBILITY  : 'marker-visibility',
   GOTO_MARKER_DONE: 'goto-marker-done',
@@ -234,2 +235,12 @@ LEAVE_MARKER: 'leave-marker',
   /**
+   * @summary Forces the display of the tooltip
+   */
+  showMarkerTooltip(markerId: string);
+
+  /**
+   * @summary Hides the tooltip
+   */
+  hideMarkerTooltip(markerId: string);
+
+  /**
    * @summary Opens the panel with the content of the marker
@@ -260,2 +271,7 @@ */
   /**
+   * @summary Triggered when the visibility of a marker changes
+   */
+  on(e: 'marker-visibility', cb: (e: Event, marker: Marker, visible: boolean) => void): this;
+
+  /**
    * @summary Triggered when the animation to a marker is done
@@ -262,0 +278,0 @@ */

dist/plugins/resolution.js

 /*!
-* Photo Sphere Viewer 4.6.5
+* Photo Sphere Viewer 4.7.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -62,36 +62,2 @@ * @copyright 2015-2022 Damien "Mistic" Sorel
   /**
-   * @summary Returns deep equality between objects
-   * {@link https://gist.github.com/egardner/efd34f270cc33db67c0246e837689cb9}
-   * @param obj1
-   * @param obj2
-   * @return {boolean}
-   * @private
-   */
-  function deepEqual(obj1, obj2) {
-    if (obj1 === obj2) {
-      return true;
-    } else if (isObject(obj1) && isObject(obj2)) {
-      if (Object.keys(obj1).length !== Object.keys(obj2).length) {
-        return false;
-      }
-
-      for (var _i = 0, _Object$keys = Object.keys(obj1); _i < _Object$keys.length; _i++) {
-        var prop = _Object$keys[_i];
-
-        if (!deepEqual(obj1[prop], obj2[prop])) {
-          return false;
-        }
-      }
-
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  function isObject(obj) {
-    return typeof obj === 'object' && obj != null;
-  }
-
-  /**
    * @typedef {Object} PSV.plugins.ResolutionPlugin.Resolution
@@ -286,3 +252,3 @@ * @property {string} id
       var resolution = this.resolutions.find(function (r) {
-        return deepEqual(_this4.psv.config.panorama, r.panorama);
+        return photoSphereViewer.utils.deepEqual(_this4.psv.config.panorama, r.panorama);
       });
@@ -289,0 +255,0 @@

dist/plugins/settings.js

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

dist/plugins/stereo.js

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

dist/plugins/video.js

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

dist/plugins/virtual-tour.js

 /*!
-* Photo Sphere Viewer 4.6.5
+* Photo Sphere Viewer 4.7.0
 * @copyright 2014-2015 Jérémy Heleine
@@ -469,3 +469,3 @@ * @copyright 2015-2022 Damien "Mistic" Sorel
     _proto.isSupported = function isSupported() {
-      return !!this.plugin && !this.plugin.isServerSide();
+      return !!this.plugin && !this.plugin.isServerSide() && !this.plugin.gallery;
     }
@@ -757,2 +757,8 @@ /**
       /**
+       * @type {PSV.plugins.GalleryPlugin}
+       * @private
+       */
+
+      _this.gallery = null;
+      /**
        * @type {PSV.plugins.VirtualTourPlugin.AbstractDatasource}
@@ -793,2 +799,3 @@ */
       this.compass = this.psv.getPlugin('compass');
+      this.gallery = this.psv.getPlugin('gallery');
 
@@ -855,2 +862,3 @@ if (!this.is3D() && !this.markers) {
       delete this.compass;
+      delete this.gallery;
       delete this.arrowsGroup;
@@ -947,2 +955,4 @@
     _proto.setNodes = function setNodes(nodes, startNodeId) {
+      var _this3 = this;
+
       if (this.isServerSide()) {
@@ -962,2 +972,21 @@ throw new photoSphereViewer.PSVError('Cannot set nodes in server side mode');
       this.setCurrentNode(startNodeId);
+
+      if (this.gallery) {
+        this.gallery.setItems(nodes.map(function (node) {
+          return {
+            id: node.id,
+            panorama: node.panorama,
+            name: node.name,
+            thumbnail: node.thumbnail,
+            options: {
+              caption: node.caption,
+              panoData: node.panoData,
+              sphereCorrection: node.sphereCorrection,
+              description: node.description
+            }
+          };
+        }), function (id) {
+          return _this3.setCurrentNode(id);
+        });
+      }
     }
@@ -974,3 +1003,3 @@ /**
       var _this$prop$currentNod,
-          _this3 = this;
+          _this4 = this;
 
@@ -991,11 +1020,11 @@ if (fromLink === void 0) {
       Promise.resolve(this.preload[nodeId]).then(function () {
-        if (_this3.prop.loadingNode !== nodeId) {
+        if (_this4.prop.loadingNode !== nodeId) {
           throw photoSphereViewer.utils.getAbortError();
         }
 
-        return _this3.datasource.loadNode(nodeId);
+        return _this4.datasource.loadNode(nodeId);
       }), Promise.resolve(fromLinkPosition ? this.config.rotateSpeed : false).then(function (speed) {
         // eslint-disable-line consistent-return
         if (speed) {
-          return _this3.psv.animate(_extends({}, fromLinkPosition, {
+          return _this4.psv.animate(_extends({}, fromLinkPosition, {
             speed: speed
@@ -1005,24 +1034,24 @@ }));
       }).then(function () {
-        _this3.psv.loader.show();
+        _this4.psv.loader.show();
       })]).then(function (_ref) {
-        var _this3$markers, _this3$compass;
+        var _this4$markers, _this4$compass;
 
         var node = _ref[0];
 
-        if (_this3.prop.loadingNode !== nodeId) {
+        if (_this4.prop.loadingNode !== nodeId) {
           throw photoSphereViewer.utils.getAbortError();
         }
 
-        _this3.prop.currentNode = node;
+        _this4.prop.currentNode = node;
 
-        if (_this3.prop.currentTooltip) {
-          _this3.prop.currentTooltip.hide();
+        if (_this4.prop.currentTooltip) {
+          _this4.prop.currentTooltip.hide();
 
-          _this3.prop.currentTooltip = null;
+          _this4.prop.currentTooltip = null;
         }
 
-        if (_this3.is3D()) {
-          var _this3$arrowsGroup;
+        if (_this4.is3D()) {
+          var _this4$arrowsGroup;
 
-          (_this3$arrowsGroup = _this3.arrowsGroup).remove.apply(_this3$arrowsGroup, _this3.arrowsGroup.children.filter(function (o) {
+          (_this4$arrowsGroup = _this4.arrowsGroup).remove.apply(_this4$arrowsGroup, _this4.arrowsGroup.children.filter(function (o) {
             return o.type === 'Mesh';
@@ -1032,6 +1061,6 @@ }));
 
-        (_this3$markers = _this3.markers) == null ? void 0 : _this3$markers.clearMarkers();
-        (_this3$compass = _this3.compass) == null ? void 0 : _this3$compass.clearHotspots();
-        return Promise.all([_this3.psv.setPanorama(node.panorama, {
-          transition: _this3.config.transition,
+        (_this4$markers = _this4.markers) == null ? void 0 : _this4$markers.clearMarkers();
+        (_this4$compass = _this4.compass) == null ? void 0 : _this4$compass.clearHotspots();
+        return Promise.all([_this4.psv.setPanorama(node.panorama, {
+          transition: _this4.config.transition,
           caption: node.caption,
@@ -1045,13 +1074,13 @@ description: node.description,
           }
-        }), _this3.datasource.loadLinkedNodes(nodeId)]);
+        }), _this4.datasource.loadLinkedNodes(nodeId)]);
       }).then(function () {
-        if (_this3.prop.loadingNode !== nodeId) {
+        if (_this4.prop.loadingNode !== nodeId) {
           throw photoSphereViewer.utils.getAbortError();
         }
 
-        var node = _this3.prop.currentNode;
+        var node = _this4.prop.currentNode;
 
         if (node.markers) {
-          if (_this3.markers) {
-            _this3.markers.setMarkers(node.markers);
+          if (_this4.markers) {
+            _this4.markers.setMarkers(node.markers);
           } else {
@@ -1062,5 +1091,5 @@ photoSphereViewer.utils.logWarn("Node " + node.id + " markers ignored because the plugin is not loaded.");
 
-        _this3.__renderLinks(node);
+        _this4.__renderLinks(node);
 
-        _this3.__preload(node);
+        _this4.__preload(node);
         /**
@@ -1075,3 +1104,3 @@ * @event node-changed
 
-        _this3.trigger(EVENTS.NODE_CHANGED, nodeId, {
+        _this4.trigger(EVENTS.NODE_CHANGED, nodeId, {
           fromNode: fromNode,
@@ -1082,3 +1111,3 @@ fromLink: fromLink,
 
-        _this3.prop.loadingNode = null;
+        _this4.prop.loadingNode = null;
         return true;
@@ -1090,9 +1119,9 @@ }).catch(function (err) {
 
-        _this3.psv.showError(_this3.psv.config.lang.loadError);
+        _this4.psv.showError(_this4.psv.config.lang.loadError);
 
-        _this3.psv.loader.hide();
+        _this4.psv.loader.hide();
 
-        _this3.psv.navbar.setCaption('');
+        _this4.psv.navbar.setCaption('');
 
-        _this3.prop.loadingNode = null;
+        _this4.prop.loadingNode = null;
         throw err;
@@ -1109,11 +1138,11 @@ });
     _proto.__renderLinks = function __renderLinks(node) {
-      var _this4 = this;
+      var _this5 = this;
 
       var positions = [];
       node.links.forEach(function (link) {
-        var position = _this4.__getLinkPosition(node, link);
+        var position = _this5.__getLinkPosition(node, link);
 
         positions.push(position);
 
-        if (_this4.is3D()) {
+        if (_this5.is3D()) {
           var _mesh$userData, _link$arrowStyle, _link$arrowStyle2;
@@ -1126,3 +1155,3 @@
 
-          _this4.psv.dataHelper.sphericalCoordsToVector3({
+          _this5.psv.dataHelper.sphericalCoordsToVector3({
             longitude: position.longitude,
@@ -1137,16 +1166,16 @@ latitude: 0
           outlineMesh.rotation.copy(mesh.rotation);
-          setMeshColor(mesh, ((_link$arrowStyle = link.arrowStyle) == null ? void 0 : _link$arrowStyle.color) || _this4.config.arrowStyle.color);
-          setMeshColor(outlineMesh, ((_link$arrowStyle2 = link.arrowStyle) == null ? void 0 : _link$arrowStyle2.outlineColor) || _this4.config.arrowStyle.outlineColor);
+          setMeshColor(mesh, ((_link$arrowStyle = link.arrowStyle) == null ? void 0 : _link$arrowStyle.color) || _this5.config.arrowStyle.color);
+          setMeshColor(outlineMesh, ((_link$arrowStyle2 = link.arrowStyle) == null ? void 0 : _link$arrowStyle2.outlineColor) || _this5.config.arrowStyle.outlineColor);
 
-          _this4.arrowsGroup.add(mesh);
+          _this5.arrowsGroup.add(mesh);
 
-          _this4.arrowsGroup.add(outlineMesh);
+          _this5.arrowsGroup.add(outlineMesh);
         } else {
           var _data;
 
-          if (_this4.isGps()) {
-            position.latitude += _this4.config.markerLatOffset;
+          if (_this5.isGps()) {
+            position.latitude += _this5.config.markerLatOffset;
           }
 
-          _this4.markers.addMarker(_extends({}, _this4.config.markerStyle, link.markerStyle, {
+          _this5.markers.addMarker(_extends({}, _this5.config.markerStyle, link.markerStyle, {
             id: "tour-link-" + link.nodeId,
@@ -1274,3 +1303,3 @@ tooltip: link.name,
     _proto.__preload = function __preload(node) {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -1283,6 +1312,6 @@ if (!this.config.preload) {
       this.prop.currentNode.links.filter(function (link) {
-        return !_this5.preload[link.nodeId];
+        return !_this6.preload[link.nodeId];
       }).filter(function (link) {
-        if (typeof _this5.config.preload === 'function') {
-          return _this5.config.preload(_this5.prop.currentNode, link);
+        if (typeof _this6.config.preload === 'function') {
+          return _this6.config.preload(_this6.prop.currentNode, link);
         } else {
@@ -1292,8 +1321,8 @@ return true;
       }).forEach(function (link) {
-        _this5.preload[link.nodeId] = _this5.datasource.loadNode(link.nodeId).then(function (linkNode) {
-          return _this5.psv.textureLoader.preloadPanorama(linkNode.panorama);
+        _this6.preload[link.nodeId] = _this6.datasource.loadNode(link.nodeId).then(function (linkNode) {
+          return _this6.psv.textureLoader.preloadPanorama(linkNode.panorama);
         }).then(function () {
-          _this5.preload[link.nodeId] = true;
+          _this6.preload[link.nodeId] = true;
         }).catch(function () {
-          delete _this5.preload[link.nodeId];
+          delete _this6.preload[link.nodeId];
         });
@@ -1321,4 +1350,5 @@ });
       var _this$prop$currentNod2,
-          _this6 = this;
+          _this7 = this;
 
+      photoSphereViewer.utils.logWarn("Starting from next version, the VirtualTourPlugin will require the GalleryPlugin to display the list of nodes.");
       var nodes = this.change(EVENTS.RENDER_NODES_LIST, Object.values(this.datasource.nodes));
@@ -1334,5 +1364,5 @@ this.psv.panel.show({
           if (nodeId) {
-            _this6.setCurrentNode(nodeId);
+            _this7.setCurrentNode(nodeId);
 
-            _this6.hideNodesList();
+            _this7.hideNodesList();
           }
@@ -1339,0 +1369,0 @@ }

dist/plugins/visible-range.js

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

package.json

 {
   "name": "photo-sphere-viewer",
-  "version": "4.6.5",
+  "version": "4.7.0",
   "description": "A JavaScript library to display Photo Sphere panoramas",
@@ -36,3 +36,3 @@ "homepage": "https://photo-sphere-viewer.js.org",
   "dependencies": {
-    "three": "^0.142.0",
+    "three": "^0.143.0",
     "uevent": "^2.1.1"
@@ -76,6 +76,7 @@ },
     "sass": "^1.43.4",
-    "stylelint": "^14.0.0",
+    "stylelint": "^14.9.0",
     "stylelint-config-standard-scss": "^5.0.0",
     "typescript": "^4.4.2",
     "vue-material": "^1.0.0-beta-15",
+    "vue-no-ssr": "^1.1.1",
     "vue-slider-component": "^3.2.14",
@@ -82,0 +83,0 @@ "vue-swatches": "^2.1.1",

src/components/Navbar.js

@@ -93,3 +93,3 @@ import { AutorotateButton } from '../buttons/AutorotateButton';
   constructor(psv) {
-    super(psv, 'psv-navbar');
+    super(psv, 'psv-navbar psv--capture-event');
 
@@ -96,0 +96,0 @@ /**

src/components/Panel.js

@@ -26,3 +26,3 @@ import { EVENTS, KEY_CODES } from '../data/constants';
   constructor(psv) {
-    super(psv, 'psv-panel');
+    super(psv, 'psv-panel psv--capture-event');
 
@@ -29,0 +29,0 @@ /**

src/components/Tooltip.js

@@ -60,2 +60,3 @@ import { EVENTS } from '../data/constants';
       pos   : '',
+      config: null,
       data  : null,
@@ -157,2 +158,4 @@ };
     this.psv.trigger(EVENTS.SHOW_TOOLTIP, this.prop.data, this);
+
+    this.__waitImages();
   }
@@ -171,2 +174,4 @@
 
+    this.config = config;
+
     const t = this.container;
@@ -257,3 +262,3 @@ const a = this.arrow;
         default:
-          // nothing
+        // nothing
       }
@@ -332,2 +337,31 @@ }
 
+  /**
+   * @summary If the tooltip contains images, recompute its size once they are loaded
+   * @private
+   */
+  __waitImages() {
+    const images = this.content.querySelectorAll('img');
+
+    if (images.length > 0) {
+      const promises = [];
+
+      images.forEach((image) => {
+        promises.push(new Promise((resolve) => {
+          image.onload = resolve;
+          image.onerror = resolve;
+        }));
+      });
+
+      Promise.all(promises)
+        .then(() => {
+          if (this.prop.state === STATE.SHOWING || this.prop.state === STATE.READY) {
+            const rect = this.container.getBoundingClientRect();
+            this.prop.width = rect.right - rect.left;
+            this.prop.height = rect.bottom - rect.top;
+            this.move(this.config);
+          }
+        });
+    }
+  }
+
 }

src/plugins/compass/index.js

@@ -82,3 +82,3 @@ import * as THREE from 'three';
     this.container = document.createElement('div');
-    utils.addClasses(this.container, `psv-compass psv-compass--${this.config.position.join('-')}`);
+    this.container.className = `psv-compass psv-compass--${this.config.position.join('-')}`;
     this.container.innerHTML = this.config.backgroundSvg;
@@ -85,0 +85,0 @@

src/plugins/markers/constants.js

@@ -11,2 +11,10 @@ import icon from './pin-list.svg';
   /**
+   * @event marker-visibility
+   * @memberof PSV.plugins.MarkersPlugin
+   * @summary Triggered when the visibility of a marker changes
+   * @param {PSV.plugins.MarkersPlugin.Marker} marker
+   * @param {boolean} visible
+   */
+  MARKER_VISIBILITY  : 'marker-visibility',
+  /**
    * @event goto-marker-done
@@ -85,2 +93,14 @@ * @memberof PSV.plugins.MarkersPlugin
 /**
+ * @summary Types of tooltip events
+ * @memberOf PSV.plugins.MarkersPlugin
+ * @enum {string}
+ * @constant
+ * @private
+ */
+export const MARKER_TOOLTIP_TRIGGER = {
+  click: 'click',
+  hover: 'hover',
+};
+
+/**
  * @summary Namespace for SVG creation
@@ -87,0 +107,0 @@ * @type {string}

src/plugins/markers/index.js

@@ -8,2 +8,3 @@ import * as THREE from 'three';
   MARKER_DATA,
+  MARKER_TOOLTIP_TRIGGER,
   MARKERS_LIST_TEMPLATE,
@@ -215,4 +216,8 @@ SVG_NS
   toggleAllTooltips() {
-    this.prop.showAllTooltips = !this.prop.showAllTooltips;
-    this.renderMarkers();
+    if (this.prop.showAllTooltips) {
+      this.hideAllTooltips();
+    }
+    else {
+      this.showAllTooltips();
+    }
   }
@@ -225,3 +230,6 @@
     this.prop.showAllTooltips = true;
-    this.renderMarkers();
+    utils.each(this.markers, (marker) => {
+      marker.props.staticTooltip = true;
+      marker.showTooltip();
+    });
   }
@@ -234,3 +242,6 @@
     this.prop.showAllTooltips = false;
-    this.renderMarkers();
+    utils.each(this.markers, (marker) => {
+      marker.props.staticTooltip = false;
+      marker.hideTooltip();
+    });
   }
@@ -468,2 +479,22 @@
   /**
+   * @summary Forces the display of the tooltip
+   * @param {string} markerId
+   */
+  showMarkerTooltip(markerId) {
+    const marker = this.getMarker(markerId);
+    marker.props.staticTooltip = true;
+    marker.showTooltip();
+  }
+
+  /**
+   * @summary Hides the tooltip
+   * @param {string} markerId
+   */
+  hideMarkerTooltip(markerId) {
+    const marker = this.getMarker(markerId);
+    marker.props.staticTooltip = false;
+    marker.hideTooltip();
+  }
+
+  /**
    * @summary Toggles a marker
@@ -568,2 +599,3 @@ * @param {string} markerId
       let isVisible = this.prop.visible && marker.visible;
+      let visibilityChanged = false;
       let position = null;
@@ -611,2 +643,4 @@
 
+      visibilityChanged = marker.props.visible !== isVisible;
+      marker.props.visible = isVisible;
       marker.props.position2D = isVisible ? position : null;
@@ -618,8 +652,18 @@
 
-      if (isVisible && (this.prop.showAllTooltips || (marker === this.prop.hoveringMarker && !marker.isPoly()))) {
+      if (!isVisible) {
+        marker.hideTooltip();
+      }
+      else if (marker.props.staticTooltip) {
         marker.showTooltip();
       }
-      else if (!isVisible || marker !== this.prop.hoveringMarker) {
+      else if (marker.config.tooltip.trigger === MARKER_TOOLTIP_TRIGGER.click || (marker === this.prop.hoveringMarker && !marker.isPoly())) {
+        marker.refreshTooltip();
+      }
+      else if (marker !== this.prop.hoveringMarker) {
         marker.hideTooltip();
       }
+
+      if (visibilityChanged) {
+        this.trigger(EVENTS.MARKER_VISIBILITY, marker, isVisible);
+      }
     });
@@ -814,3 +858,3 @@ }
 
-      if (!this.prop.showAllTooltips) {
+      if (!marker.props.staticTooltip && marker.config.tooltip.trigger === MARKER_TOOLTIP_TRIGGER.hover) {
         marker.showTooltip(e);
@@ -835,3 +879,3 @@ }
 
-      if (!this.prop.showAllTooltips) {
+      if (!marker.props.staticTooltip && marker.config.tooltip.trigger === MARKER_TOOLTIP_TRIGGER.hover) {
         marker.hideTooltip();
@@ -868,3 +912,3 @@ }
 
-      if (!this.prop.showAllTooltips) {
+      if (!marker.props.staticTooltip) {
         marker.showTooltip(e);
@@ -876,3 +920,3 @@ }
 
-      if (!this.prop.showAllTooltips) {
+      if (!this.prop.hoveringMarker.props.staticTooltip) {
         this.prop.hoveringMarker.hideTooltip();
@@ -901,2 +945,14 @@ }
 
+    if (this.prop.currentMarker && this.prop.currentMarker !== marker) {
+      this.trigger(EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
+
+      this.psv.panel.hide(ID_PANEL_MARKER);
+
+      if (!this.prop.showAllTooltips && this.prop.currentMarker.config.tooltip.trigger === MARKER_TOOLTIP_TRIGGER.click) {
+        this.hideMarkerTooltip(this.prop.currentMarker);
+      }
+
+      this.prop.currentMarker = null;
+    }
+
     if (marker) {
@@ -920,12 +976,15 @@ this.prop.currentMarker = marker;
       if (this.markers[marker.id]) {
-        this.showMarkerPanel(marker.id);
+        if (marker.config.tooltip.trigger === MARKER_TOOLTIP_TRIGGER.click) {
+          if (marker.tooltip) {
+            this.hideMarkerTooltip(marker);
+          }
+          else {
+            this.showMarkerTooltip(marker);
+          }
+        }
+        else {
+          this.showMarkerPanel(marker.id);
+        }
       }
     }
-    else if (this.prop.currentMarker) {
-      this.trigger(EVENTS.UNSELECT_MARKER, this.prop.currentMarker);
-
-      this.psv.panel.hide(ID_PANEL_MARKER);
-
-      this.prop.currentMarker = null;
-    }
   }
@@ -932,0 +991,0 @@

src/plugins/markers/Marker.js

 import * as THREE from 'three';
 import { CONSTANTS, PSVError, utils } from '../..';
 import { getShortestArc, logWarn } from '../../utils';
-import { MARKER_DATA, SVG_NS } from './constants';
+import { MARKER_DATA, MARKER_TOOLTIP_TRIGGER, SVG_NS } from './constants';
 import { getPolygonCenter, getPolylineCenter } from './utils';
@@ -106,2 +106,4 @@
      * @property {PSV.Point} anchor
+     * @property {boolean} visible - actually visible in the view
+     * @property {boolean} staticTooltip - the tooltip must always be shown
      * @property {PSV.Position} position - position in spherical coordinates
@@ -115,10 +117,12 @@ * @property {PSV.Point} position2D - position in viewer coordinates
     this.props = {
-      dynamicSize: false,
-      anchor     : null,
-      position   : null,
-      position2D : null,
-      positions3D: null,
-      width      : null,
-      height     : null,
-      def        : null,
+      dynamicSize  : false,
+      anchor       : null,
+      visible      : false,
+      staticTooltip: false,
+      position     : null,
+      position2D   : null,
+      positions3D  : null,
+      width        : null,
+      height       : null,
+      def          : null,
     };
@@ -290,3 +294,3 @@
     }
-    else if (this.config.tooltip?.content) {
+    else if (this.config.tooltip.content) {
       return this.config.tooltip.content;
@@ -307,7 +311,6 @@ }
   showTooltip(mousePosition) {
-    if (this.visible && this.config.tooltip?.content && this.props.position2D) {
+    if (this.props.visible && this.config.tooltip.content && this.props.position2D) {
       const config = {
-        content : this.config.tooltip.content,
-        position: this.config.tooltip.position,
-        data    : this,
+        ...this.config.tooltip,
+        data: this,
       };
@@ -351,2 +354,11 @@
   /**
+   * @summary Recompute the position of the tooltip
+   */
+  refreshTooltip() {
+    if (this.tooltip) {
+      this.showTooltip();
+    }
+  }
+
+  /**
    * @summary Hides the tooltip of this marker
@@ -377,2 +389,8 @@ */
     }
+    if (!this.config.tooltip) {
+      this.config.tooltip = {};
+    }
+    if (!this.config.tooltip.trigger) {
+      this.config.tooltip.trigger = MARKER_TOOLTIP_TRIGGER.hover;
+    }
 
@@ -637,3 +655,3 @@ this.data = this.config.data;
     this.props.positions3D = this.props.def.map((coord) => {
-      return this.psv.dataHelper.sphericalCoordsToVector3({ longitude: coord[0], latitude : coord[1] });
+      return this.psv.dataHelper.sphericalCoordsToVector3({ longitude: coord[0], latitude: coord[1] });
     });
@@ -640,0 +658,0 @@ }

src/plugins/resolution/index.js

@@ -1,4 +0,3 @@
-import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError } from '../..';
+import { AbstractPlugin, CONSTANTS, DEFAULTS, PSVError, utils } from '../..';
 import { EVENTS } from './constants';
-import { deepEqual } from './utils';
 
@@ -177,3 +176,3 @@
   __refreshResolution() {
-    const resolution = this.resolutions.find(r => deepEqual(this.psv.config.panorama, r.panorama));
+    const resolution = this.resolutions.find(r => utils.deepEqual(this.psv.config.panorama, r.panorama));
     if (this.prop.resolution !== resolution?.id) {
@@ -180,0 +179,0 @@ this.prop.resolution = resolution?.id;

src/plugins/virtual-tour/index.js

@@ -213,2 +213,8 @@ import * as THREE from 'three';
     /**
+     * @type {PSV.plugins.GalleryPlugin}
+     * @private
+     */
+    this.gallery = null;
+
+    /**
      * @type {PSV.plugins.VirtualTourPlugin.AbstractDatasource}
@@ -241,2 +247,3 @@ */
     this.compass = this.psv.getPlugin('compass');
+    this.gallery = this.psv.getPlugin('gallery');
 
@@ -302,2 +309,3 @@ if (!this.is3D() && !this.markers) {
     delete this.compass;
+    delete this.gallery;
     delete this.arrowsGroup;
@@ -392,2 +400,20 @@
     this.setCurrentNode(startNodeId);
+
+    if (this.gallery) {
+      this.gallery.setItems(
+        nodes.map(node => ({
+          id       : node.id,
+          panorama : node.panorama,
+          name     : node.name,
+          thumbnail: node.thumbnail,
+          options  : {
+            caption         : node.caption,
+            panoData        : node.panoData,
+            sphereCorrection: node.sphereCorrection,
+            description     : node.description,
+          },
+        })),
+        id => this.setCurrentNode(id)
+      );
+    }
   }
@@ -722,2 +748,4 @@
   showNodesList() {
+    utils.logWarn(`Starting from next version, the VirtualTourPlugin will require the GalleryPlugin to display the list of nodes.`);
+
     const nodes = this.change(EVENTS.RENDER_NODES_LIST, Object.values(this.datasource.nodes));
@@ -724,0 +752,0 @@

src/plugins/virtual-tour/NodesListButton.js

@@ -46,3 +46,3 @@ import { AbstractButton, CONSTANTS } from '../..';
   isSupported() {
-    return !!this.plugin && !this.plugin.isServerSide();
+    return !!this.plugin && !this.plugin.isServerSide() && !this.plugin.gallery;
   }
@@ -49,0 +49,0 @@

src/services/EventsHandler.js

@@ -157,3 +157,3 @@ import * as THREE from 'three';
 
-    if (!getClosest(evt.target, '.psv-navbar') && !getClosest(evt.target, '.psv-panel')) {
+    if (!getClosest(evt.target, '.psv--capture-event')) {
       /* eslint-disable */
@@ -160,0 +160,0 @@ switch (evt.type) {

src/utils/misc.js

@@ -199,1 +199,34 @@ /**
 }
+
+/**
+ * @summary Returns deep equality between objects
+ * {@link https://gist.github.com/egardner/efd34f270cc33db67c0246e837689cb9}
+ * @param obj1
+ * @param obj2
+ * @return {boolean}
+ * @private
+ */
+export function deepEqual(obj1, obj2) {
+  if (obj1 === obj2) {
+    return true;
+  }
+  else if (isObject(obj1) && isObject(obj2)) {
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+      return false;
+    }
+    for (const prop of Object.keys(obj1)) {
+      if (!deepEqual(obj1[prop], obj2[prop])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+function isObject(obj) {
+  return typeof obj === 'object' && obj != null;
+}
+

types/models.d.ts

@@ -91,2 +91,3 @@ import { Texture } from 'three';
 export type TextureData = {
+  panorama: any;
   texture: Texture | Texture[] | Record<string, Texture>;
@@ -93,0 +94,0 @@ panoData?: PanoData;

types/plugins/markers/index.d.ts

@@ -46,3 +46,3 @@ import { AbstractPlugin, Animation, ExtendedPosition, Viewer } from '../..';
   visible?: boolean;
-  tooltip?: string | { content: string, position?: string };
+  tooltip?: string | { content: string, position?: string, className?: string, trigger?: 'hover' | 'click' };
   content?: string;
@@ -122,2 +122,3 @@ hideList?: boolean;
 export const EVENTS: {
+  MARKER_VISIBILITY  : 'marker-visibility',
   GOTO_MARKER_DONE: 'goto-marker-done',
@@ -234,2 +235,12 @@ LEAVE_MARKER: 'leave-marker',
   /**
+   * @summary Forces the display of the tooltip
+   */
+  showMarkerTooltip(markerId: string);
+
+  /**
+   * @summary Hides the tooltip
+   */
+  hideMarkerTooltip(markerId: string);
+
+  /**
    * @summary Opens the panel with the content of the marker
@@ -260,2 +271,7 @@ */
   /**
+   * @summary Triggered when the visibility of a marker changes
+   */
+  on(e: 'marker-visibility', cb: (e: Event, marker: Marker, visible: boolean) => void): this;
+
+  /**
    * @summary Triggered when the animation to a marker is done
@@ -262,0 +278,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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

2489245

increased by3.73%

Number of package files

267

increased by4.71%

Lines of code

40095

increased by3.81%

Worsened metrics

Dev dependency count

43

increased by2.38%

Number of low supply chain risk alerts

5

increased by25%

Dependency changes

• + Addedthree@0.143.0(transitive)

• - Removedthree@0.142.0(transitive)

• Updatedthree@^0.143.0