Add new transition effects "black" and "white"

docs/guide/config.md

@@ -214,7 +214,7 @@ Allows to fix the panorama orientation.
 
 #### `panoData`
 
--   type: `object | function<Image, PanoData, PanoData>`
+-   type: `PanoData | function<Image, PanoData, PanoData>`
 
 Overrides XMP data found in the panorama file.
 All parameters are optional.
@@ -243,6 +243,16 @@ panoData: (image, xmpData) => ({
 });
 ```
 
+#### `defaultTransition`
+
+-   type: `TransitionOptions`
+-   default: `{ speed: 1500, rotation: true, effect: "fade" }`
+
+Configures the default transition between panoramas. All parameters can be changed when calling `setPanorama()` method.
+
+Possible `effect` are `fade, black, white`.  
+The `speed` is either a duration in milliseconds or a string containing the speed in revolutions per minute (`2rpm`).
+
 #### `moveSpeed`
 
 -   type: `double`

docs/guide/methods.md

@@ -99,8 +99,6 @@ viewer.setOptions({
 
 Change the panorama image with an optional transition animation (enabled by default). See all options in the [API Documentation](/api/types/Core.PanoramaOptions.html){target=_blank}.
 
-The `speed` option is either a duration in milliseconds or a string containing the speed in revolutions per minute (`2rpm`).
-
 The method returns a Promise resolved when the new panorama has finished loading.
 
 ```js
@@ -110,9 +108,12 @@ viewer.setPanorama('image.jpg')
 viewer.setPanorama('image.jpg', { transition: false });
 
 viewer.setPanorama('image.jpg', {
-  speed: '20rpm',
-  position: { yaw: 0, pitch: 0 },
   caption: 'The new caption',
+  position: { yaw: 0, pitch: 0 },
+  transition: {
+    rotation: false,
+    effect: 'black',
+  },
   // more options in the API doc
 });
 ```

docs/plugins/virtual-tour.md

@@ -289,7 +289,7 @@ Enable the preloading of linked nodes, can be a function that returns true or fa
 #### `transitionOptions`
 
 -   type: `object | function`
--   default: `{ showLoader: true, speed: '20rpm', fadeIn: true, rotation: true }`
+-   default: `{ showLoader: true, speed: '20rpm', effect: 'fade', rotation: true }`
 -   updatable: no
 
 Configuration of the transition between nodes. Can be a callback.
@@ -309,16 +309,16 @@ The default behaviour is to rotate the view to face the direction of the link an
      * @default true
      */
     showLoader?: boolean;
+    /**
+     * Enable transition between nodes
+     * @default 'fade'
+     */
+    effect?: 'none' | 'fade' | 'black' | 'white';
     /**
      * Speed or duration of the transition between nodes
      * @default '20rpm'
      */
     speed?: string | number;
-    /**
-     * Enable fade-in between nodes
-     * @default true
-     */
-    fadeIn?: boolean;
     /**
      * Enable rotation in the direction of the next node
      * @default true
@@ -332,8 +332,8 @@ The default behaviour is to rotate the view to face the direction of the link an
 ```ts
 (toNode: Node, fromNode?: Node, fromLink?: NodeLink) => ({
     showLoader?: boolean;
+    effect?: 'none' | 'fade' | 'black' | 'white';
     speed?: string | number;
-    fadeIn?: boolean;
     rotation?: boolean;
     /**
      * Define where to rotate the current panorama before switching to the next

examples/adapter-equirectangular.html

@@ -75,7 +75,6 @@
                 // moveSpeed: 2,
                 // zoomSpeed: 2,
                 // moveInertia: false,
-                keyboard: 'always',
                 navbar: [
                     'zoom',
                     'move',

examples/index.html

@@ -70,6 +70,7 @@ <h5 class="card-header">Misc</h5>
                             <a href="misc-equirectangular-cropped.html" class="list-group-item list-group-item-action">Cropped panorama</a>
                             <a href="misc-equirectangular-video-cropped.html" class="list-group-item list-group-item-action">Cropped video panorama</a>
                             <a href="misc-little-planet.html" class="list-group-item list-group-item-action">Little Planet</a>
+                            <a href="misc-transition.html" class="list-group-item list-group-item-action">Transition</a>
                         </div>
                     </div>
                 </div>

examples/misc-transition.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PhotoSphereViewer - transition demo</title>
+
+        <link rel="stylesheet" href="/dist/core/index.css" />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div id="photosphere"></div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
+                    "@photo-sphere-viewer/core": "/dist/core/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { GUI } from 'lil-gui';
+            import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core';
+
+            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+
+            const panos = [
+                {
+                    url: baseUrl + 'sphere.jpg',
+                    caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
+                },
+                {
+                    url: baseUrl + 'sphere-test.jpg',
+                    caption: 'Test sphere',
+                },
+            ];
+
+            const viewer = new Viewer({
+                container: 'photosphere',
+                panorama: panos[0].url,
+                caption: panos[0].caption,
+                loadingImg: baseUrl + 'loader.gif',
+            });
+
+            let i = 0;
+            const config = {
+                enabled: true,
+                speed_mode: 'duration',
+                speed_duration: 1.5,
+                speed_speed: 3,
+                rotation: true,
+                effect: 'fade',
+
+                run() {
+                    i = 1 - i;
+                    viewer.setPanorama(panos[i].url, {
+                        caption: panos[i].caption,
+                        position: {
+                            yaw: (((Math.random() - 0.5) * 3) / 2) * Math.PI,
+                            pitch: (((Math.random() - 0.5) * 3) / 4) * Math.PI,
+                        },
+                        zoom: Math.random() * 60 + 20,
+                    });
+                }
+            };
+
+            const gui = new GUI({ title: 'Transition Options' });
+
+            gui.add(config, 'enabled');
+            gui.add(config, 'rotation');
+            gui.add(config, 'effect', ['fade', 'black', 'white']);
+
+            const speed = gui.addFolder('Speed/Duration');
+            speed.add(config, 'speed_mode', ['duration', 'speed']).name('Mode');
+            speed.add(config, 'speed_duration', 0.5, 10, 0.5).name('Duration (s)');
+            speed.add(config, 'speed_speed', 0.5, 10, 0.5).name('Speed (rpm)');
+
+            gui.add(config, 'run').name('Run');
+
+            gui.onChange(() => {
+                viewer.setOption('defaultTransition', !config.enabled ? null : {
+                    rotation: config.rotation,
+                    effect: config.effect,
+                    speed: config.speed_mode === 'duration' ? config.speed_duration * 1000 : config.speed_speed + 'rpm',
+                });
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>

examples/plugin-virtual-tour.html

@@ -204,7 +204,7 @@
                         transitionOptions: {
                             // showLoader: false,
                             // speed: '10rpm',
-                            // fadeIn: false,
+                            // effect: 'black',
                             // rotation: false,
                         },
 

packages/core/src/Viewer.ts

@@ -10,7 +10,7 @@ import { Panel } from './components/Panel';
 import { Tooltip, TooltipConfig } from './components/Tooltip';
 import { Cache } from './data/cache';
 import { CONFIG_PARSERS, DEFAULTS, getViewerConfig, READONLY_OPTIONS } from './data/config';
-import { DEFAULT_TRANSITION, IDS, VIEWER_DATA } from './data/constants';
+import { IDS, VIEWER_DATA } from './data/constants';
 import { SYSTEM } from './data/system';
 import {
     BeforeAnimateEvent,
@@ -181,7 +181,10 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
         // load panorama
         if (!this.state.loadingPromise) {
             if (this.config.panorama) {
-                this.setPanorama(this.config.panorama);
+                this.setPanorama(this.config.panorama, {
+                    sphereCorrection: this.config.sphereCorrection,
+                    panoData: this.config.panoData,
+                });
             } else {
                 this.loader.show();
             }
@@ -346,22 +349,8 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
         this.textureLoader.abortLoading();
         this.state.transitionAnimation?.cancel();
 
-        // apply default parameters on first load
-        if (!this.state.ready) {
-            ['sphereCorrection', 'panoData'].forEach((opt) => {
-                if (!(opt in options)) {
-                    // @ts-ignore
-                    options[opt] = this.config[opt];
-                }
-            });
-        }
+        const transition = this.dataHelper.getTransitionOptions(options);
 
-        if (options.transition === undefined) {
-            options.transition = true;
-        }
-        if (options.speed === undefined) {
-            options.speed = DEFAULT_TRANSITION;
-        }
         if (options.showLoader === undefined) {
             options.showLoader = true;
         }
@@ -381,6 +370,7 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
         this.config.panorama = path;
         this.config.caption = options.caption;
         this.config.description = options.description;
+        this.config.sphereCorrection = options.sphereCorrection;
 
         const done = (err?: Error) => {
             if (isAbortError(err)) {
@@ -428,7 +418,7 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
             };
         });
 
-        if (!options.transition || !this.state.ready || !this.adapter.supportsTransition(this.config.panorama)) {
+        if (!transition || !this.state.ready || !this.adapter.supportsTransition(this.config.panorama)) {
             this.state.loadingPromise = loadingPromise
                 .then(({ textureData, cleanOptions }) => {
                     this.renderer.show();
@@ -460,7 +450,7 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
 
                     this.dispatchEvent(new PanoramaLoadedEvent(textureData));
 
-                    this.state.transitionAnimation = this.renderer.transition(textureData, cleanOptions);
+                    this.state.transitionAnimation = this.renderer.transition(textureData, cleanOptions, transition);
                     return this.state.transitionAnimation;
                 })
                 .then((completed) => {

packages/core/src/data/config.ts

@@ -39,6 +39,11 @@ export const DEFAULTS: Required<ParsedViewerConfig> = {
     panoData: null,
     requestHeaders: null,
     canvasBackground: '#000',
+    defaultTransition: {
+        speed: 1500,
+        rotation: true,
+        effect: 'fade',
+    },
     rendererParameters: { alpha: true, antialias: true },
     withCredentials: false,
     navbar: [
@@ -201,6 +206,13 @@ export const CONFIG_PARSERS: ConfigParsers<ViewerConfig, ParsedViewerConfig> = {
         }
         return null;
     },
+    defaultTransition: (defaultTransition, { defValue }) => {
+        if (defaultTransition === null || defaultTransition.speed === 0) {
+            return null;
+        } else {
+            return { ...defValue, ...defaultTransition };
+        }
+    },
     rendererParameters: (rendererParameters, { defValue }) => ({
         ...rendererParameters,
         ...defValue,

packages/core/src/data/constants.ts

@@ -8,11 +8,6 @@ import menu from '../icons/menu.svg';
 import zoomIn from '../icons/zoom-in.svg';
 import zoomOut from '../icons/zoom-out.svg';
 
-/**
- * Default duration of the transition between panoramas
- */
-export const DEFAULT_TRANSITION = 1500;
-
 /**
  *  Minimum duration of the animations created with {@link Viewer#animate}
  */

packages/core/src/model.ts

@@ -151,10 +151,9 @@ export type PanoramaOptions = {
      * enable transition (rotation + fading) between old and new panorama
      * @default true
      */
-    transition?: boolean | 'fade-only';
+    transition?: boolean | 'fade-only' | TransitionOptions;
     /**
-     * speed or duration of the transition between old and new panorama
-     * @default 1500
+     * @deprecated Use `transition.speed`
      */
     speed?: string | number;
     /**
@@ -172,6 +171,15 @@ export type PanoramaOptions = {
     panoData?: PanoData | PanoDataProvider;
 };
 
+export type TransitionOptions = {
+    /** @default 1500 */
+    speed?: string | number;
+    /** @default true */
+    rotation?: boolean;
+    /** @default 'fade' */
+    effect?: 'fade' | 'black' | 'white';
+};
+
 /**
  * Result of {@link AbstractAdapter.loadTexture}
  */
@@ -367,6 +375,8 @@ export type ViewerConfig = {
     requestHeaders?: Record<string, string> | ((url: string) => Record<string, string>);
     /** @default '#000' */
     canvasBackground?: string;
+    /** @default '{ speed: 1500, rotation: true, effect: "fade" }' */
+    defaultTransition?: TransitionOptions;
     /** @default '{ alpha: true, antialias: true }' */
     rendererParameters?: WebGLRendererParameters;
     /** @default false */