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

@@ -1,14 +1,14 @@
 import { Ref } from "@odoo/o-spreadsheet-engine";
 import { useRefListener } from "./listener_hook";
 
-const evCache: PointerEvent[] = [];
-let prevDiff = -1;
-
 /** Largely inspired by the pinch-to-zoom example provided at MDN
  * https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures#example
  * on the 30th of October 2025
  */
 export function usePinchToZoom(ref: Ref<HTMLElement>, onZoom: (scale: number) => void) {
+  const evCache: PointerEvent[] = [];
+  let prevDiff = -1;
+
   useRefListener(ref, "pointerdown", pointerdownHandler, { passive: false });
   useRefListener(ref, "pointermove", pointermoveHandler, { passive: false });
   useRefListener(ref, "pointerup", pointerupHandler, { passive: false });
@@ -27,23 +27,33 @@ 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.sqrt(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);
+        onZoom((curDiff / prevDiff) ** 0.5);
       }
 
       // Cache the distance for the next move event

src/components/highlight/corner/corner.xml

@@ -2,7 +2,7 @@
   <t t-name="o-spreadsheet-Corner">
     <div
       class="o-corner d-flex justify-content-center align-items-center"
-      t-on-pointerdown.prevent="onMouseDown"
+      t-on-pointerdown.prevent.stop="onMouseDown"
       t-on-touchstart.prevent.stop=""
       t-att-style="handlerStyle">
       <div

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,43 @@ describe("Header grouping shortcuts", () => {
     });
   });
 });
+test("Can pinch to zoom in", async () => {
+  ({ parent, model, fixture } = await mountSpreadsheet());
+
+  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", 110, 110, {
+    pointerId: 1,
+    bubbles: true,
+  });
+  await nextTick();
+  expect(model.getters.getViewportZoomLevel()).toBe(0.71);
+
+  // go back to initial
+  triggerPointerEvent(grid, "pointermove", 100, 100, {
+    pointerId: 1,
+    bubbles: true,
+  });
+  expect(model.getters.getViewportZoomLevel()).toBe(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);