@hyperframes/studio 0.7.7 → 0.7.8

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 };
 }

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -1,8 +1,10 @@
+import { useState } from "react";
 import type { DomEditSelection } from "./domEditingTypes";
 import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { MetricField } from "./propertyPanelPrimitives";
 import { KeyframeNavigation } from "./KeyframeNavigation";
 import { formatPxMetricValue, parsePxMetricValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
+import { Transform3DCube, type CubePose } from "./Transform3DCube";
 
 type KeyframeEntry = Array<{
   percentage: number;
@@ -24,9 +26,216 @@ interface PropertyPanel3dTransformProps {
     property: string,
     value: number,
   ) => Promise<void>;
+  /** Batched commit — several props into one keyframe (the cube's rotationX/Y/Z). */
+  onCommitAnimatedProperties?: (
+    element: DomEditSelection,
+    props: Record<string, number | string>,
+  ) => Promise<void>;
   onSeekToTime?: (time: number) => void;
   onRemoveKeyframe?: (animId: string, pct: number) => void;
-  onConvertToKeyframes?: (animId: string) => void;
+  onConvertToKeyframes?: (animId: string, duration?: number) => void;
+  /** Live-set props on the preview element during a cube drag (no source write). */
+  onLivePreviewProps?: (element: DomEditSelection, props: Record<string, number>) => void;
+}
+
+type CommitAnimatedProperty = (
+  element: DomEditSelection,
+  property: string,
+  value: number,
+) => Promise<void>;
+
+/** The draggable cube + its commit/recenter/live-preview wiring. */
+function Cube3dControl({
+  element,
+  gsapRuntimeValues,
+  onCommitAnimatedProperty,
+  onCommitAnimatedProperties,
+  onLivePreviewProps,
+  onKeyframe,
+  keyframed,
+}: {
+  element: DomEditSelection;
+  gsapRuntimeValues: Record<string, number>;
+  onCommitAnimatedProperty: CommitAnimatedProperty;
+  onCommitAnimatedProperties?: (
+    element: DomEditSelection,
+    props: Record<string, number | string>,
+  ) => Promise<void>;
+  onLivePreviewProps?: (element: DomEditSelection, props: Record<string, number>) => void;
+  onKeyframe?: () => void;
+  keyframed?: boolean;
+}) {
+  const pose: CubePose = {
+    rotationX: gsapRuntimeValues.rotationX ?? 0,
+    rotationY: gsapRuntimeValues.rotationY ?? 0,
+    rotationZ: gsapRuntimeValues.rotationZ ?? 0,
+  };
+  // Commit only the rotation axes the drag actually changed (each rounded to a
+  // whole degree). Reuses the keyframe-aware animated-property commit, so a drag
+  // at the playhead writes/updates a keyframe just like the numeric fields.
+  const commitPose = (next: CubePose) => {
+    const changedProps: Record<string, number> = {};
+    for (const axis of ["rotationX", "rotationY", "rotationZ"] as const) {
+      const rounded = Math.round(next[axis]);
+      if (rounded !== Math.round(pose[axis])) changedProps[axis] = rounded;
+    }
+    const axes = Object.keys(changedProps);
+    if (axes.length === 0) return;
+    // ONE keyframe for the whole pose change — avoids per-axis commits racing into
+    // adjacent duplicate keyframes. Fall back to per-axis if no batched commit.
+    if (onCommitAnimatedProperties) {
+      void onCommitAnimatedProperties(element, changedProps);
+    } else {
+      for (const [axis, v] of Object.entries(changedProps))
+        onCommitAnimatedProperty(element, axis, v);
+    }
+  };
+  const recenter = () => {
+    // ONE commit for the whole reset — six per-axis commits meant six soft-reloads
+    // (six flashes) for a single click. Batch like commitPose does.
+    const identity = {
+      rotationX: 0,
+      rotationY: 0,
+      rotationZ: 0,
+      z: 0,
+      scale: 1,
+      transformPerspective: 0,
+    };
+    if (onCommitAnimatedProperties) {
+      void onCommitAnimatedProperties(element, identity);
+    } else {
+      for (const [prop, v] of Object.entries(identity))
+        void onCommitAnimatedProperty(element, prop, v);
+    }
+  };
+  // Immediate element feedback while dragging — set the live transform without a
+  // source write; the release commits via onCommitAnimatedProperty.
+  const livePreview = (next: CubePose) =>
+    onLivePreviewProps?.(element, {
+      rotationX: next.rotationX,
+      rotationY: next.rotationY,
+      rotationZ: next.rotationZ,
+    });
+
+  return (
+    <div className="mb-2 px-2">
+      <div className="mx-auto max-w-[184px]">
+        <Transform3DCube
+          pose={pose}
+          perspective={gsapRuntimeValues.transformPerspective ?? 0}
+          onPoseDraft={livePreview}
+          onPoseCommit={commitPose}
+          onPerspectiveDraft={(px) => onLivePreviewProps?.(element, { transformPerspective: px })}
+          onPerspectiveCommit={(px) =>
+            void onCommitAnimatedProperty(element, "transformPerspective", px)
+          }
+          onRecenter={recenter}
+          onKeyframe={onKeyframe}
+          keyframed={keyframed}
+        />
+        <p className="mt-1 text-center text-[9px] leading-snug text-neutral-600">
+          Drag to tilt · Shift-drag to roll
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface FieldCtx {
+  element: DomEditSelection;
+  gsapRuntimeValues: Record<string, number>;
+  gsapKeyframes: KeyframeEntry;
+  gsapAnimId: string | null;
+  currentPct: number;
+  elStart: number;
+  elDuration: number;
+  resolveAnimIdForProp?: (prop: string) => string | null;
+  onCommitAnimatedProperty?: (
+    element: DomEditSelection,
+    property: string,
+    value: number,
+  ) => Promise<void>;
+  onSeekToTime?: (time: number) => void;
+  onRemoveKeyframe?: (animId: string, pct: number) => void;
+  onConvertToKeyframes?: (animId: string, duration?: number) => void;
+}
+
+const parseDeg = (s: string): number | null => {
+  const n = Number.parseFloat(s.replace("°", ""));
+  return Number.isFinite(n) ? n : null;
+};
+const parseScale = (s: string): number | null => {
+  const n = Number.parseFloat(s);
+  return Number.isFinite(n) ? n : null;
+};
+const parsePxNonNeg = (s: string): number | null => {
+  const v = parsePxMetricValue(s);
+  return v != null && v >= 0 ? v : null;
+};
+
+/**
+ * One 3D-transform field: a number/scrub input plus its keyframe diamond, so
+ * rotation / perspective / Z / scale can each be keyframed just like Layout's
+ * X / Y — the diamond was previously missing on the rotation + perspective rows.
+ */
+function Transform3dField({
+  label,
+  prop,
+  scrub,
+  format,
+  parse,
+  defaultValue,
+  ctx,
+}: {
+  label: string;
+  prop: string;
+  scrub?: boolean;
+  format: (v: number) => string;
+  parse: (s: string) => number | null;
+  defaultValue: number;
+  ctx: FieldCtx;
+}) {
+  const { gsapAnimId, onCommitAnimatedProperty } = ctx;
+  const idFor = (p: string) => ctx.resolveAnimIdForProp?.(p) ?? gsapAnimId;
+  const current = ctx.gsapRuntimeValues[prop] ?? defaultValue;
+  return (
+    <div className="flex items-center gap-1">
+      <div className="flex-1">
+        <MetricField
+          label={label}
+          value={format(current)}
+          scrub={scrub}
+          onCommit={(next) => {
+            const v = parse(next);
+            if (v != null && onCommitAnimatedProperty) {
+              void onCommitAnimatedProperty(ctx.element, prop, v);
+            }
+          }}
+        />
+      </div>
+      {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+        <KeyframeNavigation
+          property={prop}
+          keyframes={ctx.gsapKeyframes}
+          currentPercentage={ctx.currentPct}
+          onSeek={(pct) => ctx.onSeekToTime?.(ctx.elStart + (pct / 100) * ctx.elDuration)}
+          onAddKeyframe={() => {
+            if (onCommitAnimatedProperty) void onCommitAnimatedProperty(ctx.element, prop, current);
+          }}
+          onRemoveKeyframe={(pct) => {
+            const id = idFor(prop);
+            if (id) ctx.onRemoveKeyframe?.(id, pct);
+          }}
+          onConvertToKeyframes={() => {
+            const id = idFor(prop);
+            // Pass the element's clip duration so a converted static 3D `set`
+            // spans the whole clip (keyframes land in range at any playhead).
+            if (id) ctx.onConvertToKeyframes?.(id, ctx.elDuration);
+          }}
+        />
+      )}
+    </div>
+  );
 }
 
 export function PropertyPanel3dTransform({
@@ -39,110 +248,120 @@ export function PropertyPanel3dTransform({
   elDuration,
   element,
   onCommitAnimatedProperty,
+  onCommitAnimatedProperties,
   onSeekToTime,
   onRemoveKeyframe,
   onConvertToKeyframes,
+  onLivePreviewProps,
 }: PropertyPanel3dTransformProps) {
-  const idFor = (prop: string) => resolveAnimIdForProp?.(prop) ?? gsapAnimId;
+  // Expanded by default — the cube gizmo is the headline of this panel, so show
+  // it up front rather than hiding it behind a collapsed header.
+  const [collapsed, setCollapsed] = useState(false);
+  const ctx: FieldCtx = {
+    element,
+    gsapRuntimeValues,
+    gsapKeyframes,
+    gsapAnimId,
+    currentPct,
+    elStart,
+    elDuration,
+    resolveAnimIdForProp,
+    onCommitAnimatedProperty,
+    onSeekToTime,
+    onRemoveKeyframe,
+    onConvertToKeyframes,
+  };
+
   return (
     <div className="mt-3 border-t border-neutral-800/40 pt-3">
-      <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
-        3D Transform
-      </div>
-      <div className={RESPONSIVE_GRID}>
-        <div className="flex items-center gap-1">
-          <div className="flex-1">
-            <MetricField
-              label="Z"
-              value={formatPxMetricValue(gsapRuntimeValues.z ?? 0)}
-              scrub
-              onCommit={(next) => {
-                const v = parsePxMetricValue(next);
-                if (v != null && onCommitAnimatedProperty) {
-                  void onCommitAnimatedProperty(element, "z", v);
-                }
-              }}
-            />
-          </div>
-          {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
-            <KeyframeNavigation
-              property="z"
-              keyframes={gsapKeyframes}
-              currentPercentage={currentPct}
-              onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
-              onAddKeyframe={() => {
-                if (onCommitAnimatedProperty) {
-                  void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
-                }
-              }}
-              onRemoveKeyframe={(pct) => {
-                const id = idFor("z");
-                if (id) onRemoveKeyframe?.(id, pct);
-              }}
-              onConvertToKeyframes={() => {
-                const id = idFor("z");
-                if (id) onConvertToKeyframes?.(id);
+      <button
+        type="button"
+        onClick={() => setCollapsed((v) => !v)}
+        className="mb-2 flex w-full items-center justify-between text-[10px] font-medium uppercase tracking-wider text-neutral-600 hover:text-neutral-400"
+      >
+        <span>3D Transform</span>
+        <svg width="9" height="9" viewBox="0 0 10 10" fill="currentColor" aria-hidden>
+          {collapsed ? <path d="M3 2l4 3-4 3z" /> : <path d="M2 3l3 4 3-4z" />}
+        </svg>
+      </button>
+      {collapsed ? null : (
+        <>
+          {onCommitAnimatedProperty && (
+            <Cube3dControl
+              element={element}
+              gsapRuntimeValues={gsapRuntimeValues}
+              onCommitAnimatedProperty={onCommitAnimatedProperty}
+              onCommitAnimatedProperties={onCommitAnimatedProperties}
+              onLivePreviewProps={onLivePreviewProps}
+              keyframed={(gsapKeyframes ?? []).some(
+                (kf) =>
+                  "rotationX" in kf.properties ||
+                  "rotationY" in kf.properties ||
+                  "rotationZ" in kf.properties,
+              )}
+              onKeyframe={() => {
+                // Convert the 3D ("other"-group) static set to keyframes so the
+                // cube can animate; spans the element's clip via elDuration.
+                const id = resolveAnimIdForProp?.("rotationX") ?? gsapAnimId;
+                if (id) onConvertToKeyframes?.(id, elDuration);
               }}
             />
           )}
-        </div>
-        <div className="flex items-center gap-1">
-          <div className="flex-1">
-            <MetricField
+          <div className={RESPONSIVE_GRID}>
+            <Transform3dField
+              ctx={ctx}
+              label="Z"
+              prop="z"
+              scrub
+              format={formatPxMetricValue}
+              parse={parsePxMetricValue}
+              defaultValue={0}
+            />
+            <Transform3dField
+              ctx={ctx}
               label="Scale"
-              value={String(gsapRuntimeValues.scale ?? 1)}
+              prop="scale"
               scrub
-              onCommit={(next) => {
-                const v = Number.parseFloat(next);
-                if (Number.isFinite(v) && onCommitAnimatedProperty) {
-                  void onCommitAnimatedProperty(element, "scale", v);
-                }
-              }}
+              format={(v) => String(v)}
+              parse={parseScale}
+              defaultValue={1}
             />
-          </div>
-          {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
-            <KeyframeNavigation
-              property="scale"
-              keyframes={gsapKeyframes}
-              currentPercentage={currentPct}
-              onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
-              onAddKeyframe={() => {
-                if (onCommitAnimatedProperty) {
-                  void onCommitAnimatedProperty(element, "scale", gsapRuntimeValues?.scale ?? 1);
-                }
-              }}
-              onRemoveKeyframe={(pct) => {
-                const id = idFor("scale");
-                if (id) onRemoveKeyframe?.(id, pct);
-              }}
-              onConvertToKeyframes={() => {
-                const id = idFor("scale");
-                if (id) onConvertToKeyframes?.(id);
-              }}
+            <Transform3dField
+              ctx={ctx}
+              label="RotX"
+              prop="rotationX"
+              format={(v) => `${v}°`}
+              parse={parseDeg}
+              defaultValue={0}
             />
-          )}
-        </div>
-        <MetricField
-          label="RotX"
-          value={`${gsapRuntimeValues.rotationX ?? 0}°`}
-          onCommit={(next) => {
-            const v = Number.parseFloat(next.replace("°", ""));
-            if (Number.isFinite(v) && onCommitAnimatedProperty) {
-              void onCommitAnimatedProperty(element, "rotationX", v);
-            }
-          }}
-        />
-        <MetricField
-          label="RotY"
-          value={`${gsapRuntimeValues.rotationY ?? 0}°`}
-          onCommit={(next) => {
-            const v = Number.parseFloat(next.replace("°", ""));
-            if (Number.isFinite(v) && onCommitAnimatedProperty) {
-              void onCommitAnimatedProperty(element, "rotationY", v);
-            }
-          }}
-        />
-      </div>
+            <Transform3dField
+              ctx={ctx}
+              label="RotY"
+              prop="rotationY"
+              format={(v) => `${v}°`}
+              parse={parseDeg}
+              defaultValue={0}
+            />
+            <Transform3dField
+              ctx={ctx}
+              label="RotZ"
+              prop="rotationZ"
+              format={(v) => `${v}°`}
+              parse={parseDeg}
+              defaultValue={0}
+            />
+            <Transform3dField
+              ctx={ctx}
+              label="Perspective"
+              prop="transformPerspective"
+              scrub
+              format={formatPxMetricValue}
+              parse={parsePxNonNeg}
+              defaultValue={0}
+            />
+          </div>
+        </>
+      )}
     </div>
   );
 }