@3dweb/360javascriptviewer 1.8.38 → 1.8.40

package/typings/JavascriptViewer.d.ts

@@ -1,360 +1,401 @@
-import {Slot} from "ts-event-bus";
+import { Slot } from 'ts-event-bus';
 
 export class JavascriptViewer {
-    /**
-     * Create an instance of the viewer.
-     * There are multiple instances possible on a page
-     * @param options
-     */
-    constructor(options: options);
-
-    /**
-     * Use this to register events.
-     * @return IEvents
-     */
-    events(): IEvents;
-
-    /**
-     * Start the presentation, loading all images and replace the main image with a 360 presentation
-     * @async
-     * @return boolean
-     * @throws string
-     */
-    start(): Promise<boolean>;
-
-    /**
-     * Destroys the presentation and returns to previous state
-     * @async
-     * @return boolean
-     * @throws string
-     */
-    destroy(): Promise<boolean>;
-
-    /**
-     * Set the desired rotation and the 360 model is rotating to it.
-     * @async
-     * @param degree
-     * @return IResponse
-     * @throws string
-     */
-    rotateDegrees(degree: number): Promise<IResponse>;
-
-    /**
-     * Rotate to a certain degree. Frame nr 1 is 0 degrees.
-     * @param targetDegree
-     * @param shortestWay
-     * @param useEasing
-     * @return IResponse
-     * @throws string
-     */
-    rotateToDegree(targetDegree: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
-
-    /**
-     * Rotate to a certain degree. Frame nr 1 is 0 degrees.
-     * @param frame
-     * @param shortestWay
-     * @param useEasing
-     * @return IResponse
-     * @throws string
-     */
-    rotateToFrame(frame: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
-
-    /**
-     * Set the current speed of rotating for the viewer instance
-     * @param speed
-     */
-    setSpeed(speed: number): void;
-
-    /**
-     * Set the current inertia of the viewer
-     * Set the current inertia for the viewer instance
-     * @param inertia
-     */
-    setInertia(inertia: number): void;
-
-    /**
-     * Change the current presentation created by 3dweb.io
-     * @param id
-     */
-    setId(id: number): Promise<boolean>;
-
-    /**
-     * Resets the zoom
-     */
-    resetZoom(): Promise<void>
-
-    /**
-     * Zoom to given location.
-     * x and y are percentages from the middle 0-1 and -1-0
-     */
-    zoomTo(factor:number, x:number, y:number): Promise<void>
-
-    /**
-     * Checks if the presentation is zoomed
-     */
-    isZoomedIn(): boolean
+  /**
+   * Create an instance of the viewer.
+   * There are multiple instances possible on a page
+   * @param options
+   */
+  constructor(options: options);
+
+  /**
+   * Use this to register events.
+   * @return IEvents
+   */
+  events(): IEvents;
+
+  /**
+   * Start the presentation, loading all images and replace the main image with a 360 presentation
+   * @async
+   * @return boolean
+   * @throws string
+   */
+  start(): Promise<boolean>;
+
+  /**
+   * Destroys the presentation and returns to previous state
+   * @async
+   * @return boolean
+   * @throws string
+   */
+  destroy(): Promise<boolean>;
+
+  /**
+   * Set the desired rotation and the 360 model is rotating to it.
+   * @async
+   * @param degree
+   * @return IResponse
+   * @throws string
+   */
+  rotateDegrees(degree: number): Promise<IResponse>;
+
+  /**
+   * Rotate to a certain degree. Frame nr 1 is 0 degrees.
+   * @param targetDegree
+   * @param shortestWay
+   * @param useEasing
+   * @return IResponse
+   * @throws string
+   */
+  rotateToDegree(targetDegree: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
+
+  /**
+   * Rotate to a certain degree. Frame nr 1 is 0 degrees.
+   * @param frame
+   * @param shortestWay
+   * @param useEasing
+   * @return IResponse
+   * @throws string
+   */
+  rotateToFrame(frame: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
+
+  /**
+   * Set the current speed of rotating for the viewer instance
+   * @param speed
+   */
+  setSpeed(speed: number): void;
+
+  /**
+   * Set the current inertia of the viewer
+   * Set the current inertia for the viewer instance
+   * @param inertia
+   */
+  setInertia(inertia: number): void;
+
+  /**
+   * Change the current presentation created by 3dweb.io
+   * @param id
+   */
+  setId(id: number): Promise<boolean>;
+
+  /**
+   * Resets the zoom
+   */
+  resetZoom(): Promise<void>
+
+  /**
+   * Zoom to given location.
+   * x and y are percentages from the middle 0-1 and -1-0
+   */
+  zoomTo(factor: number, x: number, y: number): Promise<void>
+
+  /**
+   * Checks if the presentation is zoomed
+   */
+  isZoomedIn(): boolean
 }
 
 export type Optional<T> = {
-    [P in keyof T]?: T[P];
+  [P in keyof T]?: T[P];
 };
 
 export type options = Optional<IOptions>;
 
 export interface IResponse {
-    currentDegree: number;
+  currentDegree: number;
 }
 
 export interface IOptions {
 
-    /**
-     * ID of the presentation created by 3dweb.io
-     */
-    id?: string;
-
-    /**
-     * ID of the image which is the base for all the frames
-     * default is jsv-image
-     */
-    mainImageId?: string;
-
-    /**
-     * ID of the div where the presentation runs in
-     * Default is jsv-holder
-     */
-    mainHolderId?: string;
-
-    /**
-     * URl of the first image, doesn't have to be in the document.
-     * Default is empty
-     */
-    mainImageUrl?: string;
-
-    /**
-     * Amount of frames in the presentation, more images means smoother rotations
-     * but also more heavier for the browser
-     * default is 72
-     */
-    totalFrames?: number;
-
-    /**
-     * After loading the presentation this is the first frame visible
-     * Default is 1
-     */
-    firstImageNumber?: number;
-
-    /**
-     * Invert the rotation direction when dragging
-     * Default is false
-     */
-    reverse?: boolean;
-
-    /**
-     * Speed of rotating -199 to 100
-     * Default is 80
-     */
-    speed?: number;
-
-    /**
-     * Delay when stop dragging
-     * Default is 20
-     */
-    inertia?: number;
-
-    /**
-     * Disable the build in progress bar, use this when you have
-     * implemented your own loader or don't like this one.
-     * Default is true
-     */
-    defaultProgressBar?: boolean;
-
-    /**
-     * Format for determining the filenames of the frames
-     * {filename}_xx.{extension} is the default
-     * ipod_x.jpg => ipod_1.jpg
-     * ipod_xx.jpg => ipod_01.jpg
-     * https://other.cdn/images/ipod_xx.jpg => https://other.cdn/images/ipod_01.jpg
-     */
-    imageUrlFormat?: string
-
-    /**
-     * Load all image urls into the viewer. Total frames will be overwritten
-     */
-    imageUrls?: string[]
-
-    /**
-     * Add a class to all the images used in the presentation, separate multiple classes with a space.
-     * Default is empty
-     */
-    extraImageClass?: string
-
-    /**
-     * Use this setting in combination with imageUrlFormat.
-     * startFrameNo: 4 => first file is ipod_04.jpg
-     * Default is 1
-     */
-    startFrameNo?: number
-
-    /**
-     * Use this setting for rotating the view at start. Rotation stops when user drags the model
-     * or another animation method is called
-     * startRotation: 0 => No Rotation, 1 => Rotate once, 2 => Rotate twice
-     * Default is 0
-     */
-    autoRotate?: number
-
-    /**
-     * Use this setting for changing the speed of the auto rotating. -199 to 100
-     * Default is speed of viewer
-     */
-    autoRotateSpeed?: number
-
-    /**
-     * Use this setting for changing the direction of the auto rotating.
-     * Default is false
-     */
-    autoRotateReverse?: boolean
-
-    /**
-     * Use this setting for enabling click and pinch events on images
-     * Default is false
-     */
-    enableImageEvents?: boolean
-
-    /**
-     * Fires changeImage event in rotation. Keep track what your user is watching.
-     * Could be CPU heavy
-     * Default is false
-     */
-    enableChangeImageEvent?: boolean
-
-    /**
-     * Use this setting for enabling zoom functions.
-     * Default is false
-     */
-    zoom?: boolean
-
-    /**
-     * If zoom is enabled this is the max zoom factor.
-     * Default is 2
-     */
-    zoomMax?: number
-
-    /**
-     * Change the speed of zooming with the mousewheel.
-     * Default is 50
-     */
-    zoomWheelSpeed?: number
-
-    /**
-     * Blocks repeating images after reaching last image.
-     * Default is false
-     */
-    stopAtEdges?: boolean
-
-    /**
-     * Change the cursors for the presentation
-     */
-    cursorConfig?: ICursorConfig
-
-    /**
-     * Configure the notifications
-     */
-    notificationConfig?: INotificationConfig
-
-    /**
-     * Set the query params height and width for use with an image resizer.
-     */
-    autoCDNResizer?: boolean
-
-    /**
-     * Configure the image resizer
-     */
-    autoCDNResizerConfig?: IAutoCDNResizerConfig
-
-    /**
-     * License to remove powered by logo
-     * default is empty
-     */
-    license?: string;
+  /**
+   * ID of the presentation created by 3dweb.io
+   */
+  id?: string;
+
+  /**
+   * ID of the image which is the base for all the frames
+   * default is jsv-image
+   */
+  mainImageId?: string;
+
+  /**
+   * ID of the div where the presentation runs in
+   * Default is jsv-holder
+   */
+  mainHolderId?: string;
+
+  /**
+   * URl of the first image, doesn't have to be in the document.
+   * Default is empty
+   */
+  mainImageUrl?: string;
+
+  /**
+   * Amount of frames in the presentation, more images means smoother rotations
+   * but also more heavier for the browser
+   * default is 72
+   */
+  totalFrames?: number;
+
+  /**
+   * After loading the presentation this is the first frame visible
+   * Default is 1
+   */
+  firstImageNumber?: number;
+
+  /**
+   * Invert the rotation direction when dragging
+   * Default is false
+   */
+  reverse?: boolean;
+
+  /**
+   * Speed of rotating -199 to 100
+   * Default is 80
+   */
+  speed?: number;
+
+  /**
+   * Delay when stop dragging
+   * Default is 20
+   */
+  inertia?: number;
+
+  /**
+   * Disable the build in progress bar, use this when you have
+   * implemented your own loader or don't like this one.
+   * Default is true
+   */
+  defaultProgressBar?: boolean;
+
+  /**
+   * Change the color of the progress bar, can be hex of rgb
+   * Default is rgb(0, 0, 0)
+   */
+  defaultProgressBarColor?: string;
+
+  /**
+   * Change the background color of the progress bar, can be hex or rgb
+   * Default is rgba(255, 255, 255, 0.5)
+   */
+  defaultProgressBarBackgroundColor?: string;
+
+  /**
+   * Change the height of the progress bar, can be any css value for height
+   * Default is '5px'
+   */
+  defaultProgressBarHeight?: string;
+
+  /**
+   * Format for determining the filenames of the frames
+   * {filename}_xx.{extension} is the default
+   * ipod_x.jpg => ipod_1.jpg
+   * ipod_xx.jpg => ipod_01.jpg
+   * https://other.cdn/images/ipod_xx.jpg => https://other.cdn/images/ipod_01.jpg
+   */
+  imageUrlFormat?: string;
+
+  /**
+   * Load all image urls into the viewer. Total frames will be overwritten
+   */
+  imageUrls?: string[];
+
+  /**
+   * Add a class to all the images used in the presentation, separate multiple classes with a space.
+   * Default is empty
+   */
+  extraImageClass?: string;
+
+  /**
+   * Use this setting in combination with imageUrlFormat.
+   * startFrameNo: 4 => first file is ipod_04.jpg
+   * Default is 1
+   */
+  startFrameNo?: number;
+
+  /**
+   * Use this setting for rotating the view at start. Rotation stops when user drags the model
+   * or another animation method is called
+   * startRotation: 0 => No Rotation, 1 => Rotate once, 2 => Rotate twice
+   * Default is 0
+   */
+  autoRotate?: number;
+
+  /**
+   * Use this setting for changing the speed of the auto rotating. -199 to 100
+   * Default is speed of viewer
+   */
+  autoRotateSpeed?: number;
+
+  /**
+   * Use this setting for changing the direction of the auto rotating.
+   * Default is false
+   */
+  autoRotateReverse?: boolean;
+
+  /**
+   * Use this setting for enabling click and pinch events on images
+   * Default is false
+   */
+  enableImageEvents?: boolean;
+
+  /**
+   * Fires changeImage event in rotation. Keep track what your user is watching.
+   * Could be CPU heavy
+   * Default is false
+   */
+  enableChangeImageEvent?: boolean;
+
+  /**
+   * Use this setting for enabling zoom functions.
+   * Default is false
+   */
+  zoom?: boolean;
+
+  /**
+   * If zoom is enabled this is the max zoom factor.
+   * Default is 2
+   */
+  zoomMax?: number;
+
+  /**
+   * Change the speed of zooming with the mousewheel.
+   * Default is 50
+   */
+  zoomWheelSpeed?: number;
+
+  /**
+   * Blocks repeating images after reaching last image.
+   * Default is false
+   */
+  stopAtEdges?: boolean;
+
+  /**
+   * Change the cursors for the presentation
+   */
+  cursorConfig?: ICursorConfig;
+
+  /**
+   * Configure the notifications
+   */
+  notificationConfig?: INotificationConfig;
+
+  /**
+   * Set the query params height and width for use with an image resizer.
+   */
+  autoCDNResizer?: boolean;
+
+  /**
+   * Configure the image resizer
+   */
+  autoCDNResizerConfig?: IAutoCDNResizerConfig;
+
+  /**
+   * License to remove powered by logo
+   * Default is empty
+   */
+  license?: string;
 }
 
 /**
  * Object for getting the loading progress
  */
 export interface IProgress {
-    totalImages: number;
-    currentImage: number;
-    percentage: number;
-    image: IImage;
+  totalImages: number;
+  currentImage: number;
+  percentage: number;
+  image: IImage;
 }
 
 export interface IHandle {
-    invocations: number;
+  invocations: number;
 }
 
 export interface IEvents {
-    loadImage: Slot<IProgress>;
-    started: Slot<boolean>;
-    startDragging: Slot<IHandle>;
-    changeImage: Slot<IStatus>;
-    endAutoRotate: Slot<IStatus>;
-    click: Slot<IClick>;
-    pinch: Slot<IPinch>;
-    scroll: Slot<IScroll>;
-    doubleClick: Slot<IClick>;
+  loadImage: Slot<IProgress>;
+  started: Slot<boolean>;
+  startDragging: Slot<IHandle>;
+  changeImage: Slot<IStatus>;
+  endAutoRotate: Slot<IStatus>;
+  click: Slot<IClick>;
+  pinch: Slot<IPinch>;
+  scroll: Slot<IScroll>;
+  doubleClick: Slot<IClick>;
 }
 
 export interface IImage {
-    id: string;
-    src: string;
-    sequence: number
+  id: string;
+  src: string;
+  sequence: number;
 }
 
 export interface IStatus {
-    currentDegree: number;
-    currentImage: IImage;
-    completed: boolean;
+  currentDegree: number;
+  currentImage: IImage;
+  completed: boolean;
 }
 
 export interface IClick extends IStatus {
-    originalEvent: TouchEvent | MouseEvent
+  originalEvent: TouchEvent | MouseEvent;
 }
 
 export interface IPinch extends IStatus {
-    originalEvent: TouchEvent,
-    scale: number
+  originalEvent: TouchEvent,
+  scale: number
 }
 
 export interface IScroll extends IStatus {
-    originalEvent: Event
+  originalEvent: Event;
 }
 
 interface ICursorConfig {
-    default: string,
-    drag: string,
-    zoomIn: string,
-    zoomOut: string,
-    pan: string
+  default: string,
+  drag: string,
+  zoomIn: string,
+  zoomOut: string,
+  pan: string
 }
 
 interface INotificationConfig {
-    dragToRotate: {
-        showStartToRotateDefaultNotification?: boolean,
-        languages?: ITranslation[],
-        imageUrl?: string,
-        mainColor?: string,
-        textColor?: string
-    }
+  dragToRotate: {
+
+    /**
+     * If you want to show a custom image as notification
+     */
+    imageUrl?: string,
+
+    /**
+     * Show the default notification when starting to rotate
+     * Default is true
+     */
+    showStartToRotateDefaultNotification?: boolean,
+
+    /**
+     * Override the default text for the notification for any language
+     */
+    languages?: ITranslation[],
+
+    /**
+     * Set the background color for the notification, hex or rgba
+     * Default is rgba(0,0,0,0.20)
+     */
+    mainColor?: string,
+
+    /**
+     * Set the text color for the notification, hex or rgba
+     * Default is rgba(243,237,237,0.80)
+     */
+    textColor?: string
+  };
 }
 
-interface ITranslation{
-    language: string;
-    text: string
+interface ITranslation {
+  language: string;
+  text: string;
 }
 
 interface IAutoCDNResizerConfig {
-    useWidth?: boolean,
-    useHeight?: boolean,
-    scaleWithZoomMax?: boolean,
+  useWidth?: boolean,
+  useHeight?: boolean,
+  scaleWithZoomMax?: boolean,
 }