@geometryzen/two

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 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 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 extends Element$1 implements IShape { #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> {