Close #466 : Add typings

package.json

@@ -4,9 +4,11 @@
   "description": "A JavaScript library to display Photo Sphere panoramas",
   "homepage": "https://photo-sphere-viewer.js.org",
   "main": "dist/photo-sphere-viewer.js",
+  "types": "types/index.d.ts",
   "files": [
     "src/",
-    "dist/"
+    "dist/",
+    "types/"
   ],
   "authors": [
     {
@@ -32,7 +34,7 @@
   },
   "dependencies": {
     "three": "^0.131.2",
-    "uevent": "~2.0.0"
+    "uevent": "~2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",

src/adapters/AbstractAdapter.js

@@ -40,7 +40,7 @@ export class AbstractAdapter {
   }
 
   /**
-   * @summary Destroys the service
+   * @summary Destroys the adapter
    */
   destroy() {
     delete this.psv;

src/index.js

@@ -106,10 +106,11 @@ export {
  */
 
 /**
- * @typedef {PSV.AnimateOptions} PSV.PanoramaOptions
+ * @typedef {PSV.ExtendedPosition} PSV.PanoramaOptions
  * @summary Object defining panorama and animation options
  * @property {boolean|number} [transition=1500] - duration of the transition between all and new panorama
  * @property {boolean} [showLoader=true] - show the loader
+ * @property {number} [zoom] - new zoom level between 0 and 100
  * @property {PSV.SphereCorrection} [sphereCorrection] - new sphere correction to apply to the panorama
  * @property {PSV.PanoData | PSV.PanoDataProvider} [panoData] - new panorama data used for this panorama
  */

src/utils/math.js

@@ -83,7 +83,7 @@ export function getAngle(position1, position2) {
 }
 
 /**
- * Returns the distance between two points on a sphere of radius one
+ * @summary Returns the distance between two points on a sphere of radius one
  * @memberOf PSV.utils
  * @param {number[]} p1
  * @param {number[]} p2

src/utils/misc.js

@@ -1,5 +1,5 @@
 /**
- * @summary Transforms a string to dash-case{@link https://github.com/shahata/dasherize}
+ * @summary Transforms a string to dash-case {@link https://github.com/shahata/dasherize}
  * @memberOf PSV.utils
  * @param {string} str
  * @returns {string}

src/utils/psv.js

@@ -66,7 +66,7 @@ const CSS_POSITIONS = {
  * @memberOf PSV.utils
  * @description The implementation is as close as possible to the "background-position" specification
  * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-position}
- * @param {string|object} value
+ * @param {string|PSV.Point} value
  * @returns {PSV.Point}
  */
 export function parsePosition(value) {

types-test/CustomPlugin.ts

@@ -0,0 +1,15 @@
+import { AbstractPlugin, Viewer } from '../types/photo-sphere-viewer';
+
+export class CustomPlugin extends AbstractPlugin {
+
+  static id = 'custom';
+
+  constructor(psv: Viewer) {
+    super(psv);
+  }
+
+  doSomething() {
+
+  }
+
+}

types-test/index.ts

@@ -0,0 +1,62 @@
+import { CONSTANTS, Viewer } from 'photo-sphere-viewer';
+import MarkersPlugin, { MarkersPluginOptions } from 'photo-sphere-viewer/dist/plugins/markers';
+import { CustomPlugin } from './CustomPlugin';
+
+const viewer = new Viewer({
+  container: 'container',
+  plugins: [
+    [MarkersPlugin, {
+       clickEventOnMarker: true,
+     } as MarkersPluginOptions],
+    CustomPlugin,
+  ],
+});
+
+viewer.setPanorama('test.jpg', {
+  transition: false,
+})
+  .then(() => {
+
+  });
+
+viewer.animate({
+  longitude: 0,
+  latitude: 0,
+  speed: '2rpm',
+})
+  .then(() => {
+
+  });
+
+viewer.zoom(50);
+
+viewer.setOption('useXmpData', true);
+
+viewer.setOptions({
+  useXmpData: false,
+});
+
+viewer.navbar.setCaption('Test');
+
+viewer.panel.show({
+  content: 'Content',
+  clickHandler: (e: MouseEvent) => null,
+});
+
+viewer.once('ready', e => {
+
+});
+
+viewer.on('position-updated', (e, position) => {
+  const longitude: number = position.longitude;
+});
+
+viewer.on(CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, (e, position) => {
+  return {longitude: position.longitude + 0.1, latitude: position.latitude + 0.1};
+});
+
+const customPlugin: MarkersPlugin = viewer.getPlugin(CustomPlugin);
+customPlugin.doSomething();
+
+const customPluginAgain = viewer.getPlugin<CustomPlugin>('custom');
+customPluginAgain.doSomething();

types-test/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "typeRoots": [
+      "../types"
+    ],
+    "paths": {
+      "*": ["../types/*"]
+    }
+  }
+}

types/photo-sphere-viewer/Animation.d.ts

@@ -0,0 +1,35 @@
+export type AnimationOptions = {
+  properties: { [K: string]: { start: number, end: number } };
+  duration: number;
+  delay?: number;
+  easing?: string | ((progress: number) => number);
+  onTick: (properties: { [K: string]: number }, progress: number) => void;
+};
+
+/**
+ * @summary Interpolation helper for animations
+ * @description
+ * Implements the Promise API with an additional "cancel" and "finally" methods.
+ * The promise is resolved when the animation is complete and rejected if the animation is cancelled.
+ */
+export class Animation implements Promise<void> {
+
+  constructor(options: AnimationOptions);
+
+  // @ts-ignore
+  then(onFulfilled?: (() => void | Animation | PromiseLike<void>) | undefined | null, onRejected?: (() => void | Animation | PromiseLike<void>) | undefined | null): Animation;
+
+  // @ts-ignore
+  catch(onRejected?: (() => void | Animation | PromiseLike<void>) | undefined | null): Animation;
+
+  // @ts-ignore
+  finally(onFinally?: (() => void | Animation | PromiseLike<void>) | undefined | null): Animation;
+
+  cancel();
+
+  /**
+   * @summary Returns a resolved animation promise
+   */
+  static resolve(): Animation;
+
+}

types/photo-sphere-viewer/PSVError.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @summary Custom error used in the lib
+ */
+export class PSVError extends Error {
+  name: 'PSVError';
+}