@hyperframes/studio 0.8.115 → 0.8.117

package/src/hooks/gsapDragCommit.test.ts

@@ -14,6 +14,7 @@ import {
   type GsapDragCommitCallbacks,
 } from "./gsapDragCommit";
 import { usePlayerStore } from "../player/store/playerStore";
+import { liveTween, previewWith } from "./gsapParsedTween.test-helpers";
 
 // Minimal selection whose element has no drag-baseline attributes (origX/Y = 0).
 const selection = (): DomEditSelection =>
@@ -111,175 +112,86 @@ function recordingCallbacks(): {
   };
 }
 
-describe("commitGsapPositionFromDrag — flat tween", () => {
-  beforeEach(() => {
-    usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
-  });
-
-  it("extends the existing tween (never spawns a parallel one) when dragged OUTSIDE its range", async () => {
-    // fallow-ignore-next-line code-duplication
-    usePlayerStore.setState({ currentTime: 6 }); // outside [1.2, 3.4]
-    const { types, callbacks } = recordingCallbacks();
-
-    await commitGsapPositionFromDrag(
-      selection(),
-      flatTween(),
-      { x: -100, y: 0 },
-      { x: 0, y: 0 },
-      null,
-      "#puck-a",
-      callbacks,
-    );
-
-    expect(types).toContain("convert-to-keyframes");
-    expect(types).toContain("replace-with-keyframes"); // the extend
-    expect(types).not.toContain("add-with-keyframes"); // regression: no parallel tween
-  });
-
-  it("adds a keyframe at the playhead when dragged INSIDE its range", async () => {
-    // fallow-ignore-next-line code-duplication
-    usePlayerStore.setState({ currentTime: 2 }); // inside [1.2, 3.4]
-    // fallow-ignore-next-line code-duplication
-    const { types, callbacks } = recordingCallbacks();
-
-    await commitGsapPositionFromDrag(
-      selection(),
-      flatTween(),
-      { x: -100, y: 0 },
-      { x: 0, y: 0 },
-      null,
-      "#puck-a",
-      callbacks,
-    );
-
-    expect(types).toContain("add-keyframe");
-    expect(types).not.toContain("add-with-keyframes");
-  });
+describe("commitGsapPositionFromDrag — at a selected keyframe or past the tween", () => {
+  beforeEach(() => usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null }));
+  const puck = () => {
+    const element = document.createElement("div");
+    element.id = "puck-a";
+    return { id: "puck-a", selector: "#puck-a", element } as unknown as DomEditSelection;
+  };
+  const preview = (
+    sel: DomEditSelection,
+    anim: GsapAnimation,
+    ends: Record<string, [number, number]>,
+    from = false,
+  ) =>
+    previewWith(sel.element, [
+      liveTween(
+        sel.element,
+        { start: anim.resolvedStart!, duration: anim.duration!, vars: anim.properties, ends },
+        { from },
+      ),
+    ]);
 
-  it("MODIFIES the selected keyframe (no extend) when one is selected, even past the tween end", async () => {
-    // User clicked the 100% diamond (activeKeyframePct=100), playhead drifted past
-    // the end. Expect: convert + add-keyframe AT 100% — not replace-with-keyframes.
+  it("changes the selected keyframe without extending, even with the playhead past the end", async () => {
     usePlayerStore.setState({ currentTime: 6, activeKeyframePct: 100 }); // outside [1.2, 3.4]
-    // fallow-ignore-next-line code-duplication
-    const { types, mutations, callbacks } = recordingCallbacks();
-
+    const { mutations, callbacks } = recordingCallbacks();
+    const sel = puck();
     await commitGsapPositionFromDrag(
-      selection(),
+      sel,
       flatTween(),
       { x: -100, y: 0 },
       { x: 0, y: 0 },
-      null,
-      "#puck-a",
+      preview(sel, flatTween(), { x: [0, -260] }),
       callbacks,
     );
-
-    expect(types).toContain("add-keyframe");
-    expect(types).not.toContain("replace-with-keyframes"); // not extended
-    const addKf = mutations.find((m) => m.type === "add-keyframe");
-    expect(addKf?.percentage).toBe(100); // modified the selected endpoint
-    // consumed: cleared so the next free drag doesn't keep modifying
+    expect(mutations).toEqual([
+      expect.objectContaining({
+        type: "replace-with-keyframes",
+        position: 1.2,
+        duration: 2.2,
+        easeEach: "power1.out",
+        keyframes: [{ percentage: 100, properties: { x: -100, y: 0 } }],
+      }),
+    ]);
     expect(usePlayerStore.getState().activeKeyframePct).toBeNull();
-    // parked the playhead on the edited keyframe (1.2 start + 100% * 2.2 dur),
-    // so the edit is visible instead of rendering the base pose
     expect(usePlayerStore.getState().requestedSeekTime).toBe(3.4);
   });
-});
 
-describe("commitGsapPositionFromDrag — keyframed tween backfill", () => {
-  beforeEach(() => {
-    usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
-  });
-
-  const keyframedTween = (): GsapAnimation =>
-    ({
-      id: "#puck-a-kf",
-      targetSelector: "#puck-a",
-      method: "to",
-      resolvedStart: 1.2,
-      duration: 2.2,
-      keyframes: {
-        keyframes: [
-          { percentage: 0, properties: { x: 0 } },
-          { percentage: 100, properties: { x: -260 } },
-        ],
-      },
-    }) as unknown as GsapAnimation;
-
-  it("passes backfillDefaults so a newly-introduced prop doesn't move the other keyframes", async () => {
-    // Drag the 0% keyframe DOWN (introduces y on an x-only tween). The add-keyframe
-    // must carry backfillDefaults at the element's base so 100% gets y:0, not y:780.
-    usePlayerStore.setState({ currentTime: 1.2, activeKeyframePct: 0 });
-    const { mutations, callbacks } = recordingCallbacks();
-
-    await commitGsapPositionFromDrag(
-      selection(),
-      keyframedTween(),
-      { x: 0, y: 780 }, // studioOffset: dragged straight down
-      { x: 0, y: 0 }, // gsapPos → base falls back to {0,0} (selection has no base attrs)
-      null,
-      "#puck-a",
-      callbacks,
-    );
-
-    const addKf = mutations.find((m) => m.type === "add-keyframe");
-    expect(addKf).toBeDefined();
-    expect(addKf?.percentage).toBe(0); // edited the selected 0% keyframe
-    expect(addKf?.properties).toMatchObject({ y: 780 });
-    expect(addKf?.backfillDefaults).toEqual({ x: 0, y: 0 }); // base → 100% gets y:0
-  });
-});
-
-describe("commitGsapPositionFromDrag — from() tween dragged outside its range", () => {
-  beforeEach(() => usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null }));
-
-  const fromTween = (): GsapAnimation =>
-    ({
-      id: "#title-from-400",
+  it("extends a from() tween to the playhead, keeping its parsed end as the old end", async () => {
+    usePlayerStore.setState({ currentTime: 2.2 }); // outside [0.4, 1.3]
+    const fromTween = {
+      id: "#title-from-400-position",
       targetSelector: "#title",
       method: "from",
+      propertyGroup: "position",
       resolvedStart: 0.4,
       duration: 0.9,
+      ease: "none",
       properties: { y: 70 },
-    }) as unknown as GsapAnimation;
-
-  it("REPLACES the split position from() tween (no parallel tween → no drop jump)", async () => {
-    usePlayerStore.setState({ currentTime: 2.13 }); // outside [0.4, 1.3]
-    const types: string[] = [];
-    const mutations: Array<Record<string, unknown>> = [];
-    const callbacks: GsapDragCommitCallbacks = {
-      commitMutation: async (_s, m) => {
-        types.push(m.type as string);
-        mutations.push(m);
-      },
-      // After split-into-property-groups, the position group is a from() tween (no keyframes).
-      fetchAnimations: async () => [
-        {
-          id: "#title-from-400-position",
-          targetSelector: "#title",
-          method: "from",
-          propertyGroup: "position",
-          resolvedStart: 0.4,
-          duration: 0.9,
-          properties: { y: 70 },
-        } as unknown as GsapAnimation,
-      ],
-    };
-
+    } as unknown as GsapAnimation;
+    const { types, mutations, callbacks } = recordingCallbacks();
+    const sel = puck();
     await commitGsapPositionFromDrag(
-      selection(),
-      fromTween(),
+      sel,
+      fromTween,
       { x: 0, y: -333 },
       { x: 0, y: 0 },
-      null,
-      "#title",
+      preview(sel, fromTween, { y: [70, 0] }, true),
       callbacks,
     );
-
-    expect(types).toContain("split-into-property-groups");
-    expect(types).toContain("replace-with-keyframes");
-    expect(types).not.toContain("add-with-keyframes"); // regression: no parallel tween
-    const replace = mutations.find((m) => m.type === "replace-with-keyframes");
-    expect(replace?.animationId).toBe("#title-from-400-position"); // replaces the split from()
+    expect(types).toEqual(["replace-with-keyframes"]);
+    expect(mutations[0]).toMatchObject({
+      animationId: "#title-from-400-position",
+      position: 0.4,
+      duration: 1.8,
+      easeEach: "none",
+      keyframes: [
+        { percentage: 0, properties: { y: 70, x: 0 } },
+        { percentage: 50, properties: { y: 0, x: 0 } },
+        { percentage: 100, properties: { y: -333, x: 0 } },
+      ],
+    });
   });
 });
 
@@ -581,32 +493,31 @@ describe("commitStaticGsapRotation — instantPatch (value-only set)", () => {
   });
 });
 
-describe("commitGsapPositionFromDrag — keyframe/structural commits omit instantPatch", () => {
+describe("commitGsapPositionFromDrag — keyframe commits omit instantPatch", () => {
   beforeEach(() => usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null }));
 
-  it("a structural keyframe drag (convert-to-keyframes → add-keyframe) sets no instantPatch", async () => {
-    usePlayerStore.setState({ currentTime: 2 }); // inside [1.2, 3.4] → convert + add-keyframe
+  it("a keyframe drag relies on the soft reload, not the instant patch", async () => {
+    usePlayerStore.setState({ currentTime: 2 }); // inside [1.2, 3.4]
     const { commits, callbacks } = optionRecordingCallbacks();
-
+    const element = document.createElement("div");
+    const sel = { id: "puck-a", selector: "#puck-a", element } as unknown as DomEditSelection;
+    const live = liveTween(element, {
+      start: 1.2,
+      duration: 2.2,
+      vars: { x: -260 },
+      ends: { x: [0, -260] },
+    });
     await commitGsapPositionFromDrag(
-      selection(),
+      sel,
       flatTween(),
       { x: -100, y: 0 },
       { x: 0, y: 0 },
-      null,
-      "#puck-a",
+      previewWith(element, [live]),
       callbacks,
     );
-
-    // The keyframe path is structural here (convert + add-keyframe) and must rely
-    // on the soft reload — none of its commits opt into the instant patch.
-    expect(commits.length).toBeGreaterThan(0);
-    for (const c of commits) {
-      expect(c.options.instantPatch).toBeUndefined();
-    }
-    const types = commits.map((c) => c.mutation.type);
-    expect(types).toContain("convert-to-keyframes");
-    expect(types).toContain("add-keyframe");
+    expect(commits.map((c) => c.mutation.type)).toEqual(["replace-with-keyframes"]);
+    expect(commits[0]!.options.instantPatch).toBeUndefined();
+    expect(commits[0]!.options.softReload).toBe(true);
   });
 });
 

package/src/hooks/gsapDragCommit.ts

@@ -4,14 +4,10 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import {
-  STUDIO_ORIGINAL_WIDTH_ATTR,
-  STUDIO_ORIGINAL_HEIGHT_ATTR,
-} from "../components/editor/manualEditsTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3, roundToLayoutPx } from "../utils/rounding";
-import { computeElementPercentage, writeTargetSelector } from "./gsapShared";
+import { computeElementPercentage, keyframeEases, writeTargetSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { CommitMutation } from "./gsapScriptCommitTypes";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
@@ -295,104 +291,6 @@ export async function commitStaticGsapSize(
   );
 }
 
-/** Rounded `n` when it's a positive finite number, else `fallback`. */
-function positiveOr(n: number, fallback: number): number {
-  return Number.isFinite(n) && n > 0 ? roundToLayoutPx(n) : fallback;
-}
-
-/**
- * Prior size for a keyframed resize: the existing global set's value, else the
- * element's pre-resize size (the draft saved it on the element before mutating
- * el.style.width/height). Falls back to the new size when neither is available.
- */
-function resolvePriorSize(
-  sizeSet: GsapAnimation | null,
-  el: Element | null | undefined,
-  fallbackW: number,
-  fallbackH: number,
-): { width: number; height: number } {
-  if (sizeSet) {
-    return {
-      width: positiveOr(Number(sizeSet.properties.width), fallbackW),
-      height: positiveOr(Number(sizeSet.properties.height), fallbackH),
-    };
-  }
-  const ow = Number.parseFloat(el?.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR) ?? "");
-  const oh = Number.parseFloat(el?.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR) ?? "");
-  return { width: positiveOr(ow, fallbackW), height: positiveOr(oh, fallbackH) };
-}
-
-/**
- * Resize an *animated* element by keyframing its size at the current playhead,
- * instead of a global `gsap.set` hold. Builds a width/height keyframe tween
- * aligned to the element's existing animation: every base keyframe keeps the
- * prior size, only the keyframe nearest the playhead gets the new size — so
- * resizing one keyframe leaves the others unchanged. Replaces any prior global
- * size set. Returns false when there's no usable range (caller falls back to the
- * static set).
- */
-export async function commitKeyframedSizeFromResize(
-  selection: DomEditSelection,
-  size: { width: number; height: number },
-  selector: string,
-  sizeSet: GsapAnimation | null,
-  animatedTween: GsapAnimation,
-  callbacks: GsapDragCommitCallbacks,
-): Promise<boolean> {
-  const ts = resolveTweenStart(animatedTween) ?? 0;
-  const td = resolveTweenDuration(animatedTween);
-  if (!(td > 0)) return false;
-
-  const newW = roundToLayoutPx(size.width);
-  const newH = roundToLayoutPx(size.height);
-  const prior = resolvePriorSize(sizeSet, selection.element, newW, newH);
-
-  const ct = usePlayerStore.getState().currentTime;
-  const pct = Math.max(0, Math.min(100, Math.round(((ct - ts) / td) * 1000) / 10));
-
-  // Base keyframe percentages from the animated tween (flat tween → 0 & 100),
-  // plus the endpoints and the playhead. Each keeps the prior size except the
-  // keyframe at the playhead, which gets the new size.
-  const pcts = new Set<number>(
-    animatedTween.keyframes?.keyframes.map((k) => k.percentage) ?? [0, 100],
-  );
-  pcts.add(0);
-  pcts.add(100);
-  pcts.add(pct);
-  const keyframes = Array.from(pcts)
-    .sort((a, b) => a - b)
-    .map((p) => ({
-      percentage: p,
-      properties: Math.abs(p - pct) < 0.05 ? { width: newW, height: newH } : { ...prior },
-    }));
-
-  // Add the size keyframe tween FIRST, then delete the old global hold. The gesture
-  // transport applies both in one ordered batch; a plain commit fallback keeps the
-  // same recoverable ordering. Only the transaction's result triggers the reload.
-  const addLabel = `Resize (size keyframe ${pct.toFixed(0)}%)`;
-  const target = newTweenTarget(selection);
-  if (!target) return false;
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-with-keyframes",
-      targetSelector: target,
-      position: roundTo3(ts),
-      duration: roundTo3(td),
-      keyframes,
-    },
-    sizeSet ? { label: addLabel, skipReload: true } : { label: addLabel, softReload: true },
-  );
-  if (sizeSet) {
-    await callbacks.commitMutation(
-      selection,
-      { type: "delete", animationId: sizeSet.id },
-      { label: "Resize layer", softReload: true },
-    );
-  }
-  return true;
-}
-
 // ── Whole-path offset (plain drag on animated element) ──────────────────
 
 /**
@@ -438,7 +336,6 @@ export async function commitWholePathOffset(
 
   const ts = resolveTweenStart(effectiveAnim);
   const td = resolveTweenDuration(effectiveAnim);
-  const ease = effectiveAnim.keyframes?.easeEach ?? effectiveAnim.ease;
 
   let kfs = effectiveAnim.keyframes?.keyframes ?? [];
   if (kfs.length === 0) {
@@ -475,7 +372,7 @@ export async function commitWholePathOffset(
       position: roundTo3(ts ?? 0),
       duration: roundTo3(td || 1),
       keyframes: shifted,
-      ease,
+      ...keyframeEases(effectiveAnim),
     },
     { label: "Move animation path", softReload: true, beforeReload: restoreOffset },
   );