From fb333834f9bb270d395051bd6c87368168a0094d Mon Sep 17 00:00:00 2001 From: sculove Date: Thu, 24 Aug 2017 19:59:17 +0900 Subject: [PATCH 1/4] add typings for @egjs/axes --- types/egjs__axes/AnimationManager.d.ts | 42 +++++++++++++++++ types/egjs__axes/Axes.d.ts | 50 ++++++++++++++++++++ types/egjs__axes/AxisManager.d.ts | 26 +++++++++++ types/egjs__axes/Coordinate.d.ts | 8 ++++ types/egjs__axes/EventManager.d.ts | 14 ++++++ types/egjs__axes/InputObserver.d.ts | 20 ++++++++ types/egjs__axes/InterruptManager.d.ts | 9 ++++ types/egjs__axes/const.d.ts | 11 +++++ types/egjs__axes/egjs__axes-tests.ts | 53 ++++++++++++++++++++++ types/egjs__axes/index.d.ts | 10 ++++ types/egjs__axes/inputType/InputType.d.ts | 25 ++++++++++ types/egjs__axes/inputType/PanInput.d.ts | 33 ++++++++++++++ types/egjs__axes/inputType/PinchInput.d.ts | 26 +++++++++++ types/egjs__axes/inputType/WheelInput.d.ts | 24 ++++++++++ types/egjs__axes/tsconfig.json | 26 +++++++++++ types/egjs__axes/tslint.json | 1 + types/egjs__axes/utils.d.ts | 3 ++ 17 files changed, 381 insertions(+) create mode 100644 types/egjs__axes/AnimationManager.d.ts create mode 100644 types/egjs__axes/Axes.d.ts create mode 100644 types/egjs__axes/AxisManager.d.ts create mode 100644 types/egjs__axes/Coordinate.d.ts create mode 100644 types/egjs__axes/EventManager.d.ts create mode 100644 types/egjs__axes/InputObserver.d.ts create mode 100644 types/egjs__axes/InterruptManager.d.ts create mode 100644 types/egjs__axes/const.d.ts create mode 100644 types/egjs__axes/egjs__axes-tests.ts create mode 100644 types/egjs__axes/index.d.ts create mode 100644 types/egjs__axes/inputType/InputType.d.ts create mode 100644 types/egjs__axes/inputType/PanInput.d.ts create mode 100644 types/egjs__axes/inputType/PinchInput.d.ts create mode 100644 types/egjs__axes/inputType/WheelInput.d.ts create mode 100644 types/egjs__axes/tsconfig.json create mode 100644 types/egjs__axes/tslint.json create mode 100644 types/egjs__axes/utils.d.ts 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..d373082c94 --- /dev/null +++ b/types/egjs__axes/Axes.d.ts @@ -0,0 +1,50 @@ +import * as Component from "@egjs/component"; +import { AxisOption, Axis } from "./AxisManager"; +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; + private _axm; + private _itm; + private _am; + private _io; + private _inputs; + 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/Coordinate.d.ts b/types/egjs__axes/Coordinate.d.ts new file mode 100644 index 0000000000..8de596b43a --- /dev/null +++ b/types/egjs__axes/Coordinate.d.ts @@ -0,0 +1,8 @@ +declare const Coordinate: { + getInsidePosition(destPos: number, range: number[], circular: boolean[], bounce?: number[]): number; + isOutside(pos: number, range: number[]): boolean; + getDuration(distance: number, deceleration: any): number; + isCircularable(destPos: number, range: number[], circular: boolean[]): boolean; + getCirculatedPos(pos: number, range: number[], circular: boolean[]): number; +}; +export default Coordinate; 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" } diff --git a/types/egjs__axes/utils.d.ts b/types/egjs__axes/utils.d.ts new file mode 100644 index 0000000000..549cd0bfba --- /dev/null +++ b/types/egjs__axes/utils.d.ts @@ -0,0 +1,3 @@ +export declare function $(param: any, multi?: boolean): any; +export declare function requestAnimationFrame(fp: any): number; +export declare function cancelAnimationFrame(key: any): void; From c364c6f0f21463e8be333e0ee5cd7705e6db8789 Mon Sep 17 00:00:00 2001 From: sculove Date: Thu, 24 Aug 2017 20:13:20 +0900 Subject: [PATCH 2/4] add type of private properties --- types/egjs__axes/Axes.d.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/types/egjs__axes/Axes.d.ts b/types/egjs__axes/Axes.d.ts index d373082c94..86c3dd69c9 100644 --- a/types/egjs__axes/Axes.d.ts +++ b/types/egjs__axes/Axes.d.ts @@ -1,9 +1,13 @@ import * as Component from "@egjs/component"; -import { AxisOption, Axis } from "./AxisManager"; +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 { TRANSFORM, DIRECTION } from "./const"; import { IInputType } from "./inputType/InputType"; export interface AxesOption { easing?: (x: number) => number; @@ -30,12 +34,12 @@ export default class Axes extends Component { static DIRECTION_VERTICAL: DIRECTION; static DIRECTION_ALL: DIRECTION; options: AxesOption; - private _em; - private _axm; - private _itm; - private _am; - private _io; - private _inputs; + 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); From 4644b7017f85399a7ae6149f5a4d7ae391593962 Mon Sep 17 00:00:00 2001 From: sculove Date: Thu, 24 Aug 2017 20:20:02 +0900 Subject: [PATCH 3/4] remove unnecessary defination --- package.json | 3 +++ types/egjs__axes/Axes.d.ts | 2 +- types/egjs__axes/Coordinate.d.ts | 8 -------- 3 files changed, 4 insertions(+), 9 deletions(-) delete mode 100644 types/egjs__axes/Coordinate.d.ts 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/Axes.d.ts b/types/egjs__axes/Axes.d.ts index 86c3dd69c9..83bd1f24af 100644 --- a/types/egjs__axes/Axes.d.ts +++ b/types/egjs__axes/Axes.d.ts @@ -7,7 +7,7 @@ import { InputObserver } from "./InputObserver"; import { PanInput } from "./inputType/PanInput"; import { PinchInput } from "./inputType/PinchInput"; import { WheelInput } from "./inputType/WheelInput"; -import { TRANSFORM, DIRECTION } from "./const"; +import { DIRECTION } from "./const"; import { IInputType } from "./inputType/InputType"; export interface AxesOption { easing?: (x: number) => number; diff --git a/types/egjs__axes/Coordinate.d.ts b/types/egjs__axes/Coordinate.d.ts deleted file mode 100644 index 8de596b43a..0000000000 --- a/types/egjs__axes/Coordinate.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare const Coordinate: { - getInsidePosition(destPos: number, range: number[], circular: boolean[], bounce?: number[]): number; - isOutside(pos: number, range: number[]): boolean; - getDuration(distance: number, deceleration: any): number; - isCircularable(destPos: number, range: number[], circular: boolean[]): boolean; - getCirculatedPos(pos: number, range: number[], circular: boolean[]): number; -}; -export default Coordinate; From 52e19c0a92a8921b88d8e03e205e275c11b66a4a Mon Sep 17 00:00:00 2001 From: sculove Date: Thu, 24 Aug 2017 20:23:18 +0900 Subject: [PATCH 4/4] remove unnecessary defination --- types/egjs__axes/utils.d.ts | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 types/egjs__axes/utils.d.ts diff --git a/types/egjs__axes/utils.d.ts b/types/egjs__axes/utils.d.ts deleted file mode 100644 index 549cd0bfba..0000000000 --- a/types/egjs__axes/utils.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export declare function $(param: any, multi?: boolean): any; -export declare function requestAnimationFrame(fp: any): number; -export declare function cancelAnimationFrame(key: any): void;