[IMP] Dashboard: add zoom support

src/components/dashboard/dashboard.ts

@@ -125,4 +125,9 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
       ...this.env.model.getters.getSheetViewDimensionWithHeaders(),
     };
   }
+
+  get dashboardStyle() {
+    const zoomLevel = this.env.model.getters.getViewportZoomLevel();
+    return cssPropertiesToCss({ zoom: `${zoomLevel}` });
+  }
 }

src/components/dashboard/dashboard.xml

@@ -1,6 +1,11 @@
 <templates>
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
+    <div
+      class="o-grid o-two-columns o-zoomable"
+      t-ref="dashboard"
+      tabindex="-1"
+      t-on-wheel="onMouseWheel"
+      t-att-style="dashboardStyle">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onGridResized.bind="onGridResized"

src/components/helpers/draw_grid_hook.ts

@@ -30,7 +30,7 @@ export function useGridDrawing(refName: string, model: Model, canvasSize: () =>
     canvas.style.height = `${height}px`;
     canvas.width = width * dpr;
     canvas.height = height * dpr;
-    canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom}`);
+    canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom};`);
     if (width === 0 || height === 0) {
       return;
     }

tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap

@@ -2,7 +2,8 @@
 
 exports[`Grid component in dashboard mode simple dashboard rendering snapshot 1`] = `
 <div
-  class="o-grid o-two-columns"
+  class="o-grid o-two-columns o-zoomable"
+  style="zoom:1; "
   tabindex="-1"
 >
   <div
@@ -33,7 +34,7 @@ exports[`Grid component in dashboard mode simple dashboard rendering snapshot 1`
 
     <canvas
       height="985"
-      style="width:985px;height:985px;zoom:1"
+      style="width:985px;height:985px;zoom:1;"
       width="985"
     />
 

tests/grid/__snapshots__/grid_component.test.ts.snap

@@ -101,7 +101,7 @@ exports[`Grid component simple rendering snapshot 1`] = `
 
   <canvas
     height="1011"
-    style="width:1033px;height:1011px;zoom:1"
+    style="width:1033px;height:1011px;zoom:1;"
     width="1033"
   />
 

tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap

@@ -872,7 +872,7 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = `
 
         <canvas
           height="985"
-          style="width:985px;height:985px;zoom:1"
+          style="width:985px;height:985px;zoom:1;"
           width="985"
         />
 
@@ -1844,7 +1844,7 @@ exports[`components take the small screen into account 1`] = `
 
         <canvas
           height="985"
-          style="width:485px;height:985px;zoom:1"
+          style="width:485px;height:985px;zoom:1;"
           width="485"
         />
 

tests/test_helpers/dom_helper.ts

@@ -133,11 +133,14 @@ export async function pointerUp(target: DOMTarget) {
  */
 export async function hoverCell(model: Model, xc: string, delay: number) {
   const zone = toZone(xc);
-  let { x, y } = model.getters.getVisibleRect(zone);
+  const zoom = model.getters.getViewportZoomLevel();
+  let { x, y, width, height } = model.getters.getVisibleRectWithZoom(zone);
   if (!model.getters.isDashboard()) {
-    x -= HEADER_WIDTH;
-    y -= HEADER_HEIGHT;
+    x -= HEADER_WIDTH * zoom;
+    y -= HEADER_HEIGHT * zoom;
   }
+  x += width / 2;
+  y += height / 2;
   triggerMouseEvent(".o-grid-overlay", "pointermove", x, y);
   jest.advanceTimersByTime(delay);
   await nextTick();

tests/zoom.test.ts

@@ -5,55 +5,92 @@ import {
   ZOOM_VALUES,
 } from "@odoo/o-spreadsheet-engine/constants";
 import { setCellContent } from "./test_helpers/commands_helpers";
-import { clickCell, clickHeader } from "./test_helpers/dom_helper";
+import { clickCell, clickHeader, hoverCell } from "./test_helpers/dom_helper";
 import { getSelectionAnchorCellXc } from "./test_helpers/getters_helpers";
-import { mountSpreadsheet } from "./test_helpers/helpers";
+import { mountSpreadsheet, nextTick } from "./test_helpers/helpers";
 
 let fixture: HTMLElement;
 let model: Model;
 
-describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => {
-  beforeEach(async () => {
-    ({ model, fixture } = await mountSpreadsheet());
-    model.dispatch("SET_ZOOM", { zoom });
-  });
-  test("can render a sheet with zoom", async () => {
-    expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull();
-  });
+jest.useFakeTimers();
 
-  test("can click on a cell to select it", async () => {
-    setCellContent(model, "B2", "b2");
-    setCellContent(model, "B3", "b3");
-    await clickCell(model, "C8", {}, { clickInMiddle: true });
-    expect(getSelectionAnchorCellXc(model)).toBe("C8");
-  });
+afterAll(() => {
+  jest.useRealTimers();
+});
 
-  test("can click on the edge of a cell to select it", async () => {
-    setCellContent(model, "B2", "b2");
-    setCellContent(model, "B3", "b3");
-    // by default we click on top left
-    await clickCell(model, "C8");
-    expect(getSelectionAnchorCellXc(model)).toBe("C8");
-    await clickCell(
-      model,
-      "C8",
-      {},
-      { offsetX: DEFAULT_CELL_WIDTH * zoom - 1, offsetY: DEFAULT_CELL_HEIGHT * zoom - 1 }
-    );
-    expect(getSelectionAnchorCellXc(model)).toBe("C8");
-  });
+describe("Spreadsheet zoom tests", () => {
+  describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => {
+    beforeEach(async () => {
+      ({ model, fixture } = await mountSpreadsheet());
+      model.dispatch("SET_ZOOM", { zoom });
+      await nextTick();
+    });
+    test("can render a sheet with zoom", async () => {
+      expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull();
+    });
+
+    test("can click on a cell to select it", async () => {
+      setCellContent(model, "B2", "b2");
+      setCellContent(model, "B3", "b3");
+      await clickCell(model, "C8", {}, { clickInMiddle: true });
+      expect(getSelectionAnchorCellXc(model)).toBe("C8");
+    });
 
-  test("can select a COL header", async () => {
-    setCellContent(model, "B2", "b2");
-    setCellContent(model, "B3", "b3");
-    await clickHeader(model, "COL", 2, {});
-    expect(getSelectionAnchorCellXc(model)).toBe("C1");
+    test("can click on the edge of a cell to select it", async () => {
+      setCellContent(model, "B2", "b2");
+      setCellContent(model, "B3", "b3");
+      // by default we click on top left
+      await clickCell(model, "C8");
+      expect(getSelectionAnchorCellXc(model)).toBe("C8");
+      await clickCell(
+        model,
+        "C8",
+        {},
+        { offsetX: DEFAULT_CELL_WIDTH * zoom - 1, offsetY: DEFAULT_CELL_HEIGHT * zoom - 1 }
+      );
+      expect(getSelectionAnchorCellXc(model)).toBe("C8");
+    });
+
+    test("can select a COL header", async () => {
+      setCellContent(model, "B2", "b2");
+      setCellContent(model, "B3", "b3");
+      await clickHeader(model, "COL", 2, {});
+      expect(getSelectionAnchorCellXc(model)).toBe("C1");
+    });
+
+    test("can select a ROW header", async () => {
+      setCellContent(model, "B2", "b2");
+      setCellContent(model, "B3", "b3");
+      await clickHeader(model, "ROW", 2, {});
+      expect(getSelectionAnchorCellXc(model)).toBe("A4");
+    });
+
+    test("can hover a cell to show its error", async () => {
+      setCellContent(model, "A10", "=1/0");
+      expect(fixture.querySelector(".o-error-tooltip")).toBeFalsy();
+      await hoverCell(model, "A10", 400);
+      expect(fixture.querySelector(".o-error-tooltip")).toBeTruthy();
+    });
   });
+});
+
+describe("Dashboard zoom tests", () => {
+  describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => {
+    beforeEach(async () => {
+      ({ model, fixture } = await mountSpreadsheet());
+      model.dispatch("SET_ZOOM", { zoom });
+      setCellContent(model, "C8", "=1/0");
+      model.updateMode("dashboard");
+      await nextTick();
+    });
+    test("can render a sheet with zoom", async () => {
+      expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull();
+    });
 
-  test("can select a ROW header", async () => {
-    setCellContent(model, "B2", "b2");
-    setCellContent(model, "B3", "b3");
-    await clickHeader(model, "ROW", 2, {});
-    expect(getSelectionAnchorCellXc(model)).toBe("A4");
+    test("can hover a cell to show its error", async () => {
+      expect(fixture.querySelector(".o-error-tooltip")).toBeNull();
+      await hoverCell(model, "C8", 400);
+      expect(fixture.querySelector(".o-error-tooltip")).toBeTruthy();
+    });
   });
 });