diff --git a/types/snapsvg/index.d.ts b/types/snapsvg/index.d.ts index 85f1eda7b8cf7d..cc9c4f3627a691 100644 --- a/types/snapsvg/index.d.ts +++ b/types/snapsvg/index.d.ts @@ -1,7 +1,11 @@ -// Type definitions for Snap-SVG 0.4.1 +// Type definitions for Snap-SVG 0.5.1 // Project: https://github.com/adobe-webplatform/Snap.svg -// Definitions by: Lars Klein , Mattanja Kern , Andrey Kurdyumov +// Definitions by: Lars Klein , +// Mattanja Kern , +// Andrey Kurdyumov , +// Terry Mun // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.0 /// export = Snap; @@ -31,6 +35,7 @@ declare namespace Snap { export function plugin(f:Function):void; export function select(query:string):Snap.Element; export function selectAll(query:string):any; + export function set(...els:Snap.Element[]):Snap.Set; export function snapTo(values:Array|number,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; @@ -299,22 +304,24 @@ declare namespace Snap { } 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|BBox|any}): Snap.Element; - attr(param: "viewBox"): BBox; - attr(param: string): string; - bind(attr: string, callback: Function): Snap.Set; + animate(attrs:{[attr:string]:string|number|boolean|any},duration:number,easing?:(num:number)=>number,callback?:()=>void):Snap.Set; + animate(...attrs:[{[attr:string]:string|number|boolean|any},number?,((num:number)=>number)?,(()=>void)?][]):Snap.Element; + attr(params:{[attr:string]:string|number|boolean|BBox|any}):Snap.Set; + attr(param:"viewBox"):Snap.Set; + attr(param:string):Snap.Set; + 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; + clear():void; + exclude(el:Snap.Element):boolean; + forEach(callback:(el:Snap.Element,index?:number)=>void|boolean,thisArg?:Object):Snap.Set; + getBBox():BBox; + insertAfter():Snap.Set; pop():Snap.Element; - push(el:Snap.Element):Snap.Element; - push(els:Snap.Element[]):Snap.Element; - remove(): Snap.Set; - splice(index:number,count:number,insertion?:Object[]):Snap.Element[]; + push(el:Snap.Element):Snap.Set; + push(...els:Snap.Element[]):Snap.Set; + remove():Snap.Set; + splice(index:number,count:number,...insertion:Snap.Element[]):Snap.Set; } interface Filter { diff --git a/types/snapsvg/test/4.ts b/types/snapsvg/test/4.ts new file mode 100644 index 00000000000000..cfe9b40b14c235 --- /dev/null +++ b/types/snapsvg/test/4.ts @@ -0,0 +1,121 @@ +(() => { + // Tests by Terry Mun + // Checks that Snap.set() is properly typed + + const s = Snap(300, 500); + s.attr({ + viewBox: '0 0 200 500' + }); + + // Create multiple elements to be added to set + const rect1 = s.rect(0, 0, 50, 50); + const rect2 = s.rect(0, 100, 50, 50); + const rect3 = s.rect(0, 200, 50, 50); + const rect4 = s.rect(0, 300, 50, 50); + let rect5: Snap.Element; + + // Create new set + const rectSet = Snap.set(rect1, rect2); + + // Add missing rectangles to set + rectSet.push(rect3, rect4); + + // Set all attributes + rectSet.attr({ + fill: 'steelblue' + }); + + // Animate all elements in set + function animateTest() { + return new Promise(resolve => { + rectSet.animate({ + x: 50 + }, 500, mina.bounce, resolve); + }); + } + + // Animate elements individually + function animateMultipleTest() { + return new Promise(resolve => { + rectSet.animate( + [{ x: 100 }, 500, mina.linear], + [{ x: 100 }, 1000, mina.linear], + [{ x: 100 }, 1500, mina.linear], + [{ x: 100 }, 2000, mina.linear, resolve] + ); + }); + } + + // Animate elements individually + function forEachTest() { + const colors = ['red', 'green', 'blue']; + return new Promise(resolve => { + rectSet.forEach((element, idx) => { + element.attr({ + fill: colors[idx] || '#aaa' + }); + }); + resolve(); + }); + } + + // Exclude rect4 from set + function excludeTest() { + return new Promise(resolve => { + rectSet.exclude(rect4); + rectSet.animate({ + x: 150 + }, 500, mina.bounce, resolve); + }); + } + + // Remove rect2 from set (it has index of 1) + // Add new rect5 to set + async function spliceTest() { + rectSet.splice(1, 1); + rectSet.attr({ + fill: '#000' + }); + + rect5 = s.rect(100, 400, 50, 50); + rectSet.splice(1, 0, rect5); + return; + } + + // Clear set. Rectangles should not go back to x=0 + function clearTest() { + return new Promise(resolve => { + rectSet.clear(); + + // SHOULD NOT WORK + rectSet.animate({ + x: 0 + }, 500, mina.bounce, resolve); + + // Re-add rects to set + rectSet.push(rect1, rect2, rect3, rect4, rect5); + resolve(); + }); + } + + // Remove all elements from DOM that are present in set + async function removeTest() { + rectSet.remove(); + return; + } + + // Start test + async function startTest() { + await animateTest(); + await animateMultipleTest(); + await forEachTest(); + await excludeTest(); + await spliceTest(); + await clearTest(); + await removeTest(); + + return; + } + + startTest(); +})(); diff --git a/types/snapsvg/tsconfig.json b/types/snapsvg/tsconfig.json index 7ee69cd25962a6..23101593c7f2e3 100644 --- a/types/snapsvg/tsconfig.json +++ b/types/snapsvg/tsconfig.json @@ -21,6 +21,7 @@ "index.d.ts", "test/1.ts", "test/2.ts", - "test/3.ts" + "test/3.ts", + "test/4.ts" ] } \ No newline at end of file