wip

Author: rrahir

src/components/grid/grid.ts

@@ -207,7 +207,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
 
     usePinchToZoom(this.gridRef, (scale: number) => {
       this.env.model.dispatch("SET_ZOOM", {
-        zoom: this.env.model.getters.getViewportZoomLevel() * scale,
+        zoom: Math.round(this.env.model.getters.getViewportZoomLevel() * scale * 100) / 100,
       });
     });
   }

src/components/helpers/pinch_to_zoom_hook.ts

@@ -27,20 +27,30 @@ export function usePinchToZoom(ref: Ref<HTMLElement>, onZoom: (scale: number) =>
     // The pointerdown event signals the start of a touch interaction.
     // This event is cached to support 2-finger gestures
     evCache.push(ev);
+    if (evCache.length < 2) {
+      prevDiff = -1;
+    } else if (evCache.length === 2) {
+      prevDiff = computeDistance(evCache[0], evCache[1]);
+    }
+  }
+
+  function computeDistance(ev1: PointerEvent, ev2: PointerEvent) {
+    const dx = ev1.clientX - ev2.clientX;
+    const dy = ev1.clientY - ev2.clientY;
+    return Math.abs(dx * dx + dy * dy);
   }
 
   function pointermoveHandler(ev: PointerEvent) {
     // Find this event in the cache and update its record with this event
     const index = evCache.findIndex((cachedEv) => cachedEv.pointerId === ev.pointerId);
+    if (index === -1) return;
+
     evCache[index] = ev;
 
     // If two pointers are down, check for pinch gestures
     if (evCache.length === 2) {
       // Calculate the distance between the two pointers
-      const dx = evCache[0].clientX - evCache[1].clientX;
-      const dy = evCache[0].clientY - evCache[1].clientY;
-
-      const curDiff = Math.abs(dx * dx + dy * dy);
+      const curDiff = computeDistance(evCache[0], evCache[1]);
 
       if (prevDiff > 0) {
         onZoom((curDiff / prevDiff) ** 0.25);

tests/grid/grid_component.test.ts

@@ -75,6 +75,7 @@ import {
   scrollGrid,
   simulateClick,
   triggerMouseEvent,
+  triggerPointerEvent,
   triggerTouchEvent,
   triggerWheelEvent,
 } from "../test_helpers/dom_helper";
@@ -2261,3 +2262,41 @@ describe("Header grouping shortcuts", () => {
     });
   });
 });
+
+describe("Pinch to zoom", () => {
+  beforeEach(async () => {
+    ({ parent, model, fixture } = await mountSpreadsheet());
+  });
+
+  test("Can pinch to zoom in", async () => {
+    const grid = fixture.querySelector(".o-grid-overlay")!;
+    const moveDistance = 30;
+    triggerPointerEvent(grid, "pointerdown", 100, 100, { pointerId: 1, bubbles: true });
+    triggerPointerEvent(grid, "pointerdown", 120, 120, { pointerId: 2, bubbles: true });
+
+    // zoom in 30 px of distance
+    triggerPointerEvent(grid, "pointermove", 120 + moveDistance, 120 + moveDistance, {
+      pointerId: 2,
+      bubbles: true,
+    });
+
+    await nextTick();
+    expect(model.getters.getViewportZoomLevel()).toBe(1.58);
+
+    // go back to initial
+    triggerPointerEvent(grid, "pointermove", 120, 120, {
+      pointerId: 2,
+      bubbles: true,
+    });
+    await nextTick();
+    expect(model.getters.getViewportZoomLevel()).toBe(1);
+
+    // pinch to zoom out - closer pointers
+    triggerPointerEvent(grid, "pointermove", 120, 120, {
+      pointerId: 1,
+      bubbles: true,
+    });
+    await nextTick();
+    expect(model.getters.getViewportZoomLevel()).toBeLessThan(1);
+  });
+});

tests/setup/jest.setup.ts

@@ -54,6 +54,14 @@ function registerOwlTemplates() {
   }
 }
 
+class PointerEventPolyfill extends MouseEvent {
+  pointerId: number;
+  constructor(type: string, eventInitDict: PointerEventInit) {
+    super(type, eventInitDict);
+    this.pointerId = eventInitDict.pointerId ?? 0;
+  }
+}
+
 beforeAll(() => {
   registerOwlTemplates();
   setDefaultSheetViewSize(1000);
@@ -82,6 +90,9 @@ beforeAll(() => {
   };
 
   console.debug = () => {};
+
+  // @ts-ignore
+  window.PointerEvent = PointerEventPolyfill;
 });
 
 beforeEach(() => {

tests/test_helpers/dom_helper.ts

@@ -299,6 +299,31 @@ export function triggerKeyboardEvent(
   dispatchEvent(selector, ev);
 }
 
+export function triggerPointerEvent(
+  selector: DOMTarget,
+  type: string,
+  offsetX?: number,
+  offsetY?: number,
+  extra: PointerEventInit = { bubbles: true }
+) {
+  if (type === "pointermove") {
+    extra = { button: -1, ...extra };
+  }
+  const ev = new PointerEvent(type, {
+    // this is only correct if we assume the target is positioned
+    // at the very top left corner of the screen
+    clientX: offsetX,
+    clientY: offsetY,
+    bubbles: true,
+    ...extra,
+  });
+  (ev as any).offsetX = offsetX;
+  (ev as any).offsetY = offsetY;
+  const target = getTarget(selector);
+  target.dispatchEvent(ev);
+  return ev;
+}
+
 function dispatchEvent(selector: string | EventTarget, ev: Event) {
   if (typeof selector === "string") {
     const el = document.querySelector(selector);