added some tests

svgjs/svgjs-tests.ts

@@ -0,0 +1,69 @@
+/// <reference path='svgjs.d.ts' />
+/// <reference path='../jquery/jquery.d.ts' />
+ 
+// 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})
+    })
+}

svgjs/svgjs.d.ts

@@ -25,7 +25,7 @@ declare module svgjs {
         extend(parent:Object, obj:Object):void;
     }
 
-    export interface Doc extends Parent {
+    export interface Doc extends Element {
         svg(data:string):any;
         pattern(w:number, h:number, add:(e:Element)=>void):Element;
         
@@ -40,7 +40,7 @@ declare module svgjs {
         // TODO gradients
     }    
 
-    export interface Element {
+    export interface Element extends Text, Parent {
         node:LinkedHTMLElement;
 
         nested():Doc;
@@ -130,14 +130,13 @@ declare module svgjs {
         add(element:Element):Mask;
     }
 
-    export interface Text extends Element {
-        text(text:string):Text;
+    export interface Text {
         content:string;
-        font(font:{family?:string; size?:number; anchor?:string; leading?:string}):Text;
-        tspan(text:string):Text;
-        path(data:string):Text;
-        plot(data:string):Text;
-        track:Text;
+        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 {
@@ -172,9 +171,9 @@ declare module svgjs {
         // TODO style, etc, bbox... 
     }
     
-    export interface Parent extends Element {
+    export interface Parent {
         put(element:Element, i?:number):Element;
-        add(element:Element, i?:number):Parent;
+        add(element:Element, i?:number):Element;
         children:Element[];
 
         rect(w:number, h:number):Element;
@@ -186,11 +185,11 @@ declare module svgjs {
         polygon(data:string):Element;
         polygon(points:number[][]):Element;
         path(data:string):Element;
-        image(url:string, w:number, h:number):Element;
-        text(text:string):Text;
-        text(adder:(element:Text)=>void):Element;        
+        image(url:string, w?:number, h?:number):Element;
+        text(text:string):Element;
+        text(adder:(element:Element)=>void):Element;        
 
-        group():Parent;
+        group():Element;
     }
 
     export interface BBox {