mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-04 06:47:03 +00:00
svg.js: Provides its own types (#15640)
This commit is contained in:
Andy
@@ -426,6 +426,12 @@
|
||||
"sourceRepoURL": "https://github.com/andrewplummer/Sugar",
|
||||
"asOfVersion": "2.0.2"
|
||||
},
|
||||
{
|
||||
"libraryName": "svg.js",
|
||||
"typingsPackageName": "svg.js",
|
||||
"sourceRepoURL": "http://www.svgjs.com/",
|
||||
"asOfVersion": "2.3.1"
|
||||
},
|
||||
{
|
||||
"libraryName": "swap-case",
|
||||
"typingsPackageName": "swap-case",
|
||||
|
||||
Vendored
-276
@@ -1,276 +0,0 @@
|
||||
// Type definitions for svg.js
|
||||
// Project: http://www.svgjs.com/
|
||||
// Definitions by: Sean Hess <https://seanhess.github.io/>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// Reference: http://documentup.com/wout/svg.js
|
||||
|
||||
// TODO sets
|
||||
// TODO gradients
|
||||
|
||||
declare namespace svgjs {
|
||||
|
||||
export interface LinkedHTMLElement extends HTMLElement {
|
||||
instance: Element;
|
||||
}
|
||||
|
||||
export interface Library {
|
||||
(selector:string):Doc;
|
||||
(domElement:HTMLElement):Doc;
|
||||
create(name:string):any;
|
||||
Element:ElementStatic;
|
||||
supported:boolean;
|
||||
get(id:string):Element;
|
||||
extend(parent:Object, obj:Object):void;
|
||||
}
|
||||
|
||||
export interface Doc extends Element {
|
||||
svg(data:string):any;
|
||||
pattern(w:number, h:number, add:(e:Element)=>void):Element;
|
||||
|
||||
defs():Defs;
|
||||
|
||||
clear():void;
|
||||
|
||||
mask():Mask;
|
||||
|
||||
// TODO gradients
|
||||
}
|
||||
|
||||
|
||||
// https://github.com/wout/svg.filter.js
|
||||
export interface Filter {
|
||||
gaussianBlur(values:string):Filter;
|
||||
colorMatrix(name:string, value:number):Filter;
|
||||
colorMatrix(name:string, matrix:number[]):Filter;
|
||||
componentTransfer(components:{rgb?: FilterComponentTransfer; g?: FilterComponentTransfer;}):Filter;
|
||||
offset(x:number, y:number):Filter;
|
||||
blend():Filter;
|
||||
in(source:FilterSource):Filter;
|
||||
sourceAlpha:FilterSource;
|
||||
source:FilterSource;
|
||||
}
|
||||
|
||||
export interface FilterSource {
|
||||
|
||||
}
|
||||
|
||||
|
||||
export interface FilterComponentTransfer {
|
||||
type: string;
|
||||
tableValues?: string;
|
||||
slope?: number;
|
||||
intercept: number;
|
||||
amplitude: number;
|
||||
exponent: number;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
export interface Element extends Text, Parent {
|
||||
node:LinkedHTMLElement;
|
||||
|
||||
nested():Doc;
|
||||
|
||||
animate(duration?:number, ease?:string, delay?:number):Animation;
|
||||
animate(info:{ease?:string; duration?:number; delay?:number}):Animation;
|
||||
|
||||
attr(name:string):any;
|
||||
attr(obj:Object):Element;
|
||||
attr(name:string, value:any, namespace?:string):Element;
|
||||
|
||||
viewbox():Viewbox;
|
||||
viewbox(x:number, y:number, w:number, h:number):Element;
|
||||
viewbox(obj:Viewbox):Element;
|
||||
|
||||
move(x:number, y:number, anchor?:boolean):Element;
|
||||
x(x:number, anchor?:boolean):Element;
|
||||
y(y:number, anchor?:boolean):Element;
|
||||
x(): number;
|
||||
y(): number;
|
||||
|
||||
center(x:number, y:number, anchor?:boolean):Element;
|
||||
cx(x:number, anchor?:boolean):Element;
|
||||
cy(y:number, anchor?:boolean):Element;
|
||||
cx(): number;
|
||||
cy(): number;
|
||||
|
||||
size(w:number, h:number, anchor?:boolean):Element;
|
||||
|
||||
show():Element;
|
||||
hide():Element;
|
||||
visible():boolean;
|
||||
remove():void;
|
||||
|
||||
each(iterator:(i?:number, children?:Element[])=>void, deep?:boolean):void;
|
||||
filter(adder:(filter:Filter)=>void):Element;
|
||||
|
||||
transform(t:Transform):Element;
|
||||
transform(): Transform;
|
||||
|
||||
style(name:string, value:string):Element;
|
||||
style(obj:Object):Element;
|
||||
style(name:string):string;
|
||||
style():string;
|
||||
bbox():BBox;
|
||||
rbox():RBox;
|
||||
doc():Doc;
|
||||
data(name:string):any;
|
||||
data(name:string, value:any):Element;
|
||||
remember(name:string, value:any):Element;
|
||||
remember(obj:Object):Element;
|
||||
remember(name:string):any;
|
||||
forget(...keys:string[]):Element;
|
||||
|
||||
fill(fill:{color?:string; opacity?:number}):Element;
|
||||
fill(color:string):Element;
|
||||
fill(pattern:Element):Element;
|
||||
stroke(data:{color?:string; opacity?:number; width?: number}):Element;
|
||||
stroke(color:string):Element;
|
||||
opacity(o:number):Element;
|
||||
rotate(d:number, cx?:number, cy?:number):Element;
|
||||
skew(x:number, y:number):Element;
|
||||
scale(x:number, y:number):Element;
|
||||
translate(x:number, y:number):Element;
|
||||
|
||||
maskWith(element:Element):Element;
|
||||
masker:Element;
|
||||
unmask():Element;
|
||||
|
||||
clipWith(element:Element):Element;
|
||||
clipper:Element;
|
||||
unclip():Element;
|
||||
|
||||
front():Element;
|
||||
back():Element;
|
||||
forward():Element;
|
||||
backward():Element;
|
||||
|
||||
siblings():Element[];
|
||||
position():number;
|
||||
next():Element;
|
||||
previous():Element;
|
||||
before(element:Element):Element;
|
||||
after(element:Element):Element;
|
||||
|
||||
|
||||
click(cb:Function):void;
|
||||
on(event:string, cb:Function):void;
|
||||
off(event:string, cb:Function):void;
|
||||
}
|
||||
|
||||
export interface Mask extends Element {
|
||||
add(element:Element):Mask;
|
||||
}
|
||||
|
||||
export interface Text {
|
||||
content:string;
|
||||
font(font:{family?:string; size?:number; anchor?:string; leading?:string}):Element;
|
||||
tspan(text:string):Element;
|
||||
path(data:string):Element;
|
||||
plot(data:string):Element;
|
||||
track:Element;
|
||||
}
|
||||
|
||||
export interface ElementStatic extends Parent {
|
||||
new(node:any):Element;
|
||||
}
|
||||
|
||||
export interface Defs extends Element {}
|
||||
|
||||
|
||||
export interface Animation {
|
||||
stop():Animation;
|
||||
|
||||
attr(name:string, value:any, namespace?:string):Animation;
|
||||
attr(obj:Object):Animation;
|
||||
attr(name:string):any;
|
||||
|
||||
viewbox(x:number, y:number, w:number, h:number):Animation;
|
||||
|
||||
move(x:number, y:number, anchor?:boolean):Animation;
|
||||
x(x:number, anchor?:boolean):Animation;
|
||||
y(y:number, anchor?:boolean):Animation;
|
||||
|
||||
center(x:number, y:number, anchor?:boolean):Animation;
|
||||
cx(x:number, anchor?:boolean):Animation;
|
||||
cy(y:number, anchor?:boolean):Animation;
|
||||
|
||||
size(w:number, h:number, anchor?:boolean):Animation;
|
||||
during(cb:(pos:number)=>void):Animation;
|
||||
to(value:number):Animation;
|
||||
after(cb:()=>void):Animation;
|
||||
|
||||
// TODO style, etc, bbox...
|
||||
}
|
||||
|
||||
export interface Parent {
|
||||
put(element:Element, i?:number):Element;
|
||||
add(element:Element, i?:number):Element;
|
||||
children():Element[];
|
||||
|
||||
rect(w:number, h:number):Element;
|
||||
ellipse(w:number, h:number):Element;
|
||||
circle(diameter:number):Element;
|
||||
line(x1:number, y1:number, x2:number, y2:number):Element;
|
||||
polyline(data:string):Element;
|
||||
polyline(points:number[][]):Element;
|
||||
polygon(data:string):Element;
|
||||
polygon(points:number[][]):Element;
|
||||
path(data:string):Element;
|
||||
image(url:string, w?:number, h?:number):Element;
|
||||
text(text:string):Element;
|
||||
text(adder:(element:Element)=>void):Element;
|
||||
use(element:Element):Element;
|
||||
|
||||
group():Element;
|
||||
}
|
||||
|
||||
export interface BBox {
|
||||
height:number;
|
||||
width:number;
|
||||
y:number;
|
||||
x:number;
|
||||
cx:number;
|
||||
cy:number;
|
||||
merge(bbox:BBox):BBox;
|
||||
}
|
||||
|
||||
export interface RBox extends BBox {}
|
||||
|
||||
export interface Attributes {
|
||||
(name:string, value:any):void;
|
||||
(obj:Object):void;
|
||||
(name:string):any;
|
||||
}
|
||||
|
||||
export interface Viewbox {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
zoom?: number;
|
||||
}
|
||||
|
||||
export interface Transform {
|
||||
x?: number;
|
||||
y?: number;
|
||||
rotation?: number;
|
||||
cx?: number;
|
||||
cy?: number;
|
||||
scaleX?: number;
|
||||
scaleY?: number;
|
||||
skewX?: number;
|
||||
skewY?: number;
|
||||
matrix?: string; // 1,0,0,1,0,0
|
||||
a?: number; // direct digits of matrix
|
||||
b?: number;
|
||||
c?: number;
|
||||
d?: number;
|
||||
e?: number;
|
||||
f?: number;
|
||||
}
|
||||
}
|
||||
|
||||
declare var SVG:svgjs.Library;
|
||||
declare module "svg.js" {
|
||||
export = SVG
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
/// <reference types="jquery" />
|
||||
|
||||
// create svg drawing paper
|
||||
|
||||
// Example from svgjs.com
|
||||
function one() {
|
||||
var draw = SVG('canvas')
|
||||
|
||||
// create image
|
||||
var image = draw.image('images/shade.jpg')
|
||||
image.size(600, 600).y(-150)
|
||||
|
||||
// create text
|
||||
var text = draw.text('SVG.JS').move(300, 0)
|
||||
text.font({
|
||||
family: 'Source Sans Pro'
|
||||
, size: 180
|
||||
, anchor: 'middle'
|
||||
, leading: '1em'
|
||||
})
|
||||
|
||||
// clip image with text
|
||||
image.clipWith(text)
|
||||
}
|
||||
|
||||
|
||||
// random one I found online
|
||||
function two() {
|
||||
var draw = SVG('paper').size(300, 300)
|
||||
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
|
||||
rect.animate().move(150, 150)
|
||||
}
|
||||
|
||||
|
||||
// Ripped out of a project.
|
||||
function renderSVG(data:string) {
|
||||
|
||||
var el:JQuery;
|
||||
|
||||
var root = SVG(el.get(0))
|
||||
|
||||
// Load the SVG into a container
|
||||
var div = document.createElement("div")
|
||||
var container = SVG(div) // this creates an SVG tag inside
|
||||
container.svg(data) // this creates an SVG inside the SVG
|
||||
var $inner = $(div).find("svg svg")
|
||||
var inner:svgjs.Element = (<svgjs.LinkedHTMLElement>$inner.get(0)).instance
|
||||
|
||||
// Copy in the important attributes
|
||||
root.attr('x', inner.attr('x'))
|
||||
root.attr('y', inner.attr('y'))
|
||||
root.attr('width', inner.attr('width'))
|
||||
root.attr('height', inner.attr('height'))
|
||||
root.viewbox(inner.viewbox())
|
||||
|
||||
// Append the children
|
||||
el.append($inner.children())
|
||||
|
||||
// Activate and Label all child paths
|
||||
var index = 0
|
||||
el.find("rect, path, circle, ellipse").each(function() {
|
||||
var $path: JQuery = $(this)
|
||||
var path = (<svgjs.LinkedHTMLElement>$path.get(0)).instance
|
||||
var uniqueId = "path"+index++
|
||||
path.attr({"path-id": uniqueId})
|
||||
})
|
||||
}
|
||||
|
||||
//Test if svgjs.Element.transform() correctly return an svgjs.Element.Transform
|
||||
function elementTransformShouldReturnTransformObject() {
|
||||
/* create an svg drawing */
|
||||
var div = document.createElement('div')
|
||||
var draw = SVG(div)
|
||||
|
||||
/* draw a rectangle scale, rotate and skew it */
|
||||
var rect = draw.rect(50,50).move(100,100).scale(0.5, 0.3).rotate(35).skew(10,25)
|
||||
|
||||
/* first try to cast it */
|
||||
var trans:svgjs.Transform = rect.transform()
|
||||
/* then check values if they are correct */
|
||||
if (trans.scaleX != 0.5) { throw "scaleX value is not correct" }
|
||||
if (trans.scaleY != 0.3) { throw "scaleY value is not correct" }
|
||||
if (trans.rotation != 35) { throw "rotation value is not correct" }
|
||||
if (trans.skewX != 10) { throw "skewX value is not correct" }
|
||||
if (trans.skewY != 25) { throw "skewY value is not correct" }
|
||||
}
|
||||
|
||||
//Test if svgjs.Element.children() correctly return an svgjs.Element[]
|
||||
function elementChildrenShouldReturnElementArray() {
|
||||
/* create an svg drawing */
|
||||
var div = document.createElement('div')
|
||||
var draw = SVG(div)
|
||||
|
||||
/* draw some rectangle inside a group */
|
||||
var group = draw.group()
|
||||
group.rect(10,10)
|
||||
group.rect(20,20)
|
||||
group.rect(30,30)
|
||||
group.rect(40,40)
|
||||
group.rect(50,50)
|
||||
|
||||
/* first try to cast it */
|
||||
var result:svgjs.Element[] = group.children()
|
||||
/* then check values if they are correct */
|
||||
for (var i = 0; i < 5; i++) {
|
||||
var elem: svgjs.Element = result[i];
|
||||
if (elem == null) { throw "Element.children() is not working" }
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": false,
|
||||
"strictNullChecks": false,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"svg.js-tests.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user