@hyperframes/studio 0.7.7 → 0.7.9

package/src/components/editor/manualOffsetDrag.ts

@@ -4,6 +4,7 @@ import {
   applyStudioPathOffsetDraft,
   beginStudioManualEditGesture,
   captureStudioPathOffset,
+  clearStudioPathOffset,
   endStudioManualEditGesture,
   readAppliedStudioPathOffset,
   restoreStudioPathOffset,
@@ -35,17 +36,17 @@ function getOffsetDragGsap(element: HTMLElement): OffsetDragGsap | null {
 function applyOffsetDragDraftViaGsap(
   element: HTMLElement,
   offset: { x: number; y: number },
+  baseGsap: { x: number; y: number },
 ): boolean {
   const gsap = getOffsetDragGsap(element);
   if (!gsap) return false;
   // GSAP owns the transform; neutralize the CSS translate longhand so the two
   // channels can't compose into a doubled position.
   element.style.setProperty("translate", "none");
-  const fallbackBase = {
-    x: Number(gsap.getProperty(element, "x")) || 0,
-    y: Number(gsap.getProperty(element, "y")) || 0,
-  };
-  const { newX, newY } = computeDraggedGsapPosition(element, offset, fallbackBase);
+  // Use the STABLE gesture-start base (captured in JS), NOT `gsap.getProperty`.
+  // After `translate: none`, getProperty reads the transform we set last frame,
+  // so `base + delta` would integrate frame-over-frame and fling the element.
+  const { newX, newY } = computeDraggedGsapPosition(element, offset, baseGsap);
   gsap.set(element, { x: newX, y: newY });
   return true;
 }
@@ -96,6 +97,14 @@ export interface ManualOffsetDragMember {
   selection: DomEditSelection;
   element: HTMLElement;
   initialOffset: { x: number; y: number };
+  /**
+   * The element's GSAP x/y at gesture start, captured in JS so a mid-drag
+   * re-render (which reverts inline style + wipes the `data-hf-drag-gsap-base-*`
+   * attrs) can't drop the base. Without this the draft falls back to the LIVE
+   * transform — i.e. the value it set last frame — and `base + delta` integrates,
+   * making the element accelerate away ("flies"). See applyOffsetDragDraftViaGsap.
+   */
+  baseGsap: { x: number; y: number };
   initialPathOffset: StudioPathOffsetSnapshot;
   gestureToken: string;
   screenToOffset: ManualOffsetDragMatrix;
@@ -343,6 +352,7 @@ export function createManualOffsetDragMember(input: {
     scaleX: input.rect.editScaleX,
     scaleY: input.rect.editScaleY,
   });
+  const baseGsap = { x: gsapX, y: gsapY };
   if (!measured.ok) {
     // Fallback: when GSAP transforms interfere with probe measurement, use
     // the preview scale as an approximation. The commit path reads the actual
@@ -357,6 +367,7 @@ export function createManualOffsetDragMember(input: {
         selection: input.selection,
         element: input.element,
         initialOffset,
+        baseGsap,
         initialPathOffset,
         gestureToken,
         screenToOffset: { a: 1 / scaleX, b: 0, c: 0, d: 1 / scaleY },
@@ -372,6 +383,7 @@ export function createManualOffsetDragMember(input: {
       selection: input.selection,
       element: input.element,
       initialOffset,
+      baseGsap,
       initialPathOffset,
       gestureToken,
       screenToOffset: measured.matrix,
@@ -402,7 +414,7 @@ export function applyManualOffsetDragDraft(
   // Position is single-sourced on the GSAP timeline; preview through gsap.set so
   // the live draft matches the committed `tl.set`/keyframe. CSS draft only when
   // gsap is unavailable (no preview iframe runtime).
-  if (!applyOffsetDragDraftViaGsap(member.element, offset)) {
+  if (!applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) {
     applyStudioPathOffsetDraft(member.element, offset);
   }
   return offset;
@@ -413,12 +425,22 @@ export function applyManualOffsetDragCommit(
   dx: number,
   dy: number,
 ): { x: number; y: number } {
+  // Re-stamp the STABLE gesture-start base/offset before the source commit reads
+  // them. A mid-drag re-render can wipe these attrs; the commit converts the drop
+  // offset → gsap x/y via computeDraggedGsapPosition, which without the base falls
+  // back to the live (already-dragged) transform and re-adds the delta — so the
+  // element flies off-screen the instant you drop it. The member holds the true
+  // gesture-start values in JS, immune to the re-render.
+  member.element.setAttribute("data-hf-drag-gsap-base-x", String(member.baseGsap.x));
+  member.element.setAttribute("data-hf-drag-gsap-base-y", String(member.baseGsap.y));
+  member.element.setAttribute("data-hf-drag-initial-offset-x", String(member.initialOffset.x));
+  member.element.setAttribute("data-hf-drag-initial-offset-y", String(member.initialOffset.y));
   const offset = resolveManualOffsetDragMemberOffset(member, dx, dy);
   // Optimistic visual through the GSAP channel (same as the live draft and the
   // committed `tl.set`), so the element holds its dropped position until the
   // source mutation soft-reloads — no transient CSS `--hf-studio-offset` write.
   // CSS apply only when gsap is unavailable.
-  if (!applyOffsetDragDraftViaGsap(member.element, offset)) {
+  if (!applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) {
     applyStudioPathOffset(member.element, offset);
   }
   return offset;
@@ -451,6 +473,15 @@ export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): v
     if (member.element.style.getPropertyValue("translate") === "none") {
       member.element.style.removeProperty("translate");
     }
+    // Migration: when GSAP owns the position (the committed value lives in the
+    // GSAP transform), the legacy `--hf-studio-offset` CSS channel is obsolete.
+    // Clear it on the LIVE element — otherwise the leftover `translate:
+    // var(--hf-studio-offset)` composes with the GSAP transform and the element
+    // renders offset by the stale value until a full page reload (the source is
+    // already stripped). clearStudioPathOffset leaves `transform` untouched.
+    if (getOffsetDragGsap(member.element)) {
+      clearStudioPathOffset(member.element);
+    }
     resumeGsapTimelines(member.element);
   }
 }

package/src/components/editor/marqueeCommit.ts

@@ -3,7 +3,8 @@ import type { DomEditSelection } from "./domEditing";
 import { collectDomEditLayerItems, resolveDomEditSelection } from "./domEditingLayers";
 import { isElementComputedVisible } from "./domEditingElement";
 import { coversComposition } from "../../utils/studioPreviewHelpers";
-import { elementObbCorners, marqueeIntersectsObb } from "../../utils/marqueeGeometry";
+import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
+import { toOverlayRect } from "./domEditOverlayGeometry";
 
 interface MarqueeState {
   startX: number;
@@ -16,13 +17,26 @@ interface MarqueeState {
 
 const MARQUEE_THRESHOLD_PX = 4;
 
+interface MarqueeHit {
+  element: HTMLElement;
+  rect: Rect;
+}
+
+/**
+ * Synchronous core of the marquee: the elements whose overlay-space rect
+ * intersects the marquee rect. Uses the SAME `toOverlayRect` basis as the
+ * single-selection / group-selection boxes, so what the marquee highlights
+ * and selects is exactly the box the user sees when they click an element.
+ * Shared by the live candidate highlight (per pointer-move) and the mouse-up
+ * commit. No async source probe — that only happens once, on commit.
+ */
 // fallow-ignore-next-line complexity
-async function runMarqueeIntersection(
-  rect: { left: number; top: number; width: number; height: number },
+function collectMarqueeHits(
+  rect: Rect,
   iframe: HTMLIFrameElement,
   overlayEl: HTMLDivElement,
   activeCompositionPath: string,
-): Promise<DomEditSelection[]> {
+): MarqueeHit[] {
   const doc = iframe.contentDocument;
   if (!doc) return [];
 
@@ -38,22 +52,42 @@ async function runMarqueeIntersection(
     height: declH > 0 ? declH : rootEl.getBoundingClientRect().height || 1,
   };
 
-  const hits: DomEditSelection[] = [];
+  const hits: MarqueeHit[] = [];
   for (const item of items) {
     const el = item.element;
     if (!isElementComputedVisible(el)) continue;
     if (coversComposition(el.getBoundingClientRect(), viewport)) continue;
-    const corners = elementObbCorners(el, overlayEl, iframe);
-    if (!corners) continue;
-    if (!marqueeIntersectsObb(rect, corners)) continue;
-    const sel = await resolveDomEditSelection(el, {
+    const overlayRect = toOverlayRect(overlayEl, iframe, el);
+    if (!overlayRect) continue;
+    const r: Rect = {
+      left: overlayRect.left,
+      top: overlayRect.top,
+      width: overlayRect.width,
+      height: overlayRect.height,
+    };
+    if (!rectsOverlap(rect, r)) continue;
+    hits.push({ element: el, rect: r });
+  }
+
+  return hits;
+}
+
+async function runMarqueeIntersection(
+  rect: Rect,
+  iframe: HTMLIFrameElement,
+  overlayEl: HTMLDivElement,
+  activeCompositionPath: string,
+): Promise<DomEditSelection[]> {
+  const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
+  const hits: DomEditSelection[] = [];
+  for (const { element } of collectMarqueeHits(rect, iframe, overlayEl, activeCompositionPath)) {
+    const sel = await resolveDomEditSelection(element, {
       activeCompositionPath,
       isMasterView,
       skipSourceProbe: true,
     });
     if (sel) hits.push(sel);
   }
-
   return hits;
 }
 
@@ -75,12 +109,12 @@ interface MarqueeGesturesDeps {
 // fallow-ignore-next-line complexity
 export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
   const marqueeRef = useRef<MarqueeState | null>(null);
-  const [marqueeRect, setMarqueeRect] = useState<{
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  } | null>(null);
+  const [marqueeRect, setMarqueeRect] = useState<Rect | null>(null);
+  // Live "candidate" highlight: the elements the marquee currently touches,
+  // shown before mouse-up so you can see what you're about to select. The
+  // iframe DOM doesn't mutate during a drag, so a sync intersection per move
+  // is cheap (clean layout → no thrash).
+  const [candidateRects, setCandidateRects] = useState<Rect[]>([]);
 
   const commitMarquee = useCallback(
     async (
@@ -111,17 +145,24 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
           if (Math.hypot(dx, dy) < MARQUEE_THRESHOLD_PX) return;
           m.pastThreshold = true;
         }
-        setMarqueeRect({
+        const rect: Rect = {
           left: Math.min(m.startX, m.currentX),
           top: Math.min(m.startY, m.currentY),
           width: Math.abs(m.currentX - m.startX),
           height: Math.abs(m.currentY - m.startY),
-        });
+        };
+        setMarqueeRect(rect);
+        const iframe = deps.iframeRef.current;
+        const overlay = deps.overlayRef.current;
+        if (iframe && overlay) {
+          const acp = deps.activeCompositionPathRef.current ?? "index.html";
+          setCandidateRects(collectMarqueeHits(rect, iframe, overlay, acp).map((h) => h.rect));
+        }
         return;
       }
       deps.gestures.onPointerMove(event);
     },
-    [deps.gestures, deps.overlayRef],
+    [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
   );
 
   const onPointerUp = useCallback(
@@ -148,6 +189,7 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
           deps.onMarqueeSelectRef.current?.([], false);
         }
         setMarqueeRect(null);
+        setCandidateRects([]);
         return;
       }
       deps.gestures.onPointerUp(event);
@@ -159,10 +201,11 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
     if (marqueeRef.current) {
       marqueeRef.current = null;
       setMarqueeRect(null);
+      setCandidateRects([]);
       return;
     }
     deps.gestures.clearPointerState(deps.selectionRef);
   }, [deps.gestures, deps.selectionRef]);
 
-  return { marqueeRef, marqueeRect, onPointerMove, onPointerUp, onPointerCancel };
+  return { marqueeRef, marqueeRect, candidateRects, onPointerMove, onPointerUp, onPointerCancel };
 }