[IMP] figures: add drag threshold

When clicking on a figure, a very small mouse movement between the
mousedown and mouseup events could trigger a drag and drop operation,
canceling the click event. This is particularly annoying when trying
to interact with carousels, as they have a lot of clickable areas.

Most applications use a drag threshold, allowing small mouse movements
to be ignored. This commit adds a drag threshold for figures.

Also fixed some test that checked for the `o-dragging` class on figure.
That class does not exist for figures.

Task: 5059476
Part-of: #7029
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

Author: hokolomopo

src/components/figures/figure_container/figure_container.ts

@@ -1,5 +1,5 @@
 import { Component, onMounted, onWillUpdateProps, useState } from "@odoo/owl";
-import { ComponentsImportance, MIN_FIG_SIZE } from "../../../constants";
+import { ComponentsImportance, DRAG_THRESHOLD, MIN_FIG_SIZE } from "../../../constants";
 import { isDefined } from "../../../helpers";
 import { rectUnion } from "../../../helpers/rectangle";
 import { figureRegistry } from "../../../registries/figures_registry";
@@ -331,9 +331,18 @@ export class FiguresContainer extends Component<Props, SpreadsheetChildEnv> {
       ).end,
     };
 
+    let hasStartedDnd = false;
     const onMouseMove = (ev: MouseEvent) => {
       const getters = this.env.model.getters;
       const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+
+      const offsetX = Math.abs(currentMousePosition.x - initialMousePosition.x);
+      const offsetY = Math.abs(currentMousePosition.y - initialMousePosition.y);
+      if (!hasStartedDnd && offsetX < DRAG_THRESHOLD && offsetY < DRAG_THRESHOLD) {
+        return; // add a small threshold to avoid dnd when just clicking
+      }
+      hasStartedDnd = true;
+
       const draggedFigure = dragFigureForMove(
         currentMousePosition,
         initialMousePosition,

src/constants.ts

@@ -346,3 +346,5 @@ export const tokenColors = {
   ARG_SEPARATOR: functionColor,
   ORPHAN_RIGHT_PAREN: "#ff0000",
 } as const;
+
+export const DRAG_THRESHOLD = 5; // in pixels, to avoid unwanted drag when clicking

tests/figures/figure_component.test.ts

@@ -58,6 +58,13 @@ jest.mock("../../src/components/helpers/dom_helpers", () => {
   };
 });
 
+const constantsMocks = jest.requireMock("../../src/constants");
+jest.mock("../../src/constants", () => ({ ...jest.requireActual("../../src/constants") }));
+
+beforeEach(() => {
+  constantsMocks.DRAG_THRESHOLD = 0; // mock drag threshold to 0 for easier testing of snap
+});
+
 const cellHeight = DEFAULT_CELL_HEIGHT;
 const cellWidth = DEFAULT_CELL_WIDTH;
 
@@ -669,14 +676,14 @@ describe("figures", () => {
     createFigure(model, { id: figureId, offset: { x: 0, y: 200 } });
     model.updateMode("readonly");
     await nextTick();
-    const figure = fixture.querySelector(".o-figure")!;
+    const figure = fixture.querySelector<HTMLElement>(".o-figure")!;
     await simulateClick(".o-figure");
     expect(document.activeElement).not.toBe(figure);
     expect(fixture.querySelector(".o-fig-anchor")).toBeNull();
 
     triggerMouseEvent(figure, "pointerdown", 300, 200);
     await nextTick();
-    expect(figure.classList).not.toContain("o-dragging");
+    expect(figure).not.toHaveStyle({ cursor: "grabbing" });
   });
 
   describe("Figure border", () => {
@@ -926,7 +933,20 @@ describe("figures", () => {
     await nextTick();
     triggerMouseEvent(".o-figure", "pointerdown", 0, 0);
     await nextTick();
-    expect(fixture.querySelector(".o-figure")?.classList.contains("o-dragging")).toBeFalsy();
+    expect(".o-figure").not.toHaveStyle({ cursor: "grabbing" });
+  });
+
+  test("There is a small threshold before the figure is marked as dragging", async () => {
+    constantsMocks.DRAG_THRESHOLD = 5;
+    createFigure(model);
+    await nextTick();
+
+    await clickAndDrag(".o-figure", { x: 3, y: 1 }, undefined, false);
+    expect(".o-figure").not.toHaveStyle({ cursor: "grabbing" });
+    expect(fixture.querySelector<HTMLElement>(".o-figure")?.style.cursor).not.toBe("grabbing");
+
+    await clickAndDrag(".o-figure", { x: 6, y: 1 }, undefined, false);
+    expect(".o-figure").toHaveStyle({ cursor: "grabbing" });
   });
 
   test("Figure container is properly computed based on the sheetView size", async () => {