+declare class BuiltInArray<T> extends Array<T> { }\r
+\r
declare module "@svgdotjs/svg.js" {\r
\r
function SVG(): Svg;\r
- function SVG(id: string): Svg;\r
- function SVG(domElement: HTMLElement): Svg;\r
-\r
- let ns: string;\r
- let xmlns: string;\r
- let xlink: string;\r
- let svgjs: string;\r
+ function SVG(selector: QuerySelector): Element;\r
+ function SVG<T>(el: T): SVGTypeMapping<T>\r
+ function SVG(domElement: HTMLElement): Element;\r
\r
- let did: number;\r
function eid(name: string): string;\r
function get(id: string): Element;\r
\r
function prepare(element: HTMLElement): void;\r
function getClass(name: string): Element;\r
\r
+ function on(el: Node, events: string, cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;\r
+ function on(el: Node, events: Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): void;\r
+\r
+ function off(el: Node, events?: string, cb?: EventListener | number): void;\r
+ function off(el: Node, events?: Event[], cb?: EventListener | number): void;\r
+\r
+ function dispatch(node: Node, event: Event, data?: Object): Event\r
+\r
+ function find(query: QuerySelector): List<Element>\r
+ function findOne(query: QuerySelector): Element\r
+\r
let utils: {\r
map(array: any[], block: Function): any;\r
filter(array: any[], block: Function): any;\r
'font-size': number;\r
'font-family': string;\r
'text-anchor': string;\r
+ },\r
+ timeline: {\r
+ duration: number;\r
+ ease: string;\r
+ delay: number;\r
}\r
}\r
let easing: {\r
'<>'(pos: number): number;\r
'>'(pos: number): number;\r
'<'(pos: number): number;\r
+ bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;\r
+ steps(steps: number, stepPosition?: string): (t: number, beforeFlag?: boolean) => number;\r
}\r
+\r
let regex: {\r
delimiter: RegExp;\r
dots: RegExp;\r
whitespace: RegExp;\r
}\r
\r
+ let namespaces: {\r
+ ns: string;\r
+ xmlns: string;\r
+ xlink: string;\r
+ svgjs: string;\r
+ }\r
+\r
interface LinkedHTMLElement extends HTMLElement {\r
instance: Element;\r
}\r
\r
// array.js\r
- type ArrayAlias = SVGArray | number[] | string;\r
-\r
- class SVGArray extends Array {\r
- constructor(array?: ArrayAlias, fallback?: number[]);\r
- value: number[];\r
- morph(array: number[]): this;\r
- settle(): number[];\r
- at(pos: NumberAlias): SVGArray;\r
+ // ************ Standard object/option/properties declaration ************\r
+\r
+ type AttrNumberValue = number | "auto"\r
+\r
+ /**\r
+ * The SVG core attributes are all the common attributes that can be specified on any SVG element.\r
+ * More information see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core\r
+ */\r
+ interface CoreAttr {\r
+ id?: string\r
+ lang?: string\r
+ tabindex?: number\r
+ "xml:lang"?: string\r
+ }\r
+\r
+ /**\r
+ * The SVG styling attributes are all the attributes that can be specified on any SVG element to apply CSS styling effects.\r
+ * More information see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling\r
+ */\r
+ interface StylingAttr {\r
+ /**\r
+ * a valid HTML class name\r
+ */\r
+ class?: string\r
+ /**\r
+ * SVG css style string format. It all can be find here https://www.w3.org/TR/SVG/styling.html#StyleAttribute\r
+ */\r
+ style?: string\r
+ }\r
+\r
+ /**\r
+ * A global attribute that can be use with any svg element\r
+ */\r
+ interface GlobalAttr extends CoreAttr, StylingAttr { }\r
+\r
+ // TODO: implement SVG Presentation Attributes. See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation\r
+\r
+ interface PathBaseAttr {\r
+ pathLength?: number\r
+ }\r
+\r
+ interface RadiusAxisAttr {\r
+ rx?: AttrNumberValue\r
+ ry?: AttrNumberValue\r
+ }\r
+\r
+ /**\r
+ * SVG Rectangle attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect\r
+ */\r
+ interface RectAttr extends RadiusAxisAttr, PathBaseAttr, GlobalAttr {\r
+ x?: number\r
+ y?: number\r
+ width: AttrNumberValue\r
+ height: AttrNumberValue\r
+ }\r
+\r
+ /**\r
+ * SVG Line attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line\r
+ */\r
+ interface LineAttr extends PathBaseAttr, GlobalAttr {\r
+ x1?: number\r
+ y1?: number\r
+ x2?: number\r
+ y2?: number\r
+ }\r
+\r
+ /**\r
+ *\r
+ */\r
+ interface ShapeElementStyle {\r
+\r
+ }\r
+\r
+ interface PathLikeElementStyle {\r
+\r
+ }\r
+\r
+ interface TextElementStyle {\r
+\r
+ }\r
+\r
+ interface GraphicElementStyle {\r
+\r
+ }\r
+\r
+ interface ContainerElementStyle {\r
+\r
+ }\r
+\r
+ interface CoordinateSystemElementStyle {\r
+\r
+ }\r
+\r
+ type SVGStyleDeclaration = ShapeElementStyle | PathLikeElementStyle | TextElementStyle | GraphicElementStyle | ContainerElementStyle | CoordinateSystemElementStyle\r
+\r
+ /**\r
+ * A generic Dom Box object.\r
+ * Notice: Object is still in experiment state and document is not complete (Draft)\r
+ * See https://developer.mozilla.org/en-US/docs/Web/API/DOMRect\r
+ */\r
+ interface DOMRect {\r
+ x?: number\r
+ y?: number\r
+ width?: number\r
+ height?: number\r
+ top?: number\r
+ right?: number\r
+ bottom?: number\r
+ left?: number\r
+ }\r
+\r
+ // ************ SVG.JS generic Conditional Types declaration ************\r
+\r
+ type SVGTypeMapping<T> =\r
+ T extends HTMLElement ? Dom :\r
+ T extends SVGSVGElement ? Svg :\r
+ T extends SVGRectElement ? Rect :\r
+ T extends SVGCircleElement ? Circle :\r
+ T extends SVGPathElement ? Path :\r
+ T extends SVGTextElement ? Text :\r
+ T extends SVGTextPathElement ? TextPath :\r
+ T extends SVGGElement ? G :\r
+ T extends SVGLineElement ? Line :\r
+ T extends SVGPolylineElement ? Polyline :\r
+ T extends SVGPolygonElement ? Polygon :\r
+ T extends SVGGradientElement ? Gradient :\r
+ T extends SVGImageElement ? Image :\r
+ T extends SVGEllipseElement ? Ellipse :\r
+ T extends SVGMaskElement ? Mask :\r
+ T extends SVGMarkerElement ? Marker :\r
+ T extends SVGClipPathElement ? ClipPath :\r
+ T extends SVGTSpanElement ? Tspan :\r
+ T extends SVGSymbolElement ? Symbol :\r
+ T extends SVGUseElement ? Use : Element\r
+\r
+ // element type as string\r
+ type SvgType = "svg"\r
+ type ClipPathType = "clipPath"\r
+ type TextType = "text"\r
+ type GType = "g"\r
+ type AType = "a"\r
+\r
+ type ParentElement = SvgType | GType | AType\r
+\r
+ type AttrTypeMapping<T> =\r
+ T extends Rect ? RectAttr : GlobalAttr\r
+\r
+ type StyleTypeMapping<T> =\r
+ T extends Element ? SVGStyleDeclaration : CSSStyleDeclaration\r
+\r
+ type ElementAlias = Dom | Svg | Rect | Line | Polygon | Polyline | Ellipse | ClipPath | Use |\r
+ Text | Path | TextPath | Circle | G | Gradient | Image | Element\r
+\r
+ type AttributeReference = "href" | "marker-start" | "marker-mid" | "marker-end" | "mask" |\r
+ "clip-path" | "filter" | "fill"\r
+\r
+ // ************* SVG.JS Type Declaration *************\r
+ // ********** Locate in directory src/types **********\r
+\r
+ // SVGArray.js\r
+ /**\r
+ * Type alias to native array.\r
+ *\r
+ * **Caution**: If argument is a string, generic type must be a number or array of number and\r
+ * the string is format as a concatenate of number separate by comma.\r
+ * This is expensive to build runtime type check for such as case so please use it carefully.\r
+ */\r
+ type ArrayAlias<T> = BuiltInArray<T> | T[] | string\r
+\r
+ class Array<T> extends BuiltInArray<T> {\r
+ constructor(array?: ArrayAlias<T>);\r
+\r
+ /**\r
+ * Return array of generic T however it's flatten array by 1 level as it using `apply` function.\r
+ * For example: if T is a `number[]` which is the number of 2 dimension `Array<number[]>` the result will be `number[]`\r
+ */\r
+ toArray(): any[]\r
+ /**\r
+ * return a concatenated string of each element separated by space\r
+ */\r
+ toString(): string\r
+ valueOf(): T[]\r
+ clone(): Array<T>\r
+ toSet(): Set<T>\r
+ parse(a?: ArrayAlias<T>): T[]\r
+ to(a: any): Morphable;\r
+ }\r
+\r
+ // point.js\r
+ class Point {\r
+ x: number;\r
+ y: number;\r
+ constructor();\r
+ constructor(position: CoordinateXY);\r
+ constructor(point: Point);\r
+ constructor(x: number, y?: number);\r
+ clone(): Point;\r
+ transform(matrix: Matrix): this;\r
+ transformO(matrix: Matrix): this;\r
+ toArray(): ArrayXY;\r
+ }\r
+\r
+ // pointArray.js\r
+ class PointArray extends Array<ArrayXY> {\r
+ constructor();\r
+ constructor(array?: ArrayAlias<ArrayXY> | number[]);\r
+ // Note: override constructor from SVGArray to allow array of number\r
+ new(array?: ArrayAlias<ArrayXY> | number[]);\r
+\r
+ toLine(): LineAttr;\r
+ at(pos: number): PointArray;\r
+ transform(m: Matrix | MatrixLike): PointArray\r
+ move(x: number, y: number): this;\r
+ size(width: number, height: number): this;\r
+ bbox(): Box;\r
+ to(a: any): Morphable;\r
toString(): string;\r
- valueOf(): number[];\r
- parse(array: ArrayAlias): number[];\r
- reverse(): this;\r
- clone(): SVGArray;\r
}\r
\r
- class Dom {\r
- constructor(element: string, inherit?: any);\r
- add(element: Element, i?: number): Element;\r
- addTo(parent: Dom): this;\r
- children(): Element[];\r
- clear(): this;\r
- clone(): this;\r
- each(block: (index: number, children: Element[]) => void, deep?: boolean): this;\r
- element(element: string, inherit?: Object): this;\r
- first(): Element;\r
- get(i: number): Element;\r
- getEventHolder(): LinkedHTMLElement;\r
- getEventTarget(): LinkedHTMLElement;\r
- has(element: Element): boolean;\r
- id(id?: string): string;\r
- index(element: Element): number;\r
- last(): Element;\r
- matches(selector: string): any;\r
- parent(type?: ParentTypeAlias): Dom | HTMLElement;\r
- put(element: Element, i?: number): Element;\r
- putIn(parent: Dom): Dom;\r
- remove(): this;\r
- removeElement(element: Element): this;\r
- replace(element: Dom): Dom;\r
- svg(): string;\r
+ // SVGNumber.js\r
+ type NumberUnit = [number, string]\r
+\r
+ class Number {\r
+ constructor();\r
+ constructor(value: Number);\r
+ constructor(value: string);\r
+ constructor(value: number, unit?: any);\r
+ constructor(n: NumberUnit);\r
+\r
+ value: number\r
+ unit: any\r
+\r
toString(): string;\r
- words(text: string): this;\r
- writeDataToDom(): this;\r
+ toJSON(): Object; // same as toString\r
+ toArray(): NumberUnit\r
+ valueOf(): number;\r
+ plus(number: NumberAlias): Number;\r
+ minus(number: NumberAlias): Number;\r
+ times(number: NumberAlias): Number;\r
+ divide(number: NumberAlias): Number;\r
+ convert(unit: string): Number;\r
+ to(a: any): Morphable\r
+ }\r
+\r
+ type NumberAlias = Number | number | string;\r
+\r
+ // PathArray.js\r
+\r
+ type LineCommand = ['M' | 'm' | 'L' | 'l', number, number] | ['H' | 'h' | 'V' | 'v', number] | ['Z' | 'z']\r
+\r
+ type CurveCommand =\r
+ // Bezier Curves\r
+ ['C' | 'c', number, number, number, number, number, number] |\r
+ ['S' | 's' | 'Q' | 'q', number, number, number, number] | ['T' | 't', number, number] |\r
+ // Arcs\r
+ ['A' | 'a', number, number, number, number, number, number, number]\r
+\r
+ type PathCommand = LineCommand | CurveCommand\r
+\r
+ type PathArrayAlias = PathArray | PathCommand[] | (string | number)[] | string;\r
+\r
+ class PathArray extends Array<PathCommand> {\r
+ constructor();\r
+ constructor(d: ArrayAlias<PathCommand> | PathArrayAlias);\r
+\r
+ move(x: number, y: number): this;\r
+ size(width: number, height: number): this;\r
+ equalCommands(other: PathArray): boolean\r
+ morph(pa: PathArray): this\r
+ at(pos: number): PathArray\r
+ parse(array: ArrayAlias<PathCommand> | PathArrayAlias): PathCommand[];\r
+ bbox(): Box;\r
+ to(a: any): Morphable\r
}\r
\r
- // boxes.js\r
- class Box {\r
+ // Matrix.js\r
+ interface TransformData {\r
+ origin?: number[];\r
+ scaleX?: number;\r
+ scaleY?: number;\r
+ shear?: number;\r
+ rotate?: number;\r
+ translateX?: number;\r
+ translateY?: number;\r
+ originX?: number;\r
+ originY?: number;\r
+ }\r
+\r
+ interface MatrixLike {\r
+ a?: number;\r
+ b?: number;\r
+ c?: number;\r
+ d?: number;\r
+ e?: number;\r
+ f?: number;\r
+ }\r
+\r
+ interface MatrixExtract extends TransformData, MatrixLike { }\r
+\r
+ type FlipType = 'both' | 'x' | 'y' | boolean\r
+ type ArrayXY = [number, number]\r
+ type CoordinateXY = ArrayXY | { x: number, y: number }\r
+\r
+ interface MatrixTransformParam {\r
+ flip?: FlipType\r
+ skew?: ArrayXY | number\r
+ skewX?: number\r
+ skewY?: number\r
+ scale?: ArrayXY | number\r
+ scaleX?: number\r
+ scaleY?: number\r
+ shear?: number\r
+ theta?: number\r
+ origin?: CoordinateXY\r
+ around?: CoordinateXY\r
+ ox?: number\r
+ originX?: number\r
+ oy?: number\r
+ originY?: number\r
+ position?: CoordinateXY\r
+ px?: number\r
+ positionX?: number\r
+ py?: number\r
+ positionY?: number\r
+ translate?: CoordinateXY\r
+ tx?: number\r
+ translateX?: number\r
+ ty?: number\r
+ translateY?: number\r
+ relative?: CoordinateXY\r
+ rx?: number\r
+ relativeX?: number\r
+ ry?: number\r
+ relativeY?: number\r
+ }\r
+\r
+ type MatrixAlias = MatrixLike | TransformData | MatrixTransformParam | number[] | Element | string;\r
+\r
+ class Matrix implements MatrixLike {\r
+ constructor();\r
+ constructor(source: MatrixAlias);\r
+ constructor(a: number, b: number, c: number, d: number, e: number, f: number);\r
+\r
+ a: number;\r
+ b: number;\r
+ c: number;\r
+ d: number;\r
+ e: number;\r
+ f: number;\r
+\r
+ clone(): Matrix;\r
+ transform(o: MatrixLike | MatrixTransformParam): Matrix\r
+ compose(o: MatrixExtract): Matrix\r
+ decompose(cx?: number, cy?: number): MatrixExtract\r
+ multiply(m: MatrixAlias | Matrix): Matrix;\r
+ multiplyO(m: MatrixAlias | Matrix): this;\r
+ lmultiply(m: MatrixAlias | Matrix): Matrix;\r
+ lmultiplyO(m: MatrixAlias | Matrix): this;\r
+ inverse(): Matrix;\r
+ inverseO(): this;\r
+ translate(x?: number, y?: number): Matrix;\r
+ translateO(x?: number, y?: number): this;\r
+ scale(x: number, y?: number, cx?: number, cy?: number): Matrix;\r
+ scaleO(x: number, y?: number, cx?: number, cy?: number): this;\r
+ rotate(r: number, cx?: number, cy?: number): Matrix;\r
+ rotateO(r: number, cx?: number, cy?: number): this;\r
+ flip(a: NumberAlias, offset?: number): Matrix;\r
+ flipO(a: NumberAlias, offset?: number): this;\r
+ flip(offset?: number): Matrix;\r
+ shear(a: number, cx?: number, cy?: number): Matrix;\r
+ shearO(a: number, cx?: number, cy?: number): this;\r
+ skew(y?: number, cx?: number, cy?: number): Matrix;\r
+ skewO(y?: number, cx?: number, cy?: number): this;\r
+ skew(x: number, y?: number, cx?: number, cy?: number): Matrix;\r
+ skewX(x: number, cx?: number, cy?: number): Matrix;\r
+ skewY(y: number, cx?: number, cy?: number): Matrix;\r
+ around(cx?: number, cy?: number, matrix?: Matrix): Matrix;\r
+ aroundO(cx?: number, cy?: number, matrix?: Matrix): this;\r
+ equals(m: Matrix): boolean\r
+ toString(): string;\r
+ toArray(): number[];\r
+ valueOf(): MatrixLike;\r
+ to(a: any): Morphable;\r
+ }\r
+\r
+ // List.js\r
+ interface List<T> extends Array<T> {\r
+ each(fn: Function): void\r
+ each(...args: any[]): void\r
+ toArray(): T[]\r
+ }\r
+\r
+ // EventTarget.js\r
+ interface EventTarget {\r
+ events: Object\r
+\r
+ addEventListener(): void\r
+ dispatch(event: Event | string, data?: object): Event\r
+ dispatchEvent(event: Event): boolean\r
+ fire(event: Event | string, data?: object): this\r
+ getEventHolder(): this | Node\r
+ getEventTarget(): this | Node\r
+\r
+ on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;\r
+ off(events?: string | Event[], cb?: EventListener | number): this;\r
+\r
+ removeEventListener(): void\r
+ }\r
+\r
+ // Color.js\r
+ interface ColorLike {\r
+ r: number;\r
+ g: number;\r
+ b: number;\r
+\r
+ x: number;\r
+ y: number;\r
+ z: number;\r
+\r
+ h: number;\r
+ s: number;\r
+ l: number;\r
+ a: number;\r
+ c: number;\r
+\r
+ m: number;\r
+ k: number;\r
+\r
+ space: string;\r
+ }\r
+\r
+ type ColorAlias = string | ColorLike;\r
+\r
+ class Color implements ColorLike {\r
+ r: number;\r
+ g: number;\r
+ b: number;\r
+\r
+ x: number;\r
+ y: number;\r
+ z: number;\r
+\r
+ h: number;\r
+ s: number;\r
+ l: number;\r
+ a: number;\r
+ c: number;\r
+\r
+ m: number;\r
+ k: number;\r
+\r
+ space: string;\r
+ constructor()\r
+ constructor(color: ColorAlias, space?: string);\r
+ constructor(a: number, b: number, c: number, space?: string)\r
+ constructor(a: number, b: number, c: number, d: number, space?: string)\r
+ constructor(a: number[], space?: string)\r
+\r
+ brightness(): number;\r
+ morph(color: ColorAlias): Color;\r
+ at(pos: number): Color;\r
+\r
+ rgb(): Color\r
+ lab(): Color\r
+ xyz(): Color\r
+ lch(): Color\r
+ hsl(): Color\r
+ cmyk(): Color\r
+ toHex(): string\r
+ toString(): string\r
+ toRgb(): string\r
+ toArray(): any[]\r
+\r
+ to(a: any): Morphable\r
+ fromArray(a: any): this\r
+ }\r
+\r
+ // Box.js\r
+ interface BoxLike {\r
+ height?: number;\r
+ width?: number;\r
+ y?: number;\r
+ x?: number;\r
+ cx?: number;\r
+ cy?: number;\r
+ w?: number;\r
+ h?: number;\r
+ x2?: number;\r
+ y2?: number;\r
+ }\r
+\r
+ class Box implements BoxLike {\r
height: number;\r
width: number;\r
y: number;\r
h: number;\r
x2: number;\r
y2: number;\r
- merge(box: Box): Box;\r
- transform(m: Matrix): Box\r
+\r
+ constructor();\r
constructor(source: string);\r
- constructor(source: []);\r
- constructor(source: object);\r
+ constructor(source: number[]);\r
+ constructor(source: DOMRect);\r
constructor(x: number, y: number, width: number, height: number);\r
+\r
+ merge(box: Box): Box;\r
+ transform(m: Matrix): Box\r
addOffset(): this;\r
toString(): string;\r
toArray(): number[];\r
isNulled(): boolean;\r
+ to(v: MorphValueLike): Morphable;\r
}\r
\r
- // clip.js\r
- class ClipPath extends Container {\r
+ // Morphable.js\r
+ type MorphValueLike = string | number | ObjectBag | NonMorphable | MatrixExtract | Array<any> | any[]\r
+\r
+ class Morphable {\r
constructor();\r
- targets: Element[];\r
- remove(): this;\r
+ constructor(st: Stepper);\r
+\r
+ from(): MorphValueLike\r
+ from(v: MorphValueLike): this\r
+ to(): MorphValueLike\r
+ to(v: MorphValueLike): this\r
+ type(): any\r
+ type(t: any): this\r
+ stepper(): Stepper\r
+ stepper(st: Stepper): this\r
+ done(): boolean\r
+ at(pos: number): any\r
}\r
\r
- // color.js\r
- interface ColorLike {\r
- r: number;\r
- g: number;\r
- b: number;\r
+ class ObjectBag {\r
+ constructor();\r
+ constructor(a: Object);\r
+ valueOf(): Object\r
+ toArray(): Object[]\r
+\r
+ to(a: Object): Morphable\r
+ fromArray(a: any[]): this\r
}\r
\r
- type ColorAlias = string | ColorLike;\r
+ class NonMorphable {\r
+ constructor(a: Object)\r
+ valueOf(): Object\r
+ toArray(): Object[]\r
\r
- class Color implements ColorLike {\r
- r: number;\r
- g: number;\r
- b: number;\r
+ to(a: Object): Morphable\r
+ fromArray(a: Object): this\r
+ }\r
+\r
+ // TODO: check & verify ??????\r
+ class TransformBag {\r
+ constructor()\r
+ constructor(a: number[])\r
+ constructor(a: TransformData)\r
+ defaults: TransformData\r
+ toArray(): number[]\r
+ to(t: TransformData): Morphable\r
+ fromArray(t: number[]): this\r
+ }\r
+\r
+ interface Stepper {\r
+ done(c?: object): boolean\r
+ }\r
+\r
+ class Ease implements Stepper {\r
+ constructor()\r
+ constructor(fn: string)\r
+ constructor(fn: Function)\r
+\r
+ step(from: number, to: number, pos: number): number\r
+ done(): boolean\r
+ }\r
+\r
+ class Controller implements Stepper {\r
+ constructor(fn?: Function)\r
+ step(current: number, target: number, dt: number, c: number): number\r
+ done(c?: object): boolean\r
+ }\r
+\r
+ // Queue.js\r
+ interface QueueParam {\r
+ value: any\r
+ next?: any\r
+ prev?: any\r
+ }\r
+\r
+ class Queue {\r
constructor();\r
- constructor(color: ColorAlias);\r
+\r
+ push(value: any): QueueParam\r
+ shift(): any\r
+ first(): number\r
+ last(): number\r
+ remove(item: QueueParam): void\r
+ }\r
+\r
+ // Timeline.js\r
+ class Timeline extends EventTarget {\r
+ constructor()\r
+ constructor(fn: Function)\r
+\r
+ schedule(runner?: Runner, delay?: number, when?: string): this\r
+ unschedule(runner: Runner): this\r
+ getEndTime(): number\r
+ updateTime(): this\r
+ play(): this\r
+ pause(): this\r
+ stop(): this\r
+ finish(): this\r
+ speed(speed: number): this\r
+ reverse(yes: boolean): this\r
+ seek(dt: number): this\r
+ time(): number\r
+ time(time: number): this\r
+ source(): Function\r
+ source(fn: Function): this\r
+ }\r
+\r
+ // Runner.js\r
+ interface TimesParam {\r
+ duration: number\r
+ delay: number\r
+ when: number | string\r
+ swing: boolean\r
+ wait: number\r
+ times: number\r
+ }\r
+\r
+ type TimeLike = number | TimesParam | Stepper\r
+\r
+ class Runner {\r
+ constructor();\r
+ constructor(options: Function);\r
+ constructor(options: number);\r
+ constructor(options: object);\r
+ constructor(options: Controller);\r
+\r
+ /**\r
+ * DO NOT USE any of this, it only for testing purpose\r
+ */\r
+ _time: number\r
+ _duration: number\r
+ _wait: number\r
+ _times: number\r
+ _swing: boolean\r
+ _reverse: boolean\r
+\r
+ static sanitise: (duration?: TimeLike, delay?: number, when?: string) => Object\r
+\r
+ element(): Element\r
+ element(el: Element): this\r
+ timeline(): Timeline\r
+ timeline(timeline: Timeline): this\r
+ animate(duration: number, delay?: number, when?: string): this\r
+ schedule(delay: number, when?: string): this\r
+ schedule(timeline: Timeline, delay?: number, when?: string): this\r
+ unschedule(): this\r
+ loop(times?: number, swing?: boolean, wait?: number): this\r
+ loop(times: TimesParam): this\r
+ delay(delay: number): this\r
+\r
+ during(fn: Function): this\r
+ queue(initFn: Function, runFn: Function, retargetFn?: boolean | Function, isTransform?: boolean): this\r
+ after(fn: EventListener): this\r
+ time(): number\r
+ time(time: number): this\r
+ duration(): number\r
+ loops(): number\r
+ loops(p: number): this\r
+ position(): number\r
+ position(p: number): this\r
+ progress(): number\r
+ progress(p: number): this\r
+ step(deta?: number): this\r
+ reset(): this\r
+ finish(): this\r
+ reverse(r?: boolean): this\r
+ ease(fn: Function): this\r
+ active(): boolean\r
+ active(a: boolean): this\r
+ addTransform(m: Matrix): this\r
+ clearTransform(): this\r
+ clearTransformsFromQueue(): void\r
+\r
+ // extends prototypes\r
+ attr(a: string | Object, v?: string): this\r
+ css(s: string | Object, v?: string): this\r
+ styleAttr(type: string, name: string | Object, val?: string): this\r
+ zoom(level: NumberAlias, point: Point): this\r
+ transform(transforms: MatrixTransformParam, relative?: boolean, affine?: boolean): this\r
+ x(x: number): this\r
+ y(y: number): this\r
+ dx(dx: number): this\r
+ dy(dy: number): this\r
+ cx(x: number): this\r
+ cy(y: number): this\r
+ move(x: number, y: number): this\r
+ center(x: number, y: number): this\r
+ size(width: number, height: number): this\r
+ width(width: number): this\r
+ height(height: number): this\r
+ plot(a: Object): this\r
+ plot(a: number, b: number, c: number, d: number): this\r
+ leading(value: number): this\r
+ viewbox(x: number, y: number, width: number, height: number): this\r
+ update(offset: number, color: number, opacity: number): this\r
+ update(o: StopProperties): this\r
+ rx(): number\r
+ rx(rx: number): this\r
+ ry(): number\r
+ ry(ry: number): this\r
+ from(x: NumberAlias, y: NumberAlias): this\r
+ to(x: NumberAlias, y: NumberAlias): this\r
+ }\r
+\r
+ // Animator.js\r
+ let Animator: {\r
+ nextDraw: any\r
+ frames: Queue\r
+ timeouts: Queue\r
+ immediates: Queue\r
+\r
+ timer(): boolean\r
+ frame(fn: Function): Object\r
+ timeout(fn: Function, delay?: number): Object\r
+ immediate(fn: Function): Object\r
+ cancelFrame(o: Object): void\r
+ clearTimeout(o: Object): void\r
+ cancelImmediate(o: Object): void\r
+ }\r
+\r
+ type ParentTypeAlias = Svg | G | A;\r
+\r
+ /**\r
+ * Just fancy type alias to refer to css query selector.\r
+ */\r
+ type QuerySelector = string\r
+\r
+ // cannot really avoid using anonymous any string as typescript does not provide\r
+ // runtime type check for example, QuerySelector should contain . or # at least\r
+ // Important: this type alias is provided an overview of how value look as a string\r
+ type ParentQueryAlias = ParentElement | keyof HTMLElementTagNameMap | ParentTypeAlias | QuerySelector\r
+\r
+ type ParentQueryMapping<T> =\r
+ T extends Tspan | TextPath ? ParentQueryAlias | TextType | ClipPathType | Text | ClipPath | Dom :\r
+ T extends Shape ? ParentQueryAlias | ClipPathType | ClipPath | Dom :\r
+ T extends Element ? ParentQueryAlias | Dom : keyof HTMLElementTagNameMap | Dom\r
+\r
+ type ParentQueryResultMapping<T> =\r
+ T extends Tspan | TextPath ? ParentTypeAlias | Text | ClipPath | Dom :\r
+ T extends Shape ? ParentTypeAlias | ClipPath | Dom : ParentTypeAlias | Dom\r
+\r
+ type PutInMapping<T> =\r
+ T extends Svg ? ParentTypeAlias | Dom | HTMLElement | string :\r
+ T extends Shape ? ParentTypeAlias | ClipPath | string :\r
+ T extends Element ? ParentTypeAlias | string : HTMLElement | string\r
+\r
+ type PutInResultMapping<T> =\r
+ T extends Svg ? ParentTypeAlias | Dom :\r
+ T extends Element ? ParentTypeAlias : Dom\r
+\r
+ class Dom implements EventTarget {\r
+ node: HTMLElement | SVGElement;\r
+ type: string;\r
+\r
+ constructor(node?: HTMLElement, attr?: Object);\r
+ constructor(att: Object);\r
+ add(element: Element, i?: number): this;\r
+ addTo(parent: Dom | HTMLElement | string): this\r
+ children(): List<Element>;\r
+ clear(): this;\r
+ clone(): this;\r
+ each(block: (index: number, children: Element[]) => void, deep?: boolean): this;\r
+ element(element: string, inherit?: Object): this;\r
+ first(): Element;\r
+ get(i: number): Element;\r
+ getEventHolder(): LinkedHTMLElement;\r
+ getEventTarget(): LinkedHTMLElement;\r
+ has(element: Element): boolean;\r
+ id(): string\r
+ id(id: string): this\r
+ index(element: Element): number;\r
+ last(): Element;\r
+ matches(selector: string): boolean;\r
+ /**\r
+ * Get the parent of current element. The input query can be given with string, object type or none (undefined).\r
+ * The input is vary based on the implement in hierarchy of SVG.JS element or dom.\r
+ * 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"\r
+ * 2. If the given input is an object type then only SVG.JS object type is accept. e.g Dom, Svg or G\r
+ * 3. if the given input query is undefined then the element will return the closest parent in Dom hierarchy\r
+ *\r
+ * For more information see ParentQueryMapping.\r
+ * @param type can be either string, object type or undefined.\r
+ */\r
+ parent<T extends this>(type?: ParentQueryMapping<T>): ParentQueryResultMapping<T>;\r
+ put(element: Element, i?: number): Element;\r
+ /**\r
+ * Put the element into the given parent element. The input parent element can be vary base on the class implementation.\r
+ * 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\r
+ * 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\r
+ *\r
+ * For more information see PutInMapping.\r
+ * @param parent an object of SVG.JS Dom or implement container or a string id or a valid HTML element object.\r
+ */\r
+ putIn<T extends this>(parent: PutInMapping<T>): PutInResultMapping<T>;\r
+\r
+ remove(): this;\r
+ removeElement(element: Element): this;\r
+ replace<T extends Dom>(element: T): T;\r
+ round(precision?: number, map?: string[]): this\r
+ svg(): string;\r
+ svg(a: string, outer: true): Element;\r
+ svg(a: string, outer?: false): this;\r
+ svg(a: boolean, outer?: boolean): string;\r
+ svg(a: null | Function, outer?: boolean): string;\r
+\r
toString(): string;\r
- toHex(): string;\r
- toRgb(): string;\r
- brightness(): number;\r
- morph(color: ColorAlias): Color;\r
- at(pos: number): Color;\r
+ words(text: string): this;\r
+ writeDataToDom(): this;\r
+\r
+ // prototype extend Attribute in attr.js\r
+ /**\r
+ * Get the attribute object of SVG Element. The return object will be vary based on\r
+ * the instance itself. For example, G element will only return GlobalAttr where Rect\r
+ * will return RectAttr instead.\r
+ */\r
+ // attr<T extends this>(): AttrTypeMapping<T>;\r
+ attr(): any;\r
+ /**\r
+ * Add or update the attribute from the SVG Element. To remove the attribute from the element set value to null\r
+ * @param name name of attribute\r
+ * @param value value of attribute can be string or number or null\r
+ * @param namespace optional string that define namespace\r
+ */\r
+ attr(name: string, value: any, namespace?: string): this;\r
+ attr(name: string): any;\r
+ attr(obj: Object): this;\r
+ attr(obj: Object[]): Object;\r
+\r
+ // prototype extend Selector in selector.js\r
+ find(query: string): List<Element>\r
+ findOne(query: string): Dom\r
+\r
+ // prototype method register in data.js\r
+ data(a: string): Object | string | number\r
+ data(a: string, v: Object, substain?: boolean): this\r
+ data(a: Object): this\r
+\r
+ // prototype method register in arrange.js\r
+ siblings(): List<Element>\r
+ position(): number\r
+ next(): Element\r
+ prev(): Element\r
+ forward(): this\r
+ backward(): this\r
+ front(): this\r
+ back(): this\r
+ before(el: Element): Element\r
+ after(el: Element): Element\r
+ insertBefore(el: Element): this\r
+ insertAfter(el: Element): this\r
+\r
+ // prototype method register in class.js\r
+ classes(): string[]\r
+ hasClass(name: string): boolean\r
+ addClass(name: string): this\r
+ removeClass(name: string): this\r
+ toggleClass(name: string): this\r
+\r
+ // prototype method register in css.js\r
+ css<T extends this>(): StyleTypeMapping<T>;\r
+ css<T extends this>(style: string[]): StyleTypeMapping<T>;\r
+ css(style: string): string\r
+ css<T extends this>(style: StyleTypeMapping<T>): this\r
+ css(style: string, val: any): this\r
+ show(): this\r
+ hide(): this\r
+ visible(): boolean\r
+\r
+ // memory.js\r
+ remember(name: string, value: any): this;\r
+ remember(name: string): any;\r
+ remember(obj: Object): this;\r
+ forget(...keys: string[]): this;\r
+ forget(): this;\r
+ memory(): Object;\r
+ events: Object\r
+\r
+ addEventListener(): void\r
+ dispatch(event: Event | string, data?: object): Event\r
+ dispatchEvent(event: Event): boolean\r
+ fire(event: Event | string, data?: object): this\r
+ getEventHolder(): this | Node\r
+ getEventTarget(): this | Node\r
+\r
+ on(events: string | Event[], cb: EventListener, binbind?: any, options?: AddEventListenerOptions): this;\r
+ off(events?: string | Event[], cb?: EventListener | number): this;\r
+ removeEventListener(): void\r
+ }\r
+\r
+ // clip.js\r
+ class ClipPath extends Container {\r
+ constructor(node?: SVGClipPathElement);\r
+ constructor(attr: Object);\r
+ node: SVGClipPathElement;\r
+\r
+ targets(): List<Element>;\r
+ remove(): this;\r
}\r
\r
// container.js\r
}\r
\r
class Container extends Element {\r
- circle(size?: number): Circle;\r
+ circle(size?: NumberAlias): Circle;\r
+ circle(size: number, unit: number): Circle;\r
clip(): ClipPath;\r
ellipse(width?: number, height?: number): Ellipse;\r
flatten(parent: Dom, depth?: number): this;\r
gradient(type: string, block?: (stop: Gradient) => void): Gradient;\r
group(): G;\r
image(): Image;\r
- image(href: string, size?: number): Image;\r
- image(href: string, width?: number, height?: number): Image;\r
- line(points: PointArrayAlias): Line;\r
+ image(href?: string, callback?: (e: Event) => void): Image;\r
+ line(points?: PointArrayAlias): Line;\r
line(x1: number, y1: number, x2: number, y2: number): Line;\r
link(url: string): A;\r
marker(width?: number, height?: number, block?: (marker: Marker) => void): Marker\r
mask(): Mask;\r
+ nested(): Svg;\r
path(): Path;\r
path(d: PathArrayAlias): Path;\r
pattern(width?: number, height?: number, block?: (pattern: Pattern) => void): Pattern\r
plain(text: string): Text;\r
- polygon(points: PointArrayAlias): Polygon;\r
- polyline(points: PointArrayAlias): PolyLine;\r
+ polygon(points?: PointArrayAlias): Polygon;\r
+ polyline(points?: PointArrayAlias): Polyline;\r
rect(width?: number, height?: number): Rect;\r
text(block: (tspan: Tspan) => void): Text;\r
text(text: string): Text;\r
ungroup(parent: Dom, depth?: number): this;\r
use(element: Element | string, file?: string): Use;\r
- viewbox(): ViewBox;\r
- viewbox(viewbox: ViewBoxLike): this;\r
+ viewbox(): Box;\r
+ viewbox(viewbox: ViewBoxLike | string): this;\r
viewbox(x: number, y: number, width: number, height: number): this;\r
+ textPath(text: string | Text, path: string | Path): TextPath\r
+ symbol(): Symbol\r
}\r
\r
class Defs extends Container {\r
+ constructor(node?: SVGDefsElement);\r
+ node: SVGDefsElement;\r
marker(width?: number, height?: number, block?: (marker: Marker) => void): Marker\r
}\r
\r
class Svg extends Container {\r
- constructor();\r
+ constructor(svgElement?: SVGSVGElement);\r
constructor(id: string);\r
- constructor(domElement: HTMLElement);\r
+ node: SVGSVGElement;\r
namespace(): this;\r
defs(): Defs;\r
- parent(): HTMLElement;\r
- spof(): this;\r
remove(): this;\r
isRoot(): boolean;\r
}\r
\r
- type ParentTypeAlias = string | Svg | G;\r
- class Element extends Dom {\r
- clipper: ClipPath;\r
- masker: Mask;\r
- node: LinkedHTMLElement;\r
+ interface Sugar {\r
+ fill(): any\r
+ fill(fill: FillData): this;\r
+ fill(color: string): this;\r
+ fill(pattern: Element): this;\r
+ fill(image: Image): this;\r
+ stroke(): any;\r
+ stroke(stroke: StrokeData): this;\r
+ stroke(color: string): this;\r
+ matrix(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number): this;\r
+ matrix(mat: MatrixAlias, b?: number, c?: number, d?: number, e?: number, f?: number): this;\r
+ rotate(degrees: number, cx?: number, cy?: number): this;\r
+ skew(skewX?: number, skewY?: number, cx?: number, cy?: number): this;\r
+ scale(scaleX?: number, scaleY?: number, cx?: number, cy?: number): this;\r
+ translate(x: number, y: number): this;\r
+ shear(lam: Matrix, cx: number, cy: number): this\r
+ relative(x: number, y: number): this\r
+ flip(direction?: string, around?: number): this\r
+ flip(around: number): this\r
+ opacity(): number\r
+ opacity(value: number): this\r
+ font(a: string): string\r
+ font(a: string, v: string | number): this\r
+ font(a: Object): this\r
+ }\r
+\r
+ // Symbol.js\r
+ class Symbol extends Container {\r
+ constructor(svgElement?: SVGSymbolElement);\r
+ constructor(attr: Object)\r
+ node: SVGSymbolElement;\r
+ }\r
+\r
+ class Element extends Dom implements Sugar {\r
+ constructor(node?: SVGElement);\r
+ constructor(attr: Object);\r
+ node: HTMLElement | SVGElement;\r
type: string;\r
+ dom: any\r
\r
addClass(name: string): this;\r
after(element: Element): Element;\r
- animate(duration?: number, ease?: string, delay?: number): Animation;\r
- animate(info: { ease?: string; duration?: number; delay?: number }): Animation;\r
- attr(): object;\r
+ animate(duration?: number, ease?: string, delay?: number): Runner;\r
+ animate(info: { ease?: string; duration?: number; delay?: number }): Runner;\r
+ attr(): any;\r
attr(name: string, value: any, namespace?: string): this;\r
attr(name: string): any;\r
+ attr(obj: string[]): Object;\r
attr(obj: Object): this;\r
- attr(obj: Object[]): Object;\r
back(): this;\r
backward(): this;\r
bbox(): Box;\r
center(x: number, y: number): this;\r
classes(): string[];\r
click(cb: Function): this;\r
+ clipper(): ClipPath;\r
clipWith(element: Element): this;\r
clone(): this;\r
css(): Object;\r
cy(y: number): this;\r
data(name: string, value: any, sustain?: boolean): this;\r
data(name: string): any;\r
+ data(val: Object): this;\r
dblclick(cb: Function): this;\r
defs(): Defs;\r
dmove(x: NumberAlias, y: NumberAlias): this;\r
dx(x: NumberAlias): this;\r
dy(y: NumberAlias): this;\r
event(): Event | CustomEvent;\r
+ fill(): any;\r
fill(color: string): this;\r
fill(fill: { color?: string; opacity?: number, rule?: string }): this;\r
fill(image: Image): this;\r
fire(event: string, data?: any): this;\r
flip(a: string, offset?: number): this;\r
flip(offset?: number): this;\r
+ font(a: Object): this\r
+ font(a: string, v: string | number): this\r
+ font(a: string): string\r
forget(...keys: string[]): this;\r
forget(): this;\r
forward(): this;\r
is(cls: any): boolean;\r
linkTo(url: (link: A) => void): A;\r
linkTo(url: string): A;\r
+ masker(): Mask\r
maskWith(element: Element): this;\r
maskWith(mask: Mask): this;\r
matches(selector: string): boolean;\r
- matrix(a: number, b: number, c: number, d: number, e: number, f: number): this;\r
- matrix(m: MatrixAlias): this;\r
+ matrix(): Matrix;\r
+ matrix(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number): this;\r
+ matrix(mat: MatrixAlias, b?: number, c?: number, d?: number, e?: number, f?: number): this;\r
matrixify(): Matrix;\r
memory(): Object;\r
mousedown(cb: Function): this;\r
move(x: NumberAlias, y: NumberAlias): this;\r
native(): LinkedHTMLElement;\r
next(): Element;\r
- off(event: string, cb?: Function, context?: Object): this;\r
+ off(events?: string | Event[], cb?: EventListener | number): this;\r
on(event: string, cb: Function, context?: Object): this;\r
opacity(): number;\r
opacity(o: number): this;\r
- parents(): Dom[];\r
+ relative(x: number, y: number): this\r
+ shear(lam: Matrix, cx: number, cy: number): this\r
+ toRoot(): Svg;\r
+ /**\r
+ * By default parents will return a list of element up until html Document.\r
+ */\r
+ parents(): List<Element>\r
+ /**\r
+ * List the parent by hierarchy until the given parent type or object. If the given value is null\r
+ * then the result is only provided the list up until Svg root element which mean no Dom parent element is included.\r
+ * @param util a parent type\r
+ */\r
+ parents<T extends Dom>(util: string | null | T | HTMLElement): List<Element>\r
+ /**\r
+ * Get reference svg element based on the given attribute.\r
+ * @param attr a svg attribute\r
+ */\r
+ reference<R extends Dom>(attr: AttributeReference): R | null\r
+\r
point(): Point;\r
- point(position: { x: number, y: number }): Point;\r
- point(position: ArrayPoint): Point;\r
+ point(position: CoordinateXY): Point;\r
+ point(point: Point): Point;\r
point(x: number, y: number): Point;\r
position(): number;\r
prev(): Element;\r
remember(obj: Object): this;\r
remove(): this;\r
removeClass(name: string): this;\r
- replace(element: Element): Element;\r
root(): Svg;\r
rotate(d: number, cx?: number, cy?: number): this;\r
- scale(x: number, y?: number, cx?: number, cy?: number): this;\r
+ scale(x?: number, y?: number, cx?: number, cy?: number): this;\r
screenCTM(): Matrix;\r
setData(data: object): this;\r
show(): this;\r
show(): this;\r
- siblings(): Element[];\r
size(width?: NumberAlias, height?: NumberAlias): this;\r
- skew(x: number, y?: number, cx?: number, cy?: number): this;\r
+ skew(x?: number, y?: number, cx?: number, cy?: number): this;\r
stop(jumpToEnd: boolean, clearQueue: boolean): Animation;\r
+ stop(offset?: NumberAlias | string, color?: NumberAlias, opacity?: NumberAlias): Stop;\r
+ stop(val: { offset?: NumberAlias | string, color?: NumberAlias, opacity?: NumberAlias }): Stop;\r
+ stroke(): any;\r
stroke(color: string): this;\r
stroke(stroke: StrokeData): this;\r
- tbox(): Box;\r
+ timeline(): Timeline\r
+ timeline(tl: Timeline): this\r
toggleClass(name: string): this;\r
toParent(parent: Dom): this;\r
toSvg(): this;\r
touchleave(cb: Function): this;\r
touchmove(cb: Function): this;\r
touchstart(cb: Function): this;\r
- transform(): Transform;\r
- transform(t: Transform, relative?: boolean): Element;\r
+ transform(): MatrixExtract;\r
+ transform(t: MatrixAlias, relative?: boolean): this;\r
translate(x: number, y: number): this;\r
unclip(): this;\r
unmask(): this;\r
untransform(): this;\r
visible(): boolean;\r
- visible(): boolean;\r
width(): number;\r
width(width: NumberAlias): this;\r
x(): number;\r
radius(x: number, y?: number): this;\r
}\r
class Circle extends Shape implements CircleMethods {\r
+ constructor(node?: SVGCircleElement);\r
+ constructor(attr: Object);\r
+ node: SVGCircleElement;\r
+\r
rx(rx: number): this;\r
rx(): this;\r
ry(ry: number): this;\r
radius(x: number, y?: number): this;\r
}\r
class Ellipse extends Shape implements CircleMethods {\r
+ node: SVGEllipseElement;\r
+ constructor(node?: SVGEllipseElement);\r
+ constructor(attr: Object);\r
+\r
rx(rx: number): this;\r
rx(): this;\r
ry(ry: number): this;\r
radius(x: number, y?: number): this;\r
}\r
\r
- // TODO finishs FX\r
interface StopProperties {\r
color?: ColorAlias;\r
- offset?: number;\r
+ offset?: number | string;\r
opacity?: number;\r
}\r
\r
update(opts: StopProperties): this;\r
}\r
class Gradient extends Container {\r
+ constructor(node?: SVGGradientElement);\r
+ constructor(attr: Object);\r
constructor(type: string);\r
+ node: SVGGradientElement;\r
+\r
at(offset?: number, color?: ColorAlias, opacity?: number): Stop;\r
at(opts: StopProperties): Stop;\r
- update(block?: Function): this;\r
url(): string;\r
url(...params: any[]): never;\r
toString(): string;\r
from(x: number, y: number): this;\r
to(x: number, y: number): this;\r
radius(x: number, y?: number): this;\r
+ targets(): List<Element>\r
+ bbox(): Box\r
+ update(block?: (gradient: Gradient) => void): this;\r
}\r
\r
// group.js\r
class G extends Container {\r
+ constructor(node?: SVGGElement);\r
+ constructor(attr: Object);\r
+ node: SVGGElement;\r
gbox(): Box;\r
}\r
\r
// hyperlink.js\r
class A extends Container {\r
+ constructor(node?: SVGAElement);\r
+ constructor(attr: Object);\r
+ node: SVGAElement;\r
to(url: string): this;\r
to(): string;\r
target(target: string): this;\r
\r
// image.js\r
class Image extends Shape {\r
+ constructor(node?: SVGImageElement);\r
+ constructor(attr: Object);\r
+ node: SVGImageElement;\r
load(url?: string): this;\r
}\r
\r
// line.js\r
- interface ArrayPoint extends Array<number> { }\r
- type PointArrayAlias = ArrayPoint[] | number[] | PointArray | string;\r
+ type PointArrayAlias = number[] | ArrayXY[] | PointArray | string;\r
\r
class Line extends Shape {\r
+ constructor(node?: SVGLineElement);\r
+ constructor(attr: Object);\r
+ node: SVGLineElement;\r
array(): PointArray;\r
- plot(points: PointArrayAlias): this;\r
+ plot(): PathArray\r
+ plot(points?: PointArrayAlias): this;\r
plot(x1: number, y1: number, x2: number, y2: number): this;\r
move(x: number, y: number): this;\r
size(width?: number, height?: number): this;\r
}\r
// mask.js\r
class Mask extends Container {\r
- targets: Element[];\r
+ constructor(node?: SVGMaskElement);\r
+ constructor(attr: Object);\r
+ node: SVGMaskElement;\r
+ remove(): this\r
+ targets(): List<Element>;\r
}\r
\r
- // matrix.js\r
- interface MatrixExtract {\r
- x: number;\r
- y: number;\r
- transformedX: number;\r
- transformedY: number;\r
- skewX: number;\r
- skewY: number;\r
- scaleX: number;\r
- scaleY: number;\r
- rotation: number;\r
- a: number;\r
- b: number;\r
- c: number;\r
- d: number;\r
- e: number;\r
- f: number;\r
- matrix: Matrix;\r
- }\r
-\r
- interface MatrixLike {\r
- a: number;\r
- b: number;\r
- c: number;\r
- d: number;\r
- e: number;\r
- f: number;\r
- }\r
-\r
- type MatrixAlias = MatrixLike | number[] | Element | string;\r
-\r
- class Matrix implements MatrixLike {\r
- constructor();\r
- constructor(source: MatrixAlias);\r
- constructor(a: number, b: number, c: number, d: number, e: number, f: number);\r
- a: number;\r
- b: number;\r
- c: number;\r
- d: number;\r
- e: number;\r
- f: number;\r
- extract(): MatrixExtract;\r
- clone(): Matrix;\r
- morph(matrix: Matrix): this;\r
- at(pos: number): Matrix;\r
- multiply(matrix: Matrix): Matrix;\r
- inverse(): Matrix;\r
- translate(x: number, y: number): Matrix;\r
- scale(x: number, y?: number, cx?: number, cy?: number): Matrix;\r
- rotate(r: number, cx?: number, cy?: number): Matrix;\r
- flip(a: string, offset?: number): Matrix;\r
- flip(offset?: number): Matrix;\r
- skew(x: number, y?: number, cx?: number, cy?: number): Matrix;\r
- skewX(x: number, cx?: number, cy?: number): Matrix;\r
- skewY(y: number, cx?: number, cy?: number): Matrix;\r
- around(cx: number, cy: number, matrix: Matrix): Matrix;\r
- native(): SVGMatrix;\r
- toString(): string;\r
- }\r
-\r
- // number.js\r
- class SVGNumber {\r
- constructor();\r
- constructor(value: SVGNumber);\r
- constructor(value: string);\r
- constructor(value: number, unit?: any);\r
- toString(): string;\r
- toJSON(): Object;\r
- valueOf(): number;\r
- plus(number: number): SVGNumber;\r
- minus(number: number): SVGNumber;\r
- times(number: number): SVGNumber;\r
- divide(number: number): SVGNumber;\r
- to(unit: string): SVGNumber;\r
- morph(number: any): this;\r
- at(pos: number): SVGNumber;\r
- }\r
-\r
- type NumberAlias = SVGNumber | number | string;\r
-\r
// path.js\r
- interface PathArrayPoint extends Array<number | string> { }\r
- type PathArrayAlias = PathArray | (string | number)[] | PathArrayPoint[] | string;\r
-\r
class Path extends Shape {\r
+ constructor(node?: SVGPathElement);\r
+ constructor(attr: Object);\r
+ /**\r
+ * DO NOT USE, it only for testing purpose\r
+ */\r
+ _array: PathArray\r
+\r
+ node: SVGPathElement;\r
+\r
morphArray: PathArray;\r
array(): PathArray;\r
+ plot(): PathArray;\r
plot(d: PathArrayAlias): this;\r
marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;\r
marker(position: string, marker: Marker): Marker;\r
length(): number;\r
pointAt(length: number): { x: number, y: number };\r
- }\r
+ text(text: string): TextPath\r
+ text(text: Text): TextPath\r
+ targets(): List<Element>\r
\r
- // pathArray.js\r
- class PathArray extends SVGArray {\r
- constructor();\r
- constructor(d: PathArrayAlias);\r
- move(x: number, y: number): this;\r
- size(width?: number, height?: number): this;\r
- parse(array: PathArrayAlias): PathArrayPoint[];\r
- parse(array: ArrayAlias): never;\r
- bbox(): Box;\r
}\r
\r
// pattern.js\r
toString(): string;\r
}\r
\r
- // point.js\r
- class Point {\r
- x: number;\r
- y: number;\r
- constructor();\r
- constructor(position: ArrayPoint);\r
- constructor(point: Point);\r
- constructor(position: { x: number, y: number });\r
- constructor(x: number, y: number);\r
- clone(): Point;\r
- morph(point: Point): this;\r
- at(pos: number): Point;\r
- native(): SVGPoint;\r
- transform(matrix: Matrix): Point;\r
- }\r
-\r
- // pointArray.js\r
- class PointArray extends SVGArray {\r
- constructor();\r
- constructor(points: PointArrayAlias);\r
- toString(): string;\r
- toLine(): {\r
- x1: number;\r
- y1: number;\r
- x2: number;\r
- y2: number;\r
- };\r
- parse(points: PointArrayAlias): ArrayPoint[];\r
- parse(array: ArrayAlias): never;\r
- move(x: number, y: number): this;\r
- size(width?: number, height?: number): this;\r
- bbox(): Box;\r
- }\r
-\r
// poly.js\r
interface poly {\r
+ /**\r
+ * DO NOT USE THIS, it for test purpose only\r
+ */\r
+ _array: PointArray\r
+\r
array(): PointArray;\r
+ plot(): PointArray\r
plot(p: PointArrayAlias): this;\r
- move(x: number, y: number): this;\r
- size(width: number, height: number): this;\r
+ clear(): this;\r
+ move(x: NumberAlias, y: NumberAlias): this;\r
+ size(width: number, height?: number): this;\r
+ }\r
+\r
+ // pointed.js\r
+ interface pointed {\r
+ x(): number\r
+ x(x: number): this\r
+ y(): number\r
+ y(y: number): this\r
+ height(): number\r
+ height(h: number): this\r
+ width(): number\r
+ width(w: number): this\r
}\r
- class PolyLine extends Shape implements poly {\r
+\r
+ class Polyline extends Shape implements poly, pointed {\r
+ constructor(node?: SVGPolylineElement);\r
+ constructor(attr: Object);\r
+ node: SVGPolylineElement;\r
+ _array: PointArray\r
+\r
array(): PointArray;\r
+ plot(): PointArray\r
plot(p: PointArrayAlias): this;\r
move(x: number, y: number): this;\r
- size(width: number, height: number): this;\r
+ size(width: number, height?: number): this;\r
marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;\r
marker(position: string, marker: Marker): Marker;\r
}\r
+\r
class Polygon extends Shape implements poly {\r
+ constructor(node?: SVGPolygonElement);\r
+ constructor(attr: Object);\r
+ node: SVGPolygonElement;\r
+ _array: PointArray;\r
array(): PointArray;\r
+ plot(): PointArray;\r
plot(p: PointArrayAlias): this;\r
move(x: number, y: number): this;\r
- size(width: number, height: number): this;\r
+ size(width: number, height?: number): this;\r
marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): Marker;\r
marker(position: string, marker: Marker): Marker;\r
}\r
- // rect.js\r
+\r
class Rect extends Shape {\r
+ constructor(node?: SVGRectElement);\r
+ constructor(attr: Object);\r
+ node: SVGRectElement;\r
radius(x: number, y?: number): this;\r
}\r
\r
- // set.js\r
- class List extends SVGArray {\r
- constructor(members?: Element[]);\r
- each(block: (index: number, members: Element[]) => void): this;\r
- }\r
-\r
// shape.js\r
class Shape extends Element {\r
}\r
dashoffset?: number;\r
}\r
\r
+ interface FillData {\r
+ color?: string\r
+ opacity?: number\r
+ rule?: string\r
+ }\r
+\r
interface FontData {\r
family?: string;\r
size?: NumberAlias;\r
weight?: string;\r
style?: string\r
}\r
+ // textable.js\r
+ interface Textable {\r
+ plain(text: string): this;\r
+ length(): number;\r
+ }\r
\r
// text.js\r
- class Text extends Shape {\r
- constructor();\r
- font(font: FontData): this;\r
+ class Text extends Shape implements Textable {\r
+ constructor(node?: SVGElement);\r
+ constructor(attr: Object);\r
+ // for the purpose of testing only\r
+ _rebuild: boolean\r
+ _build: boolean\r
+\r
clone(): this;\r
text(): string;\r
text(text: string): this;\r
- text(block: (text: Text) => void): this;\r
- leading(): number;\r
+ text(block: (text: this) => void): this;\r
+ leading(): Number;\r
leading(leading: NumberAlias): this;\r
- lines(): List;\r
rebuild(enabled: boolean): this;\r
build(enabled: boolean): this;\r
plain(text: string): this;\r
tspan(block: (tspan: Tspan) => void): this;\r
clear(): this;\r
length(): number;\r
- path(d: PathArrayAlias): this;\r
+ get(i: number): Tspan;\r
+ path(): TextPath\r
+ path(d: PathArrayAlias | Path): TextPath;\r
track(): Element;\r
textPath(): Element;\r
+ ax(): string\r
+ ax(x: string): this\r
+ ay(): string\r
+ ay(y: string): this\r
+ amove(x: number, y: number): this\r
}\r
\r
- class Tspan extends Shape {\r
- constructor();\r
- text(): string;\r
- text(text: string): Tspan;\r
- text(block: (tspan: Tspan) => void): this;\r
+ class Tspan extends Shape implements Textable {\r
+ constructor(node?: SVGElement);\r
+ constructor(attr: Object);\r
+ dx(): number;\r
dx(x: NumberAlias): this;\r
+ dy(): number;\r
dy(y: NumberAlias): this;\r
newLine(): this;\r
- plain(text: any): this;\r
tspan(text: string): Tspan;\r
tspan(block: (tspan: Tspan) => void): this;\r
- clear(): this;\r
length(): number;\r
+ text(): string;\r
+ text(text: string): this;\r
+ plain(text: string): this;\r
}\r
\r
// textpath.js\r
- class TextPath extends Text { }\r
-\r
- interface Transform {\r
- x?: number;\r
- y?: number;\r
- rotation?: number;\r
- cx?: number;\r
- cy?: number;\r
- scaleX?: number;\r
- scaleY?: number;\r
- skewX?: number;\r
- skewY?: number;\r
- matrix?: Matrix; // 1,0,0,1,0,0\r
- a?: number; // direct digits of matrix\r
- b?: number;\r
- c?: number;\r
- d?: number;\r
- e?: number;\r
- f?: number;\r
- scale?: number;\r
+ class TextPath extends Text {\r
+ constructor();\r
+ array(): Array<any>\r
+ plot(): PathArray\r
+ plot(d: string): this\r
+ track(): Path\r
}\r
\r
// use.js\r
// viewbox.js\r
type ViewBoxAlias = ViewBoxLike | number[] | string | Element;\r
\r
- class ViewBox {\r
- constructor(source: ViewBoxAlias);\r
- constructor(x: number, y: number, width: number, height: number);\r
+ interface ViewBox {\r
x: number;\r
y: number;\r
width: number;\r
morph(x: number, y: number, width: number, height: number): ViewBox;\r
at(pos: number): ViewBox;\r
}\r
-\r
- interface Animation {\r
- after(cb: () => void): Animation;\r
- attr(): object;\r
- attr(name: string, value: any, namespace?: string): Animation;\r
- attr(name: string): any;\r
- attr(obj: Object): Animation;\r
- center(x: number, y: number, anchor?: boolean): Animation;\r
- cx(x: number, anchor?: boolean): Animation;\r
- cy(y: number, anchor?: boolean): Animation;\r
- delay(delayMS: number): Animation;\r
- dmove(x: number, y: number): Animation;\r
- during(cb: (pos: number) => void): Animation;\r
- finish(): Animation;\r
- move(x: number, y: number, anchor?: boolean): Animation;\r
- pause(): Animation;\r
- play(): Animation;\r
- reverse(reversed?: boolean): Animation;\r
- rotate(degrees: number, cx?: number, cy?: number): Animation;\r
- scale(scaleX: number, scaleY?: number, cx?: number, cy?: number): Animation;\r
- size(w: number, h: number, anchor?: boolean): Animation;\r
- skew(skewX: number, skewY?: number, cx?: number, cy?: number): Animation;\r
- stop(): Animation;\r
- to(value: number): Animation;\r
- transform(t: Transform, relative?: boolean): Animation;\r
- translate(x: number, y: number): Animation;\r
- viewbox(x: number, y: number, w: number, h: number): Animation;\r
- x(x: number, anchor?: boolean): Animation;\r
- y(y: number, anchor?: boolean): Animation;\r
- // TODO style, etc, bbox...\r
- }\r
}
\ No newline at end of file
projects / svg.js.git / commitdiff