diff --git a/types/snapsvg/index.d.ts b/types/snapsvg/index.d.ts index 85f1eda7b8..8c2e22ce73 100644 --- a/types/snapsvg/index.d.ts +++ b/types/snapsvg/index.d.ts @@ -1,6 +1,9 @@ // Type definitions for Snap-SVG 0.4.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 /// @@ -31,6 +34,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(...args: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; diff --git a/types/snapsvg/test/4.ts b/types/snapsvg/test/4.ts new file mode 100644 index 0000000000..fe15e6110f --- /dev/null +++ b/types/snapsvg/test/4.ts @@ -0,0 +1,92 @@ +// Tests by Terry Mun +// Checks that Snap.set() is properly typed + +const s = Snap(200, 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 = null; + +// 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 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: 100 }, 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 forEachTest(); + await excludeTest(); + await spliceTest(); + await clearTest(); + await removeTest(); + + return; +} + +startTest(); \ No newline at end of file diff --git a/types/snapsvg/tsconfig.json b/types/snapsvg/tsconfig.json index 7ee69cd259..23101593c7 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