feat: update event types

benmccann · Nov 9, 2020 · a584382 · a584382
1 parent 8111462
commit a584382
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 144 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ For more information, visit [Change Notes](https://github.com/naver/egjs-view360
      - Touch (Panning, Pinch-Zoom)
      - Mouse Move, Wheel
      - Keyboard (Arrow key, AWDS Key)
-  
+
 
 ## Components
 egjs-view360 provides the following components.
@@ -56,7 +56,7 @@ It is a component that supports the **outside-in viewing** method in which the o
 
 In addition to the integrated version of PanoViewer and SpinViewer, we have released a separate version. Here we describe the integrated version. If you want to reduce the size of the library through the use of individual modules, please refer to the [PanoViewer guide](https://naver.github.io/egjs-view360/panoviewer.html) or the [SpinViewer guide](https://naver.github.io/egjs-view360/spinviewer.html)
 
-Download dist files from repo directly or install it via npm. 
+Download dist files from repo directly or install it via npm.
 
 ### For development (Uncompressed)
 
@@ -110,7 +110,7 @@ The following are the supported browsers.
 
 egjs-view360 has the dependencies for the following libraries:
 
-|[eg.Component](http://github.com/naver/egjs-component)|[eg.Axes](http://github.com/naver/egjs-axes)|[eg.Agent](http://github.com/naver/egjs-agent)|[es6-promise](https://github.com/stefanpenner/es6-promise)|[webvr-polyfill](https://github.com/googlevr/webvr-polyfill)|
+|[eg.Component](http://github.com/naver/egjs-component)|[eg.Axes](http://github.com/naver/egjs-axes)|[eg.Agent](http://github.com/naver/egjs-agent)|[promise-polyfill](https://github.com/taylorhakes/promise-polyfill)|[webvr-polyfill](https://github.com/googlevr/webvr-polyfill)|
 |----|----|---|---|---|
 |2.0.0+|2.3.0+|2.1.1+|4.1.1|0.9.16|
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,8 +49,8 @@
     "@egjs/agent": "^2.2.1",
     "@egjs/axes": "^2.7.1",
     "@egjs/component": "^2.2.2",
-    "es6-promise": "^4.2.5",
-    "gl-matrix": "^3.3.0"
+    "gl-matrix": "^3.3.0",
+    "promise-polyfill": "^8.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
@@ -92,7 +92,6 @@
     "marked": "^0.4.0",
     "mocha": "^5.2.0",
     "print-sizes": "0.0.3",
-    "promise-polyfill": "^8.2.0",
     "replace-in-file": "^3.4.2",
     "resemblejs": "^3.2.3",
     "rollup": "^2.32.1",

diff --git a/src/PanoImageRenderer/vr/VRManager.ts b/src/PanoImageRenderer/vr/VRManager.ts
@@ -99,7 +99,7 @@ class VRManager {
         return Promise.reject(new Error("Display lacking capability to present."));
       }
 
-      vrDisplay.requestPresent([{source: canvas}]).then(() => {
+      return vrDisplay.requestPresent([{source: canvas}]).then(() => {
         const leftEye = vrDisplay.getEyeParameters(EYES.LEFT);
         const rightEye = vrDisplay.getEyeParameters(EYES.RIGHT);
 

diff --git a/src/PanoViewer/PanoViewer.ts b/src/PanoViewer/PanoViewer.ts
@@ -10,120 +10,119 @@ import { util as mathUtil } from "../utils/math-util";
 import { VERSION } from "../version";
 import { CubemapConfig, ValueOf } from "../types";
 
+export type PanoViewerEvent = {
+  /**
+   * Events that is fired when PanoViewer is ready to go.
+   * @ko PanoViewer 가 준비된 상태에 발생하는 이벤트
+   * @name eg.view360.PanoViewer#ready
+   * @event
+   *
+   * @example
+   * ```
+   * viwer.on({
+   *   "ready" : function(evt) {
+   *     // PanoViewer is ready to show image and handle user interaction.
+   *   }
+   * });
+   * ```
+   */
+  ready: void;
+
+  /**
+   * Events that is fired when direction or fov is changed.
+   * @ko PanoViewer 에서 바라보고 있는 방향이나 FOV(화각)가 변경되었을때 발생하는 이벤트
+   * @name eg.view360.PanoViewer#viewChange
+   * @event
+   * @param {object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
+   * @param {number} param.yaw yaw<ko>yaw</ko>
+   * @param {number} param.pitch pitch <ko>pitch</ko>
+   * @param {number} param.fov Field of view (fov) <ko>화각</ko>
+   * @example
+   * ```
+   * viwer.on({
+   *   "viewChange" : function(evt) {
+   *     //evt.yaw, evt.pitch, evt.fov is available.
+   *   }
+   * });
+   * ```
+   */
+  viewChange: {
+    yaw: number;
+    pitch: number;
+    fov: number;
+  };
+
+  /**
+   * Events that is fired when animation which is triggered by inertia is ended.
+   * @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({
+   *   "animationEnd" : function(evt) {
+   *     // animation is ended.
+   *   }
+   * });
+   * ```
+   */
+  animationEnd: {
+    isTrusted: boolean;
+  };
+
+  /**
+   * Events that is fired when error occurs
+   * @ko 에러 발생 시 발생하는 이벤트
+   * @name eg.view360.PanoViewer#error
+   * @event
+   * @param {object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
+   * @param {number} param.type Error type
+   * 		10: INVALID_DEVICE: Unsupported device
+   * 		11: NO_WEBGL: Webgl not support
+   * 		12, FAIL_IMAGE_LOAD: Failed to load image
+   * 		13: FAIL_BIND_TEXTURE: Failed to bind texture
+   * 		14: INVALID_RESOURCE: Only one resource(image or video) should be specified
+   * 		15: RENDERING_CONTEXT_LOST: WebGL context lost occurred
+   * <ko>에러 종류
+   * 		10: INVALID_DEVICE: 미지원 기기
+   * 		11: NO_WEBGL: WEBGL 미지원
+   * 		12, FAIL_IMAGE_LOAD: 이미지 로드 실패
+   * 		13: FAIL_BIND_TEXTURE: 텍스쳐 바인딩 실패
+   * 		14: INVALID_RESOURCE: 리소스 지정 오류 (image 혹은 video 중 하나만 지정되어야 함)
+   * 		15: RENDERING_CONTEXT_LOST: WebGL context lost 발생
+   * </ko>
+   * @param {string} param.message Error message <ko>에러 메시지</ko>
+   * @see {@link eg.view360.PanoViewer.ERROR_TYPE}
+   * @example
+   * ```
+   * viwer.on({
+   *   "error" : function(evt) {
+   *     // evt.type === 13
+   *     // evt.message === "failed to bind texture"
+   * });
+   *
+   * // constant can be used
+   * viwer.on({
+   *   eg.view360.PanoViewer.EVENTS.ERROR : function(evt) {
+   *   // evt.type === eg.view360.PanoViewer.ERROR_TYPE.FAIL_BIND_TEXTURE
+   *   // evt.message === "failed to bind texture"
+   * });
+   * ```
+   */
+  error: {
+    type: number;
+    message: string;
+  };
+}
 
 /**
  * @memberof eg.view360
  * @extends eg.Component
  * PanoViewer
  */
-class PanoViewer extends Component<
-  {
-    /**
-     * Events that is fired when PanoViewer is ready to go.
-     * @ko PanoViewer 가 준비된 상태에 발생하는 이벤트
-     * @name eg.view360.PanoViewer#ready
-     * @event
-     *
-     * @example
-     * ```
-     * viwer.on({
-     *   "ready" : function(evt) {
-     *     // PanoViewer is ready to show image and handle user interaction.
-     *   }
-     * });
-     * ```
-     */
-    ready: void;
-
-    /**
-     * Events that is fired when direction or fov is changed.
-     * @ko PanoViewer 에서 바라보고 있는 방향이나 FOV(화각)가 변경되었을때 발생하는 이벤트
-     * @name eg.view360.PanoViewer#viewChange
-     * @event
-     * @param {object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
-     * @param {number} param.yaw yaw<ko>yaw</ko>
-     * @param {number} param.pitch pitch <ko>pitch</ko>
-     * @param {number} param.fov Field of view (fov) <ko>화각</ko>
-     * @example
-     * ```
-     * viwer.on({
-     *   "viewChange" : function(evt) {
-     *     //evt.yaw, evt.pitch, evt.fov is available.
-     *   }
-     * });
-     * ```
-     */
-    viewChange: {
-      yaw: number;
-      pitch: number;
-      fov: number;
-    };
-
-    /**
-     * Events that is fired when animation which is triggered by inertia is ended.
-     * @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({
-     *   "animationEnd" : function(evt) {
-     *     // animation is ended.
-     *   }
-     * });
-     * ```
-     */
-    animationEnd: {
-      isTrusted: boolean;
-    };
-
-    /**
-     * Events that is fired when error occurs
-     * @ko 에러 발생 시 발생하는 이벤트
-     * @name eg.view360.PanoViewer#error
-     * @event
-     * @param {object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
-     * @param {number} param.type Error type
-     * 		10: INVALID_DEVICE: Unsupported device
-     * 		11: NO_WEBGL: Webgl not support
-     * 		12, FAIL_IMAGE_LOAD: Failed to load image
-     * 		13: FAIL_BIND_TEXTURE: Failed to bind texture
-     * 		14: INVALID_RESOURCE: Only one resource(image or video) should be specified
-     * 		15: RENDERING_CONTEXT_LOST: WebGL context lost occurred
-     * <ko>에러 종류
-     * 		10: INVALID_DEVICE: 미지원 기기
-     * 		11: NO_WEBGL: WEBGL 미지원
-     * 		12, FAIL_IMAGE_LOAD: 이미지 로드 실패
-     * 		13: FAIL_BIND_TEXTURE: 텍스쳐 바인딩 실패
-     * 		14: INVALID_RESOURCE: 리소스 지정 오류 (image 혹은 video 중 하나만 지정되어야 함)
-     * 		15: RENDERING_CONTEXT_LOST: WebGL context lost 발생
-     * </ko>
-     * @param {string} param.message Error message <ko>에러 메시지</ko>
-     * @see {@link eg.view360.PanoViewer.ERROR_TYPE}
-     * @example
-     * ```
-     * viwer.on({
-     *   "error" : function(evt) {
-     *     // evt.type === 13
-     *     // evt.message === "failed to bind texture"
-     * });
-     *
-     * // constant can be used
-     * viwer.on({
-     *   eg.view360.PanoViewer.EVENTS.ERROR : function(evt) {
-     *   // evt.type === eg.view360.PanoViewer.ERROR_TYPE.FAIL_BIND_TEXTURE
-     *   // evt.message === "failed to bind texture"
-     * });
-     * ```
-     */
-    error: {
-      type: number;
-      message: string;
-    };
-  }
-> {
+class PanoViewer extends Component<PanoViewerEvent> {
   /**
    * Version info string
    * @ko 버전정보 문자열

diff --git a/src/PanoViewer/index.ts b/src/PanoViewer/index.ts
@@ -1,11 +1,8 @@
-import PanoViewer from "./PanoViewer";
+import PanoViewer, { PanoViewerEvent } from "./PanoViewer";
 import { VERSION } from "../version";
 
-import { polyfill } from "es6-promise";
-
-polyfill();
-
 export {
   PanoViewer,
+  PanoViewerEvent,
   VERSION
 };
diff --git a/src/SpinViewer/SpinViewer.ts b/src/SpinViewer/SpinViewer.ts
@@ -5,12 +5,7 @@ import { VERSION } from "../version";
 
 const DEFAULT_PAN_SCALE = 0.21;
 
-/**
- * @memberof eg.view360
- * @extends eg.Component
- * SpinViewer
- */
-class SpinViewer extends Component<{
+export type SpinViewerEvent = {
   /**
    * Events that occur when component loading is complete
    * @ko 컴포넌트 로딩이 완료되면 발생하는 이벤트
@@ -31,7 +26,7 @@ class SpinViewer extends Component<{
   load: {
     target: HTMLElement;
     bgElement: HTMLDivElement;
-  };
+  }
   /**
    * An event that occurs when the image index is changed by the user's left / right panning
    * @ko 사용자의 좌우 Panning 에 의해 이미지 인덱스가 변경되었을때 발생하는 이벤트
@@ -94,7 +89,14 @@ class SpinViewer extends Component<{
   animationEnd: {
     isTrusted: boolean;
   }
-}> {
+}
+
+/**
+ * @memberof eg.view360
+ * @extends eg.Component
+ * SpinViewer
+ */
+class SpinViewer extends Component<SpinViewerEvent> {
   /**
    * Version info string
    * @ko 버전정보 문자열

diff --git a/src/SpinViewer/SpriteImage.ts b/src/SpinViewer/SpriteImage.ts
@@ -2,12 +2,7 @@ import Component from "@egjs/component";
 import { TRANSFORM, SUPPORT_WILLCHANGE } from "../utils/browserFeature";
 import { VERSION } from "../version";
 
-/**
- * @memberof eg.view360
- * @extends eg.Component
- * SpriteImage
- */
-class SpriteImage extends Component<{
+export type SpriteImageEvent = {
   /**
    * Events that occur when component loading is complete
    * @ko 컴포넌트 로딩이 완료되면 발생하는 이벤트
@@ -49,7 +44,14 @@ class SpriteImage extends Component<{
   imageError: {
     imageUrl?: string;
   }
-}> {
+}
+
+/**
+ * @memberof eg.view360
+ * @extends eg.Component
+ * SpriteImage
+ */
+class SpriteImage extends Component<SpriteImageEvent> {
   public static VERSION = VERSION;
 
   private _el: HTMLElement;