diff --git a/snapsvg/snapsvg-tests-3.ts b/snapsvg/snapsvg-tests-3.ts index 66dd6677eb..ad4512aa8c 100644 --- a/snapsvg/snapsvg-tests-3.ts +++ b/snapsvg/snapsvg-tests-3.ts @@ -5,231 +5,231 @@ window.onload=()=>{ - var s = Snap("#svgout"); - var path = Snap.path; + 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); + 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:number,dy:number) { - 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:any; - - 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:number,dy:number) { - 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' }); + { + // Snap Transforms - 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) } ); - + 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 }); - } - { - // Snap load and animate svg - var g = s.group(); - var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment:Snap.Element ) { - 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 ) }; + var rclone = r.clone(); + var rclone2 = r.clone(); + var rclone3 = r.clone(); + var rclone4 = r.clone(); + var rclone5 = r.clone(); - } - - { - // Snap path test if a point inside with translation - var x:number, y:number, myTranslateX = 200, myTranslateY = 100; + //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 - 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 = [{ + + 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:number,dy:number) { + 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:any; + + 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:number,dy:number) { + 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:Snap.Element ) { + 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:number, y:number, 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 }, @@ -237,108 +237,108 @@ window.onload=()=>{ { 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:any[], whichFrame:number ) { - 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); + var rectAnim = [{ + animation: { fill: 'green', transform: 'r1180,150,150' }, dur: 1500 }, + { animation: { fill: 'silver', transform: 'r360,150,150' }, dur: 1500 }]; - 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 ); - } + var circleAnim = [{ animation: { transform: 's0,1' }, dur: 1500 }, + { animation: { transform: 's1,1' }, dur: 1500 }]; - { - // Snap and the matrix - var s = Snap("#svgout"); + function nextFrame ( el:Snap.Element, frameArray:any[], whichFrame:number ) { + 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 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 + } + + 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() ); + } +} diff --git a/snapsvg/snapsvg.d.ts b/snapsvg/snapsvg.d.ts index 8c5e2962fd..5175ad67c1 100644 --- a/snapsvg/snapsvg.d.ts +++ b/snapsvg/snapsvg.d.ts @@ -37,16 +37,16 @@ declare module mina { update(): void; } - export function backin(n:number):number; - export function backout(n:number):number; - export function bounce(n:number):number; - export function easein(n:number):number; - export function easeinout(n:number):number; - export function easeout(n:number):number; - export function elastic(n:number):number; - export function getById(id:string):AnimationDescriptor; - export function linear(n:number):number; - export function time():number; + export function backin(n:number):number; + export function backout(n:number):number; + export function bounce(n:number):number; + export function easein(n:number):number; + export function easeinout(n:number):number; + export function easeout(n:number):number; + export function elastic(n:number):number; + export function getById(id:string):AnimationDescriptor; + export function linear(n:number):number; + export function time():number; } declare function Snap(width:number|string,height:number|string):Snap.Paper; @@ -54,112 +54,112 @@ declare function Snap(query:string):Snap.Paper; declare function Snap(DOM:SVGElement):Snap.Paper; declare module Snap { - export var filter:Filter; - export var path:Path; + export var filter:Filter; + export var path:Path; - export function Matrix():void; - export function matrix():Matrix; - export function matrix(a:number,b:number,c:number,d:number,e:number,f:number):Matrix; - export function matrix(svgMatrix:SVGMatrix):Matrix; + export function Matrix():void; + export function matrix():Matrix; + export function matrix(a:number,b:number,c:number,d:number,e:number,f:number):Matrix; + export function matrix(svgMatrix:SVGMatrix):Matrix; - export function ajax(url:string,postData:string,callback:Function,scope?:Object):XMLHttpRequest; - export function ajax(url:string,postData:Object,callback:Function,scope?:Object):XMLHttpRequest; - export function ajax(url:string,callback:Function,scope?:Object):XMLHttpRequest; - export function format(token:string,json:Object):string; - export function fragment(varargs:any):Fragment; - export function getElementByPoint(x:number,y:number):Snap.Element; - export function is(o:any,type:string):boolean; - export function load(url:string,callback:Function,scope?:Object):void; - export function plugin(f:Function):void; - export function select(query:string):Snap.Element; - export function selectAll(query:string):any; - export function snapTo(values:Array,value:number,tolerance?:number):number; + export function ajax(url:string,postData:string,callback:Function,scope?:Object):XMLHttpRequest; + export function ajax(url:string,postData:Object,callback:Function,scope?:Object):XMLHttpRequest; + export function ajax(url:string,callback:Function,scope?:Object):XMLHttpRequest; + export function format(token:string,json:Object):string; + export function fragment(varargs:any):Fragment; + export function getElementByPoint(x:number,y:number):Snap.Element; + export function is(o:any,type:string):boolean; + export function load(url:string,callback:Function,scope?:Object):void; + export function plugin(f:Function):void; + export function select(query:string):Snap.Element; + export function selectAll(query:string):any; + export function snapTo(values:Array,value:number,tolerance?:number):number; - 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 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):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; - export function hsb2rgb(h:number,s:number,v:number):RGB; - export function hsl2rgb(h:number,s:number,l:number):RGB; - export function rgb2hsb(r:number,g:number,b:number):HSB; - export function rgb2hsl(r:number,g:number,b:number):HSL; + 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; + export function hsb2rgb(h:number,s:number,v:number):RGB; + export function hsl2rgb(h:number,s:number,l:number):RGB; + export function rgb2hsb(r:number,g:number,b:number):HSB; + export function rgb2hsl(r:number,g:number,b:number):HSL; - export function angle(x1:number,y1:number,x2:number,y2:number,x3?:number,y3?:number):number; - export function rad(deg:number):number; - export function deg(rad:number):number; - export function sin(angle: number): number; - export function cos(angle: number): number; - export function tan(angle: number): number; - export function asin(angle: number): number; - export function acos(angle: number): number; - export function atan(angle: number): number; - export function atan2(angle: number): number; + export function angle(x1:number,y1:number,x2:number,y2:number,x3?:number,y3?:number):number; + export function rad(deg:number):number; + export function deg(rad:number):number; + export function sin(angle: number): number; + export function cos(angle: number): number; + export function tan(angle: number): number; + export function asin(angle: number): number; + export function acos(angle: number): number; + export function atan(angle: number): number; + export function atan2(angle: number): number; - export function len(x1: number, y1: number, x2: number, y2: number): number; - export function len2(x1: number, y1: number, x2: number, y2: number): number; + export function len(x1: number, y1: number, x2: number, y2: number): number; + export function len2(x1: number, y1: number, x2: number, y2: number): number; - export function parse(svg:string):Fragment; - export function parsePathString(pathString:string):Array; - export function parsePathString(pathString:Array):Array; - export function parseTransformString(TString:string):Array; - export function parseTransformString(TString:Array):Array; + export function parse(svg:string):Fragment; + export function parsePathString(pathString:string):Array; + export function parsePathString(pathString:Array):Array; + export function parseTransformString(TString:string):Array; + export function parseTransformString(TString:Array):Array; - export function closest(x: number, y: number, X: number, Y: number): boolean; + export function closest(x: number, y: number, X: number, Y: number): boolean; - export interface RGB { - r:number; - g:number; - b:number; - hex:string; - } + export interface RGB { + r:number; + g:number; + b:number; + hex:string; + } - export interface HSB { - h:number; - s:number; - b:number; - } + export interface HSB { + h:number; + 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 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; - l:number; - } + export interface HSL { + h:number; + s:number; + l:number; + } - export interface BBox { - cx:number; - cy:number; - h:number; - height:number; - path:number; - r0:number; - r1:number; - r2:number; - vb:string; - w:number; - width:number; - x2:number; - x:number; - y2:number; - y:number; - } + export interface BBox { + cx:number; + cy:number; + h:number; + height:number; + path:number; + r0:number; + r1:number; + r2:number; + vb:string; + w:number; + width:number; + x2:number; + x:number; + y2:number; + y:number; + } - export interface TransformationDescriptor { + export interface TransformationDescriptor { string: string; globalMatrix: Snap.Matrix; localMatrix: Snap.Matrix; @@ -169,61 +169,61 @@ declare module Snap { toString(): string; } - export interface Animation { - attr:{[attr:string]:string|number|boolean|any}; - duration:number; - easing?:(num:number)=>number; - callback?:()=>void; - } + export interface Animation { + attr:{[attr:string]:string|number|boolean|any}; + duration:number; + easing?:(num:number)=>number; + callback?:()=>void; + } - export interface Element { - add(el:Snap.Element):Snap.Element; - addClass(value:string):Snap.Element; - after(el:Snap.Element):Snap.Element; - align(el: Snap.Element, way: string):Snap.Element; - animate(animation:any):Snap.Element; - animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num: number)=> number,callback?:()=>void):Snap.Element; - append(el:Snap.Element):Snap.Element; - appendTo(el:Snap.Element):Snap.Element; - asPX(attr:string,value?:string):number; //TODO: check what is really returned - attr(param:string):string; - attr(params:{[attr:string]:string|number|boolean|any}):Snap.Element; - before(el:Snap.Element):Snap.Element; - children(): Snap.Element[]; - clone():Snap.Element; - data(key:string,value?:any):any; - getAlign(el: Snap.Element, way: string): string; - getBBox():BBox; - getPointAtLength(length:number):{x:number, y:number, alpha:number}; - getSubpath(from:number,to:number):string; - getTotalLength():number; - hasClass(value:string):boolean; - 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:HTMLElement; - outerSVG():string; - parent():Snap.Element; - pattern(x:any,y:any,width:any,height:any):Snap.Element; - prepend(el:Snap.Element):Snap.Element; - prependTo(el:Snap.Element):Snap.Element; - remove():Snap.Element; - removeClass(value:string):Snap.Element; - removeData(key?:string):Snap.Element; - select(query:string):Snap.Element; - stop():Snap.Element; - toDefs():Snap.Element; - toJSON(): any; - toggleClass(value:string,flag:boolean):Snap.Element; - toPattern(x:number,y:number,width:number,height:number):Object; - toPattern(x:string,y:string,width:string,height:string):Object; - toString():string; - transform(): TransformationDescriptor; - transform(tstr:string):Snap.Element; - type:string; - use():Object; + export interface Element { + add(el:Snap.Element):Snap.Element; + addClass(value:string):Snap.Element; + after(el:Snap.Element):Snap.Element; + align(el: Snap.Element, way: string):Snap.Element; + animate(animation:any):Snap.Element; + animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num: number)=> number,callback?:()=>void):Snap.Element; + append(el:Snap.Element):Snap.Element; + appendTo(el:Snap.Element):Snap.Element; + asPX(attr:string,value?:string):number; //TODO: check what is really returned + attr(param:string):string; + attr(params:{[attr:string]:string|number|boolean|any}):Snap.Element; + before(el:Snap.Element):Snap.Element; + children(): Snap.Element[]; + clone():Snap.Element; + data(key:string,value?:any):any; + getAlign(el: Snap.Element, way: string): string; + getBBox():BBox; + getPointAtLength(length:number):{x:number, y:number, alpha:number}; + getSubpath(from:number,to:number):string; + getTotalLength():number; + hasClass(value:string):boolean; + 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:HTMLElement; + outerSVG():string; + parent():Snap.Element; + pattern(x:any,y:any,width:any,height:any):Snap.Element; + prepend(el:Snap.Element):Snap.Element; + prependTo(el:Snap.Element):Snap.Element; + remove():Snap.Element; + removeClass(value:string):Snap.Element; + removeData(key?:string):Snap.Element; + select(query:string):Snap.Element; + stop():Snap.Element; + toDefs():Snap.Element; + toJSON(): any; + toggleClass(value:string,flag:boolean):Snap.Element; + toPattern(x:number,y:number,width:number,height:number):Object; + toPattern(x:string,y:string,width:string,height:string):Object; + toString():string; + transform(): TransformationDescriptor; + transform(tstr:string):Snap.Element; + type:string; + use():Object; selectAll(): Snap.Set; selectAll(query: string): Snap.Set; @@ -255,7 +255,7 @@ declare module Snap { 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():Snap.Element; drag(onMove: (dx: number, dy: number, x: number, y: number, event: MouseEvent) => void, onStart: (x: number, y: number, event: MouseEvent) => void, onEnd: (event: MouseEvent) => void, @@ -266,33 +266,32 @@ declare module Snap { undrag(onMove: (dx: number, dy: number, event: MouseEvent) => void, onStart: (x: number, y: number, event: MouseEvent) => void, onEnd: (event: MouseEvent) => void): Snap.Element; - undrag(): Snap.Element; - } + undrag(): 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; - } + 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; + } - export interface Matrix { - 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):Matrix; - scale(x:number,y?:number,cx?:number,cy?:number):Matrix; - split():ExplicitTransform; - toTransformString():string; - translate(x:number,y:number):Matrix; - x(x:number,y:number):number; - y(x:number,y:number):number; + export interface Matrix { + 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):Matrix; + scale(x:number,y?:number,cx?:number,cy?:number):Matrix; + split():ExplicitTransform; + toTransformString():string; + translate(x:number,y:number):Matrix; + x(x:number,y:number):number; + y(x:number,y:number):number; + } - } - - interface ExplicitTransform { + interface ExplicitTransform { dx: number; dy: number; scalex: number; @@ -302,94 +301,94 @@ declare module Snap { 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(...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; - toDataUrl(): string; - toString():string; - use(id?:string):Object; - use(id?:Snap.Element):Object; + 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(...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; + toDataUrl(): string; + toString():string; + use(id?:string):Object; + use(id?:Snap.Element):Object; - circle(x:number,y:number,r:number):Snap.Element; - ellipse(x:number,y:number,rx:number,ry:number):Snap.Element; - image(src:string,x:number,y:number,width:number,height:number):Snap.Element; - line(x1:number,y1:number,x2:number,y2:number):Snap.Element; - path(pathString?:string):Snap.Element; - 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|number):Snap.Element; - text(x:number,y:number,text:Array):Snap.Element; - } + circle(x:number,y:number,r:number):Snap.Element; + ellipse(x:number,y:number,rx:number,ry:number):Snap.Element; + image(src:string,x:number,y:number,width:number,height:number):Snap.Element; + line(x1:number,y1:number,x2:number,y2:number):Snap.Element; + path(pathString?:string):Snap.Element; + 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|number):Snap.Element; + text(x:number,y:number,text:Array):Snap.Element; + } - export interface Set { - animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Element; + export interface Set { + 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(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; - bind(attr:string,element:Snap.Element,eattr:string):Snap.Set; - clear():Snap.Set; - exclude(element:Snap.Element):boolean; - forEach(callback:Function,thisArg?:Object):Snap.Set; - pop():Snap.Element; - push(el:Snap.Element):Snap.Element; - push(els:Snap.Element[]):Snap.Element; - splice(index:number,count:number,insertion?:Object[]):Snap.Element[]; - } + bind(attr:string,element:Snap.Element):Snap.Set; + bind(attr:string,element:Snap.Element,eattr:string):Snap.Set; + clear():Snap.Set; + exclude(element:Snap.Element):boolean; + forEach(callback:Function,thisArg?:Object):Snap.Set; + pop():Snap.Element; + push(el:Snap.Element):Snap.Element; + push(els:Snap.Element[]):Snap.Element; + splice(index:number,count:number,insertion?:Object[]):Snap.Element[]; + } - interface Filter { - blur(x:number,y?:number):string; - brightness(amount:number):string; - contrast(amount:number):string; - grayscale(amount:number):string; - hueRotate(angle:number):string; - invert(amount:number):string; - saturate(amount:number):string; - sepia(amount:number):string; - shadow(dx: number, dy: number, blur: number, color: string, opacity: number): string; + interface Filter { + blur(x:number,y?:number):string; + brightness(amount:number):string; + contrast(amount:number):string; + grayscale(amount:number):string; + hueRotate(angle:number):string; + 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, color: string, opacity: number): string; shadow(dx: number, dy: number, opacity: number): string; - } + } - interface Path { - 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):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:BBox,bbox2:BBox):boolean - isPointInside(path:string,x:number,y:number):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; - toCubic(pathString:string):Array; - toCubic(pathString:Array):Array; - toRelative(path:string):Array; - } + interface Path { + 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):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:BBox,bbox2:BBox):boolean + isPointInside(path:string,x:number,y:number):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; + toCubic(pathString:string):Array; + 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 - } -} \ No newline at end of file + interface IntersectionDot{ + x:number, + y:number, + t1:number, + t2:number, + segment1:number, + segment2:number, + bez1:Array, + bez2:Array + } +}