+// Type definitions for @svgdotjs version 3.x\r
+// Project: @svgdotjs/svg.js\r
+\r
+// trick to keep reference to Array build-in type\r
declare class BuiltInArray<T> extends Array<T> { }\r
\r
declare module "@svgdotjs/svg.js" {\r
ease: string;\r
delay: number;\r
}\r
+\r
}\r
+\r
let easing: {\r
'-'(pos: number): number;\r
'<>'(pos: number): number;\r
instance: Element;\r
}\r
\r
- // array.js\r
// ************ Standard object/option/properties declaration ************\r
\r
type AttrNumberValue = number | "auto"\r
}\r
\r
/**\r
- *\r
+ * SVG Circle attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle\r
*/\r
- interface ShapeElementStyle {\r
-\r
+ interface CircleAttr extends PathBaseAttr, GlobalAttr {\r
+ cx?: number | string\r
+ cy?: number | string\r
+ r?: number | string\r
}\r
\r
- interface PathLikeElementStyle {\r
-\r
+ /**\r
+ * SVG Ellipse attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse\r
+ */\r
+ interface EllipseAttr extends PathBaseAttr, GlobalAttr {\r
+ cx?: number | string\r
+ cy?: number | string\r
+ rx?: number | string\r
+ ry?: number | string\r
}\r
\r
- interface TextElementStyle {\r
-\r
+ /**\r
+ * SVG Path attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path\r
+ */\r
+ interface PathAttr extends PathBaseAttr, GlobalAttr {\r
+ d?: string\r
}\r
\r
- interface GraphicElementStyle {\r
-\r
+ /**\r
+ * SVG Path attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon\r
+ * or https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline\r
+ */\r
+ interface PolyAttr extends PathBaseAttr, GlobalAttr {\r
+ points?: string\r
}\r
\r
- interface ContainerElementStyle {\r
-\r
+ /**\r
+ * SVG Text attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text\r
+ */\r
+ interface TextAttr extends GlobalAttr {\r
+ x?: number | string\r
+ y?: number | string\r
+ dx?: number | string\r
+ dy?: number | string\r
+ lengthAdjust?: "spacing" | "spacingAndGlyphs"\r
+ textLength?: number | string\r
+ // see https://developer.mozilla.org/en-US/docs/Web/API/SVGNumberList\r
+ // or https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#List-of-Ts\r
+ // TODO: tbd\r
+ // rotate?: string\r
}\r
\r
- interface CoordinateSystemElementStyle {\r
-\r
+ /**\r
+ * SVG TextPath attribute, more information see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath\r
+ */\r
+ interface TextPathAttr extends GlobalAttr {\r
+ href?: string\r
+ lengthAdjust?: "spacing" | "spacingAndGlyphs"\r
+ method?: "align" | "stretch"\r
+ side?: "left" | "right"\r
+ spacing?: "auto" | "exact"\r
+ startOffset?: number | string\r
+ textLength?: number | string\r
+ // See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath\r
+ // TODO: tbd as there is no reference to see the detail of how it would look like\r
+ // path?: string\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
+ * Notice: DOMRect 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
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
// ********** Locate in directory src/types **********\r
\r
// SVGArray.js\r
+ // Notice: below class is defined the name as `Array` rather than `SVGArray`.\r
+ // The purpose of giving the name as `Array` is to allow it to be aligned with SVG.JS export type\r
+ // as SVG.JS export it as `Array` (to be precise `SVG.Array`) so reading through JS documentation\r
+ // should be more straightforward.\r
/**\r
* Type alias to native array.\r
*\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
e: number;\r
f: number;\r
\r
+ // *** To Be use by Test Only in restrict mode ***\r
+ [key: string]: any\r
+\r
clone(): Matrix;\r
transform(o: MatrixLike | MatrixTransformParam): Matrix\r
compose(o: MatrixExtract): Matrix\r
toArray(): T[]\r
}\r
\r
+ class EventObject {\r
+ [key: string]: EventObject;\r
+ }\r
+\r
// EventTarget.js\r
- interface EventTarget {\r
- events: Object\r
+ class EventTarget {\r
+ events: EventObject\r
\r
addEventListener(): void\r
dispatch(event: Event | string, data?: object): Event\r
fromArray(a: Object): this\r
}\r
\r
- // TODO: check & verify ??????\r
class TransformBag {\r
constructor()\r
constructor(a: 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
cancelImmediate(o: Object): void\r
}\r
\r
- type ParentTypeAlias = Svg | G | A;\r
+ // use with parent query\r
+ type ParentTypeAlias = typeof Svg | typeof G | typeof A;\r
+\r
+ // use with putIn\r
+ type ParentClassAlias = Svg | G | A;\r
\r
/**\r
* Just fancy type alias to refer to css query selector.\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
+ T extends Tspan | TextPath ? ParentClassAlias | Text | ClipPath | Dom :\r
+ T extends Circle ? ParentClassAlias | Text | ClipPath | Mask | Dom :\r
+ T extends Shape ? ParentClassAlias | ClipPath | Dom : ParentClassAlias | 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
+ T extends Svg ? ParentClassAlias | Dom | HTMLElement | string :\r
+ T extends Shape ? ParentClassAlias | ClipPath | string :\r
+ T extends Element ? ParentClassAlias | 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
+ class Dom extends EventTarget {\r
node: HTMLElement | SVGElement;\r
type: string;\r
\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
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(): CSSStyleDeclaration;\r
css(style: string): string\r
- css<T extends this>(style: StyleTypeMapping<T>): this\r
css(style: string, val: any): this\r
+ css(style: CSSStyleDeclaration): this\r
+ css(style: string[]): CSSStyleDeclaration;\r
show(): this\r
hide(): this\r
visible(): boolean\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
\r
// clip.js\r
class ClipPath extends Container {\r
+ constructor();\r
constructor(node?: SVGClipPathElement);\r
constructor(attr: Object);\r
node: SVGClipPathElement;\r
flatten(parent: Dom, depth?: number): this;\r
gradient(type: string, block?: (stop: Gradient) => void): Gradient;\r
group(): G;\r
+\r
image(): Image;\r
image(href?: string, callback?: (e: Event) => void): Image;\r
line(points?: PointArrayAlias): Line;\r
after(element: Element): Element;\r
animate(duration?: number, ease?: string, delay?: number): Runner;\r
animate(info: { ease?: string; duration?: number; delay?: number }): Runner;\r
+ delay(by: number, when?: string): Runner\r
attr(): any;\r
attr(name: string, value: any, namespace?: string): this;\r
attr(name: string): any;\r
clipper(): ClipPath;\r
clipWith(element: Element): this;\r
clone(): this;\r
- css(): Object;\r
- css(style: Object[]): Object;\r
- css(style: string, value: any): this;\r
- css(style: string): any;\r
- css(styles: Object): this;\r
ctm(): Matrix;\r
cx(): number;\r
cx(x: number): 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
+ fill(color: Color | ColorLike): this;\r
+ fill(color: FillData): this;\r
fill(pattern: Element): this;\r
fire(event: Event): this;\r
fire(event: string, data?: any): this;\r
}\r
class Circle extends Shape implements CircleMethods {\r
constructor(node?: SVGCircleElement);\r
- constructor(attr: Object);\r
+ constructor(attr: CircleAttr)\r
+ \r
node: SVGCircleElement;\r
\r
rx(rx: number): this;\r
}\r
class Ellipse extends Shape implements CircleMethods {\r
node: SVGEllipseElement;\r
+ constructor(attr: EllipseAttr)\r
constructor(node?: SVGEllipseElement);\r
- constructor(attr: Object);\r
\r
rx(rx: number): this;\r
rx(): this;\r
at(offset?: number, color?: ColorAlias, opacity?: number): Stop;\r
at(opts: StopProperties): Stop;\r
url(): string;\r
- url(...params: any[]): never;\r
toString(): string;\r
+ targets(): List<Element>\r
+ bbox(): Box\r
+\r
+ // gradiented.js\r
from(x: number, y: number): this;\r
to(x: number, y: number): this;\r
+\r
+ // TODO: check with main.js\r
radius(x: number, y?: number): this;\r
targets(): List<Element>\r
bbox(): Box\r
type PointArrayAlias = number[] | ArrayXY[] | PointArray | string;\r
\r
class Line extends Shape {\r
+ constructor(attr: LineAttr)\r
constructor(node?: SVGLineElement);\r
- constructor(attr: Object);\r
+\r
node: SVGLineElement;\r
+\r
array(): PointArray;\r
- plot(): PathArray\r
+ plot(): PointArray\r
plot(points?: PointArrayAlias): this;\r
plot(x1: number, y1: number, x2: number, y2: number): this;\r
move(x: number, y: number): this;\r
}\r
\r
// marker.js\r
+ // TODO: check register method marker\r
class Marker extends Container {\r
+ constructor();\r
+\r
+ node: SVGMarkerElement;\r
+\r
ref(x: string | number, y: string | number): this;\r
update(block: (marker: Marker) => void): this;\r
toString(): string;\r
\r
// path.js\r
class Path extends Shape {\r
+ constructor(attr: PathAttr)\r
constructor(node?: SVGPathElement);\r
- constructor(attr: Object);\r
- /**\r
- * DO NOT USE, it only for testing purpose\r
- */\r
- _array: PathArray\r
-\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
+ marker(position: string, width?: number, height?: number, block?: (marker: Marker) => void): this;\r
+ marker(position: string, marker: Marker): this;\r
+\r
+ // sugar.js\r
length(): number;\r
pointAt(length: number): { x: number, y: number };\r
text(text: string): TextPath\r
\r
}\r
\r
+\r
// pattern.js\r
class Pattern extends Container {\r
url(): string;\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
\r
class Polyline extends Shape implements poly, pointed {\r
constructor(node?: SVGPolylineElement);\r
- constructor(attr: Object);\r
+ constructor(attr: PolyAttr);\r
+\r
node: SVGPolylineElement;\r
- _array: PointArray\r
\r
array(): PointArray;\r
plot(): PointArray\r
\r
class Polygon extends Shape implements poly {\r
constructor(node?: SVGPolygonElement);\r
- constructor(attr: Object);\r
+ constructor(attr: PolyAttr)\r
+\r
node: SVGPolygonElement;\r
- _array: PointArray;\r
array(): PointArray;\r
plot(): PointArray;\r
plot(p: PointArrayAlias): this;\r
\r
class Rect extends Shape {\r
constructor(node?: SVGRectElement);\r
- constructor(attr: Object);\r
+ constructor(attr: RectAttr)\r
node: SVGRectElement;\r
radius(x: number, y?: number): this;\r
}\r
// text.js\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
+ constructor(attr: TextAttr)\r
\r
clone(): this;\r
text(): string;\r
leading(leading: NumberAlias): this;\r
rebuild(enabled: boolean): this;\r
build(enabled: boolean): this;\r
- plain(text: string): this;\r
- tspan(text: string): Tspan;\r
- tspan(block: (tspan: Tspan) => void): this;\r
clear(): this;\r
+ plain(text: string): this;\r
length(): number;\r
get(i: number): Tspan;\r
path(): TextPath\r
ay(): string\r
ay(y: string): this\r
amove(x: number, y: number): this\r
+\r
+ // main.js, from extend/copy prototypes from Tspan\r
+ tspan(text: string): Tspan;\r
+ tspan(block: (tspan: Tspan) => void): this;\r
}\r
\r
- class Tspan extends Shape implements Textable {\r
+ class Tspan extends Text implements Textable {\r
constructor(node?: SVGElement);\r
- constructor(attr: Object);\r
+ constructor(attr: TextAttr);\r
dx(): number;\r
dx(x: NumberAlias): this;\r
dy(): number;\r
length(): number;\r
text(): string;\r
text(text: string): this;\r
+ text(block: (text: this) => void): this;\r
plain(text: string): this;\r
}\r
\r
// textpath.js\r
class TextPath extends Text {\r
constructor();\r
+ constructor(attr: TextPathAttr)\r
+\r
array(): Array<any>\r
plot(): PathArray\r
plot(d: string): this\r
projects / svg.js.git / commitdiff