gesturx 0.0.0 → 1.0.0

package/src/core/{tapRecognizer.test.ts → tap/TapRecognizer.test.ts}

@@ -1,17 +1,17 @@
-import { describe, it, expect, beforeEach } from "vitest";
-import { createTapRecognizer } from "./tapRecognizer";
-import { buffer, first, lastValueFrom, tap, timer } from "rxjs";
+import { describe, it, expect, beforeEach } from "vitest"
+import { TapRecognizer } from "./TapRecognizer"
+import { buffer, first, lastValueFrom, tap, timer } from "rxjs"
 
 const waitFor = (time: number) =>
-  new Promise((resolve) => setTimeout(resolve, time));
+  new Promise((resolve) => setTimeout(resolve, time))
 
 describe("TapGestureRecognizer", () => {
-  let container = document.createElement("div");
+  let container = document.createElement("div")
 
   beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
+    container = document.createElement("div")
+    document.body.appendChild(container)
+  })
 
   function createPointerEvent({
     type,
@@ -19,10 +19,10 @@ describe("TapGestureRecognizer", () => {
     y,
     identifier,
   }: {
-    type: string;
-    x: number;
-    y: number;
-    identifier: number;
+    type: string
+    x: number
+    y: number
+    identifier: number
   }) {
     const event = new PointerEvent(type, {
       clientX: x,
@@ -30,9 +30,14 @@ describe("TapGestureRecognizer", () => {
       pointerId: identifier,
       pointerType: "touch",
       bubbles: true,
-    });
+    })
 
-    return event;
+    // @ts-ignore
+    event.x = x
+    // @ts-ignore
+    event.y = y
+
+    return event
   }
 
   function sendPointerEvent({
@@ -42,44 +47,45 @@ describe("TapGestureRecognizer", () => {
     container,
     identifier,
   }: {
-    container: HTMLElement;
-    type: string;
-    x: number;
-    y: number;
-    identifier: number;
+    container: HTMLElement
+    type: string
+    x: number
+    y: number
+    identifier: number
   }) {
     const event = createPointerEvent({
       type,
       x,
       y,
       identifier,
-    });
+    })
 
-    sendPointerEventFromEvent({ event, container });
+    sendPointerEventFromEvent({ event, container })
   }
 
   function sendPointerEventFromEvent({
     event,
     container,
   }: {
-    event: PointerEvent;
-    container: HTMLElement;
+    event: PointerEvent
+    container: HTMLElement
   }) {
-    container.dispatchEvent(event);
+    container.dispatchEvent(event)
   }
 
   it("should detect a single tap", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(multiTapThreshold * 2);
-    const recognizer = createTapRecognizer({ multiTapThreshold })({
+    const multiTapThreshold = 5
+    const waitLongEnough$ = timer(100)
+    const recognizer = new TapRecognizer({ multiTapThreshold })
+    recognizer.initialize({
       container,
-    });
+    })
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
         tap({
           subscribe: async () => {
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -87,36 +93,37 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 1,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values).toMatchObject([{ type: "tap", taps: 1 }]);
-  });
+    expect(values).toMatchObject([{ type: "tap", taps: 1 }])
+  })
 
   it("should detect a double tap", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(multiTapThreshold * 2);
-    const recognizer = createTapRecognizer({ multiTapThreshold, maxTaps: 2 })({
+    const multiTapThreshold = 5
+    const waitLongEnough$ = timer(multiTapThreshold * 2)
+    const recognizer = new TapRecognizer({ multiTapThreshold, maxTaps: 2 })
+    recognizer.initialize({
       container,
-    });
+    })
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
         tap({
           subscribe: async () => {
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -124,44 +131,45 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 1,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 2,
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 2,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values).toMatchObject([{ type: "tap", taps: 2 }]);
-  });
+    expect(values).toMatchObject([{ type: "tap", taps: 2 }])
+  })
 
   it("should detect a triple tap", async () => {
-    const multiTapThreshold = 5;
-    const recognizer = createTapRecognizer({ multiTapThreshold, maxTaps: 3 })({
+    const multiTapThreshold = 5
+    const recognizer = new TapRecognizer({ multiTapThreshold, maxTaps: 3 })
+    recognizer.initialize({
       container,
-    });
-    const waitLongEnough$ = timer(100);
+    })
+    const waitLongEnough$ = timer(100)
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
@@ -174,65 +182,66 @@ describe("TapGestureRecognizer", () => {
                 type: "pointerdown",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 1,
                 type: "pointerup",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 1,
                 type: "pointerdown",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 1,
                 type: "pointerup",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 1,
                 type: "pointerdown",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 1,
                 type: "pointerup",
                 x: 0,
                 y: 0,
-              });
-            });
+              })
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values).toMatchObject([{ type: "tap", taps: 3 }]);
-  });
+    expect(values).toMatchObject([{ type: "tap", taps: 3 }])
+  })
 
   it("should not detect a double tap if the second tap is after threshold", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(100);
-    const recognizer = createTapRecognizer({ multiTapThreshold, maxTaps: 2 })({
+    const multiTapThreshold = 5
+    const waitLongEnough$ = timer(100)
+    const recognizer = new TapRecognizer({ multiTapThreshold, maxTaps: 2 })
+    recognizer.initialize({
       container,
-    });
+    })
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
         tap({
           subscribe: async () => {
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -240,16 +249,16 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 1,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
 
-            await waitFor(multiTapThreshold);
+            await waitFor(multiTapThreshold)
 
             sendPointerEvent({
               container,
@@ -257,41 +266,44 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 2,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values.length).toBe(2);
+    expect(values.length).toBe(2)
     expect(values).toMatchObject([
-      { type: "tap", taps: 1, srcEvent: { pointerId: 1 } },
-      { type: "tap", taps: 1, srcEvent: { pointerId: 2 } },
-    ]);
-  });
+      { type: "tap", taps: 1, pointers: [{ pointerId: 1 }] },
+      { type: "tap", taps: 1, pointers: [{ pointerId: 2 }] },
+    ])
+  })
 
   it("should not trigger tap if moved too much between down and up", async () => {
-    const multiTapThreshold = 5;
-    const waitLongEnough$ = timer(100);
-    const recognizer = createTapRecognizer({
+    const multiTapThreshold = 5
+    const waitLongEnough$ = timer(100)
+    const recognizer = new TapRecognizer({
       multiTapThreshold,
       posThreshold: 5,
-    })({ container });
+    })
+    recognizer.initialize({
+      container,
+    })
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
         tap({
           subscribe: async () => {
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -299,39 +311,43 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
+
             sendPointerEvent({
               container,
               identifier: 1,
               type: "pointerup",
               x: 50,
               y: 50,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values.length).toBe(0);
-  });
+    expect(values.length).toBe(0)
+  })
 
   it("should not detect a tap if the pointer is held down too long", async () => {
-    const multiTapThreshold = 5;
-    const maximumPressTime = 10;
-    const waitLongEnough$ = timer(100);
-    const recognizer = createTapRecognizer({
+    const multiTapThreshold = 5
+    const maximumPressTime = 10
+    const waitLongEnough$ = timer(100)
+    const recognizer = new TapRecognizer({
       multiTapThreshold,
       posThreshold: 5,
       maximumPressTime,
-    })({ container });
+    })
+    recognizer.initialize({
+      container,
+    })
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
         tap({
           subscribe: async () => {
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -339,9 +355,9 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
 
-            await waitFor(maximumPressTime - 5);
+            await waitFor(maximumPressTime - 5)
 
             sendPointerEvent({
               container,
@@ -349,9 +365,9 @@ describe("TapGestureRecognizer", () => {
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
 
-            await waitFor(multiTapThreshold * 2);
+            await waitFor(multiTapThreshold * 2)
 
             sendPointerEvent({
               container,
@@ -359,9 +375,9 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
 
-            await waitFor(maximumPressTime);
+            await waitFor(maximumPressTime)
 
             sendPointerEvent({
               container,
@@ -369,23 +385,26 @@ describe("TapGestureRecognizer", () => {
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values.length).toBe(1);
+    expect(values.length).toBe(1)
     expect(values).toMatchObject([
-      { type: "tap", taps: 1, srcEvent: { pointerId: 1 } },
-    ]);
-  });
+      { type: "tap", taps: 1, pointers: [{ pointerId: 1 }] },
+    ])
+  })
 
   it("should ignore taps when there are simultaneous pointers active", async () => {
-    const recognizer = createTapRecognizer({})({ container });
-    const waitLongEnough$ = timer(100);
+    const recognizer = new TapRecognizer({})
+    recognizer.initialize({
+      container,
+    })
+    const waitLongEnough$ = timer(100)
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
@@ -398,51 +417,54 @@ describe("TapGestureRecognizer", () => {
                 type: "pointerdown",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 2,
                 type: "pointerdown",
                 x: 10,
                 y: 10,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 1,
                 type: "pointerup",
                 x: 0,
                 y: 0,
-              });
+              })
               sendPointerEvent({
                 container,
                 identifier: 2,
                 type: "pointerup",
                 x: 10,
                 y: 10,
-              });
-            });
+              })
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values.length).toBe(0); // Assuming the recognizer should ignore simultaneous taps
-  });
+    expect(values.length).toBe(0) // Assuming the recognizer should ignore simultaneous taps
+  })
 
   it("should ignore one tap if there is more than one tap", async () => {
-    const recognizer = createTapRecognizer({
+    const recognizer = new TapRecognizer({
       multiTapThreshold: 10,
       maxTaps: 1,
-    })({ container });
-    const waitLongEnough$ = timer(100);
+    })
+    recognizer.initialize({
+      container,
+    })
+    const waitLongEnough$ = timer(100)
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
         tap({
           subscribe: async () => {
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -450,16 +472,16 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 1,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
 
-            await waitFor(1);
+            await waitFor(1)
 
             sendPointerEvent({
               container,
@@ -467,31 +489,34 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 2,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values.length).toBe(0);
-  });
+    expect(values.length).toBe(0)
+  })
 
   it("should ignore taps when a second tap is outside of position threshold", async () => {
-    const recognizer = createTapRecognizer({
+    const recognizer = new TapRecognizer({
       posThreshold: 5,
       multiTapThreshold: 10,
       maxTaps: Infinity,
-    })({ container });
-    const waitLongEnough$ = timer(100);
+    })
+    recognizer.initialize({
+      container,
+    })
+    const waitLongEnough$ = timer(100)
 
     const values = await lastValueFrom(
       recognizer.events$.pipe(
@@ -505,14 +530,14 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 0,
               y: 0,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 1,
               type: "pointerup",
               x: 0,
               y: 0,
-            });
+            })
 
             // await waitFor(1)
 
@@ -522,21 +547,21 @@ describe("TapGestureRecognizer", () => {
               type: "pointerdown",
               x: 10,
               y: 10,
-            });
+            })
             sendPointerEvent({
               container,
               identifier: 2,
               type: "pointerup",
               x: 10,
               y: 10,
-            });
+            })
           },
         }),
         buffer(waitLongEnough$),
         first(),
       ),
-    );
+    )
 
-    expect(values.length).toBe(0);
-  });
-});
+    expect(values.length).toBe(0)
+  })
+})