two.d.js

export declare class Two {
    static Resolution: number;
    static Instances: Array<any>;
    type: Two.Types;
    root: any;
    Version: string;
    Resolution: number;
    Instances: any[];

    width: number;
    height: number;
    frameCount: number;
    timeDelta: number;
    playing: boolean;
    scene: Two.Group;
    constructor(params?: TwoConstructionParams);

    static noConflict();
    static Error();

    appendTo(element: HTMLElement);
    makeLine(x1: number, y1: number, x2: number, y2: number): Two.Line;
    makeRectangle(x: number, y: number, width: number, height: number): Two.Rectangl;
    makeRoundedRectangle(x:number, y:number, width:number, height:number, radius:number):Two.RoundedRectangle;
    makeCircle(x: number, y: number, radius: number): Two.Circle;
    makeEllipse(x: number, y: number, width: number, height: number): Two.Ellipse;
    makeStar(ox:number, oy:number, or:number, ir:number, sides:number): Two.Star;
    makeCurve(x1: number, y1: number, open: boolean): Two.Path;
    makeCurve(x1: number, y1: number, x2: number, y2: number, open: boolean): Two.Path;
    makeCurve(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, open: boolean): Two.Path;
    makePath(x1: number, y1: number, open: boolean): Two.Path;
    makePath(x1: number, y1: number, x2: number, y2: number, open: boolean): Two.Path;
    makePath(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, open: boolean): Two.Path;
    makePolygon(x1: number, y1: number, x2: number, y2: number, open: boolean): Two.Polygon;
    makeGroup(objects: Array<Two.Path>): Two.Group;
    bind(event: Two.Events, callback: (arg?: Array<any>) => void): Two;
    unbind(event: Two.Events, callback: (arg?: Array<any>) => void): Two;
    range( start: number, stop: number, step: number );
    play();
    pause();
    update();
    render();
    add();
    remove();
    clear();

}

export declare namespace Two {
    export namespace Text{
        export interface Properties{
            value?:string, family?:string, size?:number, leading?:number, alignment?:string, linewidth?:number, style?:string,
            weight?:number, decoration?:string, baseline?:string, opacity?: number, visible?:boolean, fill?:string, stroke?:string
        }
    }
    export namespace Path{
        export interface Properties{
            fill?:string, stroke?: string; linewidth?: number, opacity?: number, visible?: boolean, cap?: string, join?:string, mitre?:number,
            closed?: boolean, curved?: boolean, automatic?: boolean, beginning?: boolean, ending?: boolean
        }
    }
    export interface Properties{ hierarchy?: string, demotion?: string }
    export enum Commands{
        M, L, C, Z
    }
    export enum Types {
        webgl,
        svg,
        canvas,
    }

    export enum Events {
        play,
        pause,
        update,
        render,
        resize,
        change,
        remove,
        insert,
    }
    export enum Controls{
        right, left
    }

    export class Vector {
        x: number;
        y: number;

        constructor( x: number, y: number )
        set(x: number, y: number);
        copy( v: Vector );
        clear();
        clone();
        add( v1: Vector, v2: Vector );
        addSelf( v: Vector );
        subSelf( v: Vector );
        multiplySelf( v:Vector );
        multiplyScalar( v: Vector );
        divideScalar( v: Vector );
        negate( v: Vector );
        dot( v: Vector );
        lengthSqaured();
        normalize();
        distanceTo( v:Vector );
        distanceToSquared( v: Vector );
        setLength( length: number );
        equals( v: Vector );
        lerp( v: Vector, t: number );
        isZero();
    }

    export class Anchor extends Vector {
        command: Commands;
        controls: Controls;

        constructor( x: number, y: number, lx: number, ly: number, rx: number, ry: number, command: Commands);

        listen();
        ignore();
    }


    export class Polygon extends Path {
        vertices: Collection;
        constructor( x: number, y: number, radius: number, sides: number );
    }

    export class Shape {
        isShape: boolean;
        id: string;
        classList: any[];
        translation: Vector;
        rotation: number;
        scale: number;

        addTo( group: Group );
        clone();
        flagReset();
    }

    export class Group extends Shape {
        children: Array<any>;
        mask: Path;

            /**
     * Add objects to the group.
     */
        add( ...objects: any[]);
            /**
     * Remove objects from the group.
     */
        remove( ...objects: any[]);
        /**
        * Export the data from the instance of Two.Group into a plain JavaScript
        * object. This also makes all children plain JavaScript objects. Great
        * for turning into JSON and storing in a database.
        */
        toObject();
        /**
        * Anchor all children to the upper left hand corner
        * of the group.
        */
        corner();
        /**
        * Anchors all children around the center of the group,
        * effectively placing the shape around the unit circle.
        */
        center();
        /**
        * Recursively search for id. Returns the first element found.
        * Returns null if none found.
        */
        getById(id:string);
        /**
        * Recursively search for classes. Returns an array of matching elements.
        * Empty array if none found.
        */
        getByClassName(id: String);
            /**
     * Recursively search for children of a specific type,
     * e.g. Two.Polygon. Pass a reference to this type as the param.
     * Returns an empty array if none found.
     */
        getByType( type: any );
            /**
     * Trickle down of noFill
     */
        noFill();
            /**
     * Trickle down of noStroke
     */
        noStroke();
            /**
     * Trickle down subdivide
     */
        subdivide();

    }

    export class Stop{
        offset: number;
        color: string;
        opacity: number;
        constructor( offset: number, color: string, opacity: number);

    }

    export class Star extends Path {
        constructor( x: number, y: number, or: number, sides: number);
    }

    export class Circle extends Shape {
        constructor( ox: number, oy: number, r: number )
    }
    export class Ellipse extends Shape{
        constructor( x: number, y: number, width: number, height: number);
    }

    export class Rectangl extends Shape{
        constructor( x: number, y: number, width: number, height: number );
    }

    export class RoundedRectangle extends Shape{
        constructor( x: number, y: number, width: number, height: number, radius: number );
    }
    export class Path extends Shape {
        id: string;
        closed: boolean;
        curved: boolean;
        automatic: boolean;
        beginning: number;
        ending: number;
        clip: boolean;
        translation: Two.Vector;
        rotation: number; // radian
        scale: number;
        visible: boolean;
        parent: Two.Group;
        vertices: Collection;
        stroke: string;
        fill: string;
        linewidth: number;
        opacity: number;
        cap: string;
        join: string;
        miter: number;


        constructor( vertices: Array<Anchor>, closed: boolean, curved: boolean, manual: boolean);

        /**
        * Based on closed / curved and sorting of vertices plot where all points
        * should be and where the respective handles should be too.
        */
        plot();
        /**
        * Given a float `t` from 0 to 1, return a point or assign a passed `obj`'s
        * coordinates to that percentage on this Two.Path's curve.
        */
        getPointAt(t: number, obj: Vector);

        noStroke();
        noFill();
        corner();
        subdivide();
        center();
        remove();
        toObject();

    }
    export class Line extends Shape {
        constructor( x1: number, y1: number, x2: number, y2: number )
    }

    export class LinearGradient{
        left: Vector;
        right: Vector;
        spread: string;
        stops: Array<Stop>;

        constructor( x1: number, x2: number, y1: number, y2: number, stops: Array<Stop> );
    }

    export class RadialGradient{
        center: Vector;
        radius: number;
        focal: Vector;
        spread: string;
        stops: Array<Stop>;

        constructor( x: number, y: number, radius: number, stops: Array<Stop>, fx: number, fy: number);
    }

    export class Text extends Shape{
        value:string;
        family:string;
        size:number;
        leading:number;
        alignment:string;
        style:string;
        weight:number;
        decoration:string;
        baseline:string;
        visible:boolean;
        constructor( message: string, x: number, y: number, styles: Text.Properties )
    }

}
export interface Collection extends Array<any> { }

export interface TwoConstructionParams {
    type?: Two.Types;
    width?: number;
    height?: number;
    autostart?: boolean;
    fullscreen?: boolean;
}