diff --git a/package.json b/package.json index db67595b77..b12e3fe2eb 100644 --- a/package.json +++ b/package.json @@ -23,5 +23,8 @@ "devDependencies": { "dtslint": "github:Microsoft/dtslint#production", "types-publisher": "Microsoft/types-publisher#production" + }, + "dependencies": { + "@egjs/axes": "^2.0.0" } } diff --git a/types/egjs__axes/AnimationManager.d.ts b/types/egjs__axes/AnimationManager.d.ts new file mode 100644 index 0000000000..9bdb3200d2 --- /dev/null +++ b/types/egjs__axes/AnimationManager.d.ts @@ -0,0 +1,42 @@ +import { Axis, AxisManager } from "./AxisManager"; +import { InterruptManager } from "./InterruptManager"; +import { EventManager } from "./EventManager"; +import { AxesOption } from "./Axes"; +export interface AnimationParam { + depaPos: Axis; + destPos: Axis; + duration: number; + delta: Axis; + setTo?: (destPos?: Axis, duration?: number) => { + destPos: Axis; + duration: number; + }; + done?: () => void; + startTime?: number; + inputEvent?: any; +} +export declare class AnimationManager { + private options; + private itm; + private em; + private axm; + private _raf; + private _animateParam; + static getDuration(duration: number, min: number, max: number): number; + constructor(options: AxesOption, itm: InterruptManager, em: EventManager, axm: AxisManager); + getDuration(depaPos: Axis, destPos: Axis, wishDuration?: number): number; + private createAnimationParam(pos, duration, inputEvent?); + grab(axes: string[], event?: any): void; + restore(inputEvent?: any): void; + animationEnd(): void; + private animateLoop(param, complete); + getUserControll(param: AnimationParam): { + destPos: Axis; + duration: number; + }; + animateTo(destPos: Axis, duration: number, inputEvent?: any): void; + private frame(param); + easing(p: any): number; + setTo(pos: Axis, duration?: number): this; + setBy(pos: Axis, duration?: number): this; +} diff --git a/types/egjs__axes/Axes.d.ts b/types/egjs__axes/Axes.d.ts new file mode 100644 index 0000000000..83bd1f24af --- /dev/null +++ b/types/egjs__axes/Axes.d.ts @@ -0,0 +1,54 @@ +import * as Component from "@egjs/component"; +import { AnimationManager } from "./AnimationManager"; +import { EventManager } from "./EventManager"; +import { InterruptManager } from "./InterruptManager"; +import { AxisManager, AxisOption, Axis } from "./AxisManager"; +import { InputObserver } from "./InputObserver"; +import { PanInput } from "./inputType/PanInput"; +import { PinchInput } from "./inputType/PinchInput"; +import { WheelInput } from "./inputType/WheelInput"; +import { DIRECTION } from "./const"; +import { IInputType } from "./inputType/InputType"; +export interface AxesOption { + easing?: (x: number) => number; + maximumDuration?: number; + minimumDuration?: number; + deceleration?: number; + interruptable?: boolean; +} +export default class Axes extends Component { + axis: { + [key: string]: AxisOption; + }; + static VERSION: string; + static PanInput: typeof PanInput; + static PinchInput: typeof PinchInput; + static WheelInput: typeof WheelInput; + static TRANSFORM: string; + static DIRECTION_NONE: DIRECTION; + static DIRECTION_LEFT: DIRECTION; + static DIRECTION_RIGHT: DIRECTION; + static DIRECTION_UP: DIRECTION; + static DIRECTION_DOWN: DIRECTION; + static DIRECTION_HORIZONTAL: DIRECTION; + static DIRECTION_VERTICAL: DIRECTION; + static DIRECTION_ALL: DIRECTION; + options: AxesOption; + private _em: EventManager; + private _axm: AxisManager; + private _itm: InterruptManager; + private _am: AnimationManager; + private _io: InputObserver; + private _inputs: IInputType[]; + constructor(axis: { + [key: string]: AxisOption; + }, options: AxesOption, startPos?: Axis); + private _complementOptions(); + connect(axes: string[] | string, inputType: IInputType): this; + disconnect(inputType?: IInputType): this; + get(axes?: string[]): Axis; + setTo(pos: Axis, duration?: number): this; + setBy(pos: Axis, duration?: number): this; + isBounceArea(axes?: string[]): boolean; + destroy(): void; +} diff --git a/types/egjs__axes/AxisManager.d.ts b/types/egjs__axes/AxisManager.d.ts new file mode 100644 index 0000000000..d8ca3fdc69 --- /dev/null +++ b/types/egjs__axes/AxisManager.d.ts @@ -0,0 +1,26 @@ +import { AxesOption } from "./Axes"; +export interface Axis { + [key: string]: number; +} +export interface AxisOption { + range?: number[]; + bounce?: number | number[]; + circular?: boolean | boolean[]; +} +export declare class AxisManager { + private axis; + private options; + private _pos; + static equal(target: Axis, base: Axis): boolean; + constructor(axis: any, options: AxesOption); + getDelta(depaPos: Axis, destPos: Axis): Axis; + get(axes?: string[] | Axis): Axis; + moveTo(pos: Axis): { + [key: string]: Axis; + }; + set(pos: Axis): void; + every(pos: Axis, callback: (value: number, key: string, options: AxisOption) => boolean): boolean; + filter(pos: Axis, callback: (value: number, key: string, options: AxisOption) => boolean): Axis; + map(pos: Axis, callback: (value: number, key: string, options: AxisOption) => any): any; + isOutside(axes?: string[]): boolean; +} diff --git a/types/egjs__axes/EventManager.d.ts b/types/egjs__axes/EventManager.d.ts new file mode 100644 index 0000000000..7e234f0aa3 --- /dev/null +++ b/types/egjs__axes/EventManager.d.ts @@ -0,0 +1,14 @@ +import { Axis } from "./AxisManager"; +import { AnimationParam } from "./AnimationManager"; +export declare class EventManager { + private axes; + private axm; + constructor(axes: any, axm: any); + triggerHold(pos: Axis, event: any): void; + triggerRelease(param: AnimationParam, event?: any): void; + triggerChange(pos: Axis, event?: any): void; + triggerAnimationStart(param: AnimationParam): Boolean; + triggerAnimationEnd(): void; + private createUserControll(pos, duration?); + destroy(): void; +} diff --git a/types/egjs__axes/InputObserver.d.ts b/types/egjs__axes/InputObserver.d.ts new file mode 100644 index 0000000000..4170c9a40f --- /dev/null +++ b/types/egjs__axes/InputObserver.d.ts @@ -0,0 +1,20 @@ +import { InterruptManager } from "./InterruptManager"; +import { IInputType, IInputTypeObserver } from "./inputType/InputType"; +import { EventManager } from "./EventManager"; +import { AxisManager, Axis } from "./AxisManager"; +import { AnimationManager } from "./AnimationManager"; +import { AxesOption } from "./Axes"; +export declare class InputObserver implements IInputTypeObserver { + options: AxesOption; + private itm; + private em; + private axm; + private am; + isOutside: boolean; + moveDistance: Axis; + constructor(options: AxesOption, itm: InterruptManager, em: EventManager, axm: AxisManager, am: AnimationManager); + private atOutside(pos); + hold(inputType: IInputType, event: any): void; + change(inputType: any, event: any, offset: Axis): void; + release(inputType: IInputType, event: any, offset: Axis, inputDuration?: number): void; +} diff --git a/types/egjs__axes/InterruptManager.d.ts b/types/egjs__axes/InterruptManager.d.ts new file mode 100644 index 0000000000..0f7e566ed1 --- /dev/null +++ b/types/egjs__axes/InterruptManager.d.ts @@ -0,0 +1,9 @@ +import { AxesOption } from "./Axes"; +export declare class InterruptManager { + private options; + private _prevented; + constructor(options: AxesOption); + isInterrupting(): boolean; + isInterrupted(): boolean; + setInterrupt(prevented: any): void; +} diff --git a/types/egjs__axes/const.d.ts b/types/egjs__axes/const.d.ts new file mode 100644 index 0000000000..13fe61859f --- /dev/null +++ b/types/egjs__axes/const.d.ts @@ -0,0 +1,11 @@ +export declare enum DIRECTION { + DIRECTION_NONE = 1, + DIRECTION_LEFT = 2, + DIRECTION_RIGHT = 4, + DIRECTION_HORIZONTAL = 6, + DIRECTION_UP = 8, + DIRECTION_DOWN = 16, + DIRECTION_VERTICAL = 24, + DIRECTION_ALL = 30, +} +export declare const TRANSFORM: string; diff --git a/types/egjs__axes/egjs__axes-tests.ts b/types/egjs__axes/egjs__axes-tests.ts new file mode 100644 index 0000000000..895f0ea644 --- /dev/null +++ b/types/egjs__axes/egjs__axes-tests.ts @@ -0,0 +1,53 @@ +import Axes from "@egjs/axes"; + +const axes = new Axes({ + something1: { + range: [0, 150], + bounce: 50 + }, + something2: { + range: [0, 200], + bounce: 100 + }, + somethingN: { + range: [1, 10], + } +}, { + deceleration: 0.0024 + }); + +axes.on({ + hold: evt => { }, + release: evt => { }, + animationStart: evt => { }, + animationEnd: evt => { }, + change: evt => { } +}); + +// 3. Initialize inputTypes +const panInputArea = new Axes.PanInput("#area", { + scale: [0.5, 1] +}); +const panInputHmove = new Axes.PanInput("#hmove"); +const panInputVmove = new Axes.PanInput("#vmove"); +const pinchInputArea = new Axes.PinchInput("#area", { + scale: 1.5 +}); + +// 4. Connect eg.Axes and InputTypes +// [PanInput] When the mouse or touchscreen is down and moved. +// Connect the 'something2' axis to the mouse or touchscreen x position and +// connect the 'somethingN' axis to the mouse or touchscreen y position. +axes.connect(["something2", "somethingN"], panInputArea); +axes.connect("something2 somethingN", panInputArea); + +// Connect only one 'something1' axis to the mouse or touchscreen x position. +axes.connect(["something1"], panInputHmove); +axes.connect("something1", panInputHmove); + +// Connect only one 'something2' axis to the mouse or touchscreen y position. +axes.connect(["", "something2"], panInputVmove); +axes.connect(" something2", panInputVmove); + +// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out). +axes.connect("something2", pinchInputArea); diff --git a/types/egjs__axes/index.d.ts b/types/egjs__axes/index.d.ts new file mode 100644 index 0000000000..8a593d24a6 --- /dev/null +++ b/types/egjs__axes/index.d.ts @@ -0,0 +1,10 @@ +// Type definitions for egjs-axes 2.0 +// Project: https://github.com/naver/egjs-axes +// Definitions by: Naver +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 + +export as namespace eg; +import * as Axes from "./Axes"; + +export = Axes; diff --git a/types/egjs__axes/inputType/InputType.d.ts b/types/egjs__axes/inputType/InputType.d.ts new file mode 100644 index 0000000000..3dd188f1b6 --- /dev/null +++ b/types/egjs__axes/inputType/InputType.d.ts @@ -0,0 +1,25 @@ +import { Axis } from "../AxisManager"; +import { AxesOption } from "../Axes"; +export interface IInputType { + axes: string[]; + element: HTMLElement; + hammer?: any; + mapAxes(axes: string[]): any; + connect(observer: IInputTypeObserver): IInputType; + disconnect(): any; + destroy(): any; + enable?(): any; + disable?(): any; + isEnable?(): boolean; +} +export interface IInputTypeObserver { + options: AxesOption; + change(inputType: IInputType, event: any, offset: Axis): any; + hold(inputType: IInputType, event: any): any; + release(inputType: IInputType, event: any, offset: Axis, duration?: number): any; +} +export declare const SUPPORT_TOUCH: boolean; +export declare const UNIQUEKEY = "_EGJS_AXES_INPUTTYPE_"; +export declare function toAxis(source: string[], offset: number[]): Axis; +export declare function createHammer(element: HTMLElement, recognizers: any, inputClass?: any): any; +export declare function convertInputType(inputType?: string[]): any; diff --git a/types/egjs__axes/inputType/PanInput.d.ts b/types/egjs__axes/inputType/PanInput.d.ts new file mode 100644 index 0000000000..6b01ef21d7 --- /dev/null +++ b/types/egjs__axes/inputType/PanInput.d.ts @@ -0,0 +1,33 @@ +import { DIRECTION } from "../const"; +import { IInputType, IInputTypeObserver } from "./InputType"; +export interface PanInputOption { + inputType?: string[]; + scale?: number[]; + thresholdAngle?: number; + threshold?: number; +} +export declare class PanInput implements IInputType { + options: PanInputOption; + axes: string[]; + hammer: any; + element: HTMLElement; + private observer; + private _direction; + static getDirectionByAngle(angle: number, thresholdAngle: number): DIRECTION; + static getNextOffset(speeds: number[], deceleration: number): number[]; + static useDirection(checkType: DIRECTION, direction: DIRECTION, userDirection?: DIRECTION): boolean; + constructor(el: string | HTMLElement, options?: PanInputOption); + mapAxes(axes: string[]): void; + connect(observer: IInputTypeObserver): IInputType; + disconnect(): this; + destroy(): void; + enable(): this; + disable(): this; + isEnable(): boolean; + private onHammerInput(event); + private onPanmove(event); + private onPanend(event); + private attachEvent(observer); + private dettachEvent(); + private getOffset(properties, useDirection); +} diff --git a/types/egjs__axes/inputType/PinchInput.d.ts b/types/egjs__axes/inputType/PinchInput.d.ts new file mode 100644 index 0000000000..908c5efa4a --- /dev/null +++ b/types/egjs__axes/inputType/PinchInput.d.ts @@ -0,0 +1,26 @@ +import { IInputType, IInputTypeObserver } from "./InputType"; +export interface PinchInputOption { + scale?: number; + threshold?: number; +} +export declare class PinchInput implements IInputType { + options: PinchInputOption; + axes: string[]; + hammer: any; + element: HTMLElement; + private observer; + private _prev; + constructor(el: any, options?: PinchInputOption); + mapAxes(axes: string[]): void; + connect(observer: IInputTypeObserver): IInputType; + disconnect(): this; + destroy(): void; + private onPinchStart(event); + private onPinchMove(event); + private onPinchEnd(event); + private attachEvent(observer); + private dettachEvent(); + enable(): this; + disable(): this; + isEnable(): boolean; +} diff --git a/types/egjs__axes/inputType/WheelInput.d.ts b/types/egjs__axes/inputType/WheelInput.d.ts new file mode 100644 index 0000000000..461bf11056 --- /dev/null +++ b/types/egjs__axes/inputType/WheelInput.d.ts @@ -0,0 +1,24 @@ +import { IInputType, IInputTypeObserver } from "./InputType"; +export interface WheelInputOption { + scale?: number; + throttle?: number; +} +export declare class WheelInput implements IInputType { + options: WheelInputOption; + axes: string[]; + element: HTMLElement; + private _isEnabled; + private _timer; + private observer; + constructor(el: any, options?: WheelInputOption); + mapAxes(axes: string[]): void; + connect(observer: IInputTypeObserver): IInputType; + disconnect(): this; + destroy(): void; + private onWheel(event); + private attachEvent(observer); + private dettachEvent(); + enable(): this; + disable(): this; + isEnable(): boolean; +} diff --git a/types/egjs__axes/tsconfig.json b/types/egjs__axes/tsconfig.json new file mode 100644 index 0000000000..7d20117cc0 --- /dev/null +++ b/types/egjs__axes/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "paths":{ + "@egjs/component": ["egjs__component"], + "@egjs/axes": ["egjs__axes"] + } + }, + "files": [ + "index.d.ts", + "egjs__axes-tests.ts" + ] +} diff --git a/types/egjs__axes/tslint.json b/types/egjs__axes/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/egjs__axes/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }