Merge pull request #19303 from sculove/egjs-axes-types

add typings for @egjs/axes

package.json

@@ -23,5 +23,8 @@
   "devDependencies": {
     "dtslint": "github:Microsoft/dtslint#production",
     "types-publisher": "Microsoft/types-publisher#production"
+  },
+  "dependencies": {
+    "@egjs/axes": "^2.0.0"
   }
 }

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;

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);

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 <https://github.com/naver>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.2
+
+export as namespace eg;
+import * as Axes from "./Axes";
+
+export = Axes;

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;

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);
+}

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;
+}

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;
+}

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"
+    ]
+}

types/egjs__axes/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }