virtual tour: adds automatic rotation to clicked link (rotateSpeed op…

…tion)
mistic100 · Jan 20, 2022 · 279f30d · 279f30d
1 parent 2800c2c
commit 279f30d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/docs/plugins/plugin-virtual-tour.md b/docs/plugins/plugin-virtual-tour.md
@@ -232,6 +232,12 @@ Id of the initially loaded node. If empty the first node will be displayed. You
 
 Enable the preloading of linked nodes, can be a function that returns true or false for each link.
 
+#### `rotateSpeed`
+- type: `boolean | string | number`
+- default: `20rpm`
+
+When a link is clicked, adds a panorama rotation to face it before actually changing the node. If `false` the viewer won't rotate at all and keep the current orientation.
+
 #### `listButton`
 - type: `boolean`
 - default: `true` id client data mode

diff --git a/example/plugin-virtual-tour.html b/example/plugin-virtual-tour.html
@@ -130,6 +130,7 @@
         renderMode   : PhotoSphereViewer.VirtualTourPlugin.MODE_3D,
         startNodeId  : nodes[0].id,
         preload      : true,
+        // rotateSpeed  : false,
         arrowPosition: 'bottom',
 
         // client mode

diff --git a/src/plugins/virtual-tour/index.js b/src/plugins/virtual-tour/index.js
@@ -91,6 +91,7 @@ import { bearing, distance, setMeshColor } from './utils';
  * @property {PSV.plugins.VirtualTourPlugin.GetLinks} [getLinks]
  * @property {string} [startNodeId] - id of the initial node, if not defined the first node will be used
  * @property {boolean|PSV.plugins.VirtualTourPlugin.Preload} [preload=false] - preload linked panoramas
+ * @property {boolean|string|number} [rotateSpeed='20rpm'] - speed of rotation when clicking on a link, if 'false' the viewer won't rotate at all
  * @property {boolean} [listButton] - adds a button to show the list of nodes, defaults to `true` only in client data mode
  * @property {boolean} [linksOnCompass] - if the Compass plugin is enabled, displays the links on the compass, defaults to `true` on in markers render mode
  * @property {PSV.plugins.MarkersPlugin.Properties} [markerStyle] - global marker style
@@ -162,6 +163,7 @@ export class VirtualTourPlugin extends AbstractPlugin {
       positionMode   : MODE_MANUAL,
       renderMode     : MODE_3D,
       preload        : false,
+      rotateSpeed    : '20rpm',
       markerLatOffset: -0.1,
       arrowPosition  : 'bottom',
       linksOnCompass : options?.renderMode === MODE_MARKERS,
@@ -362,25 +364,38 @@ export class VirtualTourPlugin extends AbstractPlugin {
       return Promise.resolve(true);
     }
 
-    this.psv.loader.show();
     this.psv.hideError();
 
     this.prop.loadingNode = nodeId;
 
     const fromNode = this.prop.currentNode;
     const fromLinkPosition = fromNode && fromLink ? this.__getLinkPosition(fromNode, fromLink) : null;
 
-    // if this node is already preloading, wait for it
-    return Promise.resolve(this.preload[nodeId])
-      .then(() => {
-        if (this.prop.loadingNode !== nodeId) {
-          return Promise.reject(utils.getAbortError());
-        }
+    return Promise.all([
+      // if this node is already preloading, wait for it
+      Promise.resolve(this.preload[nodeId])
+        .then(() => {
+          if (this.prop.loadingNode !== nodeId) {
+            return Promise.reject(utils.getAbortError());
+          }
 
-        this.psv.textureLoader.abortLoading();
-        return this.datasource.loadNode(nodeId);
-      })
-      .then((node) => {
+          this.psv.textureLoader.abortLoading();
+          return this.datasource.loadNode(nodeId);
+        }),
+      Promise.resolve(fromLinkPosition ? this.config.rotateSpeed : false)
+        .then((speed) => {
+          if (!speed) {
+            return Promise.resolve();
+          }
+          else {
+            return this.psv.animate({ ...fromLinkPosition, speed });
+          }
+        })
+        .then(() => {
+          this.psv.loader.show();
+        }),
+    ])
+      .then(([node]) => {
         if (this.prop.loadingNode !== nodeId) {
           return Promise.reject(utils.getAbortError());
         }

diff --git a/types/plugins/virtual-tour/index.d.ts b/types/plugins/virtual-tour/index.d.ts
@@ -56,6 +56,7 @@ export type VirtualTourPluginPluginOptions = {
   getLinks?: (nodeId: string) => VirtualTourNodeLink[] | Promise<VirtualTourNodeLink[]>;
   startNodeId?: string;
   preload?: boolean | ((node: VirtualTourNode, link: VirtualTourNodeLink) => boolean);
+  rotateSpeed?: boolean | string | number;
   markerStyle?: MarkerProperties;
   arrowStyle?: VirtualTourArrowStyle;
   markerLatOffset?: number;