import { BehaviorSubject } from 'rxjs';

interface Subscription {
    unsubscribe(): void;
}

interface Observable<T> {
    subscribe(callback: (value: T) => void): Subscription;
}

/**
 * A multivector for two dimensions with a Euclidean metric.
 */
declare class Vector {
    #private;
    readonly change$: Observable<this>;
    constructor(x?: number, y?: number, a?: number, b?: number);
    get a(): number;
    set a(a: number);
    get x(): number;
    set x(x: number);
    get y(): number;
    set y(y: number);
    get b(): number;
    set b(b: number);
    static one: Vector;
    static zero: Vector;
    static left: Vector;
    static right: Vector;
    static up: Vector;
    static down: Vector;
    static I: Vector;
    static add(v1: Vector, v2: Vector): Vector;
    static sub(v1: Vector, v2: Vector): Vector;
    static subtract(v1: Vector, v2: Vector): Vector;
    static ratioBetween(v1: Vector, v2: Vector): number;
    static angleBetween(v1: Vector, v2: Vector): number;
    static distanceBetween(v1: Vector, v2: Vector): number;
    static distanceBetweenSquared(v1: Vector, v2: Vector): number;
    copy(v: Vector): this;
    clear(): this;
    clone(): Vector;
    add(rhs: Vector): this;
    sub(rhs: Vector): this;
    multiplyScalar(s: number): this;
    divideScalar(s: number): this;
    negate(): this;
    dot(v: Vector): number;
    exp(): this;
    length(): number;
    lengthSquared(): number;
    normalize(): this;
    distanceTo(v: Vector): number;
    distanceToSquared(v: Vector): number;
    set(x: number, y: number, a?: number, b?: number): this;
    setLength(l: number): this;
    equals(v: Vector, eps?: number): boolean;
    lerp(v: Vector, t: number): this;
    isZero(eps: number): boolean;
    toString(): string;
    rotate(radians: number): this;
}

declare class Anchor {
    #private;
    /**
     * default is zero.
     */
    readonly origin: Vector;
    readonly controls: {
        left: Vector;
        right: Vector;
    };
    readonly change$: Observable<this>;
    /**
     * @param x The x position of the root anchor point.
     * @param y The y position of the root anchor point.
     * @param ax The x position of the left handle point.
     * @param ay The y position of the left handle point.
     * @param bx The x position of the right handle point.
     * @param by The y position of the right handle point.
     * @param command The command to describe how to render. Applicable commands are {@link Commands}
     */
    constructor(x?: number, y?: number, ax?: number, ay?: number, bx?: number, by?: number, command?: 'M' | 'L' | 'C' | 'A' | 'Z');
    dispose(): void;
    get x(): number;
    set x(x: number);
    get y(): number;
    set y(y: number);
    get t(): number;
    set t(t: number);
    copy(v: Anchor): this;
    /**
     * Invoked when the path is automatic (not manual).
     */
    ignore(): void;
    /**
     * Invoked when the path is manual (not automatic).
     */
    listen(): void;
    /**
     * default is 'M'.
     */
    get command(): 'M' | 'L' | 'C' | 'A' | 'Z';
    set command(command: 'M' | 'L' | 'C' | 'A' | 'Z');
    /**
     * default is true.
     */
    get relative(): boolean;
    set relative(relative: boolean);
    /**
     * default is zero.
     */
    get rx(): number;
    set rx(rx: number);
    /**
     * default is zero.
     */
    get ry(): number;
    set ry(ry: number);
    /**
     * default is zero.
     */
    get xAxisRotation(): number;
    set xAxisRotation(xAxisRotation: number);
    /**
     * default is zero.
     */
    get largeArcFlag(): number;
    set largeArcFlag(largeArcFlag: number);
    /**
     * default is one.
     */
    get sweepFlag(): number;
    set sweepFlag(sweepFlag: number);
}

/**
 * TODO: If this was iterable then there would be less need for the length and getAt.
 */
declare class Collection<T> {
    #private;
    readonly insert$: Observable<T[]>;
    readonly remove$: Observable<T[]>;
    readonly order$: Observable<void>;
    constructor(items: T[]);
    forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: unknown): void;
    get length(): number;
    getAt(index: number): T;
    get(): T[];
    ping(): void;
    pop(): T;
    shift(): T;
    push(...items: T[]): number;
    unshift(...items: T[]): number;
    splice(start: number, deleteCount?: number, ...more: T[]): T[];
    sort(compareFn: (a: T, b: T) => number): this;
    reverse(): this;
    indexOf(searchElement: T, fromIndex?: number): number;
    map<X>(callbackfn: (value: T, index: number, array: T[]) => X, thisArg?: any): X[];
}

interface Child {
    id: string;
    id$: Observable<{
        id: string;
        previous_id: string;
    }>;
}
/**
 * A children collection which is accesible both by index and by object `id`.
 */
declare class Children<T extends Child> extends Collection<T> {
    #private;
    readonly ids: {
        [id: string]: T;
    };
    constructor(children: T[]);
    dispose(): void;
}

/**
 * Information that is shared between the model and the view.
 */
interface SharedInfo {
    appended?: boolean;
    clip?: SVGClipPathElement;
    /**
     * Used by the CanvasRenderer.
     */
    effect?: CanvasPattern;
    /**
     * The element corresponding to some Shape and used by the SVG renderer. It will share the same identifier.
     */
    elem?: HTMLElement | SVGElement;
    /**
     * DGH: Something strange in use.
     */
    hasFillEffect?: boolean;
    /**
     * DGH: Something strange in use.
     */
    hasStrokeEffect?: boolean;
    image?: SVGImageElement;
    opacity?: number;
    type?: 'group' | 'linear-gradient' | 'path' | 'points' | 'radial-gradient' | 'text' | 'texture';
    anchor_vertices?: Anchor[];
    anchor_collection?: Anchor[];
    vector_vertices?: Vector[];
    vector_collection?: Vector[];
}

/**
 * The foundational object for the scenegraph.
 */
declare abstract class Element$1<P> implements Child {
    #private;
    /**
     * Gradient, Shape, Stop, and Texture all extend Element.
     */
    isShape: boolean;
    /**
     *
     */
    parent: P;
    _flagId: boolean;
    _flagClassName: boolean;
    /**
     * TODO: Since every element has an identifier, it should be possible to store this information that is shared
     * between the model and view in a map elsewhere. I suspect, though, that this is faster.
     */
    viewInfo: SharedInfo;
    _id: string | null;
    readonly id$: Observable<{
        id: string;
        previous_id: string | null;
    }>;
    _className: string;
    classList: string[];
    constructor();
    flagReset(): void;
    get renderer(): SharedInfo;
    set renderer(renderer: SharedInfo);
    get id(): string;
    set id(id: string);
    get className(): string;
    set className(v: string);
}

/**
 * An arbitrary class to manage a directory of things. Mainly used for keeping tabs of textures in Two.js.
 * TODO: This could be replaced by a map
 */
declare class Registry<T> {
    map: {
        [id: string]: T;
    };
    constructor();
    add(id: string, obj: T): this;
    remove(id: string): this;
    get(id: string): T;
    contains(id: string): boolean;
}

declare class Texture extends Element$1<Group> {
    #private;
    _flagSrc: boolean;
    _flagImage: boolean;
    _flagVideo: boolean;
    _flagLoaded: boolean;
    _flagRepeat: boolean;
    _flagOffset: boolean;
    _flagScale: boolean;
    _src: string;
    _image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | null;
    _loaded: boolean;
    _repeat: string;
    _scale: Vector | number;
    _offset: Vector | null;
    readonly change$: Observable<this>;
    readonly loaded$: Observable<this>;
    /**
     * @param src The URL path to an image file or an `<img />` element.
     * @param callback An optional callback function once the image has been loaded.
     */
    constructor(src?: string | HTMLCanvasElement | HTMLImageElement | HTMLVideoElement, callback?: () => void);
    static Properties: string[];
    /**
     * @name Two.Texture.RegularExpressions
     * @property {Object} - A map of compatible DOM Elements categorized by media format.
     */
    static RegularExpressions: {
        readonly video: RegExp;
        readonly image: RegExp;
        readonly effect: RegExp;
    };
    /**
     * @name Two.Texture.ImageRegistry
     * @property {Two.Registry} - A canonical listing of image data used in a single session of Two.js.
     * @nota-bene This object is used to cache image data between different textures.
     */
    static ImageRegistry: Registry<HTMLCanvasElement | HTMLImageElement | HTMLVideoElement>;
    /**
     * @name Two.Texture.getAbsoluteURL
     * @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}.
     * @param {String} path
     * @returns {String} - The serialized absolute path.
     */
    static getAbsoluteURL(path: string): string;
    /**
     * Retrieves the tag name of an image, video, or canvas node.
     * @param image The image to infer the tag name from.
     * @returns the tag name of an image, video, or canvas node.
     */
    static getTag(image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement): 'canvas' | 'img' | 'video';
    static getImage(src: string): HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
    /**
     * @name Two.Register
     * @interface
     * @description A collection of functions to register different types of textures. Used internally by a {@link Two.Texture}.
     */
    static Register: {
        readonly canvas: (texture: Texture, callback: () => void) => void;
        readonly img: (texture: Texture, callback: () => void) => void;
        readonly video: (texture: Texture, callback: () => void) => void;
    };
    /**
     * @name Two.Texture.load
     * @function
     * @param {Two.Texture} texture - The texture to load.
     * @param {Function} callback - The function to be called once the texture is loaded.
     */
    static load(texture: Texture, callback: () => void): void;
    _update(bubbles?: boolean): this;
    flagReset(): this;
    get image(): HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
    set image(image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement);
    get loaded(): boolean;
    set loaded(v: boolean);
    get offset(): Vector;
    set offset(v: Vector);
    get repeat(): string;
    set repeat(v: string);
    get scale(): number | Vector;
    set scale(v: number | Vector);
    get src(): string;
    set src(v: string);
}

/**
 * TODO: rename to Shape when the hierarchy has been flattened.
 */
interface IShape<P> extends Child {
    isShape: boolean;
    automatic: boolean;
    beginning: number;
    cap: string;
    classList: string[];
    closed: boolean;
    curved: boolean;
    ending: number;
    fill: string | Gradient | Texture;
    join: string;
    length: number;
    linewidth: number;
    miter: number;
    parent: P;
    position: Vector;
    stroke: string | Gradient | Texture;
    visible: boolean;
    getBoundingClientRect(shallow?: boolean): {
        width?: number;
        height?: number;
        top?: number;
        left?: number;
        right?: number;
        bottom?: number;
    };
    hasBoundingClientRect(): boolean;
    noFill(): this;
    noStroke(): this;
    subdivide(limit: number): this;
}

/**
 * 1st row is [a,b,c], 2nd row is [d,e,f], 3rd row is [g,h,i]
 */
declare class Matrix {
    #private;
    readonly change$: Observable<this>;
    /**
     * 1st row is [0,1,2], 2nd row is [3,4,5], 3rd row is [6,7,8]
     */
    elements: number[] | Float32Array;
    /**
     * @name Two.Matrix#manual
     * @property {Boolean} - Determines whether Two.js automatically calculates the values for the matrix or if the developer intends to manage the matrix.
     * @nota-bene - Setting to `true` nullifies {@link Shape#position}, {@link Two.Shape#rotation}, and {@link Two.Shape#scale}.
     */
    manual: boolean;
    constructor(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number, g?: number, h?: number, i?: number);
    get a(): number;
    get b(): number;
    get c(): number;
    get d(): number;
    get e(): number;
    get f(): number;
    get g(): number;
    get h(): number;
    get i(): number;
    /**
     * @name Two.Matrix.Identity
     * @property {Number[]} - A stored reference to the default value of a 3 x 3 matrix.
     */
    static Identity: number[];
    set(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number): this;
    set_from_matrix(m: Matrix): this;
    /**
     * @name Two.Matrix#copy
     * @function
     * @description Copy the matrix of one to the current instance.
     */
    copy(m: Matrix): this;
    /**
     * @name Two.Matrix#identity
     * @function
     * @description Turn matrix to the identity, like resetting.
     */
    identity(): this;
    /**
     * @name Two.Matrix#multiply
     * @function
     * @param {Number} a - The scalar to be multiplied.
     * @description Multiply all components of the matrix against a single scalar value.
     * @overloaded
     */
    multiply(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number): this;
    multiply_vector(x?: number, y?: number, z?: number): [number, number, number];
    multiply_by_scalar(s: number): this;
    /**
     * @name Two.Matrix#inverse
     * @function
     * @param {Two.Matrix} [out] - The optional matrix to apply the inversion to.
     * @description Return an inverted version of the matrix. If no optional one is passed a new matrix is created and returned.
     */
    inverse(out?: Matrix): Matrix;
    /**
     * @name Two.Matrix#scale
     * @function
     * @param {Number} scale - The one dimensional scale to apply to the matrix.
     * @description Uniformly scale the transformation matrix.
     */
    /**
     * @name Two.Matrix#scale
     * @function
     * @param {Number} sx - The horizontal scale factor.
     * @param {Number} sy - The vertical scale factor
     * @description Scale the transformation matrix in two dimensions.
     */
    scale(sx: number, sy: number): this;
    /**
     * @name Two.Matrix#rotate
     * @function
     * @param {Number} Number - The amount to rotate in Number.
     * @description Rotate the matrix.
     */
    rotate(angle: number): this;
    /**
     * @name Two.Matrix#translate
     * @function
     * @param x The horizontal translation value to apply.
     * @param y The vertical translation value to apply.
     * @description Translate the matrix.
     */
    translate(x: number, y: number): this;
    /**
     * Skew the matrix by an angle in the x axis direction.
     */
    skewX(angle: number): this;
    /**
     * Skew the matrix by an angle in the y axis direction.
     */
    skewY(angle: number): this;
    toString(fullMatrix?: boolean): string;
    /**
     * @returns the full 9 elements of the matrix or just 6 in the format for 2D transformations.
     */
    toTransformArray(fullMatrix?: boolean, output?: number[]): number[];
    /**
     * @returns  the full 9 elements of the matrix or just 6 for 2D transformations.
     */
    toArray(fullMatrix?: boolean, output?: number[]): number[];
}

interface Parent {
    _update?(): void;
}
interface ShapeOptions {
    position?: Vector;
    attitude?: Vector;
}
declare abstract class Shape<P extends Parent> extends Element$1<P> implements IShape<P> {
    #private;
    _flagMatrix: boolean;
    _flagScale: boolean;
    /**
     * The matrix value of the shape's position, rotation, and scale.
     */
    _matrix: Matrix;
    /**
     * The matrix value of the shape's position, rotation, and scale in the scene.
     */
    _worldMatrix: Matrix;
    /**
     * TODO: Replace with attitude and Geometric Algebra.
     */
    _rotation: number;
    /**
     * The scale supports non-uniform scaling.
     * The API provides more convenient access for uniform scaling.
     * Make the easy things easy...
     */
    _scale: Vector;
    _skewX: number;
    _skewY: number;
    /**
     * DGH: This is plonked on here by the interpretation of SVG.
     * It's then copied by the SVG renderer to the dataset property of the renderer elem.
     */
    dataset?: DOMStringMap;
    abstract _flagVisible: boolean;
    abstract automatic: boolean;
    abstract beginning: number;
    abstract cap: string;
    abstract clip: boolean;
    abstract closed: boolean;
    abstract curved: boolean;
    abstract ending: number;
    abstract fill: string | Gradient | Texture;
    abstract join: string;
    abstract length: number;
    abstract linewidth: number;
    abstract miter: number;
    abstract stroke: string | Gradient | Texture;
    abstract visible: boolean;
    abstract getBoundingClientRect(shallow?: boolean): {
        width?: number;
        height?: number;
        top?: number;
        left?: number;
        right?: number;
        bottom?: number;
    };
    abstract hasBoundingClientRect(): boolean;
    abstract noFill(): this;
    abstract noStroke(): this;
    abstract subdivide(limit: number): this;
    constructor(options?: ShapeOptions);
    dispose(): void;
    get renderer(): SharedInfo;
    set renderer(v: SharedInfo);
    _update(bubbles?: boolean): this;
    flagReset(dirtyFlag?: boolean): this;
    useAttitude(attitude: Vector): void;
    usePosition(position: Vector): void;
    get position(): Vector;
    set position(position: Vector);
    get attitude(): Vector;
    set attitude(attitude: Vector);
    get rotation(): number;
    set rotation(v: number);
    get scale(): number;
    set scale(scale: number);
    get scaleXY(): Vector;
    set scaleXY(scale: Vector);
    get skewX(): number;
    set skewX(v: number);
    get skewY(): number;
    set skewY(v: number);
    get matrix(): Matrix;
    set matrix(v: Matrix);
    get worldMatrix(): Matrix;
    set worldMatrix(v: Matrix);
}

declare class Group extends Shape<unknown> {
    #private;
    _flagAdditions: boolean;
    _flagSubtractions: boolean;
    _flagOrder: boolean;
    _flagOpacity: boolean;
    _flagBeginning: boolean;
    _flagEnding: boolean;
    _flagLength: boolean;
    _flagMask: boolean;
    _flagVisible: boolean;
    _fill: string;
    _stroke: string;
    _linewidth: number;
    _opacity: number;
    _visible: boolean;
    _cap: string;
    _join: string;
    _miter: number;
    _closed: boolean;
    _curved: boolean;
    _automatic: boolean;
    /**
     * @name Two.Group#beginning
     * @property {Number} - Number between zero and one to state the beginning of where the path is rendered.
     * a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
     * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#ending}.
     */
    _beginning: number;
    /**
     * @name Two.Group#ending
     * @property {Number} - Number between zero and one to state the ending of where the path is rendered.
     * @description {@link Two.Group#ending} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
     * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#beginning}.
     */
    _ending: number;
    /**
     * @name Two.Group#length
     * @property {Number} - The sum of distances between all child lengths.
     */
    _length: number;
    /**
     * @name Two.Group#mask
     * @property {Two.Shape} - The Two.js object to clip from a group's rendering.
     */
    _mask: Shape<Group>;
    clip: boolean;
    /**
     * An automatically updated list of shapes that need to be appended to the renderer's scenegraph.
     */
    readonly additions: Shape<Group>[];
    /**
     * An automatically updated list of children that need to be removed from the renderer's scenegraph.
     */
    readonly subtractions: Shape<Group>[];
    constructor(shapes?: Shape<Group>[]);
    hasBoundingClientRect(): boolean;
    dispose(): void;
    static Children: typeof Children;
    /**
     * @name Two.Group.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Group}.
     */
    static Properties: string[];
    /**
     * Orient the children of the group to the upper left-hand corner of that group.
     */
    corner(): this;
    /**
     * @name Two.Group#center
     * @function
     * @description Orient the children of the group to the center of that group.
     */
    center(): this;
    /**
     * @name Two.Group#getById
     * @function
     * @description Recursively search for id. Returns the first element found.
     * @returns {Two.Shape} - Or `null` if nothing is found.
     */
    getById(id: string): IShape<unknown>;
    getByClassName(className: string): IShape<unknown>[];
    getByType(type: any): IShape<unknown>[];
    add(...shapes: Shape<Group>[]): this;
    remove(...shapes: Shape<Group>[]): this;
    getBoundingClientRect(shallow?: boolean): {
        top: number;
        left: number;
        right: number;
        bottom: number;
        width?: number;
        height?: number;
    };
    /**
     * Apply `noFill` method to all child shapes.
     */
    noFill(): this;
    /**
     * Apply `noStroke` method to all child shapes.
     */
    noStroke(): this;
    /**
     * Apply `subdivide` method to all child shapes.
     */
    subdivide(limit: number): this;
    _update(): this;
    /**
     * @name Two.Group#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset(): this;
    get automatic(): boolean;
    set automatic(v: boolean);
    get beginning(): number;
    set beginning(v: number);
    get cap(): string;
    set cap(v: string);
    /**
     * @name Two.Group#children
     * @property {Two.Group.Children}
     * @description A list of all the children in the scenegraph.
     * @nota-bene Ther order of this list indicates the order each element is rendered to the screen.
     */
    get children(): Children<Shape<Group>>;
    set children(children: Children<Shape<Group>>);
    get closed(): boolean;
    set closed(v: boolean);
    get curved(): boolean;
    set curved(v: boolean);
    get ending(): number;
    set ending(v: number);
    get fill(): string;
    set fill(v: string);
    get join(): string;
    set join(v: string);
    get length(): number;
    get linewidth(): number;
    set linewidth(v: number);
    get mask(): Shape<Group>;
    set mask(mask: Shape<Group>);
    get miter(): number;
    set miter(v: number);
    get opacity(): number;
    set opacity(v: number);
    get stroke(): string;
    set stroke(stroke: string);
    get visible(): boolean;
    set visible(visible: boolean);
}

declare class Stop extends Element$1<Gradient> {
    #private;
    _flagOffset: boolean;
    _flagOpacity: boolean;
    _flagColor: boolean;
    _offset: number;
    _opacity: number;
    _color: string;
    readonly change$: Observable<this>;
    /**
     * @param offset The offset percentage of the stop represented as a zero-to-one value. Default value flip flops from zero-to-one as new stops are created.
     * @param color The color of the stop. Default value flip flops from white to black as new stops are created.
     * @param opacity The opacity value. Default value is 1, cannot be lower than 0.
     */
    constructor(offset?: number, color?: string, opacity?: number);
    /**
     * @name Two.Stop.Index
     * @property {Number} - The current index being referenced for calculating a stop's default offset value.
     */
    static Index: number;
    /**
     * @name Two.Stop.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Stop}.
     */
    static Properties: string[];
    flagReset(): this;
    get color(): string;
    set color(v: string);
    get offset(): number;
    set offset(v: number);
    get opacity(): number;
    set opacity(v: number);
}

/**
 *
 */
declare abstract class Gradient extends Element$1<Group> {
    #private;
    _flagStops: boolean;
    _flagSpread: boolean;
    _flagUnits: boolean;
    _spread: 'pad' | 'reflect' | 'repeat' | null;
    _units: 'userSpaceOnUse' | 'objectBoundingBox' | null;
    _stops: Children<Stop> | null;
    _stops_insert: Subscription | null;
    _stops_remove: Subscription | null;
    readonly _change: BehaviorSubject<this>;
    readonly change$: Observable<this>;
    readonly _stop_subscriptions: {
        [id: string]: Subscription;
    };
    constructor(stops?: Stop[]);
    dispose(): void;
    /**
     * @name Two.Gradient.Stop
     * @see {@link Two.Stop}
     */
    static Stop: typeof Stop;
    /**
     * A list of properties that are on every Gradient.
     */
    static Properties: string[];
    /**
     * @name Two.Gradient#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update(bubbles?: boolean): this;
    /**
     * @name Two.Gradient#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset(): this;
    get spread(): 'pad' | 'reflect' | 'repeat' | null;
    set spread(v: 'pad' | 'reflect' | 'repeat' | null);
    get stops(): Stop[];
    set stops(stops: Stop[]);
    get units(): 'userSpaceOnUse' | 'objectBoundingBox' | null;
    set units(v: 'userSpaceOnUse' | 'objectBoundingBox' | null);
}

declare class LinearGradient extends Gradient {
    #private;
    _flagEndPoints: boolean;
    /**
     * @param x1 The x position of the first end point of the linear gradient.
     * @param y1 The y position of the first end point of the linear gradient.
     * @param x2 The x position of the second end point of the linear gradient.
     * @param y2 The y position of the second end point of the linear gradient.
     * @param stops A list of {@link Stop}s that contain the gradient fill pattern for the gradient.
     * @nota-bene The linear gradient lives within the space of the parent object's matrix space.
     */
    constructor(x1?: number, y1?: number, x2?: number, y2?: number, stops?: Stop[]);
    static Properties: string[];
    /**
     * @name Two.LinearGradient.Stop
     * @see {@link Two.Stop}
     */
    static Stop: typeof Stop;
    /**
     * @name Two.LinearGradient#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update(): this;
    /**
     * @name Two.LinearGradient#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset(): this;
    get left(): Vector;
    set left(v: Vector);
    get right(): Vector;
    set right(v: Vector);
}

declare class RadialGradient extends Gradient {
    #private;
    _flagRadius: boolean;
    _flagCenter: boolean;
    _flagFocal: boolean;
    /**
     * @param cx The x position of the origin of the radial gradient.
     * @param cy The y position of the origin of the radial gradient.
     * @param r The radius of the radial gradient.
     * @param stops A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
     * @param fx The x position of the focal point on the radial gradient.
     * @param fy The y position of the focal point on the radial gradient.
     */
    constructor(cx?: number, cy?: number, r?: number, stops?: Stop[], fx?: number, fy?: number);
    static Stop: typeof Stop;
    static Properties: string[];
    _update(): this;
    flagReset(): this;
    get center(): Vector;
    set center(v: Vector);
    get focal(): Vector;
    set focal(v: Vector);
    get radius(): number;
    set radius(v: number);
}

declare function getCurveLength(a: Anchor, b: Anchor, limit: number): number;

interface PathOptions {
    position?: Vector;
    attitude?: Vector;
}
declare class Path extends Shape<Group> {
    #private;
    _flagVertices: boolean;
    _flagLength: boolean;
    _flagFill: boolean;
    _flagStroke: boolean;
    _flagLinewidth: boolean;
    _flagOpacity: boolean;
    _flagVisible: boolean;
    _flagCap: boolean;
    _flagJoin: boolean;
    _flagMiter: boolean;
    _flagMask: boolean;
    _flagClip: boolean;
    /**
     * @name Two.Path#_length
     * @private
     * @see {@link Two.Path#length}
     */
    _length: number;
    readonly _lengths: number[];
    /**
     * @name Two.Path#_fill
     * @private
     * @see {@link Two.Path#fill}
     */
    _fill: string | Gradient | Texture;
    /**
     * @name Two.Path#_stroke
     * @private
     * @see {@link Two.Path#stroke}
     */
    _stroke: string | Gradient | Texture;
    /**
     * @name Two.Path#_linewidth
     * @private
     * @see {@link Two.Path#linewidth}
     */
    _linewidth: number;
    /**
     * @name Two.Path#_opacity
     * @private
     * @see {@link Two.Path#opacity}
     */
    _opacity: number;
    /**
     * @name Two.Path#_visible
     * @private
     * @see {@link Two.Path#visible}
     */
    _visible: boolean;
    /**
     * @name Two.Path#_cap
     * @private
     * @see {@link Two.Path#cap}
     */
    _cap: string;
    /**
     * @name Two.Path#_join
     * @private
     * @see {@link Two.Path#join}
     */
    _join: string;
    /**
     * @name Two.Path#_miter
     * @private
     * @see {@link Two.Path#miter}
     */
    _miter: number;
    /**
     * @name Two.Path#_closed
     * @private
     * @see {@link Two.Path#closed}
     */
    _closed: boolean;
    /**
     * @name Two.Path#_curved
     * @private
     * @see {@link Two.Path#curved}
     */
    _curved: boolean;
    /**
     * @name Two.Path#_automatic
     * @private
     * @see {@link Two.Path#automatic}
     */
    _automatic: boolean;
    /**
     * @name Two.Path#_beginning
     * @private
     * @see {@link Two.Path#beginning}
     */
    _beginning: number;
    /**
     * @name Two.Path#_ending
     * @private
     * @see {@link Two.Path#ending}
     */
    _ending: number;
    _mask: Shape<Group> | null;
    /**
     * @name Two.Path#_clip
     * @private
     * @see {@link Two.Path#clip}
     */
    _clip: boolean;
    /**
     * @name Two.Path#_dashes
     * @private
     * @see {@link Two.Path#dashes}
     */
    _dashes: number[];
    _collection: Collection<Anchor>;
    /**
     * @param {Two.Anchor[]} [vertices] - A list of {@link Two.Anchor}s that represent the order and coordinates to construct the rendered shape.
     * @param {Boolean} [closed=false] - Describes whether the shape is closed or open.
     * @param {Boolean} [curved=false] - Describes whether the shape automatically calculates bezier handles for each vertex.
     * @param {Boolean} [manual=false] - Describes whether the developer controls how vertices are plotted or if Two.js automatically plots coordinates based on closed and curved booleans.
     * @description This is the primary primitive class for creating all drawable shapes in Two.js. Unless specified methods return their instance of `Two.Path` for the purpose of chaining.
     */
    constructor(vertices?: Anchor[], closed?: boolean, curved?: boolean, manual?: boolean, options?: PathOptions);
    /**
     * @name Two.Path.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Path}.
     */
    static Properties: string[];
    static Utils: {
        getCurveLength: typeof getCurveLength;
    };
    noFill(): this;
    noStroke(): this;
    corner(): this;
    center(): this;
    getBoundingClientRect(shallow?: boolean): {
        width: number;
        height: number;
        top?: number;
        left?: number;
        right?: number;
        bottom?: number;
    };
    hasBoundingClientRect(): boolean;
    /**
     * TODO: Bad name. THis function is called for its side effects which are to modify the Anchor.
     * Originally the function appears to promote a Vector and return an Anchor, but this is not used
     * and the call always involves an Anchor.
     * @param t Percentage value describing where on the {@link Two.Path} to estimate and assign coordinate values.
     * @param {Two.Vector} [obj] - Object to apply calculated x, y to. If none available returns new `Object`.
     * @returns {Object}
     * @description Given a float `t` from 0 to 1, return a point or assign a passed `obj`'s coordinates to that percentage on this {@link Two.Path}'s curve.
     */
    getPointAt(t: number, obj: Anchor): Anchor;
    /**
     * @name Two.Path#plot
     * @function
     * @description Based on closed / curved and sorting of vertices plot where all points should be and where the respective handles should be too.
     * @nota-bene While this method is public it is internally called by {@link Two.Path#_update} when `automatic = true`.
     */
    plot(): this;
    /**
     * @name Two.Path#subdivide
     * @function
     * @param {Number} limit - How many times to recurse subdivisions.
     * @description Insert a {@link Two.Anchor} at the midpoint between every item in {@link Two.Path#vertices}.
     */
    subdivide(limit: number): this;
    /**
     * @param {Number} [limit] -
     * @param {Boolean} [silent=false] - If set to `true` then the path isn't updated before calculation. Useful for internal use.
     * @description Recalculate the {@link Two.Path#length} value.
     */
    _updateLength(limit?: number, silent?: boolean): this;
    /**
     * @name Two.Path#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update(): this;
    flagReset(dirtyFlag?: boolean): this;
    get automatic(): boolean;
    set automatic(automatic: boolean);
    get beginning(): number;
    set beginning(v: number);
    get cap(): string;
    set cap(v: string);
    get clip(): boolean;
    set clip(v: boolean);
    get closed(): boolean;
    set closed(v: boolean);
    get curved(): boolean;
    set curved(v: boolean);
    get dashes(): number[];
    set dashes(v: number[]);
    get ending(): number;
    set ending(v: number);
    get fill(): string | Gradient | Texture;
    set fill(f: string | Gradient | Texture);
    get join(): string;
    set join(v: string);
    get length(): number;
    get linewidth(): number;
    set linewidth(v: number);
    get mask(): Shape<Group> | null;
    set mask(mask: Shape<Group> | null);
    get miter(): number;
    set miter(v: number);
    get opacity(): number;
    set opacity(v: number);
    get stroke(): string | Gradient | Texture;
    set stroke(stroke: string | Gradient | Texture);
    get vertices(): Collection<Anchor>;
    set vertices(vertices: Collection<Anchor>);
    get visible(): boolean;
    set visible(v: boolean);
}

interface RectangleOptions {
    position?: Vector;
    attitude?: Vector;
    width?: number;
    height?: number;
}
declare class Rectangle extends Path {
    #private;
    _flagWidth: boolean;
    _flagHeight: boolean;
    _width: number;
    _height: number;
    _origin: Vector;
    constructor(options?: RectangleOptions);
    _update(): this;
    flagReset(dirtyFlag?: boolean): this;
    get height(): number;
    set height(v: number);
    get origin(): Vector;
    set origin(v: Vector);
    get width(): number;
    set width(v: number);
}

interface SpriteOptions {
    position?: Vector;
    attitude?: Vector;
}
declare class Sprite extends Rectangle {
    _flagTexture: boolean;
    _flagColumns: boolean;
    _flagRows: boolean;
    _flagFrameRate: boolean;
    _flagIndex: boolean;
    _amount: number;
    _duration: number;
    _startTime: number;
    _playing: boolean;
    _firstFrame: number;
    _lastFrame: number;
    _loop: boolean;
    _texture: Texture | null;
    _columns: number;
    _rows: number;
    _frameRate: number;
    _index: number;
    _origin: Vector;
    _onLastFrame: () => void;
    /**
     * @param path The URL path or {@link Two.Texture} to be used as the bitmap data displayed on the sprite.
     * @param ox The initial `x` position of the Two.Sprite.
     * @param oy The initial `y` position of the Two.Sprite.
     * @param cols The number of columns the sprite contains.
     * @param rows The number of rows the sprite contains.
     * @param frameRate The frame rate at which the partitions of the image should playback at.
     * A convenient package to display still or animated images through a tiled image source. For more information on the principals of animated imagery through tiling see [Texture Atlas](https://en.wikipedia.org/wiki/Texture_atlas) on Wikipedia.
     */
    constructor(path: string | Texture, ox?: number, oy?: number, cols?: number, rows?: number, frameRate?: number);
    /**
     * @name Two.Sprite.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Sprite}.
     */
    static Properties: string[];
    /**
     * @name Two.Sprite#play
     * @function
     * @param {Number} [firstFrame=0] - The index of the frame to start the animation with.
     * @param {Number} [lastFrame] - The index of the frame to end the animation with. Defaults to the last item in the {@link Two.Sprite#textures}.
     * @param {Function} [onLastFrame] - Optional callback function to be triggered after playing the last frame. This fires multiple times when the sprite is looped.
     * @description Initiate animation playback of a {@link Two.Sprite}.
     */
    play(firstFrame?: number, lastFrame?: number, onLastFrame?: () => void): this;
    /**
     * @name Two.Sprite#pause
     * @function
     * @description Halt animation playback of a {@link Two.Sprite}.
     */
    pause(): this;
    /**
     * @name Two.Sprite#stop
     * @function
     * @description Halt animation playback of a {@link Two.Sprite} and set the current frame back to the first frame.
     */
    stop(): this;
    /**
     * @name Two.Sprite#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update(): this;
    /**
     * @name Two.Sprite#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset(): this;
    get texture(): Texture;
    set texture(v: Texture);
    get columns(): number;
    set columns(v: number);
    get rows(): number;
    set rows(v: number);
    get frameRate(): number;
    set frameRate(v: number);
    get index(): number;
    set index(v: number);
}

interface View {
    /**
     *
     */
    domElement: HTMLElement | SVGElement;
    height?: number;
    size$: Observable<{
        width: number;
        height: number;
    }>;
    width?: number;
    render(): void;
    setSize(size: {
        width: number;
        height: number;
    }, ratio: number): void;
}

interface SVGViewParams {
    svgElement?: SVGElement;
}
declare class SVGView implements View {
    #private;
    readonly domElement: SVGElement;
    readonly scene: Group;
    readonly defs: SVGDefsElement;
    width?: number;
    height?: number;
    readonly size$: Observable<{
        width: number;
        height: number;
    }>;
    constructor(scene: Group, params?: SVGViewParams);
    setSize(size: {
        width: number;
        height: number;
    }): this;
    render(): this;
}

/**
 * @name Two.ArcSegment
 * @class
 * @extends Two.Path
 * @param {Number} [x=0] - The x position of the arc segment.
 * @param {Number} [y=0] - The y position of the arc segment.
 * @param {Number} [innerRadius=0] - The inner radius value of the arc segment.
 * @param {Number} [outerRadius=0] - The outer radius value of the arc segment.
 * @param {Number} [startAngle=0] - The start angle of the arc segment in Number.
 * @param {Number} [endAngle=6.2831] - The end angle of the arc segment in Number.
 * @param {Number} [resolution=24] - The number of vertices used to construct the arc segment.
 */
declare class ArcSegment extends Path {
    /**
     * @name Two.ArcSegment#_flagStartAngle
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#startAngle} needs updating.
     */
    _flagStartAngle: boolean;
    /**
     * @name Two.ArcSegment#_flagEndAngle
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#endAngle} needs updating.
     */
    _flagEndAngle: boolean;
    /**
     * @name Two.ArcSegment#_flagInnerRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#innerRadius} needs updating.
     */
    _flagInnerRadius: boolean;
    /**
     * @name Two.ArcSegment#_flagOuterRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#outerRadius} needs updating.
     */
    _flagOuterRadius: boolean;
    /**
     * @name Two.ArcSegment#_startAngle
     * @private
     * @see {@link Two.ArcSegment#startAngle}
     */
    _startAngle: number;
    /**
     * @name Two.ArcSegment#_endAngle
     * @private
     * @see {@link Two.ArcSegment#endAngle}
     */
    _endAngle: number;
    /**
     * @name Two.ArcSegment#_innerRadius
     * @private
     * @see {@link Two.ArcSegment#innerRadius}
     */
    _innerRadius: number;
    /**
     * @name Two.ArcSegment#_outerRadius
     * @private
     * @see {@link Two.ArcSegment#outerRadius}
     */
    _outerRadius: number;
    constructor(x?: number, y?: number, ir?: number, or?: number, sa?: number, ea?: number, res?: number);
    /**
     * @name Two.ArcSegment.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.ArcSegment}.
     */
    static Properties: string[];
    /**
     * @name Two.ArcSegment#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update(): this;
    /**
     * @name Two.ArcSegment#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset(): this;
    get startAngle(): number;
    set startAngle(v: number);
    get endAngle(): number;
    set endAngle(v: number);
    get innerRadius(): number;
    set innerRadius(v: number);
    get outerRadius(): number;
    set outerRadius(v: number);
}

interface CircleOptions {
    position?: Vector;
    attitude?: Vector;
    radius?: number;
    resolution?: number;
}
declare class Circle extends Path {
    #private;
    _flagRadius: boolean;
    constructor(options?: CircleOptions);
    dispose(): void;
    _update(): this;
    flagReset(dirtyFlag?: boolean): this;
    get radius(): number;
    set radius(v: number);
}

declare class Ellipse extends Path {
    /**
     * @name Two.Ellipse#_flagWidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Ellipse#width} needs updating.
     */
    _flagWidth: boolean;
    /**
     * @name Two.Ellipse#_flagHeight
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Ellipse#height} needs updating.
     */
    _flagHeight: boolean;
    /**
     * @name Two.Ellipse#_width
     * @private
     * @see {@link Two.Ellipse#width}
     */
    _width: number;
    /**
     * @name Two.Ellipse#_height
     * @private
     * @see {@link Two.Ellipse#height}
     */
    _height: number;
    /**
     * @param {Number} [x=0] - The x position of the ellipse.
     * @param {Number} [y=0] - The y position of the ellipse.
     * @param {Number} [rx=0] - The radius value of the ellipse in the x direction.
     * @param {Number} [ry=0] - The radius value of the ellipse in the y direction.
     * @param {Number} [resolution=4] - The number of vertices used to construct the ellipse.
     */
    constructor(x?: number, y?: number, rx?: number, ry?: number, resolution?: number);
    /**
     * @name Two.Ellipse.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Ellipse}.
     */
    static Properties: string[];
    /**
     * @name Two.Ellipse#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update(): this;
    /**
     * @name Two.Ellipse#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset(): this;
    get height(): number;
    set height(v: number);
    get width(): number;
    set width(v: number);
}

declare class Line extends Path {
    /**
     * @param x1 The x position of the first vertex on the line.
     * @param y1 The y position of the first vertex on the line.
     * @param x2 The x position of the second vertex on the line.
     * @param y2 The y position of the second vertex on the line.
     */
    constructor(x1?: number, y1?: number, x2?: number, y2?: number);
    get left(): Anchor;
    set left(v: Anchor);
    get right(): Anchor;
    set right(v: Anchor);
}

declare class Polygon extends Path {
    _flagWidth: boolean;
    _flagHeight: boolean;
    _flagSides: boolean;
    _radius: number;
    _width: number;
    _height: number;
    _sides: number;
    /**
     * @param x The x position of the polygon.
     * @param y The y position of the polygon.
     * @param radius The radius value of the polygon.
     * @param sides The number of vertices used to construct the polygon.
     */
    constructor(x?: number, y?: number, radius?: number, sides?: number);
    static Properties: string[];
    _update(): this;
    flagReset(): this;
    get radius(): number;
    set radius(v: number);
    get width(): number;
    set width(v: number);
    get height(): number;
    set height(v: number);
    get sides(): number;
    set sides(v: number);
}

declare class RoundedRectangle extends Path {
    #private;
    _flagWidth: boolean;
    _flagHeight: boolean;
    _flagRadius: boolean;
    _width: number;
    _height: number;
    _radius: number | Vector;
    /**
     * @param x The x position of the rounded rectangle.
     * @param y The y position of the rounded rectangle.
     * @param width The width value of the rounded rectangle.
     * @param height The width value of the rounded rectangle.
     * @param radius The radius value of the rounded rectangle.
     */
    constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
    static Properties: string[];
    _update(): this;
    flagReset(): this;
    get width(): number;
    set width(v: number);
    get height(): number;
    set height(v: number);
    get radius(): number | Vector;
    set radius(radius: number | Vector);
}

declare class Star extends Path {
    _flagInnerRadius: boolean;
    _flagOuterRadius: boolean;
    _flagSides: boolean;
    _innerRadius: number;
    _outerRadius: number;
    _sides: number;
    /**
     * @param x The x position of the star.
     * @param y The y position of the star.
     * @param innerRadius The inner radius value of the star.
     * @param outerRadius The outer radius value of the star.
     * @param sides The number of sides used to construct the star.
     */
    constructor(x?: number, y?: number, innerRadius?: number, outerRadius?: number, sides?: number);
    static Properties: string[];
    _update(): this;
    flagReset(): this;
    get innerRadius(): number;
    set innerRadius(v: number);
    get outerRadius(): number;
    set outerRadius(v: number);
    get sides(): number;
    set sides(v: number);
}

interface TextStyles {
    alignment: 'center' | 'left' | 'right';
    baseline: 'bottom' | 'middle' | 'top';
    decoration: string;
    direction: 'ltr' | 'rtl';
    family: string;
    fill: string;
    leading: number;
    linewidth: number;
    opacity: number;
    size: number;
    stroke: string;
    style: string;
    value: string;
    visible: boolean;
    weight: number;
}
declare class Text extends Shape<Group> {
    #private;
    automatic: boolean;
    beginning: number;
    cap: string;
    closed: boolean;
    curved: boolean;
    ending: number;
    join: string;
    length: number;
    miter: number;
    _flagValue: boolean;
    _flagFamily: boolean;
    _flagSize: boolean;
    _flagLeading: boolean;
    _flagAlignment: boolean;
    _flagBaseline: boolean;
    _flagStyle: boolean;
    _flagWeight: boolean;
    _flagDecoration: boolean;
    _flagFill: boolean;
    _flagStroke: boolean;
    _flagLinewidth: boolean;
    _flagOpacity: boolean;
    _flagVisible: boolean;
    _flagMask: boolean;
    _flagClip: boolean;
    _flagDirection: boolean;
    /**
     * The characters to be rendered to the the screen.
     * Referred to in the documentation sometimes as the `message`.
     */
    _value: string;
    /**
     * The font family Two.js should attempt to register for rendering.
     * The default value is `'sans-serif'`.
     * Comma separated font names can be supplied as a "stack", similar to the CSS implementation of `font-family`.
     */
    _family: string;
    /**
     * The font size in Two.js point space. Defaults to `13`.
     */
    _size: number;
    /**
     * The height between lines measured from base to base in Two.js point space. Defaults to `17`.
     */
    _leading: number;
    /**
     * Alignment of text in relation to {@link Text#position}'s coordinates.
     * Possible values include `'left'`, `'center'`, `'right'`. Defaults to `'center'`.
     */
    _alignment: 'center' | 'left' | 'right';
    /**
     * The vertical aligment of the text in relation to {@link Two.Text#position}'s coordinates.
     * Possible values include `'top'`, `'middle'`, `'bottom'`, and `'baseline'`. Defaults to `'baseline'`.
     * @nota-bene In headless environments where the canvas is based on {@link https://github.com/Automattic/node-canvas}, `baseline` seems to be the only valid property.
     */
    _baseline: 'bottom' | 'middle' | 'top';
    /**
     * @name Two.Text#style
     * @property {String} - The font's style. Possible values include '`normal`', `'italic'`. Defaults to `'normal'`.
     */
    _style: string;
    /**
     * @name Two.Text#weight
     * @property {Number} - A number at intervals of 100 to describe the font's weight. This compatibility varies with the typeface's variant weights. Larger values are bolder. Smaller values are thinner. Defaults to `'500'`.
     */
    _weight: number;
    /**
     * @name Two.Text#decoration
     * @property {String} - String to delineate whether text should be decorated with for instance an `'underline'`. Defaults to `'none'`.
     */
    _decoration: string;
    /**
     * determine what direction the text should run.
     * Possibly values are `'ltr'` for left-to-right and `'rtl'` for right-to-left. Defaults to `'ltr'`.
     */
    _direction: 'ltr' | 'rtl';
    /**
     * @name Two.Text#fill
     * @property {(String|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
     */
    _fill: string | Gradient | Texture;
    /**
     * @name Two.Text#stroke
     * @property {(String|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS's colors as `String`.
     */
    _stroke: string | Gradient | Texture;
    /**
     * @name Two.Text#linewidth
     * @property {Number} - The thickness in pixels of the stroke.
     */
    _linewidth: number;
    /**
     * @name Two.Text#opacity
     * @property {Number} - The opaqueness of the text object.
     * @nota-bene Can be used in conjunction with CSS Colors that have an alpha value.
     */
    _opacity: number;
    /**
     * @name Two.Text#visible
     * @property {Boolean} - Display the text object or not.
     * @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
     */
    _visible: boolean;
    /**
     * @name Two.Text#mask
     * @property {Two.Shape} - The shape whose alpha property becomes a clipping area for the text.
     * @nota-bene This property is currently not working because of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
     */
    _mask: Shape<Group> | null;
    /**
     * @name Two.Text#clip
     * @property {Two.Shape} - Object to define clipping area.
     * @nota-bene This property is currently not working because of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
     */
    _clip: boolean;
    /**
     * @name Two.Text#_dashes
     * @private
     * @see {@link Two.Text#dashes}
     */
    _dashes: number[] | null;
    /**
     * @param message The String to be rendered to the scene.
     * @param x The position in the x direction for the object.
     * @param y The position in the y direction for the object.
     * @param styles An object where styles are applied. Attribute must exist in Two.Text.Properties.
     */
    constructor(message: string, x?: number, y?: number, styles?: Partial<TextStyles>);
    /**
     * Approximate aspect ratio of a typeface's character width to height.
     */
    static Ratio: number;
    static Properties: readonly ["value", "family", "size", "leading", "alignment", "linewidth", "style", "weight", "decoration", "direction", "baseline", "opacity", "visible", "fill", "stroke"];
    static Measure(text: Text): {
        width: number;
        height: number;
    };
    /**
     * @name Two.Text#noFill
     * @function
     * @description Short hand method to set fill to `none`.
     */
    noFill(): this;
    /**
     * @name Two.Text#noStroke
     * @function
     * @description Short hand method to set stroke to `none`.
     */
    noStroke(): this;
    /**
     * @name Two.Text#getBoundingClientRect
     * @function
     * @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
     * @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
     * @description Return an object with top, left, right, bottom, width, and height parameters of the text object.
     */
    getBoundingClientRect(shallow?: boolean): {
        top: number;
        left: number;
        right: number;
        bottom: number;
        width: number;
        height: number;
    };
    hasBoundingClientRect(): boolean;
    subdivide(limit: number): this;
    flagReset(): this;
    get alignment(): 'center' | 'left' | 'right';
    set alignment(v: 'center' | 'left' | 'right');
    get baseline(): "bottom" | "middle" | "top";
    set baseline(v: "bottom" | "middle" | "top");
    get clip(): boolean;
    set clip(v: boolean);
    get dashes(): number[];
    set dashes(v: number[]);
    get decoration(): string;
    set decoration(v: string);
    get direction(): "ltr" | "rtl";
    set direction(v: "ltr" | "rtl");
    get family(): string;
    set family(v: string);
    get fill(): string | Texture | Gradient;
    set fill(f: string | Texture | Gradient);
    get leading(): number;
    set leading(v: number);
    get linewidth(): number;
    set linewidth(v: number);
    get mask(): Shape<Group> | null;
    set mask(mask: Shape<Group> | null);
    get opacity(): number;
    set opacity(v: number);
    get size(): number;
    set size(v: number);
    get stroke(): string | Texture | Gradient;
    set stroke(f: string | Texture | Gradient);
    get style(): string;
    set style(v: string);
    get value(): string;
    set value(v: string);
    get visible(): boolean;
    set visible(v: boolean);
    get weight(): number;
    set weight(v: number);
}

interface BoardOptions {
    /**
     * @deprecated Use resizeTo: document.body instead.
     */
    fullscreen?: boolean;
    /**
     * @deprecated Use resizeTo: container instead.
     */
    fitted?: boolean;
    resizeTo?: Element;
    scene?: Group;
    size?: {
        width: number;
        height: number;
    };
    view?: View;
    /**
     * The canvas or SVG element to draw into. This overrides the `options.type` argument.
     */
    container?: HTMLElement;
}
declare class Board {
    #private;
    /**
     * The width of the instance's dom element.
     */
    width: number;
    /**
     * The height of the instance's dom element.
     */
    height: number;
    readonly size$: Observable<{
        width: number;
        height: number;
    }>;
    /**
     *
     */
    ratio: number | undefined;
    /**
     * An integer representing how many frames have elapsed.
     */
    frameCount: number;
    readonly frameCount$: Observable<number>;
    playing: boolean;
    constructor(options?: BoardOptions);
    dispose(): void;
    get scene(): Group;
    appendTo(container: Element): this;
    play(): this;
    pause(): void;
    setPlaying(p: boolean): void;
    /**
     * A number representing how much time has elapsed since the last frame in milliseconds.
     */
    getElapsedTime(fractionalDigits?: number): number | null;
    /**
     * Update positions and calculations in one pass before rendering.
     */
    update(): void;
    add(...shapes: Shape<Group>[]): this;
    remove(...shapes: Shape<Group>[]): this;
    makeLine(x1: number, y1: number, x2: number, y2: number): Line;
    makeArrow(x1: number, y1: number, x2: number, y2: number, size?: number): Path;
    makeRectangle(x: number, y: number, width: number, height: number): Rectangle;
    makeRoundedRectangle(x: number, y: number, width: number, height: number, sides: number): RoundedRectangle;
    makeCircle(x: number, y: number, radius: number, resolution?: number): Circle;
    makeEllipse(x: number, y: number, rx: number, ry: number, resolution?: number): Ellipse;
    makeStar(x: number, y: number, outerRadius: number, innerRadius: number, sides: number): Star;
    makeCurve(closed: boolean, ...anchors: Anchor[]): Path;
    makePolygon(x: number, y: number, radius: number, sides: number): Polygon;
    makeArcSegment(x: number, y: number, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number, resolution?: number): ArcSegment;
    makePath(closed: boolean, ...points: Anchor[]): Path;
    makeText(message: string, x: number, y: number, styles?: object): Text;
    makeSprite(pathOrTexture: (string | Texture), x: number, y: number, columns: number, rows: number, frameRate: number, autostart: boolean): Sprite;
    makeTexture(pathOrSource: (string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement), callback: () => void): Texture;
    makeGroup(...shapes: Shape<Group>[]): Group;
    /**
     * Load an SVG file or SVG text and interpret it into Two.js legible objects.
     */
    load(url: string): Promise<Group>;
}

declare class Player {
    #private;
    constructor(two: Board, callback: (frameCount: number) => void);
    dispose(): void;
    play(): void;
    pause(): void;
}

export { Anchor, ArcSegment, Board, type BoardOptions, Circle, type CircleOptions, Element$1 as Element, Ellipse, Gradient, Group, Line, LinearGradient, Matrix, type Observable, Path, type PathOptions, Player, Polygon, RadialGradient, Rectangle, type RectangleOptions, RoundedRectangle, SVGView, type SVGViewParams, Shape, Sprite, type SpriteOptions, Star, Stop, type Subscription, Text, type TextStyles, Texture, Vector, type View };