Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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> { }
- 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, events: string, cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;
- function on(el: Node, events: Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;
- function off(el: Node, events?: string, cb?: EventListener | number): void;
- function off(el: Node, events?: Event[], cb?: EventListener | number): void;
- function dispatch(node: Node, event: Event, data?: Object): Event
- function find(query: QuerySelector): List<Element>
- function findOne(query: QuerySelector): Element
- let utils: {
- map(array: any[], block: Function): any;
- filter(array: any[], block: Function): any;
- radians(d: number): number;
- degrees(r: number): number;
- filterSVGElements: HTMLElement[]
- }
- 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?: string): (t: number, beforeFlag?: boolean) => number;
- }
- let regex: {
- delimiter: RegExp;
- dots: RegExp;
- hex: RegExp;
- hyphen: RegExp;
- isBlank: RegExp;
- isCss: RegExp;
- isHex: RegExp;
- isImage: RegExp;
- isNumber: RegExp;
- isPathLetter: RegExp;
- isPercent: 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 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;
- at(pos: number): PointArray;
- 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
- at(pos: number): PathArray
- 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 {
- flip?: FlipType
- skew?: ArrayXY | number
- skewX?: number
- skewY?: number
- scale?: ArrayXY | number
- scaleX?: number
- scaleY?: number
- shear?: number
- theta?: number
- origin?: CoordinateXY
- 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;
- }
- // List.js
- interface List<T> extends Array<T> {
- each(fn: Function): void
- each(...args: any[]): void
- 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): 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)
- brightness(): number;
- morph(color: ColorAlias): Color;
- at(pos: number): Color;
- 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
- }
- // 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: Box): 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
- class Timeline extends EventTarget {
- constructor()
- constructor(fn: Function)
- schedule(runner?: Runner, delay?: number, when?: string): this
- unschedule(runner: Runner): this
- getEndTime(): number
- updateTime(): 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
- class Runner {
- constructor();
- constructor(options: Function);
- constructor(options: number);
- constructor(options: object);
- 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: number, 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
- 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: Function): 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
- 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
- }
- // use with parent query
- type ParentTypeAlias = typeof Svg | typeof G | typeof A;
- // use with putIn
- type ParentClassAlias = Svg | G | A;
- /**
- * Just fancy type alias to refer to css query selector.
- */
- type QuerySelector = string
- // cannot really avoid using anonymous any string as typescript does not provide
- // runtime type check for example, QuerySelector should contain . or # at least
- // Important: this type alias is provided an overview of how value look as a string
- type ParentQueryAlias = ParentElement | keyof HTMLElementTagNameMap | ParentTypeAlias | QuerySelector
- type ParentQueryMapping<T> =
- T extends Tspan | TextPath ? ParentQueryAlias | TextType | ClipPathType | Text | ClipPath | Dom :
- T extends Shape ? ParentQueryAlias | ClipPathType | ClipPath | Dom :
- T extends Element ? ParentQueryAlias | Dom : keyof HTMLElementTagNameMap | Dom
- type ParentQueryResultMapping<T> =
- T extends Tspan | TextPath ? ParentClassAlias | Text | ClipPath | Dom :
- T extends Circle ? ParentClassAlias | Text | ClipPath | Mask | Dom :
- T extends Shape ? ParentClassAlias | ClipPath | Dom : ParentClassAlias | Dom
- type PutInMapping<T> =
- T extends Svg ? ParentClassAlias | Dom | HTMLElement | string :
- T extends Shape ? ParentClassAlias | ClipPath | string :
- T extends Element ? ParentClassAlias | string : HTMLElement | string
- type PutInResultMapping<T> =
- T extends Svg ? ParentTypeAlias | Dom :
- T extends Element ? ParentTypeAlias : Dom
- 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): this
- children(): List<Element>;
- clear(): this;
- clone(): 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;
- /**
- * Get the parent of current element. The input query can be given with string, object type or none (undefined).
- * The input is vary based on the implement in hierarchy of SVG.JS element or dom.
- * 1. If The input is a string, the string value must be a valid HTML element tag name or svg tag name. e.g "svg" or "g" or "div"
- * 2. If the given input is an object type then only SVG.JS object type is accept. e.g Dom, Svg or G
- * 3. if the given input query is undefined then the element will return the closest parent in Dom hierarchy
- *
- * For more information see ParentQueryMapping.
- * @param type can be either string, object type or undefined.
- */
- parent<T extends this>(type?: ParentQueryMapping<T>): ParentQueryResultMapping<T>;
- put(element: Element, i?: number): Element;
- /**
- * Put the element into the given parent element. The input parent element can be vary base on the class implementation.
- * 1. If the current class is a Dom then parent input is only accept a valid HTML element or a valid string id of HTML element
- * 2. If the current class is an Svg then parent input can only Dom, Svg, G, A, a valid HTML element and a valid string id of HTML element
- *
- * For more information see PutInMapping.
- * @param parent an object of SVG.JS Dom or implement container or a string id or a valid HTML element object.
- */
- putIn<T extends this>(parent: PutInMapping<T>): PutInResultMapping<T>;
- 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: Object[]): Object;
- // prototype extend Selector in selector.js
- find(query: string): List<Element>
- findOne(query: string): Dom
- // 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(): CSSStyleDeclaration;
- css(style: string): string
- css(style: string, val: any): this
- css(style: CSSStyleDeclaration): this
- css(style: string[]): CSSStyleDeclaration;
- 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;
- 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;
- 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
- }
- 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: HTMLElement | SVGElement;
- type: string;
- dom: any
- addClass(name: string): this;
- after(element: Element): Element;
- animate(duration?: number, ease?: string, delay?: number): Runner;
- animate(info: { ease?: string; duration?: number; delay?: number }): 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(): 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(): number;
- 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;
- 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 element up until html Document.
- */
- parents(): List<Element>
- /**
- * List the parent by hierarchy until the given parent type or object. 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: string | null | T | HTMLElement): 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;
- 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(): number;
- width(width: NumberAlias): this;
- x(): number;
- x(x: NumberAlias): this;
- y(): number;
- 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;
- }
- // image.js
- class Image extends Shape {
- constructor(node?: SVGImageElement);
- constructor(attr: Object);
- node: SVGImageElement;
- load(url?: string): 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;
- }
- // 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: NumberAlias, y: NumberAlias): 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;
- 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 {
- constructor(node?: SVGPolygonElement);
- constructor(attr: PolyAttr)
- node: SVGPolygonElement;
- array(): PointArray;
- plot(): PointArray;
- plot(p: PointArrayAlias): 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;
- textPath(): Element;
- ax(): string
- ax(x: string): this
- ay(): string
- ay(y: string): this
- amove(x: number, y: number): this
- // 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
- }
- // use.js
- class Use extends Shape {
- element(element: string, file?: string): this;
- }
- // viewbox.js
- type ViewBoxAlias = ViewBoxLike | number[] | string | Element;
- interface ViewBox {
- x: number;
- y: number;
- width: number;
- height: number;
- zoom?: number;
- toString(): string;
- morph(source: ViewBoxAlias): ViewBox;
- morph(x: number, y: number, width: number, height: number): ViewBox;
- at(pos: number): ViewBox;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement