feat: add back slider component

declarations/mapillary.js.flow

@@ -2431,6 +2431,85 @@ export type SequenceConfiguration = {
   ...
 } & ComponentConfiguration;
 
+/**
+ * Enumeration for slider mode.
+ * @enum {number} *
+ * @readonly
+ * @description Modes for specifying how transitions
+ * between images are performed in slider mode. Only
+ * applicable when the slider component determines
+ * that transitions with motion is possilble. When it
+ * is not, the stationary mode will be applied.
+ */
+declare var SliderConfigurationMode: {|
+  +Motion: 0, // 0
+  +Stationary: 1, // 1
+|};
+/**
+ * Interface for configuration of slider ids.
+ * @interface
+ */
+export interface SliderConfigurationIds {
+  /**
+   * Id for the image plane in the background.
+   */
+  background: string;
+  /**
+   * Id for the image plane in the foreground.
+   */
+  foreground: string;
+}
+/**
+ * Interface for configuration of slider component.
+ * @interface ```js
+ * var viewer = new Viewer({
+ *     ...
+ *     component: {
+ *         slider: {
+ *             initialPosition: 0.5,
+ *             ids: {
+ *                 background: '<background-id>',
+ *                 foreground: '<foreground-id>',
+ *             },
+ *             sliderVisible: true,
+ *         },
+ *     },
+ *     ...
+ * });
+ * ```
+ */
+export type SliderConfiguration = {
+  /**
+   * Initial position of the slider on the interval [0, 1].
+   * @description Configures the initial position of the slider.
+   * The inital position value will be used when the component
+   * is activated.
+   * @default 1
+   */
+  initialPosition?: number,
+  /**
+   * Slider image ids.
+   * @description Configures the component to show the image
+   * planes for the supplied image ids  in the foreground
+   * and the background.
+   */
+  ids?: SliderConfigurationIds,
+  /**
+   * Value indicating whether the slider should be visible.
+   * @description Set the value controlling if the
+   * slider is visible.
+   * @default true
+   */
+  sliderVisible?: boolean,
+  /**
+   * Mode used for image pair transitions.
+   * @description Configures the mode for transitions between
+   * image pairs.
+   */
+  mode?: $Values<typeof SliderConfigurationMode>,
+  ...
+} & ComponentConfiguration;
+
 declare var CameraVisualizationMode: {|
   +Hidden: 0, // 0
   +Homogeneous: 1, // 1
@@ -2724,6 +2803,13 @@ export type ComponentOptions = {
    */
   sequence?: boolean | SequenceConfiguration;
 
+  /**
+   * Show a slider for transitioning between image planes.
+   * @description Requires WebGL support.
+   * @default false
+   */
+  slider?: boolean | SliderConfiguration;
+
   /**
    * Enable an interface for showing spatial data in the viewer.
    * @description Requires WebGL support.
@@ -3529,6 +3615,7 @@ export type ComponentName =
   | "pointer"
   | "popup"
   | "sequence"
+  | "slider"
   | "spatial"
   | "tag"
   | "zoom";
@@ -4031,6 +4118,10 @@ declare class Viewer implements IEventEmitter, IViewer {
  * how the camera is controlled when the viewer
  * receives pointer and keyboard input.
  *
+ * Changing the camera control mode is not possible
+ * when the slider component is active and attempts
+ * to do so will be ignored.
+ *
  * @param {$Values<
                 typeof
                 CameraControls>} controls - Camera control mode.
@@ -6624,6 +6715,45 @@ declare class SequenceComponent extends Component<SequenceConfiguration> {
   _getDefaultConfiguration(): SequenceConfiguration;
 }
 
+/**
+ * @class SliderComponent
+ * @classdesc Component for comparing pairs of images. Renders
+ * a slider for adjusting the curtain of the first image.
+ *
+ * Deactivate the sequence, direction and image plane
+ * components when activating the slider component to avoid
+ * interfering UI elements.
+ *
+ * To retrive and use the slider component
+ * @example ```js
+ * var viewer = new Viewer({ ... });
+ *
+ * viewer.deactivateComponent("image");
+ * viewer.deactivateComponent("direction");
+ * viewer.deactivateComponent("sequence");
+ *
+ * viewer.activateComponent("slider");
+ *
+ * var sliderComponent = viewer.getComponent("slider");
+ * ```
+ */
+declare class SliderComponent extends Component<SliderConfiguration> {
+  static componentName: string;
+
+  /**
+   * @ignore
+   */
+  constructor(
+    name: string,
+    container: Container,
+    navigator: Navigator,
+    viewportCoords?: ViewportCoords
+  ): this;
+  _activate(): void;
+  _deactivate(): void;
+  _getDefaultConfiguration(): SliderConfiguration;
+}
+
 declare class SpatialComponent extends Component<SpatialConfiguration> {
   static componentName: string;
 
@@ -8193,6 +8323,8 @@ declare export {
   Shader,
   ShaderChunk,
   SimpleMarker,
+  SliderComponent,
+  SliderConfigurationMode,
   SpatialComponent,
   SpotTag,
   Tag,

examples/debug/index.html

@@ -140,6 +140,25 @@
                     viewer.activateComponent("cache");
                     sequenceComponent.stop();
                 });
+
+                let sliderActive = false;
+                addButton("Slider", () => {
+                    if (sliderActive) {
+                        viewer.activateComponent("image");
+                        viewer.activateComponent("direction");
+                        viewer.activateComponent("sequence");
+                        viewer.activateComponent("keyboard");
+                        viewer.deactivateComponent("slider");
+                        sliderActive = false;
+                    } else {
+                        viewer.activateComponent("slider");
+                        viewer.deactivateComponent("image");
+                        viewer.deactivateComponent("direction");
+                        viewer.deactivateComponent("sequence");
+                        viewer.deactivateComponent("keyboard");
+                        sliderActive = true;
+                    }
+                });
             }
         </script>
     </body>

src/component/ComponentName.ts

@@ -10,6 +10,7 @@ export type ComponentName =
     | "pointer"
     | "popup"
     | "sequence"
+    | "slider"
     | "spatial"
     | "tag"
     | "zoom";

src/component/interfaces/SliderConfiguration.ts

@@ -0,0 +1,108 @@
+import { ComponentConfiguration } from "./ComponentConfiguration";
+/**
+ * Enumeration for slider mode.
+ *
+ * @enum {number}
+ * @readonly
+ *
+ * @description Modes for specifying how transitions
+ * between images are performed in slider mode. Only
+ * applicable when the slider component determines
+ * that transitions with motion is possilble. When it
+ * is not, the stationary mode will be applied.
+ */
+export enum SliderConfigurationMode {
+    /**
+     * Transitions with motion.
+     *
+     * @description The slider component moves the
+     * camera between the image origins.
+     *
+     * In this mode it is not possible to zoom or pan.
+     *
+     * The slider component falls back to stationary
+     * mode when it determines that the pair of images
+     * does not have a strong enough relation.
+     */
+    Motion,
+    /**
+     * Stationary transitions.
+     *
+     * @description The camera is stationary.
+     *
+     * In this mode it is possible to zoom and pan.
+     */
+    Stationary,
+}
+/**
+ * Interface for configuration of slider ids.
+ *
+ * @interface
+ */
+export interface SliderConfigurationIds {
+    /**
+     * Id for the image plane in the background.
+     */
+    background: string;
+    /**
+     * Id for the image plane in the foreground.
+     */
+    foreground: string;
+}
+/**
+ * Interface for configuration of slider component.
+ *
+ * @interface
+ * ```js
+ * var viewer = new Viewer({
+ *     ...
+ *     component: {
+ *         slider: {
+ *             initialPosition: 0.5,
+ *             ids: {
+ *                 background: '<background-id>',
+ *                 foreground: '<foreground-id>',
+ *             },
+ *             sliderVisible: true,
+ *         },
+ *     },
+ *     ...
+ * });
+ * ```
+ */
+export interface SliderConfiguration extends ComponentConfiguration {
+    /**
+     * Initial position of the slider on the interval [0, 1].
+     *
+     * @description Configures the initial position of the slider.
+     * The inital position value will be used when the component
+     * is activated.
+     *
+     * @default 1
+     */
+    initialPosition?: number;
+    /**
+     * Slider image ids.
+     *
+     * @description Configures the component to show the image
+     * planes for the supplied image ids  in the foreground
+     * and the background.
+     */
+    ids?: SliderConfigurationIds;
+    /**
+     * Value indicating whether the slider should be visible.
+     *
+     * @description Set the value controlling if the
+     * slider is visible.
+     *
+     * @default true
+     */
+    sliderVisible?: boolean;
+    /**
+     * Mode used for image pair transitions.
+     *
+     * @description Configures the mode for transitions between
+     * image pairs.
+     */
+    mode?: SliderConfigurationMode;
+}