diff --git a/svgjs/svgjs-tests.ts b/svgjs/svgjs-tests.ts new file mode 100644 index 000000000..845702ac4 --- /dev/null +++ b/svgjs/svgjs-tests.ts @@ -0,0 +1,69 @@ +/// +/// + +// 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 = $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 = $(this) + var path = $path.get(0).instance + var uniqueId = "path"+index++ + path.attr({"path-id": uniqueId}) + }) +} \ No newline at end of file diff --git a/svgjs/svgjs.d.ts b/svgjs/svgjs.d.ts new file mode 100644 index 000000000..6b7a7a6ae --- /dev/null +++ b/svgjs/svgjs.d.ts @@ -0,0 +1,233 @@ +// Type definitions for svg.js +// Project: http://www.svgjs.com/ +// Definitions by: Sean Hess +// Definitions: https://github.com/borisyankov/DefinitelyTyped +// Reference: http://documentup.com/wout/svg.js + +// TODO sets +// TODO gradients + +declare var SVG:svgjs.Library; + +declare module 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; + + use(element:Element):Element; + + clear():void; + + mask():Mask; + + // TODO gradients + } + + 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, value:any, namespace?:string):Element; + attr(obj:Object):Element; + attr(name:string):any; + 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; + + center(x:number, y:number, anchor?:boolean):Element; + cx(x:number, anchor?:boolean):Element; + cy(y:number, anchor?:boolean):Element; + + 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; + + transform(t:Transform):Element; + + + 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; + + 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 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; + } +} \ No newline at end of file