diff --git a/docs/plugins/plugin-virtual-tour.md b/docs/plugins/plugin-virtual-tour.md index ab17bc3c1..1ef228cdc 100644 --- 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 index abe63cad6..9e4fedc9f 100644 --- 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 index aa6e8ecec..382433bc0 100644 --- 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,7 +364,6 @@ export class VirtualTourPlugin extends AbstractPlugin { return Promise.resolve(true); } - this.psv.loader.show(); this.psv.hideError(); this.prop.loadingNode = nodeId; @@ -370,17 +371,31 @@ export class VirtualTourPlugin extends AbstractPlugin { 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 index 7ddab6efc..e1de5d7bf 100644 --- 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; startNodeId?: string; preload?: boolean | ((node: VirtualTourNode, link: VirtualTourNodeLink) => boolean); + rotateSpeed?: boolean | string | number; markerStyle?: MarkerProperties; arrowStyle?: VirtualTourArrowStyle; markerLatOffset?: number;