feat: turn yawpitchcontrol to typescript

benmccann · Nov 9, 2020 · 6f6b999 · 6f6b999
1 parent b3e624a
commit 6f6b999
Show file tree

Hide file tree

Showing 10 changed files with 330 additions and 1,987 deletions.
diff --git a/declaration/PanoViewer.d.ts b/declaration/PanoViewer.d.ts
@@ -84,11 +84,12 @@ declare class PanoViewer extends Component {
   static STEREO_FORMAT: StereoFormat;
   static TOUCH_DIRECTION: TouchDirection;
 
+  constructor(container: HTMLElement, param?: Partial<PanoOptions>);
+
   static isSupported(): boolean;
   static isWebGLAvailable(): boolean;
   static isGyroSensorAvailable(callback: (isAvailable: boolean) => any): void;
 
-  constructor(container: HTMLElement, param?: Partial<PanoOptions>);
   destroy(): this;
   getFov(): number;
   getFovRange(): number[];

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
 		"@egjs/axes": "^2.7.1",
 		"@egjs/component": "^2.2.0",
 		"es6-promise": "^4.2.5",
-		"gl-matrix": "^3.1.0",
+		"gl-matrix": "^3.3.0",
 		"motion-sensors-polyfill": "^0.3.1",
 		"webvr-polyfill": "^0.9.41"
 	},

diff --git a/src/PanoViewer/PanoViewer.js b/src/PanoViewer/PanoViewer.js
diff --git a/src/PanoViewer/PanoViewer.ts b/src/PanoViewer/PanoViewer.ts
@@ -1,7 +1,7 @@
 import Component from "@egjs/component";
-import { glMatrix } from "gl-matrix";
+import { glMatrix, quat } from "gl-matrix";
 import { DeviceMotionEvent, checkXRSupport } from "../utils/browserFeature";
-import YawPitchControl from "../YawPitchControl/YawPitchControl";
+import YawPitchControl, { YawPitchControlOptions } from "../YawPitchControl/YawPitchControl";
 import PanoImageRenderer from "../PanoImageRenderer/PanoImageRenderer";
 import WebGLUtils from "../PanoImageRenderer/WebGLUtils";
 import { ERROR_TYPE, EVENTS, GYRO_MODE, PROJECTION_TYPE, STEREO_FORMAT } from "./consts";
@@ -63,6 +63,8 @@ class PanoViewer extends Component<
      * @ko 관성에 의한 애니메이션 동작이 완료되었을때 발생하는 이벤트
      * @name eg.view360.PanoViewer#animationEnd
      * @event
+     * @param {object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
+     * @param {number} param.isTrusted Returns true if an event was generated by the user action, or false if it was caused by a script or API call<ko>사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.</ko>
      * @example
      * ```
      * viwer.on({
@@ -72,7 +74,9 @@ class PanoViewer extends Component<
      * });
      * ```
      */
-    animationEnd: void;
+    animationEnd: {
+      isTrusted: boolean;
+    };
 
     /**
      * Events that is fired when error occurs
@@ -116,7 +120,7 @@ class PanoViewer extends Component<
     error: {
       type: number;
       message: string;
-    },
+    };
   }
 > {
   /**
@@ -206,13 +210,13 @@ class PanoViewer extends Component<
   private _pitch: number;
   private _fov: number;
   private _gyroMode: ValueOf<typeof GYRO_MODE>;
-  private _quaternion: number;
+  private _quaternion: typeof quat | null;
   private _aspectRatio: number;
   private _isReady: boolean;
 
   // Internal Values
-  private _photoSphereRenderer;
-  private _yawPitchControl;
+  private _photoSphereRenderer: PanoImageRenderer | null;
+  private _yawPitchControl: YawPitchControl | null;
 
   /**
    * @classdesc 360 media viewer
@@ -327,7 +331,7 @@ class PanoViewer extends Component<
     checkXRSupport();
 
     this._container = container;
-    this._image = options.image || options.video;
+    this._image = options.image! || options.video!;
     this._isVideo = !!options.video;
     this._projectionType = options.projectionType || PROJECTION_TYPE.EQUIRECTANGULAR;
     this._cubemapConfig = Object.assign({
@@ -672,7 +676,7 @@ class PanoViewer extends Component<
    */
   public setUseZoom(useZoom: boolean): this {
     if (typeof useZoom === "boolean") {
-      this._yawPitchControl.option("useZoom", useZoom);
+      this._yawPitchControl!.option("useZoom", useZoom);
     }
 
     return this;
@@ -685,7 +689,7 @@ class PanoViewer extends Component<
    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
    */
   public setUseKeyboard(useKeyboard: boolean): this {
-    this._yawPitchControl.option("useKeyboard", useKeyboard);
+    this._yawPitchControl!.option("useKeyboard", useKeyboard);
     return this;
   }
 
@@ -702,7 +706,7 @@ class PanoViewer extends Component<
    * ```
    */
   public setGyroMode(gyroMode: PanoViewer["_gyroMode"]) {
-    this._yawPitchControl.option("gyroMode", gyroMode);
+    this._yawPitchControl!.option("gyroMode", gyroMode);
     return this;
   }
 
@@ -715,7 +719,7 @@ class PanoViewer extends Component<
    * panoViewer.setFovRange([50, 90]);
    */
   public setFovRange(range: number[]) {
-    this._yawPitchControl.option("fovRange", range);
+    this._yawPitchControl!.option("fovRange", range);
     return this;
   }
 
@@ -727,7 +731,7 @@ class PanoViewer extends Component<
    * var range = panoViewer.getFovRange(); // [50, 90]
    */
   public getFovRange(): [number, number] {
-    return this._yawPitchControl.option("fovRange");
+    return this._yawPitchControl!.option("fovRange") as [number, number];
   }
 
   /**
@@ -765,8 +769,8 @@ class PanoViewer extends Component<
 
     this._aspectRatio = width / height;
     this._photoSphereRenderer.updateViewportDimensions(width, height);
-    this._yawPitchControl.option("aspectRatio", this._aspectRatio);
-    this._yawPitchControl.updatePanScale({height});
+    this._yawPitchControl!.option("aspectRatio", this._aspectRatio);
+    this._yawPitchControl!.updatePanScale({height});
 
     this.lookAt({}, 0);
     return this;
@@ -801,15 +805,15 @@ class PanoViewer extends Component<
    * @ko 컨트롤 가능한 Yaw 구간을 반환합니다.
    */
   public getYawRange(): [number, number] {
-    return this._yawPitchControl.option("yawRange");
+    return this._yawPitchControl!.option("yawRange") as [number, number];
   }
 
   /**
    * Get the range of controllable Pitch values
    * @ko 컨트롤 가능한 Pitch 구간을 가져옵니다.
    */
   public getPitchRange(): [number, number] {
-    return this._yawPitchControl.option("pitchRange");
+    return this._yawPitchControl!.option("pitchRange") as [number, number];
   }
 
   /**
@@ -821,7 +825,7 @@ class PanoViewer extends Component<
    * panoViewer.setYawRange([-90, 90]);
    */
   public setYawRange(yawRange: number[]) {
-    this._yawPitchControl.option("yawRange", yawRange);
+    this._yawPitchControl!.option("yawRange", yawRange);
     return this;
   }
 
@@ -834,7 +838,7 @@ class PanoViewer extends Component<
    * panoViewer.setPitchRange([-40, 40]);
    */
   public setPitchRange(pitchRange: number[]) {
-    this._yawPitchControl.option("pitchRange", pitchRange);
+    this._yawPitchControl!.option("pitchRange", pitchRange);
     return this;
   }
 
@@ -845,7 +849,7 @@ class PanoViewer extends Component<
    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
    */
   public setShowPolePoint(showPolePoint: boolean) {
-    this._yawPitchControl.option("showPolePoint", showPolePoint);
+    this._yawPitchControl!.option("showPolePoint", showPolePoint);
     return this;
   }
 
@@ -875,15 +879,15 @@ class PanoViewer extends Component<
 
     const yaw = orientation.yaw !== undefined ? orientation.yaw : this._yaw;
     const pitch = orientation.pitch !== undefined ? orientation.pitch : this._pitch;
-    const pitchRange = this._yawPitchControl.option("pitchRange");
+    const pitchRange = this._yawPitchControl!.option("pitchRange");
     const verticalAngleOfImage = pitchRange[1] - pitchRange[0];
     let fov = orientation.fov !== undefined ? orientation.fov : this._fov;
 
     if (verticalAngleOfImage < fov) {
       fov = verticalAngleOfImage;
     }
 
-    this._yawPitchControl.lookAt({yaw, pitch, fov}, duration);
+    this._yawPitchControl!.lookAt({yaw, pitch, fov}, duration);
 
     if (duration === 0) {
       this._photoSphereRenderer.renderWithYawPitch(yaw, pitch, fov);
@@ -905,7 +909,7 @@ class PanoViewer extends Component<
    */
   public setTouchDirection(direction: number): this {
     if (PanoViewer._isValidTouchDirection(direction)) {
-      this._yawPitchControl.option("touchDirection", direction);
+      this._yawPitchControl!.option("touchDirection", direction);
     }
 
     return this;
@@ -923,7 +927,7 @@ class PanoViewer extends Component<
    * ```
    */
   public getTouchDirection(): number {
-    return this._yawPitchControl.option("touchDirection");
+    return this._yawPitchControl!.option("touchDirection") as number;
   }
 
   /**
@@ -991,7 +995,6 @@ class PanoViewer extends Component<
       // update fov by aspect ratio
       const image = this._photoSphereRenderer.getContent();
       let imageAspectRatio = image.naturalWidth / image.naturalHeight;
-      let isCircular;
       let yawSize;
       let maxFov;
 
@@ -1003,23 +1006,20 @@ class PanoViewer extends Component<
 
       if (imageAspectRatio < 6) {
         yawSize = mathUtil.toDegree(imageAspectRatio);
-        isCircular = false;
         // 0.5 means ratio of half height of cylinder(0.5) and radius of cylider(1). 0.5/1 = 0.5
         maxFov = mathUtil.toDegree(Math.atan(0.5)) * 2;
       } else {
         yawSize = 360;
-        isCircular = true;
         maxFov = (360 / imageAspectRatio); // Make it 5 fixed as axes does.
       }
 
       // console.log("_updateYawPitchIfNeeded", maxFov, "aspectRatio", image.naturalWidth, image.naturalHeight, "yawSize", yawSize);
-      const minFov = (this._yawPitchControl.option("fovRange"))[0];
+      const minFov = (this._yawPitchControl!.option("fovRange"))[0];
 
       // this option should be called after fov is set.
-      this._yawPitchControl.option({
+      this._yawPitchControl!.option({
         "fov": maxFov, /* parameter for internal validation for pitchrange */
         "yawRange": [-yawSize / 2, yawSize / 2],
-        isCircular,
         "pitchRange": [-maxFov / 2, maxFov / 2],
         "fovRange": [minFov, maxFov]
       });
@@ -1041,7 +1041,7 @@ class PanoViewer extends Component<
     });
   }
 
-  private _initYawPitchControl(yawPitchConfig) {
+  private _initYawPitchControl(yawPitchConfig: Partial<YawPitchControlOptions>) {
 		this._yawPitchControl = new YawPitchControl(yawPitchConfig);
 
 		this._yawPitchControl.on(EVENTS.ANIMATION_END, e => {
@@ -1058,18 +1058,9 @@ class PanoViewer extends Component<
 		});
 	}
 
-
-  /**
-   * Get the horizontal field of view in degree
-   */
-  private _getHFov() {
-    return mathUtil.toDegree(
-      2 * Math.atan(this._aspectRatio * Math.tan(glMatrix.toRadian(this._fov) / 2)));
-  }
-
   private _activate() {
     this._photoSphereRenderer.attachTo(this._container);
-    this._yawPitchControl.enable();
+    this._yawPitchControl!.enable();
 
     this.updateViewportDimensions();
 
@@ -1088,7 +1079,7 @@ class PanoViewer extends Component<
   private _deactivate() {
     if (this._isReady) {
       this._photoSphereRenderer.stopRender();
-      this._yawPitchControl.disable();
+      this._yawPitchControl!.disable();
       this._isReady = false;
     }
 

diff --git a/src/PanoViewer/index.js → src/PanoViewer/index.ts b/src/PanoViewer/index.js → src/PanoViewer/index.ts
@@ -1,5 +1,5 @@
 import PanoViewer from "./PanoViewer";
-import {VERSION} from "../version";
+import { VERSION } from "../version";
 
 export {
 	PanoViewer,