@hyperframes/studio 0.6.90 → 0.6.92

package/src/hooks/gsapDragCommit.ts

@@ -11,8 +11,6 @@ import {
   resolveTweenStart,
   resolveTweenDuration,
 } from "../utils/globalTimeCompiler";
-import { readAllAnimatedProperties } from "./gsapRuntimeReaders";
-
 export interface GsapDragCommitCallbacks {
   commitMutation: (
     selection: DomEditSelection,
@@ -25,6 +23,7 @@ export interface GsapDragCommitCallbacks {
       beforeReload?: () => void;
     },
   ) => Promise<void>;
+  fetchAnimations?: () => Promise<GsapAnimation[]>;
 }
 
 // ── Percentage computation ─────────────────────────────────────────────────
@@ -114,7 +113,6 @@ async function extendTweenAndAddKeyframe(
   const newStart = Math.min(targetTime, tweenStart);
   const newEnd = Math.max(targetTime, tweenEnd);
   const newDuration = Math.max(0.01, newEnd - newStart);
-
   const existingKfs = anim.keyframes?.keyframes ?? [];
   const remappedKfs: Array<{ percentage: number; properties: Record<string, number | string> }> =
     [];
@@ -126,20 +124,15 @@ async function extendTweenAndAddKeyframe(
 
   const targetPct = Math.round(((targetTime - newStart) / newDuration) * 1000) / 10;
   remappedKfs.push({ percentage: targetPct, properties });
-  remappedKfs.sort((a, b) => a.percentage - b.percentage);
 
-  await callbacks.commitMutation(
-    selection,
-    { type: "delete", animationId: anim.id },
-    { label: "Extend tween range", skipReload: true },
-  );
+  remappedKfs.sort((a, b) => a.percentage - b.percentage);
 
-  const selector = anim.targetSelector;
   await callbacks.commitMutation(
     selection,
     {
-      type: "add-with-keyframes",
-      targetSelector: selector,
+      type: "replace-with-keyframes",
+      animationId: anim.id,
+      targetSelector: anim.targetSelector,
       position: Math.round(newStart * 1000) / 1000,
       duration: Math.round(newDuration * 1000) / 1000,
       keyframes: remappedKfs,
@@ -156,8 +149,8 @@ async function commitKeyframedPosition(
   callbacks: GsapDragCommitCallbacks,
   beforeReload?: () => void,
 ): Promise<void> {
-  const pct = computeCurrentPercentage(selection, anim);
-
+  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
   await callbacks.commitMutation(
     selection,
     {
@@ -168,6 +161,7 @@ async function commitKeyframedPosition(
     },
     { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
   );
+  if (activeKeyframePct != null) setActiveKeyframePct(null);
 }
 
 /**
@@ -182,10 +176,11 @@ async function commitFlatViaKeyframes(
   callbacks: GsapDragCommitCallbacks,
   beforeReload?: () => void,
 ): Promise<void> {
+  const coalesceKey = `gsap:convert-drag:${anim.id}`;
   await callbacks.commitMutation(
     selection,
     { type: "convert-to-keyframes", animationId: anim.id },
-    { label: "Convert to keyframes for drag", skipReload: true },
+    { label: "Convert to keyframes for drag", skipReload: true, coalesceKey },
   );
 
   const pct = computeCurrentPercentage(selection, anim);
@@ -198,7 +193,7 @@ async function commitFlatViaKeyframes(
       percentage: pct,
       properties,
     },
-    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
+    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload, coalesceKey },
   );
 }
 
@@ -243,19 +238,20 @@ export async function commitGsapPositionFromDrag(
     el.removeAttribute("data-hf-drag-initial-offset-y");
   };
 
+  const ct = usePlayerStore.getState().currentTime;
   if (anim.keyframes) {
     const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
     const effectiveAnim = newId ? { ...anim, id: newId } : anim;
-    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
+    const dragProps: Record<string, number> = { x: newX, y: newY };
 
-    const ct = usePlayerStore.getState().currentTime;
     const ts = resolveTweenStart(effectiveAnim);
     const td = resolveTweenDuration(effectiveAnim);
-    if (ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01)) {
+    const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
+    if (outsideRange) {
       await extendTweenAndAddKeyframe(
         selection,
         effectiveAnim,
-        { ...runtimeProps, x: newX, y: newY },
+        dragProps,
         ct,
         ts,
         td,
@@ -263,32 +259,112 @@ export async function commitGsapPositionFromDrag(
         restoreOffset,
       );
     } else {
-      await commitKeyframedPosition(
+      await commitKeyframedPosition(selection, effectiveAnim, dragProps, callbacks, restoreOffset);
+    }
+  } else if (anim.method === "from" || anim.method === "fromTo") {
+    const ct = usePlayerStore.getState().currentTime;
+    const ts = resolveTweenStart(anim);
+    const td = resolveTweenDuration(anim);
+    const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
+    const dragProps: Record<string, number> = { x: newX, y: newY };
+
+    if (outsideRange && ts !== null) {
+      // Split the original from() tween into property groups first.
+      await callbacks.commitMutation(
         selection,
-        effectiveAnim,
-        { ...runtimeProps, x: newX, y: newY },
-        callbacks,
-        restoreOffset,
+        { type: "split-into-property-groups", animationId: anim.id },
+        { label: "Split from() for drag", skipReload: true },
+      );
+
+      const allAnims = callbacks.fetchAnimations ? await callbacks.fetchAnimations() : [];
+      const existingPosAnim = allAnims.find(
+        (a) => a.propertyGroup === "position" && a.targetSelector === anim.targetSelector,
+      );
+
+      if (existingPosAnim?.keyframes) {
+        // Extend the existing position tween
+        const posTs = resolveTweenStart(existingPosAnim);
+        const posTd = resolveTweenDuration(existingPosAnim);
+        if (posTs !== null) {
+          await extendTweenAndAddKeyframe(
+            selection,
+            existingPosAnim,
+            { x: newX, y: newY },
+            ct,
+            posTs,
+            posTd,
+            callbacks,
+            restoreOffset,
+          );
+          return;
+        }
+      }
+
+      // No existing position tween — create one
+      const newStart = Math.min(ct, ts);
+      const newEnd = Math.max(ct, ts + td);
+      const newDuration = Math.max(0.01, newEnd - newStart);
+      const dragBefore = ct < ts;
+      const origStartPct = Math.round(((ts - newStart) / newDuration) * 1000) / 10;
+      const origEndPct = Math.round(((ts + td - newStart) / newDuration) * 1000) / 10;
+
+      const keyframes: Array<{ percentage: number; properties: Record<string, number | string> }> =
+        [];
+      if (dragBefore) {
+        keyframes.push({ percentage: 0, properties: { x: newX, y: newY } });
+        if (origStartPct > 0.5 && origStartPct < 99.5) {
+          keyframes.push({ percentage: origStartPct, properties: { x: 0, y: 0 } });
+        }
+        keyframes.push({ percentage: 100, properties: { x: 0, y: 0 } });
+      } else {
+        keyframes.push({ percentage: 0, properties: { x: 0, y: 0 } });
+        if (origEndPct > 0.5 && origEndPct < 99.5) {
+          keyframes.push({ percentage: origEndPct, properties: { x: 0, y: 0 } });
+        }
+        keyframes.push({ percentage: 100, properties: { x: newX, y: newY } });
+      }
+      keyframes.sort((a, b) => a.percentage - b.percentage);
+
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "add-with-keyframes",
+          targetSelector: anim.targetSelector,
+          position: Math.round(newStart * 1000) / 1000,
+          duration: Math.round(newDuration * 1000) / 1000,
+          keyframes,
+        },
+        { label: "Move layer (from extended)", softReload: true, beforeReload: restoreOffset },
+      );
+    } else {
+      // Inside tween range: convert then add keyframe at current time
+      const coalesceKey = `gsap:convert-drag:${anim.id}`;
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "convert-to-keyframes",
+          animationId: anim.id,
+        },
+        { label: "Convert from() for drag", skipReload: true, coalesceKey },
+      );
+      const pct = computeCurrentPercentage(selection, anim);
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "add-keyframe",
+          animationId: anim.id,
+          percentage: pct,
+          properties: dragProps,
+        },
+        {
+          label: `Move layer (keyframe ${pct}%)`,
+          softReload: true,
+          beforeReload: restoreOffset,
+          coalesceKey,
+        },
       );
     }
-  } else if (anim.method === "from" || anim.method === "fromTo") {
-    await callbacks.commitMutation(
-      selection,
-      {
-        type: "convert-to-keyframes",
-        animationId: anim.id,
-        resolvedFromValues: { x: newX, y: newY },
-      },
-      { label: "Move layer (keyframe rest)", softReload: true, beforeReload: restoreOffset },
-    );
   } else {
-    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
-    await commitFlatViaKeyframes(
-      selection,
-      anim,
-      { ...runtimeProps, x: newX, y: newY },
-      callbacks,
-      restoreOffset,
-    );
+    await commitFlatViaKeyframes(selection, anim, { x: newX, y: newY }, callbacks, restoreOffset);
   }
 }

package/src/hooks/gsapKeyframeCacheHelpers.ts

@@ -21,18 +21,23 @@ export function updateKeyframeCacheFromParsed(
 
     // Convert tween-relative percentages to clip-relative so diamonds
     // render at the correct position within the timeline clip.
-    const tweenPos = typeof anim.position === "number" ? anim.position : 0;
+    const tweenPos = anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
     const tweenDur = anim.duration ?? 1;
     const timelineEl = elements.find(
       (el) => el.domId === id || (el.key ?? el.id) === `${targetPath}#${id}`,
     );
     const elStart = timelineEl?.start ?? 0;
-    const elDuration = timelineEl?.duration ?? 4;
+    const elDuration = timelineEl?.duration ?? 1;
     const clipKeyframes = anim.keyframes.keyframes.map((kf) => {
       const absTime = tweenPos + (kf.percentage / 100) * tweenDur;
       const clipPct =
         elDuration > 0 ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10 : kf.percentage;
-      return { ...kf, percentage: clipPct };
+      return {
+        ...kf,
+        percentage: clipPct,
+        tweenPercentage: kf.percentage,
+        propertyGroup: anim.propertyGroup,
+      };
     });
 
     const existing = merged.get(id);
@@ -66,7 +71,7 @@ export function updateKeyframeCacheFromParsed(
   }
 }
 
-export function buildCacheKey(sourceFile: string, elementId: string): string {
+function buildCacheKey(sourceFile: string, elementId: string): string {
   return `${sourceFile}#${elementId}`;
 }