@hyperframes/studio 0.7.54 → 0.7.56

package/src/components/editor/DomEditOverlay.test.ts

@@ -11,10 +11,10 @@ import {
   hasDomEditRotationChanged,
   resolveDomEditCoordinateScale,
   resolveDomEditGroupOverlayRect,
-  resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./DomEditOverlay";
 import type { DomEditSelection } from "./domEditing";
+import { resolveResizeCenterAnchorOffset } from "./domEditOverlayGestures";
 
 // React 19 warns unless the test environment opts into act().
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -84,21 +84,37 @@ vi.mock("./useDomEditOverlayRects", async () => {
   };
 });
 
+const previewHelperSpies = vi.hoisted(() => ({
+  getPreviewTargetFromPointer: vi.fn<() => HTMLElement | null>(() => null),
+}));
+
+vi.mock("../../utils/studioPreviewHelpers", async () => {
+  const actual = await vi.importActual<typeof import("../../utils/studioPreviewHelpers")>(
+    "../../utils/studioPreviewHelpers",
+  );
+  return {
+    ...actual,
+    getPreviewTargetFromPointer: previewHelperSpies.getPreviewTargetFromPointer,
+  };
+});
+
 vi.mock("./domEditOverlayGeometry", async () => {
   const actual = await vi.importActual<typeof import("./domEditOverlayGeometry")>(
     "./domEditOverlayGeometry",
   );
 
+  const stubRect = {
+    left: 24,
+    top: 36,
+    width: 180,
+    height: 72,
+    editScaleX: 1,
+    editScaleY: 1,
+  };
   return {
     ...actual,
-    toOverlayRect: () => ({
-      left: 24,
-      top: 36,
-      width: 180,
-      height: 72,
-      editScaleX: 1,
-      editScaleY: 1,
-    }),
+    toOverlayRect: () => stubRect,
+    orientedOverlayRect: () => stubRect,
   };
 });
 
@@ -126,6 +142,103 @@ function createOverlayProps(args: {
   };
 }
 
+/**
+ * Stub element-level getBoundingClientRect to a fixed 800×450 rect (happy-dom
+ * returns all-zeros for unlaid-out elements, which gates the RAF compRect
+ * update). Returns a restore function to call in teardown.
+ */
+function stubViewportRect(): () => void {
+  const original = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function (): DOMRect {
+    return {
+      left: 0,
+      top: 0,
+      right: 800,
+      bottom: 450,
+      width: 800,
+      height: 450,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    };
+  };
+  return () => {
+    Element.prototype.getBoundingClientRect = original;
+  };
+}
+
+/**
+ * Flush the mount's RAF ticks so the compRect update lands. Two animation-frame
+ * ticks: the first scheduled by useMountEffect's update(), the second by
+ * update()'s tail recursion.
+ */
+async function flushOverlayRaf(): Promise<void> {
+  await act(async () => {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+  });
+}
+
+/** A fully-populated DomEditSelection with per-test overrides (capabilities are
+ *  merged so a test can flip a single flag without restating the whole set). */
+function makeDomEditSelection(
+  overrides: Partial<DomEditSelection> = {},
+  capabilityOverrides: Partial<DomEditSelection["capabilities"]> = {},
+): DomEditSelection {
+  const base: DomEditSelection = {
+    element: document.createElement("div"),
+    id: "hero-title",
+    selector: ".hero-title",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+    tagName: "div",
+    label: "Hero Title",
+    textContent: "Hello",
+    textFields: [],
+    capabilities: {
+      canEditText: true,
+      canEditLayout: true,
+      canMove: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: false,
+      canApplyManualRotation: false,
+      canAdjustOpacity: true,
+      canAdjustFill: true,
+      canAdjustBorderRadius: true,
+      canAdjustStroke: true,
+      canAdjustShadow: true,
+      canAdjustZIndex: true,
+    },
+    computedStyle: {
+      display: "block",
+      position: "absolute",
+    },
+  };
+  return {
+    ...base,
+    ...overrides,
+    capabilities: { ...base.capabilities, ...capabilityOverrides },
+  };
+}
+
+/** Query the composition-canvas overlay and assert it mounted. */
+function getOverlay(host: HTMLElement): HTMLDivElement {
+  const overlay = host.querySelector<HTMLDivElement>('[aria-label="Composition canvas"]');
+  expect(overlay).toBeTruthy();
+  if (!overlay) throw new Error("Expected composition canvas overlay");
+  return overlay;
+}
+
+/** Dispatch a left-button pointerdown at (clientX, clientY) inside act(). */
+function dispatchOverlayPointerDown(target: Element, clientX = 120, clientY = 80): void {
+  act(() => {
+    target.dispatchEvent(
+      new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX, clientY }),
+    );
+  });
+}
+
 describe("focusDomEditOverlayElement", () => {
   it("focuses the canvas overlay without scrolling", () => {
     const calls: Array<FocusOptions | undefined> = [];
@@ -144,41 +257,84 @@ describe("DomEditOverlay", () => {
     gestureSpies.onPointerMove.mockClear();
     gestureSpies.onPointerUp.mockClear();
     gestureSpies.clearPointerState.mockClear();
+    previewHelperSpies.getPreviewTargetFromPointer.mockReset();
+    previewHelperSpies.getPreviewTargetFromPointer.mockReturnValue(null);
+  });
+
+  it("selects on the first click over an element even before a hover is resolved", async () => {
+    // Regression: this used to start a marquee whenever hoverSelectionRef was null.
+    // The RAF hover loop populates that ref ASYNCHRONOUSLY, so a genuine first
+    // click over an element read null and was misread as empty canvas — the
+    // marquee swallowed the selecting onMouseDown, so nothing selected until the
+    // SECOND click. With a synchronous pointer hit-test finding an element, the
+    // marquee must NOT start and onCanvasMouseDown must fire on the first click.
+    const restoreRect = stubViewportRect();
+    const originalPointerCapture = HTMLDivElement.prototype.setPointerCapture;
+    HTMLDivElement.prototype.setPointerCapture = () => {};
+
+    // An element IS under the pointer, but no hover has been resolved yet.
+    previewHelperSpies.getPreviewTargetFromPointer.mockReturnValue(document.createElement("div"));
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
+    const onCanvasMouseDown = vi.fn();
+    const onMarqueeSelect = vi.fn();
+
+    function Harness() {
+      return React.createElement(DomEditOverlay, {
+        ...createOverlayProps({
+          iframeRef,
+          selection: null,
+          hoverSelection: null,
+          onSelectionChange: () => {},
+        }),
+        onCanvasMouseDown,
+        onMarqueeSelect,
+      });
+    }
+
+    act(() => {
+      root.render(React.createElement(Harness));
+    });
+    await flushOverlayRaf();
+
+    const overlay = getOverlay(host);
+
+    act(() => {
+      overlay.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 120, clientY: 80 }),
+      );
+      overlay.dispatchEvent(
+        new MouseEvent("mousedown", { bubbles: true, button: 0, clientX: 120, clientY: 80 }),
+      );
+    });
+
+    // No marquee started; the click reached the selecting mouse-down handler.
+    expect(onMarqueeSelect).not.toHaveBeenCalled();
+    expect(onCanvasMouseDown).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      root.unmount();
+    });
+    HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
+    restoreRect();
+    host.remove();
   });
 
   it("does not start a drag from a stale hover target on canvas pointer-down", () => {
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const selection: DomEditSelection = {
-      element: document.createElement("div"),
+    const selection = makeDomEditSelection({
       id: "cta-label",
       selector: ".cta-label",
-      selectorIndex: 0,
-      sourceFile: "index.html",
       tagName: "span",
       label: "CTA Label",
       textContent: "Add to basket",
-      textFields: [],
-      capabilities: {
-        canEditText: true,
-        canEditLayout: true,
-        canMove: true,
-        canApplyManualOffset: true,
-        canApplyManualSize: false,
-        canApplyManualRotation: false,
-        canAdjustOpacity: true,
-        canAdjustFill: true,
-        canAdjustBorderRadius: true,
-        canAdjustStroke: true,
-        canAdjustShadow: true,
-        canAdjustZIndex: true,
-      },
-      computedStyle: {
-        display: "inline",
-        position: "static",
-      },
-    };
+      computedStyle: { display: "inline", position: "static" },
+    });
 
     let currentSelection: DomEditSelection | null = null;
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -202,19 +358,9 @@ describe("DomEditOverlay", () => {
       root.render(React.createElement(Harness));
     });
 
-    const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
-    expect(overlay).toBeTruthy();
+    const overlay = getOverlay(host);
 
-    act(() => {
-      overlay.dispatchEvent(
-        new PointerEvent("pointerdown", {
-          bubbles: true,
-          button: 0,
-          clientX: 120,
-          clientY: 80,
-        }),
-      );
-    });
+    dispatchOverlayPointerDown(overlay);
 
     expect(gestureSpies.startGesture).not.toHaveBeenCalled();
     expect(currentSelection).toBe(null);
@@ -233,53 +379,12 @@ describe("DomEditOverlay", () => {
     // box (and other bounded UI) behind `compRect.width > 0` (added in the
     // keyframes PR a468550f). Stub element-level getBoundingClientRect for
     // the test so the RAF compRect update produces a real width.
-    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
-    Element.prototype.getBoundingClientRect = function (): DOMRect {
-      return {
-        left: 0,
-        top: 0,
-        right: 800,
-        bottom: 450,
-        width: 800,
-        height: 450,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
-    };
+    const restoreRect = stubViewportRect();
 
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const selection: DomEditSelection = {
-      element: document.createElement("div"),
-      id: "hero-title",
-      selector: ".hero-title",
-      selectorIndex: 0,
-      sourceFile: "index.html",
-      tagName: "div",
-      label: "Hero Title",
-      textContent: "Hello",
-      textFields: [],
-      capabilities: {
-        canEditText: true,
-        canEditLayout: true,
-        canMove: true,
-        canApplyManualOffset: true,
-        canApplyManualSize: false,
-        canApplyManualRotation: false,
-        canAdjustOpacity: true,
-        canAdjustFill: true,
-        canAdjustBorderRadius: true,
-        canAdjustStroke: true,
-        canAdjustShadow: true,
-        canAdjustZIndex: true,
-      },
-      computedStyle: {
-        display: "block",
-        position: "absolute",
-      },
-    };
+    const selection = makeDomEditSelection();
 
     let currentSelection: DomEditSelection | null = selection;
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -307,30 +412,16 @@ describe("DomEditOverlay", () => {
     // Flush the mount's RAF tick so the compRect update lands before the
     // pointer-down. Two animation-frame ticks: the first scheduled by
     // useMountEffect's update(), the second by update()'s tail recursion.
-    await act(async () => {
-      await new Promise<void>((resolve) => {
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-      });
-    });
+    await flushOverlayRaf();
 
-    const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
-    expect(overlay).toBeTruthy();
+    getOverlay(host);
 
     const selectionBox = host.querySelector(
       '[data-dom-edit-selection-box="true"]',
     ) as HTMLDivElement;
     expect(selectionBox).toBeTruthy();
 
-    act(() => {
-      selectionBox.dispatchEvent(
-        new PointerEvent("pointerdown", {
-          bubbles: true,
-          button: 0,
-          clientX: 120,
-          clientY: 80,
-        }),
-      );
-    });
+    dispatchOverlayPointerDown(selectionBox);
 
     expect(currentSelection).toBe(selection);
     expect(gestureSpies.startGesture).toHaveBeenCalledWith(
@@ -342,58 +433,17 @@ describe("DomEditOverlay", () => {
       root.unmount();
     });
     HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
-    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    restoreRect();
     host.remove();
   });
 
   it("passes the tracked hover selection when clicking the existing selection box", async () => {
-    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
-    Element.prototype.getBoundingClientRect = function (): DOMRect {
-      return {
-        left: 0,
-        top: 0,
-        right: 800,
-        bottom: 450,
-        width: 800,
-        height: 450,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
-    };
+    const restoreRect = stubViewportRect();
 
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const selection: DomEditSelection = {
-      element: document.createElement("div"),
-      id: "hero-title",
-      selector: ".hero-title",
-      selectorIndex: 0,
-      sourceFile: "index.html",
-      tagName: "div",
-      label: "Hero Title",
-      textContent: "Hello",
-      textFields: [],
-      capabilities: {
-        canEditText: true,
-        canEditLayout: true,
-        canMove: false,
-        canApplyManualOffset: false,
-        canApplyManualSize: false,
-        canApplyManualRotation: false,
-        canAdjustOpacity: true,
-        canAdjustFill: true,
-        canAdjustBorderRadius: true,
-        canAdjustStroke: true,
-        canAdjustShadow: true,
-        canAdjustZIndex: true,
-      },
-      computedStyle: {
-        display: "block",
-        position: "absolute",
-      },
-    };
+    const selection = makeDomEditSelection({}, { canMove: false, canApplyManualOffset: false });
     const hoverSelection: DomEditSelection = { ...selection, id: "hovered-sibling" };
     const onCanvasMouseDown = vi.fn();
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -414,11 +464,7 @@ describe("DomEditOverlay", () => {
       root.render(React.createElement(Harness));
     });
 
-    await act(async () => {
-      await new Promise<void>((resolve) => {
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-      });
-    });
+    await flushOverlayRaf();
 
     const selectionBox = host.querySelector(
       '[data-dom-edit-selection-box="true"]',
@@ -437,7 +483,7 @@ describe("DomEditOverlay", () => {
     act(() => {
       root.unmount();
     });
-    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    restoreRect();
     host.remove();
   });
 });
@@ -513,130 +559,10 @@ describe("filterNestedDomEditGroupItems", () => {
   });
 });
 
-describe("resolveDomEditResizeGesture", () => {
-  it("resizes width and height independently by default", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 240,
-        originHeight: 120,
-        actualWidth: 240,
-        actualHeight: 120,
-        scaleX: 1,
-        scaleY: 1,
-        dx: 30,
-        dy: 12,
-        uniform: false,
-      }),
-    ).toEqual({
-      overlayWidth: 270,
-      overlayHeight: 132,
-      width: 270,
-      height: 132,
-    });
-  });
-
-  it("divides the cursor delta by the element's content scale (rescaled element)", () => {
-    // Element renders at 2x via a GSAP scale: a 30px cursor delta must grow the
-    // CSS box by only 15px so the RENDERED box tracks the pointer 1:1.
-    const next = resolveDomEditResizeGesture({
-      originWidth: 480, // 240 css x 2 content scale (overlay px at editScale 1)
-      originHeight: 240,
-      actualWidth: 240,
-      actualHeight: 120,
-      scaleX: 1,
-      scaleY: 1,
-      contentScaleX: 2,
-      contentScaleY: 2,
-      dx: 30,
-      dy: 12,
-      uniform: false,
-    });
-    expect(next.width).toBe(255);
-    expect(next.height).toBe(126);
-    // The overlay box keeps tracking the raw cursor.
-    expect(next.overlayWidth).toBe(510);
-    expect(next.overlayHeight).toBe(252);
-  });
-
-  it("treats a missing/invalid content scale as 1 (unscaled element)", () => {
-    const next = resolveDomEditResizeGesture({
-      originWidth: 240,
-      originHeight: 120,
-      actualWidth: 240,
-      actualHeight: 120,
-      scaleX: 1,
-      scaleY: 1,
-      contentScaleX: 0,
-      contentScaleY: Number.NaN,
-      dx: 30,
-      dy: 12,
-      uniform: false,
-    });
-    expect(next.width).toBe(270);
-    expect(next.height).toBe(132);
-  });
-
-  it("snaps width and height to the same value when Shift is held", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 240,
-        originHeight: 120,
-        actualWidth: 240,
-        actualHeight: 120,
-        scaleX: 1,
-        scaleY: 1,
-        dx: 30,
-        dy: 12,
-        uniform: true,
-      }),
-    ).toEqual({
-      overlayWidth: 270,
-      overlayHeight: 270,
-      width: 270,
-      height: 270,
-    });
-  });
-
-  it("uses the dominant pointer delta for uniform shrink", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 300,
-        originHeight: 180,
-        actualWidth: 300,
-        actualHeight: 180,
-        scaleX: 1,
-        scaleY: 1,
-        dx: 8,
-        dy: -40,
-        uniform: true,
-      }),
-    ).toMatchObject({
-      width: 260,
-      height: 260,
-    });
-  });
-
-  it("writes source-local dimensions when the edited source is scaled down in master view", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 100,
-        originHeight: 50,
-        actualWidth: 400,
-        actualHeight: 200,
-        scaleX: 0.25,
-        scaleY: 0.25,
-        dx: 25,
-        dy: 10,
-        uniform: false,
-      }),
-    ).toEqual({
-      overlayWidth: 125,
-      overlayHeight: 60,
-      width: 500,
-      height: 240,
-    });
-  });
-});
+// Note: the resize SIZE math moved from the AABB screen-space
+// resolveDomEditResizeGesture (removed) to the local-space (OBB) model in
+// domEditResizeLocal.ts — see domEditResizeLocal.test.ts, which re-covers the
+// independent-axis, aspect-lock, and scaled-master-view cases plus rotated axes.
 
 describe("resolveDomEditRotationGesture", () => {
   it("rotates by the pointer angle around the element center", () => {
@@ -701,3 +627,43 @@ describe("resolveDomEditRotationGesture", () => {
     expect(hasDomEditRotationChanged(0, 0)).toBe(false);
   });
 });
+
+// resolveResizeCenterAnchorOffset is the UNROTATED (AABB) fallback used only when
+// the element's real transformed corners can't be measured. Center-anchored: a
+// width/height change grows the box from its top-left, drifting the center by half
+// the size change per axis, so the pin translates back by that half-delta. It is
+// handle-independent — all four corners scale about the same center.
+describe("resolveResizeCenterAnchorOffset", () => {
+  it("grow: translates back by half the size change on both axes", () => {
+    expect(
+      resolveResizeCenterAnchorOffset({
+        originWidth: 200,
+        originHeight: 100,
+        overlayWidth: 230,
+        overlayHeight: 112,
+      }),
+    ).toEqual({ dx: -15, dy: -6 });
+  });
+
+  it("shrink: translates forward by half the (positive) size change", () => {
+    expect(
+      resolveResizeCenterAnchorOffset({
+        originWidth: 200,
+        originHeight: 100,
+        overlayWidth: 160,
+        overlayHeight: 80,
+      }),
+    ).toEqual({ dx: 20, dy: 10 });
+  });
+
+  it("no size change: zero offset", () => {
+    expect(
+      resolveResizeCenterAnchorOffset({
+        originWidth: 200,
+        originHeight: 100,
+        overlayWidth: 200,
+        overlayHeight: 100,
+      }),
+    ).toEqual({ dx: 0, dy: 0 });
+  });
+});