@egjs/view360
Version:
360 integrated viewing solution from inside-out view to outside-in view. It provides user-friendly service by rotating 360 degrees through various user interaction such as motion sensor and touch.
195 lines (186 loc) • 7.69 kB
text/typescript
/* eslint-disable @typescript-eslint/ban-types */
import { ComponentEvent } from "@egjs/component";
import PanoViewer from "../PanoViewer/PanoViewer";
import SpinViewer from "../SpinViewer/SpinViewer";
/**
* Events that is fired when PanoViewer is ready to go.
* @ko PanoViewer 가 준비된 상태에 발생하는 이벤트
* @name eg.view360.PanoViewer#ready
* @event
*
* @example
* ```
* viewer.on({
* "ready" : function(evt) {
* // PanoViewer is ready to show image and handle user interaction.
* }
* });
* ```
*/
export type ReadyEvent<T extends PanoViewer = PanoViewer> = ComponentEvent<{}, "ready", T>;
/**
* 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
* ```
* viewer.on({
* "viewChange" : function(evt) {
* //evt.yaw, evt.pitch, evt.fov is available.
* }
* });
* ```
*/
export interface ViewChangeEvent<T extends PanoViewer = PanoViewer> extends ComponentEvent<{}, "viewChange", T> {
yaw: number;
pitch: number;
fov: number;
isTrusted: boolean;
}
/**
* 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
* ```
* viewer.on({
* "animationEnd" : function(evt) {
* // animation is ended.
* }
* });
* ```
*/
/**
* This event is fired when animation ends.
* @ko 에니메이션이 끝났을 때 발생하는 이벤트
* @name eg.view360.SpinViewer#animationEnd
* @event
* @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
* @param {Boolean} param.isTrusted 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
*
* viewer.on({
* animationEnd" : function(evt) {
* // evt.isTrusted === true or false
* }
* });
*/
export interface AnimationEndEvent<T extends any> extends ComponentEvent<{}, "animationEnd", T> {
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
* ```
* viewer.on({
* "error" : function(evt) {
* // evt.type === 13
* // evt.message === "failed to bind texture"
* });
*
* // constant can be used
* viewer.on({
* eg.view360.PanoViewer.EVENTS.ERROR : function(evt) {
* // evt.type === eg.view360.PanoViewer.ERROR_TYPE.FAIL_BIND_TEXTURE
* // evt.message === "failed to bind texture"
* });
* ```
*/
export interface ErrorEvent<T extends PanoViewer = PanoViewer> extends ComponentEvent<{}, "error", T> {
type: number;
message: string;
}
/**
* Events that occur when component loading is complete
* @ko 컴포넌트 로딩이 완료되면 발생하는 이벤트
* @name eg.view360.SpinViewer#load
* @event
* @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
* @param {HTMLElement} param.target The target element for which to display the image <ko>이미지를 보여줄 대상 엘리먼트</ko>
* @param {HTMLElement} param.bgElement Generated background image element <ko>생성된 background 이미지 엘리먼트</ko>
*
* @example
*
* viewer.on({
* "load" : function(evt) {
* this.spinBy(360, {duration: 300});
* }
* });
*/
export interface LoadEvent<T extends SpinViewer = SpinViewer> extends ComponentEvent<{}, "load", T> {
target: HTMLElement;
bgElement: HTMLDivElement;
}
/**
* An event that occurs when the image index is changed by the user's left / right panning
* @ko 사용자의 좌우 Panning 에 의해 이미지 인덱스가 변경되었을때 발생하는 이벤트
* @name eg.view360.SpinViewer#imageError
* @event
* @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
* @param {String} param.imageUrl User-specified image URL <ko>사용자가 지정한 이미지 URL</ko>
*
* @example
*
* viewer.on({
* "imageError" : function(evt) {
* // Error handling
* console.log(e.imageUrl);
* }
* });
*/
export interface ImageErrorEvent<T extends SpinViewer = SpinViewer> extends ComponentEvent<{}, "imageError", T> {
imageUrl?: string;
}
/**
* An event that occurs when the image index is changed by the user's left / right panning
* @ko 사용자의 좌우 Panning 에 의해 이미지 인덱스가 변경되었을때 발생하는 이벤트
* @name eg.view360.SpinViewer#change
* @event
* @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
* @param {Number[]} param.colRow Column, row of the frame in the sprite image <ko>스프라이트 이미지 내 프레임의 column, row</ko>
* @param {Number} param.frameIndex Index value that is sequentially appended in Z direction based on col and row.<ko>col, row 를 기반으로 Z 방향으로 순차적으로 붙여지는 index 값</ko>
* @param {Number} param.angle The angle that is currently internally held at an angle between 0 and 359. (not a real product angle) <ko>0 ~ 359 범위의 각도로 현재 내부적으로 유지하고 있는 각도 (실제 이미지의 각도가 아님)</ko>
*
* @example
*
* viewer.on({
* "change" : function(evt) {
* console.log(event.frameIndex, event.colRow, event.angle); // event.colRow = [0, 4] event.frameIndex = 4, event = 30
* }
* });
*/
export interface ChangeEvent<T extends SpinViewer = SpinViewer> extends ComponentEvent<{}, "change", T> {
colRow: number[];
frameIndex: number;
angle: number;
}