@navaramap/three 0.1.0 → 0.1.1

package/src/pick/pickHelper.test.ts

@@ -6,7 +6,7 @@ import type { MeshCache } from "../type";
 import { isClickGesture, PickHelper } from "./pickHelper";
 
 describe("isClickGesture", () => {
-  it("accepts a mouseup at the exact mousedown position", () => {
+  it("accepts a pointerup at the exact pointerdown position", () => {
     expect(isClickGesture(new Vector2(100, 100), new Vector2(100, 100))).toBe(
       true,
     );
@@ -43,6 +43,15 @@ describe("isClickGesture", () => {
     // Each axis moved less than 5px but the combined travel exceeds it.
     expect(isClickGesture(new Vector2(0, 0), new Vector2(4, 4))).toBe(false);
   });
+
+  it("accepts a wider travel when given an explicit tolerance (touch taps)", () => {
+    expect(isClickGesture(new Vector2(0, 0), new Vector2(20, 0), 30)).toBe(
+      true,
+    );
+    expect(isClickGesture(new Vector2(0, 0), new Vector2(30, 0), 30)).toBe(
+      false,
+    );
+  });
 });
 
 /**
@@ -53,6 +62,9 @@ describe("isClickGesture", () => {
 const createRendererStub = () => {
   const state = {
     pixel: [0, 0, 0] as [number, number, number],
+    /** Per-pixel override for the readback, keyed by device coords. */
+    pixelAt: undefined as
+      ((x: number, y: number) => [number, number, number]) | undefined,
     renderCount: 0,
     scissors: [] as { x: number; y: number; w: number; h: number }[],
   };
@@ -75,14 +87,22 @@ const createRendererStub = () => {
     setScissorTest: () => undefined,
     readRenderTargetPixels: (
       _target: unknown,
-      _x: number,
-      _y: number,
-      _w: number,
-      _h: number,
+      x: number,
+      y: number,
+      w: number,
+      h: number,
       buffer: Uint8Array,
     ) => {
-      [buffer[0], buffer[1], buffer[2]] = state.pixel;
-      buffer[3] = 255;
+      for (let row = 0; row < h; row++) {
+        for (let col = 0; col < w; col++) {
+          const i = (row * w + col) * 4;
+          const [r, g, b] = state.pixelAt?.(x + col, y + row) ?? state.pixel;
+          buffer[i] = r;
+          buffer[i + 1] = g;
+          buffer[i + 2] = b;
+          buffer[i + 3] = 255;
+        }
+      }
     },
   } as unknown as WebGLRenderer;
   return { renderer, state };
@@ -137,59 +157,165 @@ describe("PickHelper", () => {
     );
     helper.enablePick(true);
 
-    const mouse = (type: string, x: number, y: number, buttons = 0) =>
+    const pointer = (
+      type: string,
+      x: number,
+      y: number,
+      init?: PointerEventInit,
+    ) =>
       element.dispatchEvent(
-        new MouseEvent(type, { clientX: x, clientY: y, buttons }),
+        new PointerEvent(type, {
+          clientX: x,
+          clientY: y,
+          isPrimary: true,
+          pointerType: "mouse",
+          ...init,
+        }),
       );
-    return { helper, element, state, picks, hovers, gates, mouse };
+    return { helper, element, state, picks, hovers, gates, pointer };
   };
 
   describe("click picking", () => {
     it("decodes the batch id from the pick render", () => {
-      const { state, picks, mouse } = setup();
+      const { state, picks, pointer } = setup();
       state.pixel = [0, 1, 2]; // (0 << 16) + (1 << 8) + 2
 
-      mouse("mousedown", 100, 100);
-      mouse("mouseup", 100, 100);
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 100, 100);
 
       expect(picks).toEqual([[258]]);
       expect(state.renderCount).toBe(1);
     });
 
     it("reports an empty pick for a miss (batch id 0)", () => {
-      const { picks, mouse } = setup();
+      const { picks, pointer } = setup();
 
-      mouse("mousedown", 100, 100);
-      mouse("mouseup", 100, 100);
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 100, 100);
 
       expect(picks).toEqual([[]]);
     });
 
-    it("limits GPU work to the clicked pixel via scissor", () => {
-      const { state, mouse } = setup();
+    it("limits GPU work to the search window via scissor", () => {
+      const { state, pointer } = setup();
 
-      mouse("mousedown", 30, 40);
-      mouse("mouseup", 30, 40);
+      pointer("pointerdown", 30, 40);
+      pointer("pointerup", 30, 40);
 
-      // y is flipped into WebGL space: 600 - 1 - 40.
-      expect(state.scissors).toEqual([{ x: 30, y: 559, w: 1, h: 1 }]);
+      // A (2 * PICK_RADIUS + 1)² window centered on the click; y is flipped
+      // into WebGL space: 600 - 1 - 40.
+      expect(state.scissors).toEqual([{ x: 27, y: 556, w: 7, h: 7 }]);
+    });
+
+    it("picks the non-zero id closest to the pointer within the window", () => {
+      const { state, picks, pointer } = setup();
+      // Two hits inside the window around (100, 100) (device y = 499):
+      // id 5 at 3px away, id 9 at 1px away. The closer one wins.
+      state.pixelAt = (x, y) => {
+        if (x === 103 && y === 499) return [0, 0, 5];
+        if (x === 101 && y === 499) return [0, 0, 9];
+        return [0, 0, 0];
+      };
+
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 100, 100);
+
+      expect(picks).toEqual([[9]]);
     });
 
     it("does not pick when the gesture is a drag", () => {
-      const { state, picks, mouse } = setup();
+      const { state, picks, pointer } = setup();
 
-      mouse("mousedown", 100, 100);
-      mouse("mouseup", 150, 150);
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 150, 150);
 
       expect(picks).toEqual([]);
       expect(state.renderCount).toBe(0);
     });
 
     it("skips the pick render entirely when nobody listens", () => {
-      const { state, picks, mouse } = setup({ clickable: false });
+      const { state, picks, pointer } = setup({ clickable: false });
+
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 100, 100);
+
+      expect(picks).toEqual([]);
+      expect(state.renderCount).toBe(0);
+    });
+  });
+
+  describe("touch tap picking", () => {
+    const touch = { pointerType: "touch" } as const;
+
+    it("picks on a single-finger tap", () => {
+      const { state, picks, pointer } = setup();
+      state.pixel = [0, 0, 9];
+
+      pointer("pointerdown", 100, 100, touch);
+      pointer("pointerup", 100, 100, touch);
+
+      expect(picks).toEqual([[9]]);
+      expect(state.renderCount).toBe(1);
+    });
+
+    it("tolerates finger jitter beyond the mouse click tolerance", () => {
+      const { picks, pointer } = setup();
+
+      // 20px of travel: a drag for a mouse, still a tap for a finger.
+      pointer("pointerdown", 100, 100, touch);
+      pointer("pointerup", 120, 100, touch);
+
+      expect(picks).toEqual([[]]);
+    });
+
+    it("rejects travel beyond the tap tolerance", () => {
+      const { state, picks, pointer } = setup();
+
+      pointer("pointerdown", 100, 100, touch);
+      pointer("pointerup", 140, 100, touch);
+
+      expect(picks).toEqual([]);
+      expect(state.renderCount).toBe(0);
+    });
+
+    it("keeps the stricter tolerance for the mouse", () => {
+      const { state, picks, pointer } = setup();
+
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 120, 100);
+
+      expect(picks).toEqual([]);
+      expect(state.renderCount).toBe(0);
+    });
+
+    it("does not pick when a second finger joins (pinch)", () => {
+      const { state, picks, pointer } = setup();
+
+      pointer("pointerdown", 100, 100, touch);
+      pointer("pointerdown", 120, 100, { ...touch, isPrimary: false });
+      pointer("pointerup", 120, 100, { ...touch, isPrimary: false });
+      pointer("pointerup", 100, 100, touch);
+
+      expect(picks).toEqual([]);
+      expect(state.renderCount).toBe(0);
+    });
+
+    it("searches a wider window than the mouse (fingers are less precise)", () => {
+      const { state, pointer } = setup();
+
+      pointer("pointerdown", 100, 100, touch);
+      pointer("pointerup", 100, 100, touch);
+
+      // (2 * TOUCH_PICK_RADIUS + 1)² centered on the tap (device y = 499).
+      expect(state.scissors).toEqual([{ x: 90, y: 489, w: 21, h: 21 }]);
+    });
+
+    it("does not pick when the browser cancels the gesture", () => {
+      const { state, picks, pointer } = setup();
 
-      mouse("mousedown", 100, 100);
-      mouse("mouseup", 100, 100);
+      pointer("pointerdown", 100, 100, touch);
+      pointer("pointercancel", 100, 100, touch);
+      pointer("pointerup", 100, 100, touch);
 
       expect(picks).toEqual([]);
       expect(state.renderCount).toBe(0);
@@ -198,34 +324,35 @@ describe("PickHelper", () => {
 
   describe("hover picking", () => {
     it("picks at most once per animation frame, at the latest position", () => {
-      const { state, hovers, mouse } = setup();
+      const { state, hovers, pointer } = setup();
       state.pixel = [0, 0, 7];
 
-      mouse("mousemove", 10, 10);
-      mouse("mousemove", 20, 20);
-      mouse("mousemove", 30, 30);
+      pointer("pointermove", 10, 10);
+      pointer("pointermove", 20, 20);
+      pointer("pointermove", 30, 30);
       expect(hovers).toEqual([]); // nothing until the frame fires
 
       runFrame();
 
       expect(hovers).toEqual([[7]]);
       expect(state.renderCount).toBe(1);
-      expect(state.scissors).toEqual([{ x: 30, y: 569, w: 1, h: 1 }]);
+      expect(state.scissors).toEqual([{ x: 27, y: 566, w: 7, h: 7 }]);
     });
 
     it("reports an empty hover for a miss", () => {
-      const { hovers, mouse } = setup();
+      const { hovers, pointer } = setup();
 
-      mouse("mousemove", 10, 10);
+      pointer("pointermove", 10, 10);
       runFrame();
 
       expect(hovers).toEqual([[]]);
     });
 
-    it("is suppressed while a mouse button is pressed", () => {
-      const { state, hovers, mouse } = setup();
+    it("is suppressed while a button is pressed (including touch contact)", () => {
+      const { state, hovers, pointer } = setup();
 
-      mouse("mousemove", 10, 10, 1);
+      pointer("pointermove", 10, 10, { buttons: 1 });
+      pointer("pointermove", 10, 10, { buttons: 1, pointerType: "touch" });
       runFrame();
 
       expect(hovers).toEqual([]);
@@ -233,11 +360,11 @@ describe("PickHelper", () => {
     });
 
     it("re-checks the listener gate when the frame fires", () => {
-      const { state, hovers, gates, mouse } = setup();
+      const { state, hovers, gates, pointer } = setup();
       state.pixel = [0, 0, 7];
 
-      mouse("mousemove", 10, 10);
-      // Listeners are removed between the mousemove and the frame.
+      pointer("pointermove", 10, 10);
+      // Listeners are removed between the pointermove and the frame.
       gates.hoverable = false;
       runFrame();
 
@@ -246,9 +373,9 @@ describe("PickHelper", () => {
     });
 
     it("schedules nothing when no hover listener is registered", () => {
-      const { state, hovers, mouse } = setup({ hoverable: false });
+      const { state, hovers, pointer } = setup({ hoverable: false });
 
-      mouse("mousemove", 10, 10);
+      pointer("pointermove", 10, 10);
 
       expect(rafCallbacks.size).toBe(0);
       runFrame();
@@ -256,12 +383,12 @@ describe("PickHelper", () => {
       expect(state.renderCount).toBe(0);
     });
 
-    it("mouseleave reports nothing hovered and cancels the pending pick", () => {
-      const { state, hovers, element, mouse } = setup();
+    it("pointerleave reports nothing hovered and cancels the pending pick", () => {
+      const { state, hovers, pointer } = setup();
       state.pixel = [0, 0, 7];
 
-      mouse("mousemove", 10, 10);
-      element.dispatchEvent(new MouseEvent("mouseleave"));
+      pointer("pointermove", 10, 10);
+      pointer("pointerleave", 10, 10);
 
       expect(hovers).toEqual([[]]);
 
@@ -271,10 +398,10 @@ describe("PickHelper", () => {
       expect(state.renderCount).toBe(0);
     });
 
-    it("mouseleave stays silent without hover listeners", () => {
-      const { hovers, element } = setup({ hoverable: false });
+    it("pointerleave stays silent without hover listeners", () => {
+      const { hovers, pointer } = setup({ hoverable: false });
 
-      element.dispatchEvent(new MouseEvent("mouseleave"));
+      pointer("pointerleave", 10, 10);
 
       expect(hovers).toEqual([]);
     });
@@ -282,16 +409,16 @@ describe("PickHelper", () => {
 
   describe("enablePick(false)", () => {
     it("detaches every handler and cancels pending hover picks", () => {
-      const { helper, state, picks, hovers, mouse } = setup();
+      const { helper, state, picks, hovers, pointer } = setup();
       state.pixel = [0, 0, 7];
-      mouse("mousemove", 10, 10);
+      pointer("pointermove", 10, 10);
 
       helper.enablePick(false);
 
       expect(rafCallbacks.size).toBe(0);
-      mouse("mousedown", 100, 100);
-      mouse("mouseup", 100, 100);
-      mouse("mousemove", 20, 20);
+      pointer("pointerdown", 100, 100);
+      pointer("pointerup", 100, 100);
+      pointer("pointermove", 20, 20);
       runFrame();
 
       expect(picks).toEqual([]);