Merge pull request #31899 from terrymun/master

[@types/snapsvg] Exposed interface for Snap.set()

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 <https://github.com/lhk>, Mattanja Kern <https://github.com/mattanja>, Andrey Kurdyumov <https://github.com/kant2002>
+// Definitions by: Lars Klein <https://github.com/lhk>,
+//                 Mattanja Kern <https://github.com/mattanja>,
+//                 Andrey Kurdyumov <https://github.com/kant2002>,
+//                 Terry Mun <https://github.com/terrymun>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.0
 /// <reference types="mina" />
 
 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>|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 {

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();
+})();

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"
     ]
 }