diff --git a/snapsvg/snapsvg-tests-2.ts b/snapsvg/snapsvg-tests-2.ts new file mode 100644 index 000000000..ce6698e17 --- /dev/null +++ b/snapsvg/snapsvg-tests-2.ts @@ -0,0 +1,133 @@ +/// + +// tests by Daniel Rosenwasser +function tester1() { + var paper = Snap("#content"); + + var i = 0; + var n = 1000000; + + var x = 0; + var y = 0; + + paper.click((ev) => { var x = ev.clientX; }, this) + + redrawLoop(); + + function redrawLoop(): void { + if (i < n) { + setTimeout(redrawLoop, 50 + Math.random() * 50); + drawDrop(); + i++; + } + } + + function drawDrop(): void { + //var c = paper.circle(window.innerWidth * Math.random(), window.innerHeight * Math.random(), 50); + var radius = 25; + var c = paper.circle(x + radius * Math.random() - radius*2, y + radius * Math.random() - radius, radius*2); + c.animate({ r: 0 }, 1000, mina.bounce, () => c.remove()); + } +} + +function tester2() { + var m1 = Snap.Matrix(1,2,3,4,5,6); + + m1.add(m1).add(m1); + + var m2 = Snap.Matrix(0,0,0,0,0,0); + m2.add(1,-1,1,-1,1,-1).add(-1,1,-1,1,-1,1); + + var m3 = Snap.Matrix(1,1,1,1,1,1); + m3.add(Snap.Matrix(0,0,0,0,0,0)).add(m2); + + console.log(m1.toString()); + console.log(m2.toString()); + console.log(m3.toString()); +} + +function tester3() { + // true + console.log(Snap.deg(Snap.rad(Snap.deg(Math.PI))) === Snap.deg(Snap.rad(180))); + + var colorString = "#BADA55"; + var rgb = Snap.getRGB(colorString); + var col = Snap.color(colorString); + var hsl = Snap.rgb2hsl(rgb.r, rgb.g, rgb.b); + var hsb = Snap.rgb2hsb(rgb.r, rgb.g, rgb.b); + + // all true + console.log(rgb.r === col.r && rgb.g === col.g && rgb.b === col.b && rgb.hex === col.hex); + console.log(hsl.h === hsb.h); + console.log(hsl.h === col.h && hsl.s === col.s && hsb.b === col.v); + console.log(!col.error); +} + +function tester4() { + console.log("tester4"); + var paper = Snap(800,600); + var bbox = paper.getBBox(); + + console.log("cx: " + bbox.cx); + console.log("cy: " + bbox.cy); + console.log("h: " + bbox.h); + console.log("height: " + bbox.height); + console.log("path: " + bbox.path); + console.log("r0: " + bbox.r0); + console.log("r1: " + bbox.r1); + console.log("r2: " + bbox.r2); + console.log("vb: " + bbox.vb); + console.log("w: " + bbox.w); + console.log("width: " + bbox.width); + console.log("x2: " + bbox.x2); + console.log("x: " + bbox.x); + console.log("y2: " + bbox.y2); + console.log("y: " + bbox.y); +} + +function tester5() { + var sideLength = 100; + var papel = Snap(1000, 1000); + var square = papel.rect(100, 100, sideLength, sideLength, 10, 10); + + function updater(newSideLength: number) { + square.attr({ x: newSideLength, y: newSideLength }); + } + + function easer(iArdlyKnowEr: number) { + return iArdlyKnowEr * iArdlyKnowEr; + } + + Snap.animate(sideLength, sideLength + 100, updater, 1500 /*ms*/); + setTimeout(500, () => { Snap.animate(sideLength + 100, + 0, + updater, + 100 /*ms*/, + easer, + square.remove); }); +} + +function tester6() { + var path = Snap.path; + // bboxing + var b1 = path.bezierBBox(0, 0, 0, 0, 100, 100, 100, 100); + var b2 = path.bezierBBox(50, 50, 50, 50, 150, 150, 150, 150); + var b3 = path.bezierBBox(100, 100, 100, 100, 200, 200, 200, 200); + + // all true + console.log(path.isBBoxIntersect(b1, b2)); + console.log(path.isBBoxIntersect(b1, b3)); + console.log(path.isPointInsideBBox(b1, 50, 50)); + console.log(path.isPointInsideBBox(b2, 50, 50)); + console.log(!path.isPointInsideBBox(b3, 50, 50)); +} + +//$(function () { +// tester1(); +//}); + +//tester2(); +//tester3(); +//tester4(); +//tester5(); +//tester6(); diff --git a/snapsvg/snapsvg-tests-3.ts b/snapsvg/snapsvg-tests-3.ts new file mode 100644 index 000000000..34905b845 --- /dev/null +++ b/snapsvg/snapsvg-tests-3.ts @@ -0,0 +1,344 @@ +//the code in this test file was copied from http://svg.dabbles.info/snaptut-animateframe +//the author is Ian Brierlay + +/// + +window.onload=()=>{ + + var s = Snap("#svgout"); + var path = Snap.path; + // bboxing + var b1 = path.bezierBBox(0, 0, 0, 0, 100, 100, 100, 100); + var b2 = path.bezierBBox(50, 50, 50, 50, 150, 150, 150, 150); + var b3 = path.bezierBBox(100, 100, 100, 100, 200, 200, 200, 200); + + alert(b1); + // all true + console.log(path.isBBoxIntersect(b1, b2)); + console.log(path.isBBoxIntersect(b1, b3)); + console.log(path.isPointInsideBBox(b1, 50, 50)); + console.log(path.isPointInsideBBox(b2, 50, 50)); + console.log(!path.isPointInsideBBox(b3, 50, 50)); + + { + // Snap Transforms + + var c = s.circle( 200,200,10 ); + var r = s.rect(200,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.3 }); + + var rclone = r.clone(); + var rclone2 = r.clone(); + var rclone3 = r.clone(); + var rclone4 = r.clone(); + var rclone5 = r.clone(); + + //t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale + //r=relative rotate, R=relative rotate + //relative means it takes into account previous transforms to accumulate + //here it doesn't make much difference, until we combine later + + + rclone.transform( 't100,100'); + rclone2.transform( 'r20,200,200' ); + rclone3.transform( 'r40,200,200' ); + + s.text(350,150,"rotate around 200,200"); + + rclone4.transform( 't100,100r20,200,200' ); + rclone5.transform( 't100,100r40,200,200' ); + + s.text(450,250,"combined translate of 100,100 and rotate around 200,200"); + } + + { + // Filters - Blur + s.attr({ viewBox: "0 0 600 600" }); + + var f = s.filter(Snap.filter.blur(5, 10)); + var shadow = s.filter(Snap.filter.shadow(0, 2, 3)); + var filterChild = f.node.firstChild; + + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', filter: f }); + Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value; }, 1000 ); + + var t = s.text(0,50, 'Hover to blur, hover out for shadow' ); + + r.hover( addBlur, addShadow ); + + function addBlur() { + this.attr({ filter: f }); + Snap.animate( 0, 10, function( value ) { filterChild.attributes[0].value = value + ',' + value; }, 1000 ); + }; + + function addShadow() { + this.attr({ filter: shadow }); + }; + } + + { + // Drag Handler + var rect = s.rect(20,20,40,40); + var circle = s.circle(60,150,50); + + var move = function(dx,dy) { + this.attr({ + transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy] + }); + } + + var start = function() { + this.data('origTransform', this.transform().local ); + } + var stop = function() { + console.log('finished dragging'); + } + + rect.drag(move, start, stop ); + circle.drag(move, start, stop ); + + } + + { + // Snap drag and scale example + var dragging = 0; + var handleGroup; + + function addHandleFunc() { + if( dragging == 0 ) { + dragging = 1; + var bb = this.getBBox(); + var handle = new Array(); + handle[0] = s.circle(bb.x,bb.y,10).attr({class: 'handler'});; + handle[1] = s.circle(bb.x+bb.width, bb.y, 10).attr({class: 'handler'}); + handleGroup = s.group(this, handle[0], handle[1]); + handleGroup.drag(move,start,stop); + } else { + dragging = 0; + s.append(this); + handleGroup.selectAll('handler').remove(); + handleGroup.remove(); + } + } + + var start = function() { + this.data('origTransform', this.transform().local); + } + + var move = function(dx,dy) { + var scale = 1 + dx / 50; + this.attr({ + transform: this.data('origTransform') + (this.data('origTransform') ? "S" : "s") + scale + }); + } + + var stop = function() {}; + + + var myRect = s.rect( 100,100,100,100 ).attr({fill: 'blue'}); + + myRect.dblclick( addHandleFunc );; + + s.text(70,220, 'double click the rect'); + } + + { + // Snap mask + var bigC = s.circle(200,200,175).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' }); + + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); + var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); + + var g = s.group(r,c); + + g.attr({ mask: bigC }); + + g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce ); + + } + + { + // Snap animated mask-clippath + var bigC = s.circle(100,100,75).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' }); + var bigC2 = s.circle(250,250,75).attr({ stroke: 'silver', 'strokeWidth': 40, fill: 'silver' }); + var clipG = s.group(bigC,bigC2); + + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); + var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); + + var g = s.group(r,c); + + g.attr({ mask: clipG }); + + g.animate({ transform: 'r360,150,150' }, 3000, mina.bounce ); + clipG.animate({ transform: 't200,0' }, 3000, mina.bounce, function() { clipG.animate({ transform: 't0,0' }, 3000, mina.bounce) } ); + + + } + { + // Snap load and animate svg + var g = s.group(); + var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment ) { + g.append( loadedFragment ); + g.hover( hoverover, hoverout ); + g.text(300,100, 'hover over me'); + } ); + + var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) }; + var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) }; + + } + + { + // Snap path test if a point inside with translation + var x, y, myTranslateX = 200, myTranslateY = 100; + + var myPathString = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z"; + + var p = s.path( myPathString ); + var p2 = s.path( myPathString ).transform("t" + myTranslateX + "," + myTranslateY); + + + for( var count = 0; count < 500; count++ ) { + x = Math.random() * 800; y = Math.random() * 400; + + c = s.circle( x,y,5 ).attr({ fill: "silver" }); + + // basic path + if( Snap.path.isPointInside( myPathString, x,y ) ) { + c.attr({ fill: "#ff0000" }); + } + + // matching against path as though it was translated + if( Snap.path.isPointInside( myPathString, x - myTranslateX, y - myTranslateY ) ) { + c.attr({ fill: "#0000ff" }); + } + + + } + } + + { + // Snap animate rotate a group + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); + var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); + + var g = s.group(r,c); + + g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce ); + } + + { + // Snap animate in a sequence and multiple anims + var myFrames = [{ + animation: { transform: 'r360,150,150' }, dur: 1000 }, + { animation: { transform: 't100,-100s2,3' }, dur: 1000 }, + { animation: { transform: 't100,100' }, dur: 1000 }, + { animation: { transform: 's0,1' }, dur: 1000 }, + { animation: { transform: 's1,0' }, dur: 1000 }, + { animation: { transform: 's1,1' }, dur: 1000 }]; + + var rectAnim = [{ + animation: { fill: 'green', transform: 'r1180,150,150' }, dur: 1500 }, + { animation: { fill: 'silver', transform: 'r360,150,150' }, dur: 1500 }]; + + var circleAnim = [{ animation: { transform: 's0,1' }, dur: 1500 }, + { animation: { transform: 's1,1' }, dur: 1500 }]; + + function nextFrame ( el:Snap.Element, frameArray, whichFrame ) { + if( whichFrame >= frameArray.length ) { return } + el.animate( frameArray[ whichFrame ].animation, frameArray[ whichFrame ].dur, nextFrame.bind( null, el, frameArray, whichFrame + 1 ) ); + + } + + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); + var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); + + var g = s.group(r,c); + + //g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce ); + nextFrame( g, myFrames, 0 ); + nextFrame( r, rectAnim, 0 ); + nextFrame( c, circleAnim, 0 ); + } + { + // Snap animate number + var t = s.text(50,50,0); + + Snap.animate(0, 100, function (value) { + t.attr({text: Math.round(value)}); + }, 1000); + } + { + // Snap animate text announce + var text = 'Here is some dynamic exciting announcement'; + // inspired from http://codepen.io/GreenSock/pen/AGzci + + var textArray = text.split(" "); + var len = textArray.length; + var timing = 750; + + for( var index=0; index < len; index++ ) { + + (function() { + + var svgTextElement = s.text(350,100, textArray[index]).attr({ fontSize: '120px', opacity: 0, "text-anchor": "middle" }); + + setTimeout( function() { + + Snap.animate( 0, 1, function( value ) { + //svgTextElement.transform('s' + value ); // Animate by transform + svgTextElement.attr({ 'font-size': value * 100, opacity: value }); // Animate by font-size ? + }, timing, mina.bounce, function() { svgTextElement.remove() } ); + } + ,index * timing) + }()); + }; + } + { + // Snap animate on click + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); + var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); + var otherRect = s.rect(200,200,50,50,10,10).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'green' }); + + var g = s.group(r,c); + + var clickFunc = function () { + g.transform(''); // reset the animation, may not be needed + otherRect.transform(''); + g.animate({ transform: 'r45,150,150' }, 1000, mina.bounce ) ;; + otherRect.animate({ transform: 'r360, 150,150' },2000, mina.bounce, endAnim ); + }; + + var endAnim = function() { + otherRect.animate({ transform: 'r90,200,200' }, 2000, mina.bounce ); + } + + g.click( clickFunc ); + } + + { + // Snap and the matrix + var s = Snap("#svgout"); + + var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); + var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); + var t = s.text(150,75,'The order of transformations is important!!!'); + var g = s.group(r,c,t); + + + // TODO: add constructor to Matrix + //var myMatrix = new Snap.Matrix(); + var myMatrix :Snap.Matrix; + myMatrix.scale(4,2); // play with scaling before and after the rotate + myMatrix.translate(100,0); // this translate will not be applied to the rotation + myMatrix.rotate(45); // rotate + //myMatrix.scale(4,2); + //myMatrix.translate(100,0); // this translate will take into account the rotated coord space + //g.animate({ transform: myMatrix.toTransformString() },1000); // probably not needed + + var myInvertedMatrix = myMatrix.invert(); + + g.animate({ transform: myMatrix },3000, mina.bounce, function() { g.animate({ transform: myInvertedMatrix }, 3000, mina.bounce) } ); + console.log( g.transform(), g.matrix, myMatrix.split() ); + } +} \ No newline at end of file diff --git a/snapsvg/snapsvg.d.ts b/snapsvg/snapsvg.d.ts index c7add1165..56d6b27b4 100644 --- a/snapsvg/snapsvg.d.ts +++ b/snapsvg/snapsvg.d.ts @@ -3,9 +3,9 @@ // Definitions by: Lars Klein // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare function mina(a:number, A:number, b:number, B:number, get:Function, set:Function, easing?:Function):Object; +declare function mina(a:number, A:number, b:number, B:number, get:Function, set:Function, easing?:(num:number)=>number):mina.AnimationDescriptor; declare module mina { - export interface Mina { + export interface MinaAnimation { id: string; duration: Function; easing: Function; @@ -13,6 +13,28 @@ declare module mina { status: Function; stop: Function; } + export interface AnimationDescriptor{ + id: string; + start: number; + end: number; + b: number; + s: number; + dur: number; + spd: number; + get(): number; + set(slave: number): number; + easing(input: number): number; + status(): number; + status(newStatus: number): void; + speed(): number; + speed(newSpeed: number): void; + duration(): number; + duration(newDuration: number): void; + stop(): void; + pause(): void; + resume(): void; + update(): void; + } export function backin(n:number):number; export function backout(n:number):number; @@ -21,12 +43,12 @@ declare module mina { export function easeinout(n:number):number; export function easeout(n:number):number; export function elastic(n:number):number; - export function getById(id:string):Object; + export function getById(id:string):AnimationDescriptor; export function linear(n:number):number; export function time():number; } -declare function Snap(width:number,height:number):Snap.Paper; +declare function Snap(width:number|string,height:number|string):Snap.Paper; declare function Snap(query:string):Snap.Paper; declare function Snap(DOM:SVGElement):Snap.Paper; @@ -51,13 +73,11 @@ declare module Snap { export function selectAll(query:string):any; export function snapTo(values:Array,value:number,tolerance?:number):number; - export function animate(from:number,to:number,setter:Function,duration:number,easing:Function,callback:Function):mina.Mina; - export function animate(from:Array,to:number,setter:Function,duration:number,easing:Function,callback:Function):mina.Mina; - export function animate(from:number,to:Array,setter:Function,duration:number,easing:Function,callback:Function):mina.Mina; - export function animate(from:Array,to:Array,setter:Function,duration:number,easing:Function,callback:Function):mina.Mina; - export function animation(attr:Object,duration:number,easing?:Function,callback?:Function):Object; + export function animate(from:number|number[],to:number|number[],updater:(n:number)=>void,duration:number,easing?:(num:number)=>number,callback?:()=>void):mina.MinaAnimation; + export function animation(attr:Object,duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Animation; - export function color(clr:string):Object;export function getRGB(color:string):Object; + export function color(clr:string):RGBHSB; + export function getRGB(color:string):RGB; export function hsb(h:number,s:number,b:number):HSB; export function hsl(h:number,s:number,l:number):HSL; export function rgb(r:number,g:number,b:number):RGB; @@ -88,6 +108,19 @@ declare module Snap { s:number; b:number; } + + export interface RGBHSB{ + r:number; + g:number; + b:number; + hex:string; + error:boolean; + h:number; + s:number; + v:number; + l:number; + } + export interface HSL{ h:number; s:number; @@ -111,33 +144,48 @@ declare module Snap { y2:number; y:number; } + + export interface TransformationDescriptor { + string: string; + globalMatrix: Snap.Matrix; + localMatrix: Snap.Matrix; + diffMatrix: Snap.Matrix; + global: string; + local: string; + toString(): string; + } + export interface Animation{ + attr:{[attr:string]:string|number|boolean|any}; + duration:number; + easing?:(num:number)=>number; + callback?:()=>void; + } export interface Element { - add():void; + add(el:Snap.Element):Snap.Element; addClass(value:string):Snap.Element; after(el:Snap.Element):Snap.Element; - animate(attrs:Object,duration:number,easing?:Function,callback?:Function):Snap.Element; + animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num: number)=> number,callback?:()=>void):Snap.Element; animate(animation:any):Snap.Element; append(el:Snap.Element):Snap.Element; appendTo(el:Snap.Element):Snap.Element; - asPX(attr:string,value?:string):Snap.Element; - attr(params:Object):Snap.Element; + asPX(attr:string,value?:string):number; //TODO: check what is really returned + attr(params:{[attr:string]:string|number|boolean|any}):Snap.Element; attr(param:string):string; before(el:Snap.Element):Snap.Element; clone():Snap.Element; data(key:string,value?:any):any; getBBox():BBox; - getPointAtLength(length:number):Object; + getPointAtLength(length:number):{x:number, y:number, alpha:number}; getSubpath(from:number,to:number):string; getTotalLength():number; hasClass(value:string):boolean; - id:string; - inAnim():Object; + inAnim(): { anim: Animation; mina: mina.AnimationDescriptor; curStatus: number; status: (n?: number) => number; stop: () => void }[]; innerSVG():string; insertAfter(el:Snap.Element):Snap.Element; insertBefore(el:Snap.Element):Snap.Element; marker(x:number,y:number,width:number,height:number,refX:number,refY:number):Snap.Element; - node:Element; + node:HTMLElement; outerSVG():string; parent():Snap.Element; pattern(x:any,y:any,width:any,height:any):Snap.Element; @@ -155,70 +203,95 @@ declare module Snap { toPattern(x:string,y:string,width:string,height:string):Object; toString():string; toggleClass(value:string,flag:boolean):Snap.Element; - transform(tstr:string):any; + transform(tstr:string):Snap.Element; + transform(): TransformationDescriptor; type:string; use():Object; - click(handler:Function):Snap.Element; - unclick(handler:Function):Snap.Element; - dblclick(handler:Function):Snap.Element; - undblclick(handler:Function):Snap.Element; - mousedown(handler:Function):Snap.Element; - unmousedown(handler:Function):Snap.Element; - mousemove(handler:Function):Snap.Element; - unmousemove(handler:Function):Snap.Element; - mouseout(handler:Function):Snap.Element; - unmouseout(handler:Function):Snap.Element; - mouseover(handler:Function):Snap.Element; - unmouseover(handler:Function):Snap.Element; - mouseup(handler:Function):Snap.Element; - unmouseup(handler:Function):Snap.Element; - touchstart(handler:Function):Snap.Element; - untouchstart(handler:Function):Snap.Element; - touchmove(handler:Function):Snap.Element; - untouchmove(handler:Function):Snap.Element; - touchend(handler:Function):Snap.Element; - untouchend(handler:Function):Snap.Element; - touchcancel(handler:Function):Snap.Element; - untouchcancel(handler:Function):Snap.Element; - hover(f_in:Function,f_out:Function,icontext?:Object,ocontext?:Object):Snap.Element; - unhover(f_in: Function, f_out: Function): Snap.Element; - drag(): void; - drag(onmove:Function,onstart:Function,onend:Function,mcontext?:Object,scontext?:Object,econtext?:Object):Snap.Element; - undrag():Snap.Element; + + click(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + dblclick(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + mousedown(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + mousemove(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + mouseout(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + mouseover(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + mouseup(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + touchstart(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + touchmove(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + touchend(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + touchcancel(handler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + + unclick(handler?: (event: MouseEvent) => void): Snap.Element; + undblclick(handler: (event: MouseEvent) => void): Snap.Element; + unmousedown(handler: (event: MouseEvent) => void): Snap.Element; + unmousemove(handler: (event: MouseEvent) => void): Snap.Element; + unmouseout(handler: (event: MouseEvent) => void): Snap.Element; + unmouseover(handler: (event: MouseEvent) => void): Snap.Element; + unmouseup(handler: (event: MouseEvent) => void): Snap.Element; + untouchstart(handler: (event: MouseEvent) => void): Snap.Element; + untouchmove(handler: (event: MouseEvent) => void): Snap.Element; + untouchend(handler: (event: MouseEvent) => void): Snap.Element; + untouchcancel(handler: (event: MouseEvent) => void): Snap.Element; + + hover(hoverInHandler: (event: MouseEvent) => void, hoverOutHandler: (event: MouseEvent) => void, thisArg?: any): Snap.Element; + hover(hoverInHandler: (event: MouseEvent) => void, hoverOutHandler: (event: MouseEvent) => void, inThisArg?: any, outThisArg?: any): Snap.Element; + unhover(hoverInHandler: (event: MouseEvent) => void, hoverOutHandler: (event: MouseEvent) => void): Snap.Element; + + drag():Snap.Element; + drag(onMove: (dx: number, dy: number, event: MouseEvent) => void, + onStart: (x: number, y: number, event: MouseEvent) => void, + onEnd: (event: MouseEvent) => void, + moveThisArg?: any, + startThisArg?: any, + endThisArg?: any): Snap.Element; + + undrag(onMove: (dx: number, dy: number, event: MouseEvent) => void, + onStart: (x: number, y: number, event: MouseEvent) => void, + onEnd: (event: MouseEvent) => void): Snap.Element; } export interface Fragment { //TODO: The documentation says that selectAll returns a set, but the getting started guide // uses .attr on the returned object. That's not supported by a set select(query:string):Snap.Element; - selectAll(query:string):Snap.Set; - selectAll():Snap.Set; + selectAll(query ?:string):Snap.Set; } + export interface Matrix { - add(a:number,b:number,c:number,d:number,e:number,f:number):void; - add(matrix:Matrix):void; + add(a:number,b:number,c:number,d:number,e:number,f:number):Matrix; + add(matrix:Matrix):Matrix; clone():Matrix; determinant():number; invert():Matrix; - rotate(a:number,x:number,y:number):void; - scale(x:number,y?:number,cx?:number,cy?:number):void; - split():Object; + rotate(a:number,x?:number,y?:number):Matrix; + scale(x:number,y?:number,cx?:number,cy?:number):Matrix; + split():ExplicitTransform; toTransformString():string; - translate(x:number,y:number):void; + translate(x:number,y:number):Matrix; x(x:number,y:number):number; y(x:number,y:number):number; } + interface ExplicitTransform { + dx: number; + dy: number; + scalex: number; + scaley: number; + shear: number; + rotate: number; + isSimple: boolean; + } + interface Paper extends Snap.Element { clear():void; el(name:string, attr:Object):Snap.Element; + filter(filstr:string):Snap.Element; gradient(gradient:string):any; g(varargs?:any):any; - group(el?:any,...els:any[]):any; + group(...els:any[]):any; mask(varargs:any):Object; ptrn(x:number,y:number,width:number,height:number,vbx:number,vby:number,vbw:number,vbh:number):Object; svg(x:number,y:number,width:number,height:number,vbx:number,vby:number,vbw:number,vbh:number):Object; @@ -234,13 +307,14 @@ declare module Snap { polygon(varargs:any[]):Snap.Element; polyline(varargs:any[]):Snap.Element; rect(x:number,y:number,width:number,height:number,rx?:number,ry?:number):Snap.Element; - text(x:number,y:number,text:string):Snap.Element; - text(x:number,y:number,text:Array):Snap.Element; + text(x:number,y:number,text:string|number):Snap.Element; + text(x:number,y:number,text:Array):Snap.Element; } export interface Set { - animate(attrs:Object,duration:number,easing?:Function,callback?:Function):Snap.Element; - attr(params: Object): Snap.Element; + animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Element; + animate(...params:Array<{attrs:any,duration:number,easing:(num:number)=>number,callback?:()=>void}>):Snap.Element; + attr(params: {[attr:string]:string|number|boolean|any}): Snap.Element; attr(param: string): string; bind(attr: string, callback: Function): Snap.Set; bind(attr:string,element:Snap.Element):Snap.Set; @@ -263,23 +337,25 @@ declare module Snap { invert(amount:number):string; saturate(amount:number):string; sepia(amount:number):string; - shadow(dx:number,dy:number,blur?:number,color?:string,opacity?:number):string; + shadow(dx: number, dy: number, blur: number, color: string, opacity: number): string; + shadow(dx: number, dy: number, color: string, opacity: number): string; + shadow(dx: number, dy: number, opacity: number): string; } interface Path { - bezierBBox(...args:number[]):Object; - bezierBBox(bez:Array):Object; + bezierBBox(...args:number[]):BBox; + bezierBBox(bez:Array):BBox; findDotsAtSegment(p1x:number,p1y:number,c1x:number, c1y:number,c2x:number,c2y:number, p2x:number,p2y:number,t:number):Object; - getBBox(path:string):Object; + getBBox(path:string):BBox; getPointAtLength(path:string,length:number):Object; getSubpath(path:string,from:number,to:number):string; getTotalLength(path:string):number; - intersection(path1:string,path2:string):Array; - isBBoxIntersect(bbox1:string,bbox2:string):boolean + intersection(path1:string,path2:string):Array; + isBBoxIntersect(bbox1:BBox,bbox2:BBox):boolean isPointInside(path:string,x:number,y:number):boolean; - isPointInsideBBox(bbox:string,x:string,y:string):boolean; + isPointInsideBBox(bbox:BBox,x:number,y:number):boolean; map(path:string,matrix:Snap.Matrix):string; map(path:string,matrix:Object):string; toAbsolute(path:string):Array; @@ -287,4 +363,15 @@ declare module Snap { toCubic(pathString:Array):Array; toRelative(path:string):Array; } + + interface IntersectionDot{ + x:number, + y:number, + t1:number, + t2:number, + segment1:number, + segment2:number, + bez1:Array, + bez2:Array + } }