[FIX] Figure container: Crop figures to avoid overlap with headers

The introduction of dashboard mode in a709ca18 mistakenly removed the
cropping of figures when they overlap on headers. This commit fixes that
issue.

Task 2889602

closes odoo/o-spreadsheet#1451

Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>
Co-authored-by: Anthony Hendrickx <anhe@odoo.com>

Author: Topdev97

src/components/figures/container/container.ts

@@ -137,14 +137,20 @@ export class FiguresContainer extends Component<Props, SpreadsheetChildEnv> {
     let x = target.x - offsetX - 1;
     let y = target.y - offsetY - 1;
 
+    // width and height of wrapper need to be adjusted so we do not overlap
+    // with headers
+    const correctionX = this.env.isDashboard() ? 0 : Math.max(0, -x);
+    x += correctionX;
+    const correctionY = this.env.isDashboard() ? 0 : Math.max(0, -y);
+    y += correctionY;
     if (width < 0 || height < 0) {
       return `position:absolute;display:none;`;
     }
     const offset =
       ANCHOR_SIZE + ACTIVE_BORDER_WIDTH + (isSelected ? ACTIVE_BORDER_WIDTH : BORDER_WIDTH);
-    return `position:absolute; top:${y + 1}px; left:${x + 1}px; width:${width + offset}px; height:${
-      height + offset
-    }px`;
+    return `position:absolute; top:${y + 1}px; left:${x + 1}px; width:${
+      width - correctionX + offset
+    }px; height:${height - correctionY + offset}px`;
   }
 
   setup() {

tests/components/figure.test.ts

@@ -1,5 +1,6 @@
 import { App, Component, xml } from "@odoo/owl";
 import { Model, Spreadsheet } from "../../src";
+import { DEFAULT_CELL_HEIGHT, DEFAULT_CELL_WIDTH } from "../../src/constants";
 import { figureRegistry } from "../../src/registries";
 import { CreateFigureCommand, Figure, SpreadsheetChildEnv, UID } from "../../src/types";
 import {
@@ -202,4 +203,20 @@ describe("figures", () => {
     await nextTick();
     expect(figure.classList).not.toContain("o-dragging");
   });
+
+  test("Figures are cropped to avoid overlap with headers", async () => {
+    const figureId = "someuuid";
+    createFigure(model, { id: figureId, x: 100, y: 20, height: 200, width: 100 });
+    await nextTick();
+    const figure = fixture.querySelector(".o-figure-wrapper")!;
+    expect(window.getComputedStyle(figure).width).toBe("111px"); // width + borders
+    expect(window.getComputedStyle(figure).height).toBe("211px"); // height + borders
+    model.dispatch("SET_VIEWPORT_OFFSET", {
+      offsetX: 2 * DEFAULT_CELL_WIDTH,
+      offsetY: 3 * DEFAULT_CELL_HEIGHT,
+    });
+    await nextTick();
+    expect(window.getComputedStyle(figure).width).toBe("18px"); // width + borders - 2 * DEFAULT_CELL_WIDTH
+    expect(window.getComputedStyle(figure).height).toBe("161px"); // height + offset - 2 * DEFAULT_CELL_WIDTH
+  });
 });