@hyperframes/studio 0.7.96 → 0.7.98

package/src/hooks/gsapResizeIntercept.test.ts

@@ -284,3 +284,201 @@ it("non-uniform drag commits scaleX/scaleY longhands", async () => {
   expect(serialized).toContain("scaleX");
   expect(serialized).toContain("scaleY");
 });
+
+/**
+ * The bug: the original box size was read only from the element's INLINE
+ * width, and a composition sizes its elements from the stylesheet. With no
+ * inline width the code fell back to a hardcoded 200, so the committed scale
+ * came out `real / 200` times too large. Dropping a 630px chip at 2391px wide
+ * left it rendering at 7532px, over three times where it was dropped, and the
+ * next drag compounded it.
+ */
+// fallow-ignore-next-line code-duplication
+it("scales from the element's real box, not a hardcoded fallback", async () => {
+  const el = document.createElement("div");
+  el.id = "clip";
+  // Sized by a stylesheet, so it carries no inline width, and the draft
+  // recorded the box it measured instead.
+  el.setAttribute("data-hf-studio-original-box-width", "630");
+  el.setAttribute("data-hf-studio-original-box-height", "252");
+  document.body.append(el);
+  const selection = { id: "clip", selector: "#clip", element: el } as DomEditSelection;
+  const commitMutation = vi.fn();
+
+  await tryGsapResizeIntercept(
+    selection,
+    { width: 1260, height: 504 },
+    [keyframedScaleFixture()],
+    fakeIframe(el, { scaleX: 1, scaleY: 1 }),
+    commitMutation,
+  );
+
+  type Mutation = {
+    properties?: Record<string, number>;
+    keyframes?: Array<{ percentage: number; properties: Record<string, number> }>;
+  };
+  const committed = commitMutation.mock.calls
+    .map((call) => call[1] as Mutation)
+    .flatMap((mutation) => [
+      mutation.properties,
+      ...(mutation.keyframes ?? []).map((frame) => frame.properties),
+    ])
+    .filter((properties): properties is Record<string, number> => properties != null)
+    .find((properties) => properties.scale != null || properties.scaleX != null);
+
+  // Dropped at twice the element's own size, so the scale is about 2. The
+  // number that matters is that it is not the 6.3 which 1260/200 produced.
+  const scale = committed?.scale ?? committed?.scaleX ?? 0;
+  expect(scale).toBeCloseTo(2, 1);
+  expect(scale).toBeLessThan(3);
+});
+
+/**
+ * The bug: a uniform drag committed the `scale` shorthand into a tween whose
+ * keyframes already stated `scaleX`/`scaleY`. GSAP animates each property name
+ * independently, so the keyframe ran as `{ scaleX: 1, scaleY: 1, scale: 0.61 }`
+ * and the longhands won. The resize computed the right number, wrote it, and
+ * the element snapped straight back to its old size on release.
+ */
+// fallow-ignore-next-line code-duplication
+it("does not mix the scale shorthand into a tween that speaks longhands", async () => {
+  const el = document.createElement("div");
+  el.id = "clip";
+  el.setAttribute("data-hf-studio-original-box-width", "630");
+  el.setAttribute("data-hf-studio-original-box-height", "252");
+  document.body.append(el);
+  const selection = { id: "clip", selector: "#clip", element: el } as DomEditSelection;
+  const longhandTween = {
+    ...scaleFromTween(),
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: { scaleX: 1, scaleY: 1 } },
+        { percentage: 100, properties: { scaleX: 1.15, scaleY: 1.15 } },
+      ],
+    },
+  } as unknown as GsapAnimation;
+  const commitMutation = vi.fn();
+
+  // A uniform drop, so the old code took the shorthand branch and wrote
+  // `scale` into keyframes that already stated the longhands.
+  await tryGsapResizeIntercept(
+    selection,
+    { width: 384, height: 216 },
+    [longhandTween],
+    fakeIframe(el, { scaleX: 1, scaleY: 1 }),
+    commitMutation,
+  );
+
+  const frames = commitMutation.mock.calls
+    .map((call) => call[1] as { keyframes?: Array<{ properties: Record<string, number> }> })
+    .flatMap((mutation) => mutation.keyframes ?? []);
+  expect(frames.length).toBeGreaterThan(0);
+  for (const frame of frames) {
+    const names = Object.keys(frame.properties);
+    const hasShorthand = names.includes("scale");
+    const hasLonghand = names.includes("scaleX") || names.includes("scaleY");
+    expect(hasShorthand && hasLonghand).toBe(false);
+  }
+  // And the resize still lands: 384/630 is about 0.61.
+  const resized = frames.find((frame) => frame.properties.scaleX != null);
+  expect(resized?.properties.scaleX).toBeCloseTo(0.61, 1);
+});
+
+/**
+ * The bug: a scale resize measured its drop-point correction while the
+ * gesture's own translation was still applied, but the position commit adds
+ * that correction onto the element's PRE-gesture position (it reads the
+ * gesture's base attributes). The two disagreed by the whole drag distance, so
+ * every scale resize of a statically positioned element persisted a position a
+ * drag-length away from where it was dropped — the element held still for one
+ * frame and then slid off.
+ *
+ * The fixture models the geometry the browser reported: a 630x252 element
+ * dragged from x=432 to x=587 with its box drafted down to 320x128, dropped at
+ * a committed scale of 0.837. Scaling about the centre puts it back on the drop
+ * point at its pre-gesture position, so the correct persisted correction is
+ * NONE.
+ */
+it("does not move a statically positioned element when a scale resize lands", async () => {
+  document.body.innerHTML = "";
+  const el = document.createElement("div");
+  el.id = "clip";
+  el.setAttribute("data-hf-studio-original-box-width", "630");
+  el.setAttribute("data-hf-studio-original-box-height", "252");
+  // The gesture's base pose — where the commit puts the element back, since a
+  // scale resize never persists the drag translation.
+  el.setAttribute("data-hf-drag-gsap-base-x", "432");
+  el.setAttribute("data-hf-drag-gsap-base-y", "173");
+  // The draft the gesture left applied: a smaller box at the dragged position.
+  el.setAttribute("data-hf-studio-box-size", "true");
+  el.setAttribute("data-hf-studio-original-width", "");
+  el.setAttribute("data-hf-studio-original-height", "");
+  el.style.width = "320px";
+  el.style.height = "128px";
+  document.body.append(el);
+
+  const pos = { x: 587, y: 235 };
+  const scale = { x: 1.648, y: 1.648 };
+  const [LEFT, TOP] = [120, 520];
+  el.getBoundingClientRect = () => {
+    const cssW = Number.parseFloat(el.style.width) || 630;
+    const cssH = Number.parseFloat(el.style.height) || 252;
+    const [w, h] = [cssW * scale.x, cssH * scale.y];
+    // GSAP scales about the element centre, so the box grows around it.
+    return {
+      x: LEFT + pos.x + cssW / 2 - w / 2,
+      y: TOP + pos.y + cssH / 2 - h / 2,
+      width: w,
+      height: h,
+    } as DOMRect;
+  };
+  const gsapStub = {
+    set: (_target: Element, vars: Record<string, number>) => {
+      if (vars.x != null) pos.x = vars.x;
+      if (vars.y != null) pos.y = vars.y;
+      if (vars.scaleX != null) scale.x = vars.scaleX;
+      if (vars.scaleY != null) scale.y = vars.scaleY;
+    },
+    getProperty: (_target: Element, prop: string) =>
+      ({ scaleX: scale.x, scaleY: scale.y, x: pos.x, y: pos.y })[prop] ?? 0,
+  };
+  Object.assign(window, { gsap: gsapStub });
+  const iframe = {
+    contentWindow: { gsap: gsapStub, __timelines: {} },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+  const positionHold = {
+    id: "#clip-set-0-position",
+    targetSelector: "#clip",
+    propertyGroup: "position",
+    method: "set",
+    properties: { x: 432, y: 173 },
+    position: 0,
+    resolvedStart: 0,
+    duration: 0,
+    global: true,
+  } as unknown as GsapAnimation;
+  const selection = { id: "clip", selector: "#clip", element: el } as DomEditSelection;
+  usePlayerStore.setState({ currentTime: 0.5 });
+  const commitMutation = vi.fn();
+
+  await tryGsapResizeIntercept(
+    selection,
+    { width: 320, height: 128 },
+    [keyframedScaleFixture(), positionHold],
+    iframe,
+    commitMutation,
+    async () => [keyframedScaleFixture(), positionHold],
+  );
+
+  const positionWrites = commitMutation.mock.calls
+    .map((call) => call[1] as { properties?: Record<string, number> })
+    .filter((mutation) => mutation.properties?.x != null || mutation.properties?.y != null);
+  // Either it left the position alone, or it rewrote the same value.
+  for (const write of positionWrites) {
+    expect(write.properties?.x).toBe(432);
+    expect(write.properties?.y).toBe(173);
+  }
+  // And the live element ends on the drop point, not a drag away from it.
+  expect(el.getBoundingClientRect().x).toBeCloseTo(603.3, 0);
+});

package/src/hooks/gsapResizeIntercept.ts

@@ -8,8 +8,13 @@
 import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { clearStudioBoxSize } from "../components/editor/manualEdits";
-import { setElementGsapPosition } from "../utils/elementGsap";
+import {
+  STUDIO_ORIGINAL_BOX_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_BOX_WIDTH_ATTR,
+} from "../components/editor/manualEditsTypes";
+import { setElementGsapPosition, setElementGsapScale } from "../utils/elementGsap";
 import { usePlayerStore } from "../player/store/playerStore";
+import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
 import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeReaders";
 import {
   commitStaticGsapPosition,
@@ -21,13 +26,14 @@ import {
   materializeIfDynamic,
 } from "./gsapDragCommit";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
+import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import { pickClosestToPlayhead, readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
+import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
-import { resolveGroupTween, POSITION_CHANNELS } from "./gsapRuntimeBridge";
-import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import { resolveGroupTween } from "./gsapRuntimeBridge";
 import { logResize } from "../utils/resizeDebug";
 import {
   animationWritesAnyProperty,
@@ -49,6 +55,42 @@ function synthesizeIdentityProps(
   return id;
 }
 
+/**
+ * The element's box before the resize draft ran, in CSS pixels.
+ *
+ * Prefers the measurement the draft recorded. Falls back to the inline style it
+ * saved for restoring, which is a real value for the elements that carry one,
+ * and null when neither says anything.
+ */
+function originalBoxSize(
+  el: HTMLElement | null,
+  measuredAttr: string,
+  inlineProperty: "width" | "height",
+): number | null {
+  const measured = Number.parseFloat(el?.getAttribute(measuredAttr) ?? "");
+  if (Number.isFinite(measured) && measured > 0) return measured;
+  const inline = Number.parseFloat(
+    el?.getAttribute(`data-hf-studio-original-${inlineProperty}`) ?? "",
+  );
+  return Number.isFinite(inline) && inline > 0 ? inline : null;
+}
+
+/**
+ * Whether this tween already states scale as `scaleX`/`scaleY`.
+ *
+ * Both forms are legal, and either alone is fine. A tween holding both is not:
+ * GSAP animates each property name independently, so the longhands run
+ * alongside the shorthand and win, which silently discards whatever the
+ * shorthand was set to.
+ */
+function tweenUsesScaleLonghands(anim: GsapAnimation | null): boolean {
+  const isLonghand = (name: string) => name === "scaleX" || name === "scaleY";
+  const inKeyframes = (anim?.keyframes?.keyframes ?? []).some((frame) =>
+    Object.keys(frame.properties ?? {}).some(isLonghand),
+  );
+  return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
+}
+
 // ── Resize intercept ──────────────────────────────────────────────────────
 
 // fallow-ignore-next-line complexity
@@ -155,17 +197,26 @@ export async function tryGsapResizeIntercept(
   let resizeProps: Record<string, number>;
   let scaleDraftEl: HTMLElement | null = null;
   let scaleDraftDropPoint: { x: number; y: number } | null = null;
+  /** The scale this commit is putting on the element, for the finalize step. */
+  let committedScale: { x: number; y: number } | null = null;
   let nonUniformScale = false;
+  /** Whether this commit writes scaleX/scaleY rather than the `scale` shorthand. */
+  let useScaleLonghands = false;
   if (resizeGroup === "scale") {
     // Iframe-realm element — instanceof HTMLElement fails across realms; the
     // selector targets composition elements, and every use below is duck-typed.
     const el = iframe?.contentDocument?.querySelector(selector ?? "") as HTMLElement | null;
     // The resize draft modifies el.style.width/height, so read the ORIGINAL
     // dimensions saved by the draft system before it ran.
-    const origW = Number.parseFloat(el?.getAttribute("data-hf-studio-original-width") ?? "");
-    const origH = Number.parseFloat(el?.getAttribute("data-hf-studio-original-height") ?? "");
-    const cssW = Number.isFinite(origW) && origW > 0 ? origW : 200;
-    const cssH = Number.isFinite(origH) && origH > 0 ? origH : cssW;
+    //
+    // The measured box first, then the inline one. The inline attributes exist
+    // to restore an inline style and are empty for anything sized by a
+    // stylesheet, which is how compositions are written, so reading them alone
+    // sent almost every element to the fallback below: a 630px chip scaled by
+    // 630/200, landing over three times the size it was dropped at, and worse
+    // on the next drag because the wrong scale then counted as its live one.
+    const cssW = originalBoxSize(el, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, "width") ?? 200;
+    const cssH = originalBoxSize(el, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, "height") ?? cssW;
     // `size` is the draft's CSS box; on screen it is multiplied by the element's
     // LIVE scale (the draft divides the cursor delta by it — see
     // resolveDomEditResizeGesture). The committed keyframe REPLACES that live
@@ -181,8 +232,18 @@ export async function tryGsapResizeIntercept(
     // can't represent it — committing width-derived scale used to snap the
     // height at drop. Commit scaleX/scaleY longhands instead; keep the uniform
     // shorthand when the two agree (aspect-true drags, shift-drags).
+    //
+    // Unless the tween already speaks longhands, in which case a uniform drag
+    // has to as well. GSAP animates each property name on its own, so a
+    // keyframe holding `{ scaleX: 1, scaleY: 1, scale: 0.61 }` runs all three
+    // and the longhands win: the resize commits correctly and then does
+    // nothing, and the element snaps back to its old size on release. The
+    // tween never mixes the two forms in either direction.
     nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
-    resizeProps = nonUniformScale ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
+    useScaleLonghands = nonUniformScale || tweenUsesScaleLonghands(anim);
+    resizeProps = useScaleLonghands
+      ? { scaleX: newScaleX, scaleY: newScaleY }
+      : { scale: newScaleX };
     logResize("intercept-route", {
       route: "scale-tween",
       cssW,
@@ -194,6 +255,13 @@ export async function tryGsapResizeIntercept(
       nonUniformScale,
     });
     scaleDraftEl = el;
+    // What the commit ACTUALLY writes, which is what the finalize step below
+    // has to measure against. A near-uniform drag collapses to the shorthand,
+    // so taking the per-axis pair here measured the element at a scaleY the
+    // file never gets and tilted the correction by the difference.
+    committedScale = useScaleLonghands
+      ? { x: newScaleX, y: newScaleY }
+      : { x: newScaleX, y: newScaleX };
     // Where the user DROPPED the box: the draft (anchor-pinned to the
     // gesture-start top-left) is still applied here, so this rect is exactly
     // what the preview showed at release. The committed scale renders around
@@ -226,35 +294,61 @@ export async function tryGsapResizeIntercept(
     if (!scaleDraftEl) return;
     clearStudioBoxSize(scaleDraftEl);
     if (!scaleDraftDropPoint || !selector) return;
-    const hasLivePositionTween = hasNonHoldTweenForElement(
-      iframe,
-      selector,
-      undefined,
-      POSITION_CHANNELS,
-    );
-    if (hasLivePositionTween) {
-      logResize("scale-finalize", { skipped: "live-position-tween" });
-      return;
+    // Put the committed scale on the live element before measuring.
+    //
+    // This step reads where the commit lands the box and shifts the position
+    // hold by the difference. That only works if the commit has actually
+    // rendered, and whether it had was luck: on the FIRST resize of an element
+    // the timeline had not re-seeked yet, so this measured the element at its
+    // natural size, still sitting on the drop point, computed a residual of
+    // zero, and skipped the correction entirely. The scale then landed, GSAP
+    // rendered it around the element's centre, and the element jumped by the
+    // whole drag distance. Elements that had been resized before got a
+    // correction only because their PREVIOUS scale made the residual non-zero.
+    //
+    // Setting it here costs nothing when the commit has already rendered (same
+    // value) and makes the measurement below mean what it says either way.
+    if (committedScale) {
+      setElementGsapScale(scaleDraftEl, committedScale.x, committedScale.y);
     }
-    // The scale commit has rendered (instant patch or soft-reload seek) and the
-    // draft is cleared — this rect is where the element ACTUALLY sits now.
+    // Measure from the pre-gesture position, not the draft one.
+    //
+    // The resize draft translates the element to keep the dragged corner under
+    // the cursor, but the scale route never persists that translation — the
+    // element renders back at its pre-gesture position as soon as the commit
+    // lands. Measuring while the draft translation was still applied made the
+    // residual carry the whole drag distance, and the position commit then
+    // composed that residual onto the pre-gesture base (it reads the gesture's
+    // own base attributes, not the live value), so the element landed a full
+    // drag away from the drop point on every scale resize.
+    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
+      selection.element,
+      { x: 0, y: 0 },
+      gsapPos,
+    );
+    const base = { x: baseGsapX, y: baseGsapY };
+    setElementGsapPosition(scaleDraftEl, base.x, base.y);
     const post = scaleDraftEl.getBoundingClientRect();
     const residual = { x: scaleDraftDropPoint.x - post.x, y: scaleDraftDropPoint.y - post.y };
     if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return;
-    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) return;
-    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+      logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base });
+      return;
+    }
     // The ONE corrected position — rounded once so the live runtime and the
     // persisted file agree exactly (commitStaticGsapPosition composes the same
     // rounded value from this delta).
     const corrected = {
-      x: Math.round(gsapPos.x + residual.x),
-      y: Math.round(gsapPos.y + residual.y),
+      x: Math.round(base.x + residual.x),
+      y: Math.round(base.y + residual.y),
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,
       post: { x: post.x, y: post.y },
       residual,
       gsapPos,
+      base,
       corrected,
     });
     // Correct the LIVE runtime NOW, synchronously: the soft reload above just
@@ -270,20 +364,34 @@ export async function tryGsapResizeIntercept(
     const currentAnimations = fetchFallbackAnimations
       ? await fetchFallbackAnimations()
       : (resolved?.animations ?? animations);
-    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
     // Delta chosen so the drag-path math composes back to exactly `corrected`
-    // (no drag scratch attrs exist during a resize, so base = gsapPos).
-    await commitStaticGsapPosition(
-      selection,
-      { x: corrected.x - gsapPos.x, y: corrected.y - gsapPos.y },
-      gsapPos,
-      selector,
-      existingSet,
-      {
+    // — it adds this onto the same base the measurement above used.
+    const delta = { x: corrected.x - base.x, y: corrected.y - base.y };
+    // An element whose position is animated needs the correction written into
+    // that animation, at the playhead, or the tween renders its own value a
+    // frame later and the element leaves the drop point anyway. This used to
+    // stand down here instead, on the grounds that a keyframed path has no
+    // single anchor to preserve. It has one: the frame the user is looking at.
+    // Writing it is the same thing a drag on the same element does, through
+    // the same commit.
+    const positionTween = pickClosestToPlayhead(
+      currentAnimations.filter(
+        (a) => a.propertyGroup === "position" && !isInstantHold(a) && resolveTweenDuration(a) > 0,
+      ),
+    );
+    if (positionTween) {
+      logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
+      await commitGsapPositionFromDrag(selection, positionTween, delta, base, iframe, selector, {
         commitMutation,
         fetchAnimations: fetchFallbackAnimations,
-      },
-    );
+      });
+      return;
+    }
+    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
+    await commitStaticGsapPosition(selection, delta, base, selector, existingSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations,
+    });
   };
 
   // With auto-keyframe off (#1808), `anim` is already a real (non-"set")
@@ -341,7 +449,7 @@ export async function tryGsapResizeIntercept(
   // normalizes every keyframe to the longhands. For an in-range resize the
   // min/max window math below degenerates to the tween's own start/duration,
   // so timing is unchanged.
-  if ((outsideRange || nonUniformScale) && ts !== null) {
+  if ((outsideRange || useScaleLonghands) && ts !== null) {
     // For flat tweens, synthesize the keyframes from the tween's properties
     const kfs =
       anim.keyframes?.keyframes ??

package/src/utils/elementGsap.ts

@@ -24,6 +24,20 @@ export function setElementGsapPosition(element: HTMLElement, x: number, y: numbe
   return true;
 }
 
+/**
+ * Set the element's GSAP scale. Returns false when no runtime is reachable.
+ *
+ * Used to make the element show a scale that has been committed but not yet
+ * re-rendered by the timeline, so measuring it afterwards reports where the
+ * commit actually puts it rather than where it happened to be mid-flight.
+ */
+export function setElementGsapScale(element: HTMLElement, x: number, y: number): boolean {
+  const gsap = gsapOf(element);
+  if (!gsap?.set) return false;
+  gsap.set(element, { scaleX: x, scaleY: y });
+  return true;
+}
+
 /** The element's GSAP numeric property, or null when unreadable. */
 export function readElementGsapNumber(element: HTMLElement, prop: string): number | null {
   const value = Number(gsapOf(element)?.getProperty?.(element, prop));