wassname/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/wassname/DefinitelyTyped.git synced 2026-09-01 11:50:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5296 from lhk/master

Browse Source 
Aligning to the PR of Daniel Rosenwasser
This commit is contained in:
Masahiro Wakame
2015-08-17 22:53:11 +09:00
parent 83eb90d286 04dd33bcd8
commit adbe9fa31e
3 changed files with 630 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
snapsvg/snapsvg-tests-2.ts
+133
View File
@@ -0,0 +1,133 @@
/// <reference path="snapsvg.d.ts" />
// 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();
snapsvg/snapsvg-tests-3.ts
+344
View File
@@ -0,0 +1,344 @@
//the code in this test file was copied from http://svg.dabbles.info/snaptut-animateframe
//the author is Ian Brierlay
/// <reference path="snapsvg.d.ts"/>
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() );
}
}
snapsvg/snapsvg.d.ts
Vendored
+153 -66
View File
@@ -3,9 +3,9 @@
// Definitions by: Lars Klein <https://github.com/lhk>
// 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<number>,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<number>,to:number,setter:Function,duration:number,easing:Function,callback:Function):mina.Mina;
export function animate(from:number,to:Array<number>,setter:Function,duration:number,easing:Function,callback:Function):mina.Mina;
export function animate(from:Array<number>,to:Array<number>,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<string>):Snap.Element;
text(x:number,y:number,text:string|number):Snap.Element;
text(x:number,y:number,text:Array<string|number>):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<number>):Object;
bezierBBox(...args:number[]):BBox;
bezierBBox(bez:Array<number>):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<any>;
isBBoxIntersect(bbox1:string,bbox2:string):boolean
intersection(path1:string,path2:string):Array<IntersectionDot>;
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<any>;
@@ -287,4 +363,15 @@ declare module Snap {
toCubic(pathString:Array<string>):Array<any>;
toRelative(path:string):Array<any>;
}
interface IntersectionDot{
x:number,
y:number,
t1:number,
t2:number,
segment1:number,
segment2:number,
bez1:Array<number>,
bez2:Array<number>
}
}