aboutsummaryrefslogtreecommitdiffstats
path: root/svg.js.d.ts
diff options
context:
space:
mode:
Diffstat (limited to 'svg.js.d.ts')
-rw-r--r--svg.js.d.ts3587
1 files changed, 1893 insertions, 1694 deletions
diff --git a/svg.js.d.ts b/svg.js.d.ts
index a0c44c2..dc61bee 100644
--- a/svg.js.d.ts
+++ b/svg.js.d.ts
@@ -1,1694 +1,1893 @@
-// Type definitions for @svgdotjs version 3.x
-// Project: @svgdotjs/svg.js
-
-// trick to keep reference to Array build-in type
-declare class BuiltInArray<T> extends Array<T> { }
-
-// trick to have nice attribute list for CSS
-declare type CSSStyleName = Exclude<keyof CSSStyleDeclaration, "parentRule" | "length">
-
-declare module "@svgdotjs/svg.js" {
-
- function SVG(): Svg;
- function SVG(selector: QuerySelector): Element;
- function SVG<T>(el: T): SVGTypeMapping<T>
- function SVG(domElement: HTMLElement): Element;
-
- function eid(name: string): string;
- function get(id: string): Element;
-
- function create(name: string): any;
- function extend(parent: object, obj: object): void;
- function invent(config: object): any;
- function adopt(node: HTMLElement): Element;
- function prepare(element: HTMLElement): void;
- function getClass(name: string): Element;
-
- function on(el: Node | Window, events: string, cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;
- function on(el: Node | Window, events: Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;
-
- function off(el: Node | Window, events?: string, cb?: EventListener | number, options?: AddEventListenerOptions): void;
- function off(el: Node | Window, events?: Event[], cb?: EventListener | number, options?: AddEventListenerOptions): void;
-
- function dispatch(node: Node | Window, event: Event, data?: object, options?: object): Event
-
- function find(query: QuerySelector): List<Element>
- function findOne(query: QuerySelector): Element | null
-
- function getWindow(): Window;
- function registerWindow(win: Window, doc: Document): void;
- function restoreWindow(): void;
- function saveWindow(): void;
- function withWindow(win: Window, fn: (win: Window, doc: Document) => void): void;
-
- let utils: {
- map(array: any[], block: Function): any;
- filter(array: any[], block: Function): any;
- radians(d: number): number;
- degrees(r: number): number;
- camelCase(s: string): string;
- unCamelCase(s: string): string;
- capitalize(s: string): string;
- // proportionalSize
- // getOrigin
- }
-
- let defaults: {
- attrs: {
- 'fill-opacity': number;
- 'stroke-opacity': number;
- 'stroke-width': number;
- 'stroke-linejoin': string;
- 'stroke-linecap': string;
- 'fill': string;
- 'stroke': string;
- 'opacity': number;
- 'x': number;
- 'y': number;
- 'cx': number;
- 'cy': number;
- 'width': number;
- 'height': number;
- 'r': number;
- 'rx': number;
- 'ry': number;
- 'offset': number;
- 'stop-opacity': number;
- 'stop-color': string;
- 'font-size': number;
- 'font-family': string;
- 'text-anchor': string;
- },
- timeline: {
- duration: number;
- ease: string;
- delay: number;
- }
-
- }
-
- // let easing: {
- // '-'(pos: number): number;
- // '<>'(pos: number): number;
- // '>'(pos: number): number;
- // '<'(pos: number): number;
- // bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
- // steps(steps: number, stepPosition?: "jump-start"|"jump-end"|"jump-none"|"jump-both"|"start"|"end"): (t: number, beforeFlag?: boolean) => number;
- // }
-
- let regex: {
- delimiter: RegExp;
- dots: RegExp;
- hex: RegExp;
- hyphen: RegExp;
- isBlank: RegExp;
- isHex: RegExp;
- isImage: RegExp;
- isNumber: RegExp;
- isPathLetter: RegExp;
- isRgb: RegExp;
- numberAndUnit: RegExp;
- numbersWithDots: RegExp;
- pathLetters: RegExp;
- reference: RegExp;
- rgb: RegExp;
- transforms: RegExp;
- whitespace: RegExp;
- }
-
- let namespaces: {
- ns: string;
- xmlns: string;
- xlink: string;
- svgjs: string;
- }
-
- interface LinkedHTMLElement extends HTMLElement {
- instance: Element;
- }
-
- // ************ Standard object/option/properties declaration ************
-
- type AttrNumberValue = number | "auto";
-
- /**
- * The SVG core attributes are all the common attributes that can be specified on any SVG element.
- * More information see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core
- */
- interface CoreAttr {
- id?: string
- lang?: string
- tabindex?: number
- "xml:lang"?: string
- }
-
- /**
- * The SVG styling attributes are all the attributes that can be specified on any SVG element to apply CSS styling effects.
- * More information see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling
- */
- interface StylingAttr {
- /**
- * a valid HTML class name
- */
- class?: string
- /**
- * SVG css style string format. It all can be find here https://www.w3.org/TR/SVG/styling.html#StyleAttribute
- */
- style?: string
- }
-
- /**
- * A global attribute that can be use with any svg element
- */
- interface GlobalAttr extends CoreAttr, StylingAttr { }
-
- // TODO: implement SVG Presentation Attributes. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation
-
- interface PathBaseAttr {
- pathLength?: number
- }
-
- interface RadiusAxisAttr {
- rx?: AttrNumberValue
- ry?: AttrNumberValue
- }
-
- /**
- * SVG Rectangle attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
- */
- interface RectAttr extends RadiusAxisAttr, PathBaseAttr, GlobalAttr {
- x?: number
- y?: number
- width: AttrNumberValue
- height: AttrNumberValue
- }
-
- /**
- * SVG Line attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
- */
- interface LineAttr extends PathBaseAttr, GlobalAttr {
- x1?: number
- y1?: number
- x2?: number
- y2?: number
- }
-
- /**
- * SVG Circle attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
- */
- interface CircleAttr extends PathBaseAttr, GlobalAttr {
- cx?: number | string
- cy?: number | string
- r?: number | string
- }
-
- /**
- * SVG Ellipse attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
- */
- interface EllipseAttr extends PathBaseAttr, GlobalAttr {
- cx?: number | string
- cy?: number | string
- rx?: number | string
- ry?: number | string
- }
-
- /**
- * SVG Path attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
- */
- interface PathAttr extends PathBaseAttr, GlobalAttr {
- d?: string
- }
-
- /**
- * SVG Path attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon
- * or https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline
- */
- interface PolyAttr extends PathBaseAttr, GlobalAttr {
- points?: string
- }
-
- /**
- * SVG Text attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
- */
- interface TextAttr extends GlobalAttr {
- x?: number | string
- y?: number | string
- dx?: number | string
- dy?: number | string
- lengthAdjust?: "spacing" | "spacingAndGlyphs"
- textLength?: number | string
- // see https://developer.mozilla.org/en-US/docs/Web/API/SVGNumberList
- // or https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#List-of-Ts
- // TODO: tbd
- // rotate?: string
- }
-
- /**
- * SVG TextPath attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
- */
- interface TextPathAttr extends GlobalAttr {
- href?: string
- lengthAdjust?: "spacing" | "spacingAndGlyphs"
- method?: "align" | "stretch"
- side?: "left" | "right"
- spacing?: "auto" | "exact"
- startOffset?: number | string
- textLength?: number | string
- // See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
- // TODO: tbd as there is no reference to see the detail of how it would look like
- // path?: string
- }
-
- /**
- * A generic Dom Box object.
- * Notice: DOMRect is still in experiment state and document is not complete (Draft)
- * See https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
- */
- interface DOMRect {
- x?: number
- y?: number
- width?: number
- height?: number
- top?: number
- right?: number
- bottom?: number
- left?: number
- }
-
- // ************ SVG.JS generic Conditional Types declaration ************
-
- type SVGTypeMapping<T> =
- T extends HTMLElement ? Dom :
- T extends SVGSVGElement ? Svg :
- T extends SVGRectElement ? Rect :
- T extends SVGCircleElement ? Circle :
- T extends SVGPathElement ? Path :
- T extends SVGTextElement ? Text :
- T extends SVGTextPathElement ? TextPath :
- T extends SVGGElement ? G :
- T extends SVGLineElement ? Line :
- T extends SVGPolylineElement ? Polyline :
- T extends SVGPolygonElement ? Polygon :
- T extends SVGGradientElement ? Gradient :
- T extends SVGImageElement ? Image :
- T extends SVGEllipseElement ? Ellipse :
- T extends SVGMaskElement ? Mask :
- T extends SVGMarkerElement ? Marker :
- T extends SVGClipPathElement ? ClipPath :
- T extends SVGTSpanElement ? Tspan :
- T extends SVGSymbolElement ? Symbol :
- T extends SVGUseElement ? Use : Element
-
- // element type as string
- type SvgType = "svg"
- type ClipPathType = "clipPath"
- type TextType = "text"
- type GType = "g"
- type AType = "a"
-
- type ParentElement = SvgType | GType | AType
-
- type AttrTypeMapping<T> =
- T extends Rect ? RectAttr : GlobalAttr
-
- type ElementAlias = Dom | Svg | Rect | Line | Polygon | Polyline | Ellipse | ClipPath | Use |
- Text | Path | TextPath | Circle | G | Gradient | Image | Element
-
- type ElementTypeAlias = typeof Dom | typeof Svg | typeof Rect | typeof Line | typeof Polygon |
- typeof Polyline | typeof Ellipse | typeof ClipPath | typeof Use | typeof Text | typeof Path |
- typeof TextPath | typeof Circle | typeof G | typeof Gradient | typeof Image | typeof Element
-
- type AttributeReference = "href" | "marker-start" | "marker-mid" | "marker-end" | "mask" |
- "clip-path" | "filter" | "fill"
-
- // ************* SVG.JS Type Declaration *************
- // ********** Locate in directory src/types **********
-
- // SVGArray.js
- // Notice: below class is defined the name as `Array` rather than `SVGArray`.
- // The purpose of giving the name as `Array` is to allow it to be aligned with SVG.JS export type
- // as SVG.JS export it as `Array` (to be precise `SVG.Array`) so reading through JS documentation
- // should be more straightforward.
- /**
- * Type alias to native array.
- *
- * **Caution**: If argument is a string, generic type must be a number or array of number and
- * the string is format as a concatenate of number separate by comma.
- * This is expensive to build runtime type check for such as case so please use it carefully.
- */
- type ArrayAlias<T> = BuiltInArray<T> | T[] | string
-
- class Array<T> extends BuiltInArray<T> {
- constructor(array?: ArrayAlias<T>);
-
- /**
- * Return array of generic T however it's flatten array by 1 level as it using `apply` function.
- * For example: if T is a `number[]` which is the number of 2 dimension `Array<number[]>` the result will be `number[]`
- */
- toArray(): any[]
- /**
- * return a concatenated string of each element separated by space
- */
- toString(): string
- valueOf(): T[]
- clone(): Array<T>
- toSet(): Set<T>
- parse(a?: ArrayAlias<T>): T[]
- to(a: any): Morphable;
- }
-
- // point.js
- class Point {
- x: number;
- y: number;
- constructor();
- constructor(position: CoordinateXY);
- constructor(point: Point);
- constructor(x: number, y?: number);
- clone(): Point;
- transform(matrix: Matrix): this;
- transformO(matrix: Matrix): this;
- toArray(): ArrayXY;
- }
-
- // pointArray.js
- class PointArray extends Array<ArrayXY> {
- constructor();
- constructor(array?: ArrayAlias<ArrayXY> | number[]);
-
- toLine(): LineAttr;
- transform(m: Matrix | MatrixLike): PointArray
- move(x: number, y: number): this;
- size(width: number, height: number): this;
- bbox(): Box;
- to(a: any): Morphable;
- toString(): string;
- }
-
- // SVGNumber.js
- type NumberUnit = [number, string]
-
- class Number {
- constructor();
- constructor(value: Number);
- constructor(value: string);
- constructor(value: number, unit?: any);
- constructor(n: NumberUnit);
-
- value: number
- unit: any
-
- toString(): string;
- toJSON(): object; // same as toString
- toArray(): NumberUnit
- valueOf(): number;
- plus(number: NumberAlias): Number;
- minus(number: NumberAlias): Number;
- times(number: NumberAlias): Number;
- divide(number: NumberAlias): Number;
- convert(unit: string): Number;
- to(a: any): Morphable
- }
-
- type NumberAlias = Number | number | string;
-
- // PathArray.js
-
- type LineCommand = ['M' | 'm' | 'L' | 'l', number, number] | ['H' | 'h' | 'V' | 'v', number] | ['Z' | 'z']
-
- type CurveCommand =
- // Bezier Curves
- ['C' | 'c', number, number, number, number, number, number] |
- ['S' | 's' | 'Q' | 'q', number, number, number, number] | ['T' | 't', number, number] |
- // Arcs
- ['A' | 'a', number, number, number, number, number, number, number]
-
- type PathCommand = LineCommand | CurveCommand
-
- type PathArrayAlias = PathArray | PathCommand[] | (string | number)[] | string;
-
- class PathArray extends Array<PathCommand> {
- constructor();
- constructor(d: ArrayAlias<PathCommand> | PathArrayAlias);
-
- move(x: number, y: number): this;
- size(width: number, height: number): this;
- equalCommands(other: PathArray): boolean
- morph(pa: PathArray): this
- parse(array?: ArrayAlias<PathCommand> | PathArrayAlias): PathCommand[];
- bbox(): Box;
- to(a: any): Morphable
- }
-
- // Matrix.js
- interface TransformData {
- origin?: number[];
- scaleX?: number;
- scaleY?: number;
- shear?: number;
- rotate?: number;
- translateX?: number;
- translateY?: number;
- originX?: number;
- originY?: number;
- }
-
- interface MatrixLike {
- a?: number;
- b?: number;
- c?: number;
- d?: number;
- e?: number;
- f?: number;
- }
-
- interface MatrixExtract extends TransformData, MatrixLike { }
-
- type FlipType = 'both' | 'x' | 'y' | boolean
- type ArrayXY = [number, number]
- type CoordinateXY = ArrayXY | { x: number, y: number }
-
- interface MatrixTransformParam {
- rotate?: number
- flip?: FlipType
- skew?: ArrayXY | number
- skewX?: number
- skewY?: number
- scale?: ArrayXY | number
- scaleX?: number
- scaleY?: number
- shear?: number
- theta?: number
- origin?: CoordinateXY | string
- around?: CoordinateXY
- ox?: number
- originX?: number
- oy?: number
- originY?: number
- position?: CoordinateXY
- px?: number
- positionX?: number
- py?: number
- positionY?: number
- translate?: CoordinateXY
- tx?: number
- translateX?: number
- ty?: number
- translateY?: number
- relative?: CoordinateXY
- rx?: number
- relativeX?: number
- ry?: number
- relativeY?: number
- }
-
- type MatrixAlias = MatrixLike | TransformData | MatrixTransformParam | number[] | Element | string;
-
- class Matrix implements MatrixLike {
- constructor();
- constructor(source: MatrixAlias);
- constructor(a: number, b: number, c: number, d: number, e: number, f: number);
-
- a: number;
- b: number;
- c: number;
- d: number;
- e: number;
- f: number;
-
- // *** To Be use by Test Only in restrict mode ***
- [key: string]: any
-
- clone(): Matrix;
- transform(o: MatrixLike | MatrixTransformParam): Matrix
- compose(o: MatrixExtract): Matrix
- decompose(cx?: number, cy?: number): MatrixExtract
- multiply(m: MatrixAlias | Matrix): Matrix;
- multiplyO(m: MatrixAlias | Matrix): this;
- lmultiply(m: MatrixAlias | Matrix): Matrix;
- lmultiplyO(m: MatrixAlias | Matrix): this;
- inverse(): Matrix;
- inverseO(): this;
- translate(x?: number, y?: number): Matrix;
- translateO(x?: number, y?: number): this;
- scale(x: number, y?: number, cx?: number, cy?: number): Matrix;
- scaleO(x: number, y?: number, cx?: number, cy?: number): this;
- rotate(r: number, cx?: number, cy?: number): Matrix;
- rotateO(r: number, cx?: number, cy?: number): this;
- flip(a: NumberAlias, offset?: number): Matrix;
- flipO(a: NumberAlias, offset?: number): this;
- flip(offset?: number): Matrix;
- shear(a: number, cx?: number, cy?: number): Matrix;
- shearO(a: number, cx?: number, cy?: number): this;
- skew(y?: number, cx?: number, cy?: number): Matrix;
- skewO(y?: number, cx?: number, cy?: number): this;
- skew(x: number, y?: number, cx?: number, cy?: number): Matrix;
- skewX(x: number, cx?: number, cy?: number): Matrix;
- skewY(y: number, cx?: number, cy?: number): Matrix;
- around(cx?: number, cy?: number, matrix?: Matrix): Matrix;
- aroundO(cx?: number, cy?: number, matrix?: Matrix): this;
- equals(m: Matrix): boolean
- toString(): string;
- toArray(): number[];
- valueOf(): MatrixLike;
- to(a: any): Morphable;
- }
-
- type ListEachCallback<T> = (el: T, index: number, list: List<T>) => any;
-
- // List.js
- class List<T> extends BuiltInArray<T> {
- each(fn: ListEachCallback<T>): List<any>;
- each(name: string, ...args: any[]): List<any>;
- toArray(): T[];
- }
-
- class Eventobject {
- [key: string]: Eventobject;
- }
-
- // EventTarget.js
- class EventTarget {
- events: Eventobject
-
- addEventListener(): void
- dispatch(event: Event | string, data?: object): Event
- dispatchEvent(event: Event): boolean
- fire(event: Event | string, data?: object): this
- getEventHolder(): this | Node
- getEventTarget(): this | Node
-
- on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;
- off(events?: string | Event[], cb?: EventListener | number, options?: AddEventListenerOptions): this;
-
- removeEventListener(): void
- }
-
- // Color.js
- interface ColorLike {
- r: number;
- g: number;
- b: number;
-
- x: number;
- y: number;
- z: number;
-
- h: number;
- s: number;
- l: number;
- a: number;
- c: number;
-
- m: number;
- k: number;
-
- space: string;
- }
-
- type ColorAlias = string | ColorLike;
-
- class Color implements ColorLike {
- r: number;
- g: number;
- b: number;
-
- x: number;
- y: number;
- z: number;
-
- h: number;
- s: number;
- l: number;
- a: number;
- c: number;
-
- m: number;
- k: number;
-
- space: string;
- constructor()
- constructor(color: ColorAlias, space?: string);
- constructor(a: number, b: number, c: number, space?: string)
- constructor(a: number, b: number, c: number, d: number, space?: string)
- constructor(a: number[], space?: string)
-
- rgb(): Color
- lab(): Color
- xyz(): Color
- lch(): Color
- hsl(): Color
- cmyk(): Color
- toHex(): string
- toString(): string
- toRgb(): string
- toArray(): any[]
-
- to(a: any): Morphable
- fromArray(a: any): this
-
- static random(mode: 'sine', time?: number): Color
- static random(mode?: string): Color
- }
-
- // Box.js
- interface BoxLike {
- height: number;
- width: number;
- y: number;
- x: number;
- cx?: number;
- cy?: number;
- w?: number;
- h?: number;
- x2?: number;
- y2?: number;
- }
-
- class Box implements BoxLike {
- height: number;
- width: number;
- y: number;
- x: number;
- cx: number;
- cy: number;
- w: number;
- h: number;
- x2: number;
- y2: number;
-
- constructor();
- constructor(source: string);
- constructor(source: number[]);
- constructor(source: DOMRect);
- constructor(x: number, y: number, width: number, height: number);
-
- merge(box: BoxLike): Box;
- transform(m: Matrix): Box
- addOffset(): this;
- toString(): string;
- toArray(): number[];
- isNulled(): boolean;
- to(v: MorphValueLike): Morphable;
- }
-
- // Morphable.js
- type MorphValueLike = string | number | objectBag | NonMorphable | MatrixExtract | Array<any> | any[]
-
- class Morphable {
- constructor();
- constructor(st: Stepper);
-
- from(): MorphValueLike
- from(v: MorphValueLike): this
- to(): MorphValueLike
- to(v: MorphValueLike): this
- type(): any
- type(t: any): this
- stepper(): Stepper
- stepper(st: Stepper): this
- done(): boolean
- at(pos: number): any
- }
-
- class objectBag {
- constructor();
- constructor(a: object);
- valueOf(): object
- toArray(): object[]
-
- to(a: object): Morphable
- fromArray(a: any[]): this
- }
-
- class NonMorphable {
- constructor(a: object)
- valueOf(): object
- toArray(): object[]
-
- to(a: object): Morphable
- fromArray(a: object): this
- }
-
- class TransformBag {
- constructor()
- constructor(a: number[])
- constructor(a: TransformData)
- defaults: TransformData
- toArray(): number[]
- to(t: TransformData): Morphable
- fromArray(t: number[]): this
- }
-
- interface Stepper {
- done(c?: object): boolean
- }
-
- class Ease implements Stepper {
- constructor()
- constructor(fn: string)
- constructor(fn: Function)
-
- step(from: number, to: number, pos: number): number
- done(): boolean
- }
-
- class Controller implements Stepper {
- constructor(fn?: Function)
- step(current: number, target: number, dt: number, c: number): number
- done(c?: object): boolean
- }
-
- // Queue.js
- interface QueueParam {
- value: any
- next?: any
- prev?: any
- }
-
- class Queue {
- constructor();
-
- push(value: any): QueueParam
- shift(): any
- first(): number
- last(): number
- remove(item: QueueParam): void
- }
-
- // Timeline.js
- interface ScheduledRunnerInfo {
- start: number
- duration: number
- end: number
- runner: Runner
- }
-
- class Timeline extends EventTarget {
- constructor()
- constructor(fn: Function)
-
- active(): boolean
- schedule(runner: Runner, delay?: number, when?: string): this
- schedule(): ScheduledRunnerInfo[]
- unschedule(runner: Runner): this
- getEndTime(): number
- updateTime(): this
- persist(dtOrForever?: number | boolean): this
- play(): this
- pause(): this
- stop(): this
- finish(): this
- speed(speed: number): this
- reverse(yes: boolean): this
- seek(dt: number): this
- time(): number
- time(time: number): this
- source(): Function
- source(fn: Function): this
- }
-
- // Runner.js
- interface TimesParam {
- duration: number
- delay: number
- when: number | string
- swing: boolean
- wait: number
- times: number
- }
-
- type TimeLike = number | TimesParam | Stepper
-
- type EasingCallback = (...any: any) => number
- type EasingLiteral = "<>" | "-" | "<" | ">"
-
- class Runner {
- constructor();
- constructor(options: Function);
- constructor(options: number);
- constructor(options: Controller);
-
- static sanitise: (duration?: TimeLike, delay?: number, when?: string) => object
-
- element(): Element
- element(el: Element): this
- timeline(): Timeline
- timeline(timeline: Timeline): this
- animate(duration: TimeLike, delay?: number, when?: string): this
- schedule(delay: number, when?: string): this
- schedule(timeline: Timeline, delay?: number, when?: string): this
- unschedule(): this
- loop(times?: number, swing?: boolean, wait?: number): this
- loop(times: TimesParam): this
- delay(delay: number): this
-
-
-
- during(fn: Function): this
- queue(initFn: Function, runFn: Function, retargetFn?: boolean | Function, isTransform?: boolean): this
- after(fn: EventListener): this
- time(): number
- time(time: number): this
- duration(): number
- loops(): number
- loops(p: number): this
- persist(dtOrForever?: number | boolean): this
- position(): number
- position(p: number): this
- progress(): number
- progress(p: number): this
- step(deta?: number): this
- reset(): this
- finish(): this
- reverse(r?: boolean): this
- ease(fn: EasingCallback): this
- ease(kind: EasingLiteral): this
- active(): boolean
- active(a: boolean): this
- addTransform(m: Matrix): this
- clearTransform(): this
- clearTransformsFromQueue(): void
-
- // extends prototypes
- attr(a: string | object, v?: string): this
- css(s: string | object, v?: string): this
- styleAttr(type: string, name: string | object, val?: string): this
- zoom(level: NumberAlias, point?: Point): this
- transform(transforms: MatrixTransformParam, relative?: boolean, affine?: boolean): this
- x(x: number): this
- y(y: number): this
- dx(dx: number): this
- dy(dy: number): this
- cx(x: number): this
- cy(y: number): this
- dmove(dx: number, dy: number): this
- move(x: number, y: number): this
- center(x: number, y: number): this
- size(width: number, height: number): this
- width(width: number): this
- height(height: number): this
- plot(a: object): this
- plot(a: number, b: number, c: number, d: number): this
- leading(value: number): this
- viewbox(x: number, y: number, width: number, height: number): this
- update(offset: number, color: number, opacity: number): this
- update(o: StopProperties): this
- rx(): number
- rx(rx: number): this
- ry(): number
- ry(ry: number): this
- from(x: NumberAlias, y: NumberAlias): this
- to(x: NumberAlias, y: NumberAlias): this
- }
-
- // Animator.js
- let Animator: {
- nextDraw: any
- frames: Queue
- timeouts: Queue
- immediates: Queue
-
- timer(): boolean
- frame(fn: Function): object
- timeout(fn: Function, delay?: number): object
- immediate(fn: Function): object
- cancelFrame(o: object): void
- clearTimeout(o: object): void
- cancelImmediate(o: object): void
- }
-
- /**
- * Just fancy type alias to refer to css query selector.
- */
- type QuerySelector = string
-
- class Dom extends EventTarget {
- node: HTMLElement | SVGElement;
- type: string;
-
- constructor(node?: HTMLElement, attr?: object);
- constructor(att: object);
- add(element: Element, i?: number): this;
- addTo(parent: Dom | HTMLElement | string, i?: number): this
- children(): List<Element>;
- clear(): this;
- clone(deep?: boolean, assignNewIds?: boolean): this;
- each(block: (index: number, children: Element[]) => void, deep?: boolean): this;
- element(element: string, inherit?: object): this;
- first(): Element;
- get(i: number): Element;
- getEventHolder(): LinkedHTMLElement;
- getEventTarget(): LinkedHTMLElement;
- has(element: Element): boolean;
- id(): string
- id(id: string): this
- index(element: Element): number;
- last(): Element;
- matches(selector: string): boolean;
- /**
- * Finds the closest ancestor which matches the string or is of passed type. If nothing is passed, the parent is returned
- * @param type can be either string, svg.js object or undefined.
- */
- parent(type?: ElementTypeAlias | QuerySelector): Dom | null;
- put(element: Element, i?: number): Element;
- /**
- * Put the element into the given parent element and returns the parent element
- * @param parent The parent in which the current element is inserted
- */
- putIn(parent: ElementAlias | Node | QuerySelector): Dom;
-
- remove(): this;
- removeElement(element: Element): this;
- replace<T extends Dom>(element: T): T;
- round(precision?: number, map?: string[]): this
- svg(): string;
- svg(a: string, outer: true): Element;
- svg(a: string, outer?: false): this;
- svg(a: boolean, outer?: boolean): string;
- svg(a: null | Function, outer?: boolean): string;
-
- toString(): string;
- words(text: string): this;
- writeDataToDom(): this;
-
- // prototype extend Attribute in attr.js
- /**
- * Get the attribute object of SVG Element. The return object will be vary based on
- * the instance itself. For example, G element will only return GlobalAttr where Rect
- * will return RectAttr instead.
- */
- attr(): any;
- /**
- * Add or update the attribute from the SVG Element. To remove the attribute from the element set value to null
- * @param name name of attribute
- * @param value value of attribute can be string or number or null
- * @param namespace optional string that define namespace
- */
- attr(name: string, value: any, namespace?: string): this;
- attr(name: string): any;
- attr(obj: object): this;
- attr(obj: string[]): object;
-
- // prototype extend Selector in selector.js
- find(query: string): List<Element>
- findOne(query: string): Dom | null
-
- // prototype method register in data.js
- data(a: string): object | string | number
- data(a: string, v: object, substain?: boolean): this
- data(a: object): this
-
- // prototype method register in arrange.js
- siblings(): List<Element>
- position(): number
- next(): Element
- prev(): Element
- forward(): this
- backward(): this
- front(): this
- back(): this
- before(el: Element): Element
- after(el: Element): Element
- insertBefore(el: Element): this
- insertAfter(el: Element): this
-
- // prototype method register in class.js
- classes(): string[]
- hasClass(name: string): boolean
- addClass(name: string): this
- removeClass(name: string): this
- toggleClass(name: string): this
-
- // prototype method register in css.js
- css(): Partial<CSSStyleDeclaration>
- css<T extends CSSStyleName>(style: T): CSSStyleDeclaration[T]
- css<T extends CSSStyleName[]>(style: T): Partial<CSSStyleDeclaration>
- css<T extends CSSStyleName>(style: T, val: CSSStyleDeclaration[T]): this
- css(style: Partial<CSSStyleDeclaration>): this
- show(): this
- hide(): this
- visible(): boolean
-
- // memory.js
- remember(name: string, value: any): this;
- remember(name: string): any;
- remember(obj: object): this;
- forget(...keys: string[]): this;
- forget(): this;
- memory(): object;
-
- addEventListener(): void
- dispatch(event: Event | string, data?: object): Event
- dispatchEvent(event: Event): boolean
- fire(event: Event | string, data?: object): this
- getEventHolder(): this | Node
- getEventTarget(): this | Node
-
- // on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;
- // off(events?: string | Event[], cb?: EventListener | number): this;
- removeEventListener(): void
- }
-
- // clip.js
- class ClipPath extends Container {
- constructor();
- constructor(node?: SVGClipPathElement);
- constructor(attr: object);
- node: SVGClipPathElement;
-
- targets(): List<Element>;
- remove(): this;
- }
-
- // container.js
- interface ViewBoxLike {
- x: number;
- y: number;
- width: number;
- height: number;
- }
-
- class Container extends Element {
- circle(size?: NumberAlias): Circle;
- circle(size: number, unit: number): Circle;
- clip(): ClipPath;
- ellipse(width?: number, height?: number): Ellipse;
- flatten(parent: Dom, depth?: number): this;
- foreignObject(width: number, height: number): ForeignObject
- gradient(type: string, block?: (stop: Gradient) => void): Gradient;
- group(): G;
-
- image(): Image;
- image(href?: string, callback?: (e: Event) => void): Image;
- line(points?: PointArrayAlias): Line;
- line(x1: number, y1: number, x2: number, y2: number): Line;
- link(url: string): A;
- marker(width?: number, height?: number, block?: (marker: Marker) => void): Marker
- mask(): Mask;
- nested(): Svg;
- path(): Path;
- path(d: PathArrayAlias): Path;
- pattern(width?: number, height?: number, block?: (pattern: Pattern) => void): Pattern
- plain(text: string): Text;
- polygon(points?: PointArrayAlias): Polygon;
- polyline(points?: PointArrayAlias): Polyline;
- rect(width?: number, height?: number): Rect;
- style(): Style;
- text(block: (tspan: Tspan) => void): Text;
- text(text: string): Text;
- ungroup(parent: Dom, depth?: number): this;
- use(element: Element | string, file?: string): Use;
- viewbox(): Box;
- viewbox(viewbox: ViewBoxLike | string): this;
- viewbox(x: number, y: number, width: number, height: number): this;
- textPath(text: string | Text, path: string | Path): TextPath
- symbol(): Symbol
- zoom(): number
- zoom(level: NumberAlias, point?: Point): this;
- }
-
- class Defs extends Container {
- constructor(node?: SVGDefsElement);
- node: SVGDefsElement;
- marker(width?: number, height?: number, block?: (marker: Marker) => void): Marker
- }
-
- class Svg extends Container {
- constructor(svgElement?: SVGSVGElement);
- constructor(id: string);
- node: SVGSVGElement;
- namespace(): this;
- defs(): Defs;
- remove(): this;
- isRoot(): boolean;
- }
-
- interface Sugar {
- fill(): any
- fill(fill: FillData): this;
- fill(color: string): this;
- fill(pattern: Element): this;
- fill(image: Image): this;
- stroke(): any;
- stroke(stroke: StrokeData): this;
- stroke(color: string): this;
- matrix(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number): this;
- matrix(mat: MatrixAlias, b?: number, c?: number, d?: number, e?: number, f?: number): this;
- rotate(degrees: number, cx?: number, cy?: number): this;
- skew(skewX?: number, skewY?: number, cx?: number, cy?: number): this;
- scale(scaleX?: number, scaleY?: number, cx?: number, cy?: number): this;
- translate(x: number, y: number): this;
- shear(lam: Matrix, cx: number, cy: number): this
- relative(x: number, y: number): this
- flip(direction?: string, around?: number): this
- flip(around: number): this
- opacity(): number
- opacity(value: number): this
- font(a: string): string
- font(a: string, v: string | number): this
- font(a: object): this
- }
-
- // Symbol.js
- class Symbol extends Container {
- constructor(svgElement?: SVGSymbolElement);
- constructor(attr: object)
- node: SVGSymbolElement;
- }
-
- class Element extends Dom implements Sugar {
- constructor(node?: SVGElement);
- constructor(attr: object);
- node: SVGElement;
- type: string;
- dom: any
-
- addClass(name: string): this;
- after(element: Element): Element;
- animate(duration?: TimeLike, delay?: number, when?: string): Runner;
- delay(by: number, when?: string): Runner
- attr(): any;
- attr(name: string, value: any, namespace?: string): this;
- attr(name: string): any;
- attr(obj: string[]): object;
- attr(obj: object): this;
- back(): this;
- backward(): this;
- bbox(): Box;
- before(element: Element): Element;
- center(x: number, y: number): this;
- classes(): string[];
- click(cb: Function | null): this;
- clipper(): ClipPath;
- clipWith(element: Element): this;
- clone(deep?: boolean, assignNewIds?: boolean): this;
- ctm(): Matrix;
- cx(): number;
- cx(x: number): this;
- cy(): number;
- cy(y: number): this;
- data(name: string, value: any, sustain?: boolean): this;
- data(name: string): any;
- data(val: object): this;
- dblclick(cb: Function | null): this;
- defs(): Defs;
- dmove(x: NumberAlias, y: NumberAlias): this;
- dx(x: NumberAlias): this;
- dy(y: NumberAlias): this;
- event(): Event | CustomEvent;
- fill(): any;
- fill(color: string): this;
- fill(color: Color | ColorLike): this;
- fill(color: FillData): this;
- fill(pattern: Element): this;
- fire(event: Event): this;
- fire(event: string, data?: any): this;
- flip(a: string, offset?: number): this;
- flip(offset?: number): this;
- font(a: object): this
- font(a: string, v: string | number): this
- font(a: string): string
- forget(...keys: string[]): this;
- forget(): this;
- forward(): this;
- front(): this;
- hasClass(name: string): boolean;
- height(): NumberAlias;
- height(height: NumberAlias): this;
- hide(): this;
- hide(): this;
- id(): string;
- id(id: string): this;
- inside(x: number, y: number): boolean;
- is(cls: any): boolean;
- linkTo(url: (link: A) => void): A;
- linkTo(url: string): A;
- masker(): Mask
- maskWith(element: Element): this;
- maskWith(mask: Mask): this;
- matches(selector: string): boolean;
- matrix(): Matrix;
- matrix(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number): this;
- matrix(mat: MatrixAlias, b?: number, c?: number, d?: number, e?: number, f?: number): this;
- matrixify(): Matrix;
- memory(): object;
- mousedown(cb: Function | null): this;
- mousemove(cb: Function | null): this;
- mouseout(cb: Function | null): this;
- mouseover(cb: Function | null): this;
- mouseup(cb: Function | null): this;
- mouseenter(cb: Function | null): this;
- mouseleave(cb: Function | null): this;
- move(x: NumberAlias, y: NumberAlias): this;
- native(): LinkedHTMLElement;
- next(): Element;
- // off(events?: string | Event[], cb?: EventListener | number): this;
- // on(event: string, cb: Function, context?: object): this;
- opacity(): number;
- opacity(o: number): this;
- relative(x: number, y: number): this
- shear(lam: Matrix, cx: number, cy: number): this
- toRoot(): Svg;
- /**
- * By default parents will return a list of elements up until the root svg.
- */
- parents(): List<Element>
- /**
- * List the parent by hierarchy until the given parent type or matcher. If the given value is null
- * then the result is only provided the list up until Svg root element which mean no Dom parent element is included.
- * @param util a parent type
- */
- parents<T extends Dom>(util: QuerySelector | T | null): List<Element>
- /**
- * Get reference svg element based on the given attribute.
- * @param attr a svg attribute
- */
- reference<R extends Dom>(attr: AttributeReference): R | null
-
- point(): Point;
- point(position: CoordinateXY): Point;
- point(point: Point): Point;
- point(x: number, y: number): Point;
- position(): number;
- prev(): Element;
- rbox(element?: Element): Box;
- reference(type: string): Element;
- remember(name: string, value: any): this;
- remember(name: string): any;
- remember(obj: object): this;
- remove(): this;
- removeClass(name: string): this;
- root(): Svg;
- rotate(d: number, cx?: number, cy?: number): this;
- scale(x?: number, y?: number, cx?: number, cy?: number): this;
- screenCTM(): Matrix;
- setData(data: object): this;
- show(): this;
- show(): this;
- size(width?: NumberAlias, height?: NumberAlias): this;
- skew(x?: number, y?: number, cx?: number, cy?: number): this;
- stop(jumpToEnd: boolean, clearQueue: boolean): Animation;
- stop(offset?: NumberAlias | string, color?: NumberAlias, opacity?: NumberAlias): Stop;
- stop(val: { offset?: NumberAlias | string, color?: NumberAlias, opacity?: NumberAlias }): Stop;
- stroke(): any;
- stroke(color: string): this;
- stroke(stroke: StrokeData): this;
- timeline(): Timeline
- timeline(tl: Timeline): this
- toggleClass(name: string): this;
- toParent(parent: Dom): this;
- toParent(parent: Dom, i: number): this;
- toSvg(): this;
- touchcancel(cb: Function | null): this;
- touchend(cb: Function | null): this;
- touchleave(cb: Function | null): this;
- touchmove(cb: Function | null): this;
- touchstart(cb: Function | null): this;
- transform(): MatrixExtract;
- transform(t: MatrixAlias, relative?: boolean): this;
- translate(x: number, y: number): this;
- unclip(): this;
- unmask(): this;
- untransform(): this;
- visible(): boolean;
- width(): NumberAlias;
- width(width: NumberAlias): this;
- x(): NumberAlias;
- x(x: NumberAlias): this;
- y(): NumberAlias;
- y(y: NumberAlias): this;
- }
-
- // ellipse.js
- interface CircleMethods extends Shape {
- rx(rx: number): this;
- rx(): this;
- ry(ry: number): this;
- ry(): this;
- radius(x: number, y?: number): this;
- }
- class Circle extends Shape implements CircleMethods {
- constructor(node?: SVGCircleElement);
- constructor(attr: CircleAttr)
-
- node: SVGCircleElement;
-
- rx(rx: number): this;
- rx(): this;
- ry(ry: number): this;
- ry(): this;
- radius(x: number, y?: number): this;
- }
- class Ellipse extends Shape implements CircleMethods {
- node: SVGEllipseElement;
- constructor(attr: EllipseAttr)
- constructor(node?: SVGEllipseElement);
-
- rx(rx: number): this;
- rx(): this;
- ry(ry: number): this;
- ry(): this;
- radius(x: number, y?: number): this;
- }
-
- interface StopProperties {
- color?: ColorAlias;
- offset?: number | string;
- opacity?: number;
- }
-
- // gradient.js
- class Stop extends Element {
- update(offset?: number, color?: ColorAlias, opacity?: number): this;
- update(opts: StopProperties): this;
- }
- class Gradient extends Container {
- constructor(node?: SVGGradientElement);
- constructor(attr: object);
- constructor(type: string);
- node: SVGGradientElement;
-
- at(offset?: number, color?: ColorAlias, opacity?: number): Stop;
- at(opts: StopProperties): Stop;
- url(): string;
- toString(): string;
- targets(): List<Element>
- bbox(): Box
-
- // gradiented.js
- from(x: number, y: number): this;
- to(x: number, y: number): this;
-
- // TODO: check with main.js
- radius(x: number, y?: number): this;
- targets(): List<Element>
- bbox(): Box
- update(block?: (gradient: Gradient) => void): this;
- }
-
- // group.js
- class G extends Container {
- constructor(node?: SVGGElement);
- constructor(attr: object);
- node: SVGGElement;
- gbox(): Box;
- }
-
- // hyperlink.js
- class A extends Container {
- constructor(node?: SVGAElement);
- constructor(attr: object);
- node: SVGAElement;
- to(url: string): this;
- to(): string;
- target(target: string): this;
- target(): string;
- }
-
-
- // ForeignObject.js
- class ForeignObject extends Element {
- constructor(node?: SVGForeignObjectElement, attrs?: object);
- constructor(attrs?: object);
- add(element: Dom, i?: number): this;
- }
-
- // image.js
- class Image extends Shape {
- constructor(node?: SVGImageElement);
- constructor(attr: object);
- node: SVGImageElement;
- load(url?: string, callback?: (event: Event) => void): this;
- }
-
- // line.js
- type PointArrayAlias = number[] | ArrayXY[] | PointArray | string;
-
- class Line extends Shape {
- constructor(attr: LineAttr)
- constructor(node?: SVGLineElement);
-
- node: SVGLineElement;
-
- array(): PointArray;
- plot(): PointArray
- plot(points?: PointArrayAlias): this;
- plot(x1: number, y1: number, x2: number, y2: number): this;
- move(x: number, y: number): this;
- size(width?: number, height?: number): this;
- marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;
- marker(position: string, marker: Marker): Marker;
- }
-
- // marker.js
- // TODO: check register method marker
- class Marker extends Container {
- constructor();
-
- node: SVGMarkerElement;
-
- ref(x: string | number, y: string | number): this;
- update(block: (marker: Marker) => void): this;
- toString(): string;
- orient(orientation: 'auto' | 'auto-start-reverse' | number | Number): this;
- orient(): string;
- }
- // mask.js
- class Mask extends Container {
- constructor(node?: SVGMaskElement);
- constructor(attr: object);
- node: SVGMaskElement;
- remove(): this
- targets(): List<Element>;
- }
-
- // path.js
- class Path extends Shape {
- constructor(attr: PathAttr)
- constructor(node?: SVGPathElement);
-
- node: SVGPathElement;
-
- morphArray: PathArray;
- array(): PathArray;
- plot(): PathArray;
- plot(d: PathArrayAlias): this;
- marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): this;
- marker(position: string, marker: Marker): this;
-
- // sugar.js
- length(): number;
- pointAt(length: number): { x: number, y: number };
- text(text: string): TextPath
- text(text: Text): TextPath
- targets(): List<Element>
-
- }
-
-
- // pattern.js
- class Pattern extends Container {
- url(): string;
- url(...rest: any[]): never;
- update(block: (pattern: Pattern) => void): this;
- toString(): string;
- }
-
- // poly.js
- interface poly {
- array(): PointArray;
- plot(): PointArray
- plot(p: PointArrayAlias): this;
- clear(): this;
- move(x: number, y: number): this;
- size(width: number, height?: number): this;
- }
-
- // pointed.js
- interface pointed {
- x(): number
- x(x: number): this
- y(): number
- y(y: number): this
- height(): number
- height(h: number): this
- width(): number
- width(w: number): this
- }
-
- class Polyline extends Shape implements poly, pointed {
- constructor(node?: SVGPolylineElement);
- constructor(attr: PolyAttr);
-
- node: SVGPolylineElement;
-
- array(): PointArray;
- plot(): PointArray
- plot(p: PointArrayAlias): this;
- x(): number;
- x(x: number): this
- y(): number;
- y(y: number): this
- height(): number
- height(h: number): this
- width(): number
- width(w: number): this
- move(x: number, y: number): this;
- size(width: number, height?: number): this;
- marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;
- marker(position: string, marker: Marker): Marker;
- }
-
- class Polygon extends Shape implements poly, pointed {
- constructor(node?: SVGPolygonElement);
- constructor(attr: PolyAttr)
-
- node: SVGPolygonElement;
- array(): PointArray;
- plot(): PointArray;
- plot(p: PointArrayAlias): this;
- x(): number;
- x(x: number): this
- y(): number;
- y(y: number): this
- height(): number
- height(h: number): this
- width(): number
- width(w: number): this
- move(x: number, y: number): this;
- size(width: number, height?: number): this;
- marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;
- marker(position: string, marker: Marker): Marker;
- }
-
- class Rect extends Shape {
- constructor(node?: SVGRectElement);
- constructor(attr: RectAttr)
- node: SVGRectElement;
- radius(x: number, y?: number): this;
- }
-
- // shape.js
- class Shape extends Element {
- }
-
- // sugar.js
- interface StrokeData {
- color?: string;
- width?: number;
- opacity?: number;
- linecap?: string;
- linejoin?: string;
- miterlimit?: number;
- dasharray?: string;
- dashoffset?: number;
- }
-
- interface FillData {
- color?: string
- opacity?: number
- rule?: string
- }
-
- interface FontData {
- family?: string;
- size?: NumberAlias;
- anchor?: string;
- leading?: NumberAlias;
- weight?: string;
- style?: string
- }
- // textable.js
- interface Textable {
- plain(text: string): this;
- length(): number;
- }
-
- // text.js
- class Text extends Shape implements Textable {
- constructor(node?: SVGElement);
- constructor(attr: TextAttr)
-
- clone(): this;
- text(): string;
- text(text: string): this;
- text(block: (text: this) => void): this;
- leading(): Number;
- leading(leading: NumberAlias): this;
- rebuild(enabled: boolean): this;
- build(enabled: boolean): this;
- clear(): this;
- plain(text: string): this;
- length(): number;
- get(i: number): Tspan;
- path(): TextPath
- path(d: PathArrayAlias | Path): TextPath;
- track(): Element;
- ax(): string
- ax(x: string): this
- ay(): string
- ay(y: string): this
- amove(x: number, y: number): this
- textPath(): TextPath
-
- // main.js, from extend/copy prototypes from Tspan
- tspan(text: string): Tspan;
- tspan(block: (tspan: Tspan) => void): this;
- }
-
- class Tspan extends Text implements Textable {
- constructor(node?: SVGElement);
- constructor(attr: TextAttr);
- dx(): number;
- dx(x: NumberAlias): this;
- dy(): number;
- dy(y: NumberAlias): this;
- newLine(): this;
- tspan(text: string): Tspan;
- tspan(block: (tspan: Tspan) => void): this;
- length(): number;
- text(): string;
- text(text: string): this;
- text(block: (text: this) => void): this;
- plain(text: string): this;
- }
-
- // textpath.js
- class TextPath extends Text {
- constructor();
- constructor(attr: TextPathAttr)
-
- array(): Array<any>
- plot(): PathArray
- plot(d: string): this
- track(): Path
- }
-
- // style.js
- class Style extends Element {
- constructor(node: SVGElement, attr?: StylingAttr);
- addText(text: string): this;
- font(a: object): this
- font(a: string, v: string | number): this
- font(a: string): string
- rule(selector: string, obj: any): this;
- }
-
- // use.js
- class Use extends Shape {
- use(element: string, file?: string): this;
- }
-
- // viewbox.js
- type ViewBoxAlias = ViewBoxLike | number[] | string | Element;
-
- interface ViewBox {
- x: number;
- y: number;
- width: number;
- height: number;
- toString(): string;
- at(pos: number): ViewBox;
- }
-}
+// Type definitions for @svgdotjs version 3.x
+// Project: @svgdotjs/svg.js
+
+// trick to keep reference to Array build-in type
+declare class BuiltInArray<T> extends Array<T> {}
+
+// trick to have nice attribute list for CSS
+declare type CSSStyleName = Exclude<
+ keyof CSSStyleDeclaration,
+ 'parentRule' | 'length'
+>
+
+declare module '@svgdotjs/svg.js' {
+ function SVG(): Svg
+ function SVG(selector: QuerySelector): Element
+ function SVG<T>(el: T): SVGTypeMapping<T>
+ function SVG(domElement: HTMLElement): Element
+
+ function eid(name: string): string
+ function get(id: string): Element
+
+ function create(name: string): any
+ function extend(parent: object, obj: object): void
+ function invent(config: object): any
+ function adopt(node: HTMLElement): Element
+ function prepare(element: HTMLElement): void
+ function getClass(name: string): Element
+
+ function on(
+ el: Node | Window,
+ events: string,
+ cb: EventListener,
+ binbind?: any,
+ options?: AddEventListenerOptions
+ ): void
+ function on(
+ el: Node | Window,
+ events: Event[],
+ cb: EventListener,
+ binbind?: any,
+ options?: AddEventListenerOptions
+ ): void
+
+ function off(
+ el: Node | Window,
+ events?: string,
+ cb?: EventListener | number,
+ options?: AddEventListenerOptions
+ ): void
+ function off(
+ el: Node | Window,
+ events?: Event[],
+ cb?: EventListener | number,
+ options?: AddEventListenerOptions
+ ): void
+
+ function dispatch(
+ node: Node | Window,
+ event: Event,
+ data?: object,
+ options?: object
+ ): Event
+
+ function find(query: QuerySelector): List<Element>
+ function findOne(query: QuerySelector): Element | null
+
+ function getWindow(): Window
+ function registerWindow(win: Window, doc: Document): void
+ function restoreWindow(): void
+ function saveWindow(): void
+ function withWindow(
+ win: Window,
+ fn: (win: Window, doc: Document) => void
+ ): void
+
+ let utils: {
+ map(array: any[], block: Function): any
+ filter(array: any[], block: Function): any
+ radians(d: number): number
+ degrees(r: number): number
+ camelCase(s: string): string
+ unCamelCase(s: string): string
+ capitalize(s: string): string
+ // proportionalSize
+ // getOrigin
+ }
+
+ let defaults: {
+ attrs: {
+ 'fill-opacity': number
+ 'stroke-opacity': number
+ 'stroke-width': number
+ 'stroke-linejoin': string
+ 'stroke-linecap': string
+ fill: string
+ stroke: string
+ opacity: number
+ x: number
+ y: number
+ cx: number
+ cy: number
+ width: number
+ height: number
+ r: number
+ rx: number
+ ry: number
+ offset: number
+ 'stop-opacity': number
+ 'stop-color': string
+ 'font-size': number
+ 'font-family': string
+ 'text-anchor': string
+ }
+ timeline: {
+ duration: number
+ ease: string
+ delay: number
+ }
+ }
+
+ // let easing: {
+ // '-'(pos: number): number;
+ // '<>'(pos: number): number;
+ // '>'(pos: number): number;
+ // '<'(pos: number): number;
+ // bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
+ // steps(steps: number, stepPosition?: "jump-start"|"jump-end"|"jump-none"|"jump-both"|"start"|"end"): (t: number, beforeFlag?: boolean) => number;
+ // }
+
+ let regex: {
+ delimiter: RegExp
+ dots: RegExp
+ hex: RegExp
+ hyphen: RegExp
+ isBlank: RegExp
+ isHex: RegExp
+ isImage: RegExp
+ isNumber: RegExp
+ isPathLetter: RegExp
+ isRgb: RegExp
+ numberAndUnit: RegExp
+ numbersWithDots: RegExp
+ pathLetters: RegExp
+ reference: RegExp
+ rgb: RegExp
+ transforms: RegExp
+ whitespace: RegExp
+ }
+
+ let namespaces: {
+ ns: string
+ xmlns: string
+ xlink: string
+ svgjs: string
+ }
+
+ interface LinkedHTMLElement extends HTMLElement {
+ instance: Element
+ }
+
+ // ************ Standard object/option/properties declaration ************
+
+ type AttrNumberValue = number | 'auto'
+
+ /**
+ * The SVG core attributes are all the common attributes that can be specified on any SVG element.
+ * More information see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core
+ */
+ interface CoreAttr {
+ id?: string
+ lang?: string
+ tabindex?: number
+ 'xml:lang'?: string
+ }
+
+ /**
+ * The SVG styling attributes are all the attributes that can be specified on any SVG element to apply CSS styling effects.
+ * More information see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling
+ */
+ interface StylingAttr {
+ /**
+ * a valid HTML class name
+ */
+ class?: string
+ /**
+ * SVG css style string format. It all can be find here https://www.w3.org/TR/SVG/styling.html#StyleAttribute
+ */
+ style?: string
+ }
+
+ /**
+ * A global attribute that can be use with any svg element
+ */
+ interface GlobalAttr extends CoreAttr, StylingAttr {}
+
+ // TODO: implement SVG Presentation Attributes. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation
+
+ interface PathBaseAttr {
+ pathLength?: number
+ }
+
+ interface RadiusAxisAttr {
+ rx?: AttrNumberValue
+ ry?: AttrNumberValue
+ }
+
+ /**
+ * SVG Rectangle attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
+ */
+ interface RectAttr extends RadiusAxisAttr, PathBaseAttr, GlobalAttr {
+ x?: number
+ y?: number
+ width: AttrNumberValue
+ height: AttrNumberValue
+ }
+
+ /**
+ * SVG Line attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
+ */
+ interface LineAttr extends PathBaseAttr, GlobalAttr {
+ x1?: number
+ y1?: number
+ x2?: number
+ y2?: number
+ }
+
+ /**
+ * SVG Circle attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
+ */
+ interface CircleAttr extends PathBaseAttr, GlobalAttr {
+ cx?: number | string
+ cy?: number | string
+ r?: number | string
+ }
+
+ /**
+ * SVG Ellipse attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
+ */
+ interface EllipseAttr extends PathBaseAttr, GlobalAttr {
+ cx?: number | string
+ cy?: number | string
+ rx?: number | string
+ ry?: number | string
+ }
+
+ /**
+ * SVG Path attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
+ */
+ interface PathAttr extends PathBaseAttr, GlobalAttr {
+ d?: string
+ }
+
+ /**
+ * SVG Path attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon
+ * or https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline
+ */
+ interface PolyAttr extends PathBaseAttr, GlobalAttr {
+ points?: string
+ }
+
+ /**
+ * SVG Text attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
+ */
+ interface TextAttr extends GlobalAttr {
+ x?: number | string
+ y?: number | string
+ dx?: number | string
+ dy?: number | string
+ lengthAdjust?: 'spacing' | 'spacingAndGlyphs'
+ textLength?: number | string
+ // see https://developer.mozilla.org/en-US/docs/Web/API/SVGNumberList
+ // or https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#List-of-Ts
+ // TODO: tbd
+ // rotate?: string
+ }
+
+ /**
+ * SVG TextPath attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
+ */
+ interface TextPathAttr extends GlobalAttr {
+ href?: string
+ lengthAdjust?: 'spacing' | 'spacingAndGlyphs'
+ method?: 'align' | 'stretch'
+ side?: 'left' | 'right'
+ spacing?: 'auto' | 'exact'
+ startOffset?: number | string
+ textLength?: number | string
+ // See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
+ // TODO: tbd as there is no reference to see the detail of how it would look like
+ // path?: string
+ }
+
+ /**
+ * A generic Dom Box object.
+ * Notice: DOMRect is still in experiment state and document is not complete (Draft)
+ * See https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
+ */
+ interface DOMRect {
+ x?: number
+ y?: number
+ width?: number
+ height?: number
+ top?: number
+ right?: number
+ bottom?: number
+ left?: number
+ }
+
+ // ************ SVG.JS generic Conditional Types declaration ************
+
+ type SVGTypeMapping<T> = T extends HTMLElement
+ ? Dom
+ : T extends SVGSVGElement
+ ? Svg
+ : T extends SVGRectElement
+ ? Rect
+ : T extends SVGCircleElement
+ ? Circle
+ : T extends SVGPathElement
+ ? Path
+ : T extends SVGTextElement
+ ? Text
+ : T extends SVGTextPathElement
+ ? TextPath
+ : T extends SVGGElement
+ ? G
+ : T extends SVGLineElement
+ ? Line
+ : T extends SVGPolylineElement
+ ? Polyline
+ : T extends SVGPolygonElement
+ ? Polygon
+ : T extends SVGGradientElement
+ ? Gradient
+ : T extends SVGImageElement
+ ? Image
+ : T extends SVGEllipseElement
+ ? Ellipse
+ : T extends SVGMaskElement
+ ? Mask
+ : T extends SVGMarkerElement
+ ? Marker
+ : T extends SVGClipPathElement
+ ? ClipPath
+ : T extends SVGTSpanElement
+ ? Tspan
+ : T extends SVGSymbolElement
+ ? Symbol
+ : T extends SVGUseElement
+ ? Use
+ : Element
+
+ // element type as string
+ type SvgType = 'svg'
+ type ClipPathType = 'clipPath'
+ type TextType = 'text'
+ type GType = 'g'
+ type AType = 'a'
+
+ type ParentElement = SvgType | GType | AType
+
+ type AttrTypeMapping<T> = T extends Rect ? RectAttr : GlobalAttr
+
+ type ElementAlias =
+ | Dom
+ | Svg
+ | Rect
+ | Line
+ | Polygon
+ | Polyline
+ | Ellipse
+ | ClipPath
+ | Use
+ | Text
+ | Path
+ | TextPath
+ | Circle
+ | G
+ | Gradient
+ | Image
+ | Element
+
+ type ElementTypeAlias =
+ | typeof Dom
+ | typeof Svg
+ | typeof Rect
+ | typeof Line
+ | typeof Polygon
+ | typeof Polyline
+ | typeof Ellipse
+ | typeof ClipPath
+ | typeof Use
+ | typeof Text
+ | typeof Path
+ | typeof TextPath
+ | typeof Circle
+ | typeof G
+ | typeof Gradient
+ | typeof Image
+ | typeof Element
+
+ type AttributeReference =
+ | 'href'
+ | 'marker-start'
+ | 'marker-mid'
+ | 'marker-end'
+ | 'mask'
+ | 'clip-path'
+ | 'filter'
+ | 'fill'
+
+ // ************* SVG.JS Type Declaration *************
+ // ********** Locate in directory src/types **********
+
+ // SVGArray.js
+ // Notice: below class is defined the name as `Array` rather than `SVGArray`.
+ // The purpose of giving the name as `Array` is to allow it to be aligned with SVG.JS export type
+ // as SVG.JS export it as `Array` (to be precise `SVG.Array`) so reading through JS documentation
+ // should be more straightforward.
+ /**
+ * Type alias to native array.
+ *
+ * **Caution**: If argument is a string, generic type must be a number or array of number and
+ * the string is format as a concatenate of number separate by comma.
+ * This is expensive to build runtime type check for such as case so please use it carefully.
+ */
+ type ArrayAlias<T> = BuiltInArray<T> | T[] | string
+
+ class Array<T> extends BuiltInArray<T> {
+ constructor(array?: ArrayAlias<T>)
+
+ /**
+ * Return array of generic T however it's flatten array by 1 level as it using `apply` function.
+ * For example: if T is a `number[]` which is the number of 2 dimension `Array<number[]>` the result will be `number[]`
+ */
+ toArray(): any[]
+ /**
+ * return a concatenated string of each element separated by space
+ */
+ toString(): string
+ valueOf(): T[]
+ clone(): Array<T>
+ toSet(): Set<T>
+ parse(a?: ArrayAlias<T>): T[]
+ to(a: any): Morphable
+ }
+
+ // point.js
+ class Point {
+ x: number
+ y: number
+ constructor()
+ constructor(position: CoordinateXY)
+ constructor(point: Point)
+ constructor(x: number, y?: number)
+ clone(): Point
+ transform(matrix: Matrix): this
+ transformO(matrix: Matrix): this
+ toArray(): ArrayXY
+ }
+
+ // pointArray.js
+ class PointArray extends Array<ArrayXY> {
+ constructor()
+ constructor(array?: ArrayAlias<ArrayXY> | number[])
+
+ toLine(): LineAttr
+ transform(m: Matrix | MatrixLike): PointArray
+ move(x: number, y: number): this
+ size(width: number, height: number): this
+ bbox(): Box
+ to(a: any): Morphable
+ toString(): string
+ }
+
+ // SVGNumber.js
+ type NumberUnit = [number, string]
+
+ class Number {
+ constructor()
+ constructor(value: Number)
+ constructor(value: string)
+ constructor(value: number, unit?: any)
+ constructor(n: NumberUnit)
+
+ value: number
+ unit: any
+
+ toString(): string
+ toJSON(): object // same as toString
+ toArray(): NumberUnit
+ valueOf(): number
+ plus(number: NumberAlias): Number
+ minus(number: NumberAlias): Number
+ times(number: NumberAlias): Number
+ divide(number: NumberAlias): Number
+ convert(unit: string): Number
+ to(a: any): Morphable
+ }
+
+ type NumberAlias = Number | number | string
+
+ // PathArray.js
+
+ type LineCommand =
+ | ['M' | 'm' | 'L' | 'l', number, number]
+ | ['H' | 'h' | 'V' | 'v', number]
+ | ['Z' | 'z']
+
+ type CurveCommand =
+ // Bezier Curves
+ | ['C' | 'c', number, number, number, number, number, number]
+ | ['S' | 's' | 'Q' | 'q', number, number, number, number]
+ | ['T' | 't', number, number]
+ // Arcs
+ | ['A' | 'a', number, number, number, number, number, number, number]
+
+ type PathCommand = LineCommand | CurveCommand
+
+ type PathArrayAlias = PathArray | PathCommand[] | (string | number)[] | string
+
+ class PathArray extends Array<PathCommand> {
+ constructor()
+ constructor(d: ArrayAlias<PathCommand> | PathArrayAlias)
+
+ move(x: number, y: number): this
+ size(width: number, height: number): this
+ equalCommands(other: PathArray): boolean
+ morph(pa: PathArray): this
+ parse(array?: ArrayAlias<PathCommand> | PathArrayAlias): PathCommand[]
+ bbox(): Box
+ to(a: any): Morphable
+ }
+
+ // Matrix.js
+ interface TransformData {
+ origin?: number[]
+ scaleX?: number
+ scaleY?: number
+ shear?: number
+ rotate?: number
+ translateX?: number
+ translateY?: number
+ originX?: number
+ originY?: number
+ }
+
+ interface MatrixLike {
+ a?: number
+ b?: number
+ c?: number
+ d?: number
+ e?: number
+ f?: number
+ }
+
+ interface MatrixExtract extends TransformData, MatrixLike {}
+
+ type FlipType = 'both' | 'x' | 'y' | boolean
+ type ArrayXY = [number, number]
+ type CoordinateXY = ArrayXY | { x: number; y: number }
+
+ interface MatrixTransformParam {
+ rotate?: number
+ flip?: FlipType
+ skew?: ArrayXY | number
+ skewX?: number
+ skewY?: number
+ scale?: ArrayXY | number
+ scaleX?: number
+ scaleY?: number
+ shear?: number
+ theta?: number
+ origin?: CoordinateXY | string
+ around?: CoordinateXY
+ ox?: number
+ originX?: number
+ oy?: number
+ originY?: number
+ position?: CoordinateXY
+ px?: number
+ positionX?: number
+ py?: number
+ positionY?: number
+ translate?: CoordinateXY
+ tx?: number
+ translateX?: number
+ ty?: number
+ translateY?: number
+ relative?: CoordinateXY
+ rx?: number
+ relativeX?: number
+ ry?: number
+ relativeY?: number
+ }
+
+ type MatrixAlias =
+ | MatrixLike
+ | TransformData
+ | MatrixTransformParam
+ | number[]
+ | Element
+ | string
+
+ class Matrix implements MatrixLike {
+ constructor()
+ constructor(source: MatrixAlias)
+ constructor(
+ a: number,
+ b: number,
+ c: number,
+ d: number,
+ e: number,
+ f: number
+ )
+
+ a: number
+ b: number
+ c: number
+ d: number
+ e: number
+ f: number;
+
+ // *** To Be use by Test Only in restrict mode ***
+ [key: string]: any
+
+ clone(): Matrix
+ transform(o: MatrixLike | MatrixTransformParam): Matrix
+ compose(o: MatrixExtract): Matrix
+ decompose(cx?: number, cy?: number): MatrixExtract
+ multiply(m: MatrixAlias | Matrix): Matrix
+ multiplyO(m: MatrixAlias | Matrix): this
+ lmultiply(m: MatrixAlias | Matrix): Matrix
+ lmultiplyO(m: MatrixAlias | Matrix): this
+ inverse(): Matrix
+ inverseO(): this
+ translate(x?: number, y?: number): Matrix
+ translateO(x?: number, y?: number): this
+ scale(x: number, y?: number, cx?: number, cy?: number): Matrix
+ scaleO(x: number, y?: number, cx?: number, cy?: number): this
+ rotate(r: number, cx?: number, cy?: number): Matrix
+ rotateO(r: number, cx?: number, cy?: number): this
+ flip(a: NumberAlias, offset?: number): Matrix
+ flipO(a: NumberAlias, offset?: number): this
+ flip(offset?: number): Matrix
+ shear(a: number, cx?: number, cy?: number): Matrix
+ shearO(a: number, cx?: number, cy?: number): this
+ skew(y?: number, cx?: number, cy?: number): Matrix
+ skewO(y?: number, cx?: number, cy?: number): this
+ skew(x: number, y?: number, cx?: number, cy?: number): Matrix
+ skewX(x: number, cx?: number, cy?: number): Matrix
+ skewY(y: number, cx?: number, cy?: number): Matrix
+ around(cx?: number, cy?: number, matrix?: Matrix): Matrix
+ aroundO(cx?: number, cy?: number, matrix?: Matrix): this
+ equals(m: Matrix): boolean
+ toString(): string
+ toArray(): number[]
+ valueOf(): MatrixLike
+ to(a: any): Morphable
+ }
+
+ type ListEachCallback<T> = (el: T, index: number, list: List<T>) => any
+
+ // List.js
+ class List<T> extends BuiltInArray<T> {
+ each(fn: ListEachCallback<T>): List<any>
+ each(name: string, ...args: any[]): List<any>
+ toArray(): T[]
+ }
+
+ class Eventobject {
+ [key: string]: Eventobject
+ }
+
+ // EventTarget.js
+ class EventTarget {
+ events: Eventobject
+
+ addEventListener(): void
+ dispatch(event: Event | string, data?: object): Event
+ dispatchEvent(event: Event): boolean
+ fire(event: Event | string, data?: object): this
+ getEventHolder(): this | Node
+ getEventTarget(): this | Node
+
+ on(
+ events: string | Event[],
+ cb: EventListener,
+ binbind?: any,
+ options?: AddEventListenerOptions
+ ): this
+ off(
+ events?: string | Event[],
+ cb?: EventListener | number,
+ options?: AddEventListenerOptions
+ ): this
+
+ removeEventListener(): void
+ }
+
+ // Color.js
+ interface ColorLike {
+ r: number
+ g: number
+ b: number
+
+ x: number
+ y: number
+ z: number
+
+ h: number
+ s: number
+ l: number
+ a: number
+ c: number
+
+ m: number
+ k: number
+
+ space: string
+ }
+
+ type ColorAlias = string | ColorLike
+
+ class Color implements ColorLike {
+ r: number
+ g: number
+ b: number
+
+ x: number
+ y: number
+ z: number
+
+ h: number
+ s: number
+ l: number
+ a: number
+ c: number
+
+ m: number
+ k: number
+
+ space: string
+ constructor()
+ constructor(color: ColorAlias, space?: string)
+ constructor(a: number, b: number, c: number, space?: string)
+ constructor(a: number, b: number, c: number, d: number, space?: string)
+ constructor(a: number[], space?: string)
+
+ rgb(): Color
+ lab(): Color
+ xyz(): Color
+ lch(): Color
+ hsl(): Color
+ cmyk(): Color
+ toHex(): string
+ toString(): string
+ toRgb(): string
+ toArray(): any[]
+
+ to(a: any): Morphable
+ fromArray(a: any): this
+
+ static random(mode: 'sine', time?: number): Color
+ static random(mode?: string): Color
+ }
+
+ // Box.js
+ interface BoxLike {
+ height: number
+ width: number
+ y: number
+ x: number
+ cx?: number
+ cy?: number
+ w?: number
+ h?: number
+ x2?: number
+ y2?: number
+ }
+
+ class Box implements BoxLike {
+ height: number
+ width: number
+ y: number
+ x: number
+ cx: number
+ cy: number
+ w: number
+ h: number
+ x2: number
+ y2: number
+
+ constructor()
+ constructor(source: string)
+ constructor(source: number[])
+ constructor(source: DOMRect)
+ constructor(x: number, y: number, width: number, height: number)
+
+ merge(box: BoxLike): Box
+ transform(m: Matrix): Box
+ addOffset(): this
+ toString(): string
+ toArray(): number[]
+ isNulled(): boolean
+ to(v: MorphValueLike): Morphable
+ }
+
+ // Morphable.js
+ type MorphValueLike =
+ | string
+ | number
+ | objectBag
+ | NonMorphable
+ | MatrixExtract
+ | Array<any>
+ | any[]
+
+ class Morphable {
+ constructor()
+ constructor(st: Stepper)
+
+ from(): MorphValueLike
+ from(v: MorphValueLike): this
+ to(): MorphValueLike
+ to(v: MorphValueLike): this
+ type(): any
+ type(t: any): this
+ stepper(): Stepper
+ stepper(st: Stepper): this
+ done(): boolean
+ at(pos: number): any
+ }
+
+ class objectBag {
+ constructor()
+ constructor(a: object)
+ valueOf(): object
+ toArray(): object[]
+
+ to(a: object): Morphable
+ fromArray(a: any[]): this
+ }
+
+ class NonMorphable {
+ constructor(a: object)
+ valueOf(): object
+ toArray(): object[]
+
+ to(a: object): Morphable
+ fromArray(a: object): this
+ }
+
+ class TransformBag {
+ constructor()
+ constructor(a: number[])
+ constructor(a: TransformData)
+ defaults: TransformData
+ toArray(): number[]
+ to(t: TransformData): Morphable
+ fromArray(t: number[]): this
+ }
+
+ interface Stepper {
+ done(c?: object): boolean
+ }
+
+ class Ease implements Stepper {
+ constructor()
+ constructor(fn: string)
+ constructor(fn: Function)
+
+ step(from: number, to: number, pos: number): number
+ done(): boolean
+ }
+
+ class Controller implements Stepper {
+ constructor(fn?: Function)
+ step(current: number, target: number, dt: number, c: number): number
+ done(c?: object): boolean
+ }
+
+ // Queue.js
+ interface QueueParam {
+ value: any
+ next?: any
+ prev?: any
+ }
+
+ class Queue {
+ constructor()
+
+ push(value: any): QueueParam
+ shift(): any
+ first(): number
+ last(): number
+ remove(item: QueueParam): void
+ }
+
+ // Timeline.js
+ interface ScheduledRunnerInfo {
+ start: number
+ duration: number
+ end: number
+ runner: Runner
+ }
+
+ class Timeline extends EventTarget {
+ constructor()
+ constructor(fn: Function)
+
+ active(): boolean
+ schedule(runner: Runner, delay?: number, when?: string): this
+ schedule(): ScheduledRunnerInfo[]
+ unschedule(runner: Runner): this
+ getEndTime(): number
+ updateTime(): this
+ persist(dtOrForever?: number | boolean): this
+ play(): this
+ pause(): this
+ stop(): this
+ finish(): this
+ speed(speed: number): this
+ reverse(yes: boolean): this
+ seek(dt: number): this
+ time(): number
+ time(time: number): this
+ source(): Function
+ source(fn: Function): this
+ }
+
+ // Runner.js
+ interface TimesParam {
+ duration: number
+ delay: number
+ when: number | string
+ swing: boolean
+ wait: number
+ times: number
+ }
+
+ type TimeLike = number | TimesParam | Stepper
+
+ type EasingCallback = (...any: any) => number
+ type EasingLiteral = '<>' | '-' | '<' | '>'
+
+ class Runner {
+ constructor()
+ constructor(options: Function)
+ constructor(options: number)
+ constructor(options: Controller)
+
+ static sanitise: (
+ duration?: TimeLike,
+ delay?: number,
+ when?: string
+ ) => object
+
+ element(): Element
+ element(el: Element): this
+ timeline(): Timeline
+ timeline(timeline: Timeline): this
+ animate(duration: TimeLike, delay?: number, when?: string): this
+ schedule(delay: number, when?: string): this
+ schedule(timeline: Timeline, delay?: number, when?: string): this
+ unschedule(): this
+ loop(times?: number, swing?: boolean, wait?: number): this
+ loop(times: TimesParam): this
+ delay(delay: number): this
+
+ during(fn: Function): this
+ queue(
+ initFn: Function,
+ runFn: Function,
+ retargetFn?: boolean | Function,
+ isTransform?: boolean
+ ): this
+ after(fn: EventListener): this
+ time(): number
+ time(time: number): this
+ duration(): number
+ loops(): number
+ loops(p: number): this
+ persist(dtOrForever?: number | boolean): this
+ position(): number
+ position(p: number): this
+ progress(): number
+ progress(p: number): this
+ step(deta?: number): this
+ reset(): this
+ finish(): this
+ reverse(r?: boolean): this
+ ease(fn: EasingCallback): this
+ ease(kind: EasingLiteral): this
+ active(): boolean
+ active(a: boolean): this
+ addTransform(m: Matrix): this
+ clearTransform(): this
+ clearTransformsFromQueue(): void
+
+ // extends prototypes
+ attr(a: string | object, v?: string): this
+ css(s: string | object, v?: string): this
+ styleAttr(type: string, name: string | object, val?: string): this
+ zoom(level: NumberAlias, point?: Point): this
+ transform(
+ transforms: MatrixTransformParam,
+ relative?: boolean,
+ affine?: boolean
+ ): this
+ x(x: number): this
+ y(y: number): this
+ dx(dx: number): this
+ dy(dy: number): this
+ cx(x: number): this
+ cy(y: number): this
+ dmove(dx: number, dy: number): this
+ move(x: number, y: number): this
+ center(x: number, y: number): this
+ size(width: number, height: number): this
+ width(width: number): this
+ height(height: number): this
+ plot(a: object): this
+ plot(a: number, b: number, c: number, d: number): this
+ leading(value: number): this
+ viewbox(x: number, y: number, width: number, height: number): this
+ update(offset: number, color: number, opacity: number): this
+ update(o: StopProperties): this
+ rx(): number
+ rx(rx: number): this
+ ry(): number
+ ry(ry: number): this
+ from(x: NumberAlias, y: NumberAlias): this
+ to(x: NumberAlias, y: NumberAlias): this
+ }
+
+ // Animator.js
+ let Animator: {
+ nextDraw: any
+ frames: Queue
+ timeouts: Queue
+ immediates: Queue
+
+ timer(): boolean
+ frame(fn: Function): object
+ timeout(fn: Function, delay?: number): object
+ immediate(fn: Function): object
+ cancelFrame(o: object): void
+ clearTimeout(o: object): void
+ cancelImmediate(o: object): void
+ }
+
+ /**
+ * Just fancy type alias to refer to css query selector.
+ */
+ type QuerySelector = string
+
+ class Dom extends EventTarget {
+ node: HTMLElement | SVGElement
+ type: string
+
+ constructor(node?: HTMLElement, attr?: object)
+ constructor(att: object)
+ add(element: Element, i?: number): this
+ addTo(parent: Dom | HTMLElement | string, i?: number): this
+ children(): List<Element>
+ clear(): this
+ clone(deep?: boolean, assignNewIds?: boolean): this
+ each(
+ block: (index: number, children: Element[]) => void,
+ deep?: boolean
+ ): this
+ element(element: string, inherit?: object): this
+ first(): Element
+ get(i: number): Element
+ getEventHolder(): LinkedHTMLElement
+ getEventTarget(): LinkedHTMLElement
+ has(element: Element): boolean
+ id(): string
+ id(id: string): this
+ index(element: Element): number
+ last(): Element
+ matches(selector: string): boolean
+ /**
+ * Finds the closest ancestor which matches the string or is of passed type. If nothing is passed, the parent is returned
+ * @param type can be either string, svg.js object or undefined.
+ */
+ parent(type?: ElementTypeAlias | QuerySelector): Dom | null
+ put(element: Element, i?: number): Element
+ /**
+ * Put the element into the given parent element and returns the parent element
+ * @param parent The parent in which the current element is inserted
+ */
+ putIn(parent: ElementAlias | Node | QuerySelector): Dom
+
+ remove(): this
+ removeElement(element: Element): this
+ replace<T extends Dom>(element: T): T
+ round(precision?: number, map?: string[]): this
+ svg(): string
+ svg(a: string, outer: true): Element
+ svg(a: string, outer?: false): this
+ svg(a: boolean, outer?: boolean): string
+ svg(a: null | Function, outer?: boolean): string
+
+ toString(): string
+ words(text: string): this
+ writeDataToDom(): this
+
+ // prototype extend Attribute in attr.js
+ /**
+ * Get the attribute object of SVG Element. The return object will be vary based on
+ * the instance itself. For example, G element will only return GlobalAttr where Rect
+ * will return RectAttr instead.
+ */
+ attr(): any
+ /**
+ * Add or update the attribute from the SVG Element. To remove the attribute from the element set value to null
+ * @param name name of attribute
+ * @param value value of attribute can be string or number or null
+ * @param namespace optional string that define namespace
+ */
+ attr(name: string, value: any, namespace?: string): this
+ attr(name: string): any
+ attr(obj: object): this
+ attr(obj: string[]): object
+
+ // prototype extend Selector in selector.js
+ find(query: string): List<Element>
+ findOne(query: string): Dom | null
+
+ // prototype method register in data.js
+ data(a: string): object | string | number
+ data(a: string, v: object, substain?: boolean): this
+ data(a: object): this
+
+ // prototype method register in arrange.js
+ siblings(): List<Element>
+ position(): number
+ next(): Element
+ prev(): Element
+ forward(): this
+ backward(): this
+ front(): this
+ back(): this
+ before(el: Element): Element
+ after(el: Element): Element
+ insertBefore(el: Element): this
+ insertAfter(el: Element): this
+
+ // prototype method register in class.js
+ classes(): string[]
+ hasClass(name: string): boolean
+ addClass(name: string): this
+ removeClass(name: string): this
+ toggleClass(name: string): this
+
+ // prototype method register in css.js
+ css(): Partial<CSSStyleDeclaration>
+ css<T extends CSSStyleName>(style: T): CSSStyleDeclaration[T]
+ css<T extends CSSStyleName[]>(style: T): Partial<CSSStyleDeclaration>
+ css<T extends CSSStyleName>(style: T, val: CSSStyleDeclaration[T]): this
+ css(style: Partial<CSSStyleDeclaration>): this
+ show(): this
+ hide(): this
+ visible(): boolean
+
+ // memory.js
+ remember(name: string, value: any): this
+ remember(name: string): any
+ remember(obj: object): this
+ forget(...keys: string[]): this
+ forget(): this
+ memory(): object
+
+ addEventListener(): void
+ dispatch(event: Event | string, data?: object): Event
+ dispatchEvent(event: Event): boolean
+ fire(event: Event | string, data?: object): this
+ getEventHolder(): this | Node
+ getEventTarget(): this | Node
+
+ // on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;
+ // off(events?: string | Event[], cb?: EventListener | number): this;
+ removeEventListener(): void
+ }
+
+ // clip.js
+ class ClipPath extends Container {
+ constructor()
+ constructor(node?: SVGClipPathElement)
+ constructor(attr: object)
+ node: SVGClipPathElement
+
+ targets(): List<Element>
+ remove(): this
+ }
+
+ // container.js
+ interface ViewBoxLike {
+ x: number
+ y: number
+ width: number
+ height: number
+ }
+
+ class Container extends Element {
+ circle(size?: NumberAlias): Circle
+ circle(size: number, unit: number): Circle
+ clip(): ClipPath
+ ellipse(width?: number, height?: number): Ellipse
+ flatten(parent: Dom, depth?: number): this
+ foreignObject(width: number, height: number): ForeignObject
+ gradient(type: string, block?: (stop: Gradient) => void): Gradient
+ group(): G
+
+ image(): Image
+ image(href?: string, callback?: (e: Event) => void): Image
+ line(points?: PointArrayAlias): Line
+ line(x1: number, y1: number, x2: number, y2: number): Line
+ link(url: string): A
+ marker(
+ width?: number,
+ height?: number,
+ block?: (marker: Marker) => void
+ ): Marker
+ mask(): Mask
+ nested(): Svg
+ path(): Path
+ path(d: PathArrayAlias): Path
+ pattern(
+ width?: number,
+ height?: number,
+ block?: (pattern: Pattern) => void
+ ): Pattern
+ plain(text: string): Text
+ polygon(points?: PointArrayAlias): Polygon
+ polyline(points?: PointArrayAlias): Polyline
+ rect(width?: number, height?: number): Rect
+ style(): Style
+ text(block: (tspan: Tspan) => void): Text
+ text(text: string): Text
+ ungroup(parent: Dom, depth?: number): this
+ use(element: Element | string, file?: string): Use
+ viewbox(): Box
+ viewbox(viewbox: ViewBoxLike | string): this
+ viewbox(x: number, y: number, width: number, height: number): this
+ textPath(text: string | Text, path: string | Path): TextPath
+ symbol(): Symbol
+ zoom(): number
+ zoom(level: NumberAlias, point?: Point): this
+ }
+
+ class Defs extends Container {
+ constructor(node?: SVGDefsElement)
+ node: SVGDefsElement
+ marker(
+ width?: number,
+ height?: number,
+ block?: (marker: Marker) => void
+ ): Marker
+ }
+
+ class Svg extends Container {
+ constructor(svgElement?: SVGSVGElement)
+ constructor(id: string)
+ node: SVGSVGElement
+ namespace(): this
+ defs(): Defs
+ remove(): this
+ isRoot(): boolean
+ }
+
+ interface Sugar {
+ fill(): any
+ fill(fill: FillData): this
+ fill(color: string): this
+ fill(pattern: Element): this
+ fill(image: Image): this
+ stroke(): any
+ stroke(stroke: StrokeData): this
+ stroke(color: string): this
+ matrix(
+ a?: number,
+ b?: number,
+ c?: number,
+ d?: number,
+ e?: number,
+ f?: number
+ ): this
+ matrix(
+ mat: MatrixAlias,
+ b?: number,
+ c?: number,
+ d?: number,
+ e?: number,
+ f?: number
+ ): this
+ rotate(degrees: number, cx?: number, cy?: number): this
+ skew(skewX?: number, skewY?: number, cx?: number, cy?: number): this
+ scale(scaleX?: number, scaleY?: number, cx?: number, cy?: number): this
+ translate(x: number, y: number): this
+ shear(lam: Matrix, cx: number, cy: number): this
+ relative(x: number, y: number): this
+ flip(direction?: string, around?: number): this
+ flip(around: number): this
+ opacity(): number
+ opacity(value: number): this
+ font(a: string): string
+ font(a: string, v: string | number): this
+ font(a: object): this
+ }
+
+ // Symbol.js
+ class Symbol extends Container {
+ constructor(svgElement?: SVGSymbolElement)
+ constructor(attr: object)
+ node: SVGSymbolElement
+ }
+
+ class Element extends Dom implements Sugar {
+ constructor(node?: SVGElement)
+ constructor(attr: object)
+ node: SVGElement
+ type: string
+ dom: any
+
+ addClass(name: string): this
+ after(element: Element): Element
+ animate(duration?: TimeLike, delay?: number, when?: string): Runner
+ delay(by: number, when?: string): Runner
+ attr(): any
+ attr(name: string, value: any, namespace?: string): this
+ attr(name: string): any
+ attr(obj: string[]): object
+ attr(obj: object): this
+ back(): this
+ backward(): this
+ bbox(): Box
+ before(element: Element): Element
+ center(x: number, y: number): this
+ classes(): string[]
+ click(cb: Function | null): this
+ clipper(): ClipPath
+ clipWith(element: Element): this
+ clone(deep?: boolean, assignNewIds?: boolean): this
+ ctm(): Matrix
+ cx(): number
+ cx(x: number): this
+ cy(): number
+ cy(y: number): this
+ data(name: string, value: any, sustain?: boolean): this
+ data(name: string): any
+ data(val: object): this
+ dblclick(cb: Function | null): this
+ defs(): Defs
+ dmove(x: NumberAlias, y: NumberAlias): this
+ dx(x: NumberAlias): this
+ dy(y: NumberAlias): this
+ event(): Event | CustomEvent
+ fill(): any
+ fill(color: string): this
+ fill(color: Color | ColorLike): this
+ fill(color: FillData): this
+ fill(pattern: Element): this
+ fire(event: Event): this
+ fire(event: string, data?: any): this
+ flip(a: string, offset?: number): this
+ flip(offset?: number): this
+ font(a: object): this
+ font(a: string, v: string | number): this
+ font(a: string): string
+ forget(...keys: string[]): this
+ forget(): this
+ forward(): this
+ front(): this
+ hasClass(name: string): boolean
+ height(): NumberAlias
+ height(height: NumberAlias): this
+ hide(): this
+ hide(): this
+ id(): string
+ id(id: string): this
+ inside(x: number, y: number): boolean
+ is(cls: any): boolean
+ linkTo(url: (link: A) => void): A
+ linkTo(url: string): A
+ masker(): Mask
+ maskWith(element: Element): this
+ maskWith(mask: Mask): this
+ matches(selector: string): boolean
+ matrix(): Matrix
+ matrix(
+ a?: number,
+ b?: number,
+ c?: number,
+ d?: number,
+ e?: number,
+ f?: number
+ ): this
+ matrix(
+ mat: MatrixAlias,
+ b?: number,
+ c?: number,
+ d?: number,
+ e?: number,
+ f?: number
+ ): this
+ matrixify(): Matrix
+ memory(): object
+ mousedown(cb: Function | null): this
+ mousemove(cb: Function | null): this
+ mouseout(cb: Function | null): this
+ mouseover(cb: Function | null): this
+ mouseup(cb: Function | null): this
+ mouseenter(cb: Function | null): this
+ mouseleave(cb: Function | null): this
+ move(x: NumberAlias, y: NumberAlias): this
+ native(): LinkedHTMLElement
+ next(): Element
+ // off(events?: string | Event[], cb?: EventListener | number): this;
+ // on(event: string, cb: Function, context?: object): this;
+ opacity(): number
+ opacity(o: number): this
+ relative(x: number, y: number): this
+ shear(lam: Matrix, cx: number, cy: number): this
+ toRoot(): Svg
+ /**
+ * By default parents will return a list of elements up until the root svg.
+ */
+ parents(): List<Element>
+ /**
+ * List the parent by hierarchy until the given parent type or matcher. If the given value is null
+ * then the result is only provided the list up until Svg root element which mean no Dom parent element is included.
+ * @param util a parent type
+ */
+ parents<T extends Dom>(util: QuerySelector | T | null): List<Element>
+ /**
+ * Get reference svg element based on the given attribute.
+ * @param attr a svg attribute
+ */
+ reference<R extends Dom>(attr: AttributeReference): R | null
+
+ point(): Point
+ point(position: CoordinateXY): Point
+ point(point: Point): Point
+ point(x: number, y: number): Point
+ position(): number
+ prev(): Element
+ rbox(element?: Element): Box
+ reference(type: string): Element
+ remember(name: string, value: any): this
+ remember(name: string): any
+ remember(obj: object): this
+ remove(): this
+ removeClass(name: string): this
+ root(): Svg
+ rotate(d: number, cx?: number, cy?: number): this
+ scale(x?: number, y?: number, cx?: number, cy?: number): this
+ screenCTM(): Matrix
+ setData(data: object): this
+ show(): this
+ show(): this
+ size(width?: NumberAlias, height?: NumberAlias): this
+ skew(x?: number, y?: number, cx?: number, cy?: number): this
+ stop(jumpToEnd: boolean, clearQueue: boolean): Animation
+ stop(
+ offset?: NumberAlias | string,
+ color?: NumberAlias,
+ opacity?: NumberAlias
+ ): Stop
+ stop(val: {
+ offset?: NumberAlias | string
+ color?: NumberAlias
+ opacity?: NumberAlias
+ }): Stop
+ stroke(): any
+ stroke(color: string): this
+ stroke(stroke: StrokeData): this
+ timeline(): Timeline
+ timeline(tl: Timeline): this
+ toggleClass(name: string): this
+ toParent(parent: Dom): this
+ toParent(parent: Dom, i: number): this
+ toSvg(): this
+ touchcancel(cb: Function | null): this
+ touchend(cb: Function | null): this
+ touchleave(cb: Function | null): this
+ touchmove(cb: Function | null): this
+ touchstart(cb: Function | null): this
+ transform(): MatrixExtract
+ transform(t: MatrixAlias, relative?: boolean): this
+ translate(x: number, y: number): this
+ unclip(): this
+ unmask(): this
+ untransform(): this
+ visible(): boolean
+ width(): NumberAlias
+ width(width: NumberAlias): this
+ x(): NumberAlias
+ x(x: NumberAlias): this
+ y(): NumberAlias
+ y(y: NumberAlias): this
+ }
+
+ // ellipse.js
+ interface CircleMethods extends Shape {
+ rx(rx: number): this
+ rx(): this
+ ry(ry: number): this
+ ry(): this
+ radius(x: number, y?: number): this
+ }
+ class Circle extends Shape implements CircleMethods {
+ constructor(node?: SVGCircleElement)
+ constructor(attr: CircleAttr)
+
+ node: SVGCircleElement
+
+ rx(rx: number): this
+ rx(): this
+ ry(ry: number): this
+ ry(): this
+ radius(x: number, y?: number): this
+ }
+ class Ellipse extends Shape implements CircleMethods {
+ node: SVGEllipseElement
+ constructor(attr: EllipseAttr)
+ constructor(node?: SVGEllipseElement)
+
+ rx(rx: number): this
+ rx(): this
+ ry(ry: number): this
+ ry(): this
+ radius(x: number, y?: number): this
+ }
+
+ interface StopProperties {
+ color?: ColorAlias
+ offset?: number | string
+ opacity?: number
+ }
+
+ // gradient.js
+ class Stop extends Element {
+ update(offset?: number, color?: ColorAlias, opacity?: number): this
+ update(opts: StopProperties): this
+ }
+ class Gradient extends Container {
+ constructor(node?: SVGGradientElement)
+ constructor(attr: object)
+ constructor(type: string)
+ node: SVGGradientElement
+
+ at(offset?: number, color?: ColorAlias, opacity?: number): Stop
+ at(opts: StopProperties): Stop
+ url(): string
+ toString(): string
+ targets(): List<Element>
+ bbox(): Box
+
+ // gradiented.js
+ from(x: number, y: number): this
+ to(x: number, y: number): this
+
+ // TODO: check with main.js
+ radius(x: number, y?: number): this
+ targets(): List<Element>
+ bbox(): Box
+ update(block?: (gradient: Gradient) => void): this
+ }
+
+ // group.js
+ class G extends Container {
+ constructor(node?: SVGGElement)
+ constructor(attr: object)
+ node: SVGGElement
+ gbox(): Box
+ }
+
+ // hyperlink.js
+ class A extends Container {
+ constructor(node?: SVGAElement)
+ constructor(attr: object)
+ node: SVGAElement
+ to(url: string): this
+ to(): string
+ target(target: string): this
+ target(): string
+ }
+
+ // ForeignObject.js
+ class ForeignObject extends Element {
+ constructor(node?: SVGForeignObjectElement, attrs?: object)
+ constructor(attrs?: object)
+ add(element: Dom, i?: number): this
+ }
+
+ // image.js
+ class Image extends Shape {
+ constructor(node?: SVGImageElement)
+ constructor(attr: object)
+ node: SVGImageElement
+ load(url?: string, callback?: (event: Event) => void): this
+ }
+
+ // line.js
+ type PointArrayAlias = number[] | ArrayXY[] | PointArray | string
+
+ class Line extends Shape {
+ constructor(attr: LineAttr)
+ constructor(node?: SVGLineElement)
+
+ node: SVGLineElement
+
+ array(): PointArray
+ plot(): PointArray
+ plot(points?: PointArrayAlias): this
+ plot(x1: number, y1: number, x2: number, y2: number): this
+ move(x: number, y: number): this
+ size(width?: number, height?: number): this
+ marker(
+ position: string,
+ width?: number,
+ height?: number,
+ block?: (marker: Marker) => void
+ ): Marker
+ marker(position: string, marker: Marker): Marker
+ }
+
+ // marker.js
+ // TODO: check register method marker
+ class Marker extends Container {
+ constructor()
+
+ node: SVGMarkerElement
+
+ ref(x: string | number, y: string | number): this
+ update(block: (marker: Marker) => void): this
+ toString(): string
+ orient(orientation: 'auto' | 'auto-start-reverse' | number | Number): this
+ orient(): string
+ }
+ // mask.js
+ class Mask extends Container {
+ constructor(node?: SVGMaskElement)
+ constructor(attr: object)
+ node: SVGMaskElement
+ remove(): this
+ targets(): List<Element>
+ }
+
+ // path.js
+ class Path extends Shape {
+ constructor(attr: PathAttr)
+ constructor(node?: SVGPathElement)
+
+ node: SVGPathElement
+
+ morphArray: PathArray
+ array(): PathArray
+ plot(): PathArray
+ plot(d: PathArrayAlias): this
+ marker(
+ position: string,
+ width?: number,
+ height?: number,
+ block?: (marker: Marker) => void
+ ): this
+ marker(position: string, marker: Marker): this
+
+ // sugar.js
+ length(): number
+ pointAt(length: number): { x: number; y: number }
+ text(text: string): TextPath
+ text(text: Text): TextPath
+ targets(): List<Element>
+ }
+
+ // pattern.js
+ class Pattern extends Container {
+ url(): string
+ url(...rest: any[]): never
+ update(block: (pattern: Pattern) => void): this
+ toString(): string
+ }
+
+ // poly.js
+ interface poly {
+ array(): PointArray
+ plot(): PointArray
+ plot(p: PointArrayAlias): this
+ clear(): this
+ move(x: number, y: number): this
+ size(width: number, height?: number): this
+ }
+
+ // pointed.js
+ interface pointed {
+ x(): number
+ x(x: number): this
+ y(): number
+ y(y: number): this
+ height(): number
+ height(h: number): this
+ width(): number
+ width(w: number): this
+ }
+
+ class Polyline extends Shape implements poly, pointed {
+ constructor(node?: SVGPolylineElement)
+ constructor(attr: PolyAttr)
+
+ node: SVGPolylineElement
+
+ array(): PointArray
+ plot(): PointArray
+ plot(p: PointArrayAlias): this
+ x(): number
+ x(x: number): this
+ y(): number
+ y(y: number): this
+ height(): number
+ height(h: number): this
+ width(): number
+ width(w: number): this
+ move(x: number, y: number): this
+ size(width: number, height?: number): this
+ marker(
+ position: string,
+ width?: number,
+ height?: number,
+ block?: (marker: Marker) => void
+ ): Marker
+ marker(position: string, marker: Marker): Marker
+ }
+
+ class Polygon extends Shape implements poly, pointed {
+ constructor(node?: SVGPolygonElement)
+ constructor(attr: PolyAttr)
+
+ node: SVGPolygonElement
+ array(): PointArray
+ plot(): PointArray
+ plot(p: PointArrayAlias): this
+ x(): number
+ x(x: number): this
+ y(): number
+ y(y: number): this
+ height(): number
+ height(h: number): this
+ width(): number
+ width(w: number): this
+ move(x: number, y: number): this
+ size(width: number, height?: number): this
+ marker(
+ position: string,
+ width?: number,
+ height?: number,
+ block?: (marker: Marker) => void
+ ): Marker
+ marker(position: string, marker: Marker): Marker
+ }
+
+ class Rect extends Shape {
+ constructor(node?: SVGRectElement)
+ constructor(attr: RectAttr)
+ node: SVGRectElement
+ radius(x: number, y?: number): this
+ }
+
+ // shape.js
+ class Shape extends Element {}
+
+ // sugar.js
+ interface StrokeData {
+ color?: string
+ width?: number
+ opacity?: number
+ linecap?: string
+ linejoin?: string
+ miterlimit?: number
+ dasharray?: string
+ dashoffset?: number
+ }
+
+ interface FillData {
+ color?: string
+ opacity?: number
+ rule?: string
+ }
+
+ interface FontData {
+ family?: string
+ size?: NumberAlias
+ anchor?: string
+ leading?: NumberAlias
+ weight?: string
+ style?: string
+ }
+ // textable.js
+ interface Textable {
+ plain(text: string): this
+ length(): number
+ }
+
+ // text.js
+ class Text extends Shape implements Textable {
+ constructor(node?: SVGElement)
+ constructor(attr: TextAttr)
+
+ clone(): this
+ text(): string
+ text(text: string): this
+ text(block: (text: this) => void): this
+ leading(): Number
+ leading(leading: NumberAlias): this
+ rebuild(enabled: boolean): this
+ build(enabled: boolean): this
+ clear(): this
+ plain(text: string): this
+ length(): number
+ get(i: number): Tspan
+ path(): TextPath
+ path(d: PathArrayAlias | Path): TextPath
+ track(): Element
+ ax(): string
+ ax(x: string): this
+ ay(): string
+ ay(y: string): this
+ amove(x: number, y: number): this
+ textPath(): TextPath
+
+ // main.js, from extend/copy prototypes from Tspan
+ tspan(text: string): Tspan
+ tspan(block: (tspan: Tspan) => void): this
+ }
+
+ class Tspan extends Text implements Textable {
+ constructor(node?: SVGElement)
+ constructor(attr: TextAttr)
+ dx(): number
+ dx(x: NumberAlias): this
+ dy(): number
+ dy(y: NumberAlias): this
+ newLine(): this
+ tspan(text: string): Tspan
+ tspan(block: (tspan: Tspan) => void): this
+ length(): number
+ text(): string
+ text(text: string): this
+ text(block: (text: this) => void): this
+ plain(text: string): this
+ }
+
+ // textpath.js
+ class TextPath extends Text {
+ constructor()
+ constructor(attr: TextPathAttr)
+
+ array(): Array<any>
+ plot(): PathArray
+ plot(d: string): this
+ track(): Path
+ }
+
+ // style.js
+ class Style extends Element {
+ constructor(node: SVGElement, attr?: StylingAttr)
+ addText(text: string): this
+ font(a: object): this
+ font(a: string, v: string | number): this
+ font(a: string): string
+ rule(selector: string, obj: any): this
+ }
+
+ // use.js
+ class Use extends Shape {
+ use(element: string, file?: string): this
+ }
+
+ // viewbox.js
+ type ViewBoxAlias = ViewBoxLike | number[] | string | Element
+
+ interface ViewBox {
+ x: number
+ y: number
+ width: number
+ height: number
+ toString(): string
+ at(pos: number): ViewBox
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-03 07:32:57 +0000