@hyperframes/studio 0.8.81 → 0.8.83

package/src/components/editor/marqueeCommit.ts

@@ -14,6 +14,7 @@ interface MarqueeState {
   currentY: number;
   pointerId: number;
   pastThreshold: boolean;
+  target: Element;
 }
 
 const MARQUEE_THRESHOLD_PX = 4;
@@ -80,14 +81,13 @@ function hitsWithin(rect: Rect, candidates: MarqueeHit[]): MarqueeHit[] {
   return candidates.filter((candidate) => rectsOverlap(rect, candidate.rect));
 }
 
-async function runMarqueeIntersection(
-  rect: Rect,
-  candidates: MarqueeHit[],
+async function resolveDomEditSelections(
+  elements: HTMLElement[],
   activeCompositionPath: string,
 ): Promise<DomEditSelection[]> {
   const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
   const hits: DomEditSelection[] = [];
-  for (const { element } of hitsWithin(rect, candidates)) {
+  for (const element of elements) {
     const sel = await resolveDomEditSelection(element, {
       activeCompositionPath,
       isMasterView,
@@ -98,23 +98,48 @@ async function runMarqueeIntersection(
   return hits;
 }
 
-interface MarqueeGesturesDeps {
+export interface MarqueeGesturesDeps<T = DomEditSelection> {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
   overlayRef: React.RefObject<HTMLDivElement | null>;
   activeCompositionPathRef: React.RefObject<string | null>;
-  onMarqueeSelectRef: React.RefObject<
-    ((selections: DomEditSelection[], additive: boolean) => void) | undefined
-  >;
-  selectionRef: React.RefObject<DomEditSelection | null>;
-  gestures: {
+  onMarqueeSelectRef: React.RefObject<((selections: T[], additive: boolean) => void) | undefined>;
+  /** Turns the elements a drag touched into picks; without it, Studio's edit selections. */
+  resolveHits?: (elements: HTMLElement[]) => T[] | Promise<T[]>;
+  selectionRef?: React.RefObject<DomEditSelection | null>;
+  /** Studio's pointer handling, for the events that are not part of a marquee. */
+  gestures?: {
     onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
     onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
     clearPointerState: (ref: React.RefObject<DomEditSelection | null>) => void;
   };
 }
 
+export interface MarqueeGestures {
+  marqueeRect: Rect | null;
+  candidateRects: Rect[];
+  /** Starts a marquee at this press; the host has decided it landed on empty canvas. */
+  begin: (event: React.PointerEvent<HTMLElement>) => void;
+  /** Drops an active marquee without selecting anything. */
+  cancel: () => void;
+  onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onPointerCancel: () => void;
+}
+
+function releaseCapture(m: MarqueeState): void {
+  try {
+    m.target.releasePointerCapture(m.pointerId);
+  } catch {
+    /* already released */
+  }
+}
+
+export function useMarqueeGestures(deps: MarqueeGesturesDeps): MarqueeGestures;
+export function useMarqueeGestures<T>(
+  deps: MarqueeGesturesDeps<T> & Required<Pick<MarqueeGesturesDeps<T>, "resolveHits">>,
+): MarqueeGestures;
 // fallow-ignore-next-line complexity
-export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
+export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGestures {
   const marqueeRef = useRef<MarqueeState | null>(null);
   const [marqueeRect, setMarqueeRect] = useState<Rect | null>(null);
   // Live "candidate" highlight: the elements the marquee currently touches,
@@ -135,12 +160,55 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
       const candidates = candidatesRef.current ?? collectMarqueeCandidates(iframe, overlay, acp);
-      const hits = await runMarqueeIntersection(rect, candidates, acp);
-      deps.onMarqueeSelectRef.current(hits, additive);
+      const elements = hitsWithin(rect, candidates).map((hit) => hit.element);
+      const resolveHits = deps.resolveHits;
+      const picks = resolveHits
+        ? await resolveHits(elements)
+        : ((await resolveDomEditSelections(elements, acp)) as T[]);
+      deps.onMarqueeSelectRef.current?.(picks, additive);
     },
-    [deps.iframeRef, deps.overlayRef, deps.onMarqueeSelectRef, deps.activeCompositionPathRef],
+    [
+      deps.iframeRef,
+      deps.overlayRef,
+      deps.onMarqueeSelectRef,
+      deps.activeCompositionPathRef,
+      deps.resolveHits,
+    ],
   );
 
+  const reset = useCallback(() => {
+    marqueeRef.current = null;
+    setMarqueeRect(null);
+    setCandidateRects([]);
+    candidatesRef.current = null;
+  }, []);
+
+  const begin = useCallback(
+    (event: React.PointerEvent<HTMLElement>) => {
+      const oRect = deps.overlayRef.current?.getBoundingClientRect();
+      if (!oRect) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const x = event.clientX - oRect.left;
+      const y = event.clientY - oRect.top;
+      marqueeRef.current = {
+        startX: x,
+        startY: y,
+        currentX: x,
+        currentY: y,
+        pointerId: event.pointerId,
+        pastThreshold: false,
+        target: event.currentTarget,
+      };
+    },
+    [deps.overlayRef],
+  );
+
+  const cancel = useCallback(() => {
+    if (!marqueeRef.current) return;
+    releaseCapture(marqueeRef.current);
+    reset();
+  }, [reset]);
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
@@ -172,7 +240,7 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
         }
         return;
       }
-      deps.gestures.onPointerMove(event);
+      deps.gestures?.onPointerMove(event);
     },
     [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
   );
@@ -181,12 +249,7 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
       if (m) {
-        marqueeRef.current = null;
-        try {
-          (event.currentTarget as HTMLElement).releasePointerCapture(m.pointerId);
-        } catch {
-          /* already released */
-        }
+        releaseCapture(m);
         if (m.pastThreshold) {
           commitMarquee(
             {
@@ -200,26 +263,26 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
         } else {
           deps.onMarqueeSelectRef.current?.([], false);
         }
-        setMarqueeRect(null);
-        setCandidateRects([]);
-        candidatesRef.current = null;
+        reset();
         return;
       }
-      deps.gestures.onPointerUp(event);
+      deps.gestures?.onPointerUp(event);
     },
-    [deps.gestures, commitMarquee, deps.onMarqueeSelectRef],
+    [deps.gestures, commitMarquee, deps.onMarqueeSelectRef, reset],
   );
 
   const onPointerCancel = useCallback(() => {
-    if (marqueeRef.current) {
-      marqueeRef.current = null;
-      setMarqueeRect(null);
-      setCandidateRects([]);
-      candidatesRef.current = null;
-      return;
-    }
-    deps.gestures.clearPointerState(deps.selectionRef);
-  }, [deps.gestures, deps.selectionRef]);
-
-  return { marqueeRef, marqueeRect, candidateRects, onPointerMove, onPointerUp, onPointerCancel };
+    if (marqueeRef.current) return cancel();
+    if (deps.selectionRef) deps.gestures?.clearPointerState(deps.selectionRef);
+  }, [deps.gestures, deps.selectionRef, cancel]);
+
+  return {
+    marqueeRect,
+    candidateRects,
+    begin,
+    cancel,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+  };
 }

package/src/components/editor/previewReadOnly.overlay.test.tsx

@@ -13,7 +13,19 @@ import { DomEditOverlay } from "./DomEditOverlay";
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 const RECT = { left: 100, top: 100, width: 200, height: 100, editScaleX: 1, editScaleY: 1 };
-const layout = vi.hoisted(() => ({ group: [] as unknown[] }));
+const layout = vi.hoisted(() => ({
+  group: [] as unknown[],
+  hover: null as unknown,
+  offCanvas: [] as unknown[],
+  offCanvasElements: new Map<string, HTMLElement>(),
+}));
+
+vi.mock("./useOffCanvasIndicators", () => ({
+  useOffCanvasIndicators: () => ({
+    offCanvasRects: layout.offCanvas,
+    offCanvasElementsRef: { current: layout.offCanvasElements },
+  }),
+}));
 
 vi.mock("./useDomEditOverlayRects", () => ({
   useDomEditOverlayRects: () => ({
@@ -22,7 +34,7 @@ vi.mock("./useDomEditOverlayRects", () => ({
       current: { left: 100, top: 100, width: 200, height: 100, editScaleX: 1, editScaleY: 1 },
     },
     setOverlayRect: () => undefined,
-    hoverRect: null,
+    hoverRect: layout.hover,
     groupOverlayItems: layout.group,
     groupOverlayItemsRef: { current: layout.group },
     setGroupOverlayItems: () => undefined,
@@ -57,6 +69,8 @@ function fixture(
     onStyleCommit: vi.fn(),
     onDeleteSelection: vi.fn(),
     onApplyZIndex: vi.fn(),
+    onMarqueeSelect: vi.fn(),
+    onTextEditingChange: vi.fn(),
   };
   const selection = makeSelection("Title", textElement("title"));
   selection.capabilities.canApplyManualRotation = true;
@@ -92,6 +106,33 @@ const fire = (target: Element, type: string, init: MouseEventInit = {}) => {
   return event;
 };
 
+const pressEnter = (overlay: HTMLElement) =>
+  act(() => {
+    overlay.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+  });
+
+const clickBox = (overlay: HTMLElement) => {
+  const box = overlay.querySelector(BOX)!;
+  for (const type of ["pointerdown", "pointerup", "click"]) fire(box, type);
+};
+
+const enterOn = (target: Element) =>
+  act(() => {
+    target.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+  });
+
+const rightClick = async (overlay: HTMLElement) => {
+  await act(async () => {
+    overlay.dispatchEvent(
+      new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 5, clientY: 5 }),
+    );
+  });
+};
+
 beforeEach(() => {
   vi.useFakeTimers();
   __resetForTests();
@@ -102,6 +143,9 @@ afterEach(() => {
   act(() => root.unmount());
   document.body.innerHTML = "";
   layout.group = [];
+  layout.hover = null;
+  layout.offCanvas = [];
+  layout.offCanvasElements.clear();
   vi.useRealTimers();
 });
 
@@ -196,13 +240,6 @@ describe("DomEditOverlay with the preview read-only", () => {
     expect(spies.onPathOffsetCommit).not.toHaveBeenCalled();
   });
 
-  const pressEnter = (overlay: HTMLElement) =>
-    act(() => {
-      overlay.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
-      );
-    });
-
   it("control: with the flag off Enter opens the text for editing", () => {
     const { selection, overlay } = fixture();
     pressEnter(overlay);
@@ -215,14 +252,6 @@ describe("DomEditOverlay with the preview read-only", () => {
     expect(selection.element.hasAttribute("contenteditable")).toBe(false);
   });
 
-  const rightClick = async (overlay: HTMLElement) => {
-    await act(async () => {
-      overlay.dispatchEvent(
-        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 5, clientY: 5 }),
-      );
-    });
-  };
-
   it("control: with the flag off right-click offers delete and z-order", async () => {
     const { overlay } = fixture();
     await rightClick(overlay);
@@ -258,3 +287,177 @@ describe("DomEditOverlay with the preview read-only", () => {
     expect(spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("DomEditOverlay with canvasInput host", () => {
+  const HOST = { canvasInput: "host" } as const;
+
+  it("lets presses through its root, and the overlay default keeps them", () => {
+    expect(fixture().overlay.className).toContain("pointer-events-auto");
+    act(() => root.unmount());
+    expect(fixture(HOST).overlay.className).toContain("pointer-events-none");
+  });
+
+  it("draws no hover box", () => {
+    layout.hover = RECT;
+    const hovered = (props = {}) => {
+      const { overlay } = fixture(props);
+      const box = overlay.querySelector('[data-dom-edit-hover-box="true"]');
+      act(() => root.unmount());
+      return box;
+    };
+    const selection = makeSelection("Hover", textElement("hover"));
+    expect(hovered({ hoverSelection: selection })).not.toBeNull();
+    expect(hovered({ ...HOST, hoverSelection: selection })).toBeNull();
+  });
+
+  it("starts no marquee and makes no selection from a press on empty canvas", () => {
+    const off = fixture({ selection: null });
+    fire(off.overlay, "pointerdown");
+    fire(off.overlay, "pointerup");
+    expect(off.spies.onMarqueeSelect).toHaveBeenCalledWith([], false);
+    act(() => root.unmount());
+    const { spies, overlay } = fixture({ ...HOST, selection: null });
+    fire(overlay, "pointerdown");
+    fire(overlay, "mousedown");
+    fire(overlay, "pointerup");
+    expect(spies.onMarqueeSelect).not.toHaveBeenCalled();
+    expect(spies.onCanvasMouseDown).not.toHaveBeenCalled();
+  });
+
+  it("opens no context menu and selects nothing on right-click", async () => {
+    const { spies, overlay } = fixture({ ...HOST, selection: null });
+    await rightClick(overlay);
+    expect(spies.onSelectionChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    await rightClick(fixture(HOST).overlay);
+    expect(document.body.textContent).not.toContain("Delete");
+  });
+
+  it("does not re-select on a click of the selection box", () => {
+    const off = fixture();
+    clickBox(off.overlay);
+    expect(off.spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+    const { spies, overlay } = fixture(HOST);
+    clickBox(overlay);
+    fire(overlay.querySelector(BOX)!, "click");
+    expect(spies.onCanvasMouseDown).not.toHaveBeenCalled();
+  });
+
+  it("offers no off-canvas indicator to press, so nothing re-selects from one", async () => {
+    const MARK = '[aria-label="Select off-canvas element stray"]';
+    const offCanvas = (props = {}) => {
+      layout.offCanvasElements.set("stray", textElement("stray"));
+      layout.offCanvas = [{ key: "stray", left: 820, top: 10, width: 120, height: 40 }];
+      return fixture(props);
+    };
+    const off = offCanvas();
+    fire(off.overlay.querySelector(MARK)!, "click");
+    await vi.waitFor(() => expect(off.spies.onSelectionChange).toHaveBeenCalledTimes(1));
+    act(() => root.unmount());
+    const { spies, overlay } = offCanvas(HOST);
+    expect(overlay.querySelector(MARK)).toBeNull();
+    expect(spies.onSelectionChange).not.toHaveBeenCalled();
+  });
+
+  it("reports each selection-box click to the host once, by either route", () => {
+    const cases = [
+      { props: {}, movable: true, reselects: 1 },
+      { props: HOST, movable: true, reselects: 0 },
+      { props: HOST, movable: false, reselects: 0 },
+    ];
+    for (const { props, movable, reselects } of cases) {
+      const onSelectionBoxClick = vi.fn();
+      const { spies, selection, overlay } = fixture({ ...props, onSelectionBoxClick });
+      selection.capabilities.canApplyManualOffset = movable;
+      clickBox(overlay);
+      expect(onSelectionBoxClick).toHaveBeenCalledTimes(1);
+      expect(onSelectionBoxClick).toHaveBeenCalledWith(expect.anything(), selection);
+      expect(spies.onCanvasMouseDown).toHaveBeenCalledTimes(reselects);
+      act(() => root.unmount());
+    }
+  });
+
+  it("does not report a press off the box, or a click on a group's box", () => {
+    const onSelectionBoxClick = vi.fn();
+    const off = fixture({ onSelectionBoxClick, onMarqueeSelect: undefined });
+    for (const type of ["pointerdown", "mousedown", "pointerup", "click"]) fire(off.overlay, type);
+    expect(off.spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+    const members = ["a", "b"].map((id) => {
+      const selection = makeSelection(id, textElement(id));
+      return { key: id, selection, element: selection.element, rect: RECT };
+    });
+    members[1].selection.capabilities.canApplyManualOffset = false;
+    layout.group = members;
+    const { spies, overlay } = fixture({
+      onSelectionBoxClick,
+      selection: members[0].selection,
+      groupSelections: members.map((m) => m.selection),
+    });
+    clickBox(overlay);
+    expect(spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
+    expect(onSelectionBoxClick).not.toHaveBeenCalled();
+  });
+
+  it("reports the first box click after a handle resize", () => {
+    const onSelectionBoxClick = vi.fn();
+    const { selection, overlay } = fixture({ ...HOST, onSelectionBoxClick });
+    for (const type of ["pointerdown", "pointerup", "click"]) {
+      fire(overlay.querySelector("div.h-4.w-4")!, type);
+    }
+    selection.capabilities.canApplyManualOffset = false;
+    clickBox(overlay);
+    expect(onSelectionBoxClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("opens the text on Enter when nothing else has focus, not from a focused field", () => {
+    const off = fixture();
+    enterOn(document.body);
+    expect(off.selection.element.hasAttribute("contenteditable")).toBe(false);
+    act(() => root.unmount());
+    const { spies, selection } = fixture(HOST);
+    const field = document.createElement("input");
+    document.body.append(field);
+    enterOn(field);
+    expect(selection.element.hasAttribute("contenteditable")).toBe(false);
+    enterOn(document.body);
+    expect(selection.element.hasAttribute("contenteditable")).toBe(true);
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true]]);
+  });
+
+  it("keeps the handles working: drag, resize dots and rotate", () => {
+    const { spies, overlay } = fixture(HOST);
+    fire(overlay.querySelector(BOX)!, "pointerdown");
+    expect(spies.onManualDragStart).toHaveBeenCalledTimes(1);
+    fire(overlay.querySelector(BOX)!, "pointerup");
+    expect(overlay.querySelectorAll("div.h-4.w-4")).toHaveLength(4);
+    const rotate = overlay.querySelector('[aria-label="Rotate selection"]')!;
+    fire(rotate, "pointerdown", { clientX: 200, clientY: 250 });
+    fire(rotate, "pointermove", { clientX: 300, clientY: 150 });
+    fire(rotate, "pointerup", { clientX: 300, clientY: 150 });
+    expect(spies.onRotationCommit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("DomEditOverlay onTextEditingChange", () => {
+  it("reports true when the caret goes live and false when the edit ends", () => {
+    const { spies, selection, overlay } = fixture();
+    expect(spies.onTextEditingChange).not.toHaveBeenCalled();
+    pressEnter(overlay);
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true]]);
+    act(() => {
+      selection.element.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    });
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
+  });
+
+  it("reports false when the overlay unmounts mid-edit", () => {
+    const { spies, overlay } = fixture();
+    pressEnter(overlay);
+    act(() => root.unmount());
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
+  });
+});